chore: apply migrations and improve dialog drag sample

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],
     changeDetection: ChangeDetectionStrategy.Eager,
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

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';
@@ -14,7 +14,7 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/dir
     styleUrls: ['./grid-master-detail.component.scss'],
     templateUrl: 'grid-master-detail.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    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, ChangeDetectionStrategy } 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';
@@ -11,7 +11,7 @@ import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-g
     styleUrls: ['./dropdown-sample-3.component.scss'],
     templateUrl: './dropdown-sample-3.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    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/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, ChangeDetectionStrategy } 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';
 
@@ -11,7 +11,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
     styleUrls: ['./card-sample-1.component.scss'],
     templateUrl: './card-sample-1.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    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, ChangeDetectionStrategy } 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';
 
@@ -11,7 +11,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
     styleUrls: ['./card-sample-2.component.scss'],
     templateUrl: './card-sample-2.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    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({

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

@@ -4,7 +4,7 @@ import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
 import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card';
 import { IgxSliderComponent } from 'igniteui-angular/slider';
 import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list';
-import { IgxButtonDirective, IgxDividerDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxButtonDirective, IgxDividerComponent, IgxRippleDirective } from 'igniteui-angular/directives';
 import { IgxPrefixDirective } from 'igniteui-angular/input-group';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 import { IgxChipComponent } from 'igniteui-angular/chips';
@@ -23,7 +23,7 @@ import {
     styleUrls: ['./card-sample-4.component.scss'],
     templateUrl: './card-sample-4.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxChipComponent, IgxIconComponent, IgxSliderComponent, IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxListComponent, IgxListItemComponent, IgxDividerDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective, IgxAvatarComponent]
+    imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxChipComponent, IgxIconComponent, IgxSliderComponent, IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxListComponent, IgxListItemComponent, IgxDividerComponent, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective, IgxAvatarComponent]
 })
 export class CardSample4Component implements OnInit {
     private iconService = inject(IgxIconService);

src/app/layouts/divider/dashed/divider-dashed.component.ts

@@ -1,12 +1,12 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { IgxDividerDirective } from 'igniteui-angular/directives';
+import { IgxDividerComponent } from 'igniteui-angular/directives';
 
 @Component({
     selector: 'app-divider-dashed',
     styleUrls: ['./divider-dashed.component.scss'],
     templateUrl: './divider-dashed.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxDividerDirective]
+    imports: [IgxDividerComponent]
 })
 export class DividerDashedComponent {
 

src/app/layouts/divider/default/divider-default.component.ts

@@ -1,12 +1,12 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { IgxDividerDirective } from 'igniteui-angular/directives';
+import { IgxDividerComponent } from 'igniteui-angular/directives';
 
 @Component({
     selector: 'app-divider-default',
     styleUrls: ['./divider-default.component.scss'],
     templateUrl: './divider-default.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxDividerDirective]
+    imports: [IgxDividerComponent]
 })
 export class DividerDefaultComponent {
 

src/app/layouts/divider/inset/divider-inset.component.ts

@@ -1,12 +1,12 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { IgxDividerDirective } from 'igniteui-angular/directives';
+import { IgxDividerComponent } from 'igniteui-angular/directives';
 
 @Component({
     selector: 'app-divider-inset',
     styleUrls: ['./divider-inset.component.scss'],
     templateUrl: './divider-inset.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxDividerDirective]
+    imports: [IgxDividerComponent]
 })
 export class DividerInsetComponent {
 

src/app/layouts/divider/vertical/divider-vertical.component.ts

@@ -1,12 +1,12 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { IgxDividerDirective } from 'igniteui-angular/directives';
+import { IgxDividerComponent } from 'igniteui-angular/directives';
 
 @Component({
     selector: 'app-divider-vertical',
     styleUrls: ['./divider-vertical.component.scss'],
     templateUrl: './divider-vertical.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxDividerDirective]
+    imports: [IgxDividerComponent]
 })
 export class DividerVerticalComponent {
 

src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.scss

@@ -45,7 +45,7 @@ $my-card: card-theme(
 	$content-text-color: color($default-palette, 'gray', 900),
 );
 
-@include card($my-card);
+@include tokens($my-card);
 
 .selected-card {
 	border: 2px solid color($default-palette, 'primary', 400);

src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.scss

@@ -45,7 +45,7 @@ $my-card: card-theme(
 	$content-text-color: color($default-palette, 'gray', 900),
 );
 
-@include card($my-card);
+@include tokens($my-card);
 
 .selected-card {
 	border: 2px solid color($default-palette, 'primary', 400);

src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.scss

@@ -5,7 +5,7 @@ $custom-strip: action-strip-theme(
 );
 
 .my-action-strip {
-    @include action-strip($custom-strip);
+    @include tokens($custom-strip);
     display: flex;
     align-items: flex-start;
     justify-content: center;