chore: apply migrations and improve dialog drag sample

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-entries/checkbox/checkbox-styling/layout.scss

@@ -1,12 +1,10 @@
 @use "igniteui-angular/theming" as *;
-@use "igniteui-angular/lib/core/styles/components/checkbox/checkbox-component" as checkbox;
 @use "sass:map";
 
 :host {
     ::ng-deep {
         $_checkbox-schema: map.get($light-fluent-schema, checkbox);
-        @include checkbox(checkbox-theme($schema: $_checkbox-schema));
-        @include checkbox.component();
+        @include tokens(checkbox-theme($schema: $_checkbox-schema));
 
         // Note: This is not the standard approach for styling the component.
         // We're using it here solely to mirror the UI5 sample.

src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IgxButtonDirective, IgxDividerDirective, IgxToggleActionDirective } from 'igniteui-angular/directives';
+import { IgxButtonDirective, IgxDividerComponent, IgxToggleActionDirective } from 'igniteui-angular/directives';
 import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
@@ -10,7 +10,7 @@ import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-g
     selector: 'app-dropdown-sample-3',
     styleUrls: ['./dropdown-sample-3.component.scss'],
     templateUrl: './dropdown-sample-3.component.html',
-    imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective, IgxDividerDirective]
+    imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective, IgxDividerComponent]
 })
 export class DropDownSample3Component {
 

src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.html

@@ -1,11 +1,14 @@
+<p>
+    <b>Selected:&nbsp;</b>
+    <span>{{ dropDown.selectedItem?.value ?? 'N/A' }}</span>
+</p>
 <igx-input-group #inputGroup [igxToggleAction]="dropDown" class="input-group">
   <input #input class="input" type="text" igxInput [igxDropDownItemNavigation]="dropDown" readonly="true"
     placeholder="Choose an option" [value]="$safeNavigationMigration(dropDown.selectedItem?.value)" (keydown.ArrowDown)="openDropDown()" />
     <igx-suffix igxIconButton="flat" class="dropdownToggleButton" igxRipple>
       <igx-icon>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon>
     </igx-suffix>
   </igx-input-group>
-  <span>Selected: {{ dropDown.selectedItem?.value }}</span>
   <igx-drop-down #dropDown [width]="'180px'">
     @for (item of items; track item) {
       <igx-drop-down-item [value]="item.field">

src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.scss

@@ -1,20 +1,8 @@
 :host {
-    margin: 8px;
+    display: block;
+    padding: 0.5rem;
 }
 
-.input {
-    padding-left: 0.2rem;
-}
-
-.input-group {
-    width: 220px;
-}
-
-.igx-input-group {
-    display: inline-block;
-}
-
-span {
-    display: inline;
-    padding-left: 24px;
+igx-input-group {
+    max-width: 300px;
 }

src/app/data-entries/input-group/input-group-styling/layout.scss

@@ -1,12 +1,10 @@
 @use "igniteui-angular/theming" as *;
-@use "igniteui-angular/lib/core/styles/components/input/input-group-component" as input;
 @use "sass:map";
 
 :host {
     ::ng-deep {
         $_input-schema: map.get($light-indigo-schema, input-group);
-        @include input-group(input-group-theme($schema: $_input-schema));
-        @include input.component();
+        @include tokens(input-group-theme($schema: $_input-schema));
 
         // Note: This is not the standard approach for styling the component.
         // We're using it here solely to mirror the Carbon sample.

src/app/data-entries/radio/radio-styling-sample/layout.scss

@@ -1,12 +1,10 @@
 @use "igniteui-angular/theming" as *;
-@use "igniteui-angular/lib/core/styles/components/radio/radio-component" as radio;
 @use "sass:map";
 
 :host {
     ::ng-deep{
         $_radio-schema: map.get($light-fluent-schema, radio);
-        @include radio(radio-theme($schema: $_radio-schema));
-        @include radio.component();
+        @include tokens(radio-theme($schema: $_radio-schema));
 
         // Note: This is not the standard approach for styling the component.
         // We're using it here solely to mirror the UI5 sample.

src/app/data-entries/switch/switch-styling/layout.scss

@@ -1,12 +1,10 @@
 @use "igniteui-angular/theming" as *;
-@use "igniteui-angular/lib/core/styles/components/switch/switch-component" as switch;
 @use 'sass:map';
 
 :host {
     ::ng-deep {
         $_switch-schema: map.get($light-fluent-schema, switch);
-        @include switch(switch-theme($schema: $_switch-schema));
-        @include switch.component();
+        @include tokens(switch-theme($schema: $_switch-schema));
 
         // Note: This is not the standard approach for styling the component.
         // We're using it here solely to mirror the UI5 sample.

src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss

@@ -8,7 +8,7 @@ $custom-checkbox-theme: checkbox-theme(
 );
 
 .list-sample ::ng-deep {
-    @include checkbox($custom-checkbox-theme);
+    @include tokens($custom-checkbox-theme);
 }
 
 .sample {

src/app/grid/grid-paging-sample/grid-paging-sample.component.scss

@@ -6,7 +6,7 @@ $progressBar-sample-theme: progress-linear-theme(
 );
 
 .grid__wrapper {
-    @include progress-linear($progressBar-sample-theme);
+    @include tokens($progressBar-sample-theme);
 
     --ig-size: var(--ig-size-medium);
     margin: 0 16px;

src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.html

@@ -1,16 +1,10 @@
 <button #dialogButton igxButton="contained" (click)="openDialog()">Show Dialog</button>
 
-<div class="dialog"
-    igxToggle
-    #toggleForm="toggle"
-    igxDrag
-    [ghost]="false"
-    [dragTolerance]="0"
+<article class="dialog" igxToggle #toggleForm="toggle" igxDrag [ghost]="false" [dragTolerance]="0"
     (dragMove)=onDragMove($event)>
-    <igx-icon class="dialog__icon" igxDragHandle>drag_indicator</igx-icon>
-    <span class="dialog__title">Draggable Dialog</span>
+    <header>
+        <span class="dialog__title">Draggable Dialog</span>
+        <igx-icon class="dialog__icon" igxDragHandle>drag_indicator</igx-icon>
+    </header>
     <span class="dialog__content">Grab the handle icon to drag.</span>
-</div>
-
-
-
+</article>

src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.scss

@@ -1,37 +1,45 @@
 @use '../../../../variables' as *;
 
-@include dialog(
-    dialog-theme(
-        $schema: $schema
-    )
+$theme: dialog-theme(
+    $schema: $schema
 );
 
-@include dialog-typography();
-
 :host {
     display: block;
     margin: 16px;
 
-    @include b(dialog) {
-        @extend %igx-dialog-window;
+    .dialog {
+        @include tokens($theme, $mode: 'scoped');
 
         display: flex;
         flex-direction: column;
-        max-width: rem(280px);
-
-        @include e(icon) {
-            position: absolute;
-            right: rem(24px);
-            top: rem(24px);
-            cursor: move;
+        width: rem(280px);
+        min-width: rem(280px);
+        border: rem(1px) solid var-get($theme, 'border-color');
+        border-radius: var-get($theme, 'border-radius');
+        background: var-get($theme, 'background');
+        box-shadow: var-get($theme, 'elevation');
+        overflow: hidden;
+
+        header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: rem(16px) rem(24px);
         }
 
-        @include e(title) {
-            @extend %igx-dialog-title;
+        &__title {
+            display: inline-block;
+            color: var-get($theme, 'title-color');
         }
 
-        @include e(content) {
-            @extend %igx-dialog-content;
+        &__icon {
+            cursor: move;
         }
+
+        &__content {
+            color: var-get($theme, 'message-color');
+            padding: rem(14px) rem(24px);
+       }
     }
 }

src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss

@@ -5,7 +5,7 @@
     --teal-dark: #004d40;
 
     ::ng-deep {
-        @include avatar(
+        @include tokens(
             avatar-theme(
                 $background: var(--teal-light),
                 $color: var(--teal-dark)

src/app/layouts/card/card-sample-1/card-sample-1.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { Card } from '../card.blueprint';
 import { IgxCardActionsComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card';
-import { IgxDividerDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxDividerComponent, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 import { IgxSuffixDirective } from 'igniteui-angular/input-group';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 
@@ -10,7 +10,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
     selector: 'app-igx-card-simple',
     styleUrls: ['./card-sample-1.component.scss'],
     templateUrl: './card-sample-1.component.html',
-    imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent]
+    imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxDividerComponent, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent]
 })
 export class CardSample1Component {
     public card = new Card({

src/app/layouts/card/card-sample-2/card-sample-2.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { Card } from '../card.blueprint';
 import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card';
-import { IgxDividerDirective, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxDividerComponent, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 import { IgxSuffixDirective } from 'igniteui-angular/input-group';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 
@@ -10,7 +10,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
     selector: 'app-card-sample-2',
     styleUrls: ['./card-sample-2.component.scss'],
     templateUrl: './card-sample-2.component.html',
-    imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent]
+    imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerComponent, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent]
 })
 export class CardSample2Component {
     public card = new Card({