chore: apply migrations and improve dialog drag sample

live-editing/configs/CalendarConfigGenerator.ts

@@ -75,7 +75,6 @@ export class CalendarConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'CalendarStylingSampleComponent',
-            additionalFiles: ["/src/app/scheduling/calendar/calendar-styling-sample/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/scheduling/calendar/"
         }));

live-editing/configs/CheckboxConfigGenerator.ts

@@ -30,7 +30,6 @@ export class CheckboxConfigGenerator implements IConfigGenerator {
         // checkbox styling
         configs.push(new Config({
             component: 'CheckboxStylingComponent',
-            additionalFiles: ["/src/app/data-entries/checkbox/checkbox-styling/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/checkbox/"
         }));

live-editing/configs/InputGroupConfigGenerator.ts

@@ -57,7 +57,7 @@ export class InputGroupConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'InputGroupStyleComponent',
-            additionalFiles: ["/src/app/data-entries/input-group/base-input.component.ts", "/src/app/data-entries/input-group/input-group-styling/layout.scss"],
+            additionalFiles: ["/src/app/data-entries/input-group/base-input.component.ts"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/"
         }));

package.json

@@ -73,11 +73,11 @@
     "file-saver": "^2.0.2",
     "fuse.js": "^7.1.0",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "22.1.0-beta.1",
+    "igniteui-angular": "22.1.0-beta.4",
     "igniteui-angular-charts": "^22.0.0",
     "igniteui-angular-core": "^22.0.0",
-    "igniteui-angular-extras": "22.1.0-beta.1",
-    "igniteui-angular-i18n": "22.1.0-beta.1",
+    "igniteui-angular-extras": "22.1.0-beta.4",
+    "igniteui-angular-i18n": "22.1.0-beta.4",
     "igniteui-dockmanager": "^1.17.0",
     "igniteui-grid-lite": "0.9.0",
     "igniteui-i18n-resources": "^1.0.4",
@@ -112,7 +112,7 @@
       "@angular/compiler": "^22.0.0"
     },
     "igniteui-angular-extras": {
-      "igniteui-angular": "22.1.0-beta.1",
+      "igniteui-angular": "22.1.0-beta.4",
       "@infragistics/igniteui-angular": "^22.0.0",
       "igniteui-angular-core": "^22.0.0",
       "igniteui-angular-charts": "^22.0.0",

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts

@@ -7,7 +7,7 @@ import { FloatingPanesService } from '../../services/floating-panes.service';
 import { DockSlotComponent } from './dock-slot/dock-slot.component';
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 import { IColumnSelectionEventArgs, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core';
-import { IgxDividerDirective } from 'igniteui-angular/directives';
+import { IgxDividerComponent } from 'igniteui-angular/directives';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
 import { NgClass, DecimalPipe, TitleCasePipe, CurrencyPipe } from '@angular/common';
 import { debounceTime } from 'rxjs/operators';
@@ -57,7 +57,7 @@ export class HastDuplicateLayouts implements PipeTransform {
     templateUrl: './data-analysis-dock-manager.component.html',
     styleUrls: ['./data-analysis-dock-manager.component.scss'],
     providers: [FloatingPanesService],
-    imports: [IgxGridComponent, IgxConditionalFormattingDirective, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts],
+    imports: [IgxGridComponent, IgxConditionalFormattingDirective, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerComponent, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit {

projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts

@@ -4,7 +4,7 @@ import { IgxColumnComponent, IgxGridDetailTemplateDirective } from 'igniteui-ang
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
-import { IgxDividerDirective } from 'igniteui-angular/directives';
+import { IgxDividerComponent } from 'igniteui-angular/directives';
 import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';
 import { employeesData } from '../../data/employeesData';
 import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive';
@@ -13,7 +13,7 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/dir
     selector: 'app-grid-master-detail',
     styleUrls: ['./grid-master-detail.component.scss'],
     templateUrl: 'grid-master-detail.component.html',
-    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule]
+    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule]
 })
 
 export class GridMasterDetailSampleComponent {

src/app/data-display/chip/chip-styling/chip-styling.component.scss

@@ -1,49 +1,56 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-// CSS variables approach
+igx-chips-area {
+    --ig-size: var(--ig-size-medium);
+
+    gap: rem(8px);
+}
+
+igx-icon {
+    --ig-icon-size: #{rem(13px)};
+}
 
+// CSS variables approach
 igx-chip {
     --text-color: #fff;
     --hover-text-color: #fff;
     --focus-text-color: #fff;
     --border-radius: #{rem(5px)};
-}
 
-.xcom {
-    --background: #000;
-    --hover-background: #000;
-    --focus-background: #323232;
+    &.xcom {
+        --background: #000;
+        --hover-background: #000;
+        --focus-background: #323232;
+    }
+
+    &.youtube {
+        --background: #cd201f;
+        --hover-background: #cd201f;
+        --focus-background: #9f1717;
+    }
+
+    &.facebook {
+        --background: #3b5999;
+        --hover-background: #3b5999;
+        --focus-background: #2c4378;
+    }
+
+    &.linkedin {
+        --background: #55acee;
+        --hover-background: #55acee;
+        --focus-background: #4682af;
+    }
 }
 
-.youtube {
-    --background: #cd201f;
-    --hover-background: #cd201f;
-    --focus-background: #9f1717;
-}
-
-.facebook {
-    --background: #3b5999;
-    --hover-background: #3b5999;
-    --focus-background: #2c4378;
-}
-
-.linkedin {
-    --background: #55acee;
-    --hover-background: #55acee;
-    --focus-background: #4682af;
-}
-
-// Sass theme approach
-
+//Sass theme approach
 // $custom-chip-theme: chip-theme(
-//     $background: #cd201f,
 //     $text-color: #fff,
-//     $hover-background: #cd201f,
-//     $focus-background: #9f1717,
+//     $hover-background: #fff,
+//     $focus-background: #fff,
 //     $border-radius: rem(5px)
 // );
-
+//
 // :host {
 //     @include tokens($custom-chip-theme);
 // }

src/app/data-display/chip/chip-styling/layout.scss

@@ -1,23 +1,7 @@
 @use "igniteui-angular/theming" as *;
 
 :host {
-    ::ng-deep {
-        .igx-chip__item {
-            height: rem(20px);
-            font-size: rem(12px);
-        }
-    }
+    display: grid;
+    place-content: center;
+    height: 100%;
 }
-
-igx-chip {
-    margin-right: rem(8px);
-    margin-top: rem(20px);
-}
-
-igx-chips-area {
-    margin-left: rem(20px);
-}
-
-igx-icon {
-    --size: #{rem(12px)};
-}

src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.html

@@ -1,3 +1,3 @@
-<igx-checkbox id="checkbox-1" [disableRipple]="true" [checked]="true">
+<igx-checkbox id="checkbox-1" disableRipple [checked]="true">
   Styled checkbox
-</igx-checkbox>
+</igx-checkbox>

src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss

@@ -1,37 +1,39 @@
-@use "layout.scss";
+@use "sass:map";
 @use "igniteui-angular/theming" as *;
 
-// CSS variables approach
+:host {
+    --ig-font-family: Arial, Helvetica, sans-serif;
+    --ig-subtitle-1-font-size: #{rem(14px)};
 
-igx-checkbox {
-    --tick-color: #0064d9;
-    --tick-color-hover: #e3f0ff;
-    --tick-width: 2;
-    --fill-color: transparent;
-    --fill-color-hover: #e3f0ff;
-    --label-color: #131e29;
-    --focus-outline-color: #0032a5;
-    --border-radius: #{rem(4px)};
+    display: block;
+    padding: rem(18px) 0 0 rem(18px);
 }
 
-igx-checkbox:hover {
-    --empty-fill-color: #e3f0ff;
+// CSS variables approach
+.igx-checkbox {
+    --tick-color: black;
+    --tick-color-hover: black;
+    --tick-width: 4;
+    --fill-color: orange;
+    --fill-color-hover: oklch(from var(--fill-color) calc(l * 0.9) c h);
+    --label-color: black;
+    --empty-color: orange;
+    --border-width: #{rem(3px)};
+    --border-radius: #{rem(3px)};
 }
 
 // Sass theme approach
-
 // $custom-checkbox-theme: checkbox-theme(
-//     $tick-color: #0064d9,
-//     $tick-width: 2,
-//     $tick-color-hover: #e3f0ff,
-//     $fill-color: transparent,
-//     $fill-color-hover: #e3f0ff,
-//     $label-color: #131e29,
-//     $focus-outline-color: #0032a5,
-//     $empty-color: #131e29,
-//     $border-radius: rem(4px),
+//     $tick-color: black,
+//     $tick-color-hover: black,
+//     $tick-width: 4,
+//     $fill-color: orange,
+//     $fill-color-hover: oklch(from var(--fill-color) calc(l * 0.9) c h),
+//     $label-color: black,
+//     $empty-color: orange,
+//     $border-radius: rem(3px),
 // );
-
-// :host {
+//
+// :host ::ng-deep {
 //     @include tokens($custom-checkbox-theme);
 // }