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-finjs-dock-manager/grid-finjs-dock-manager.component.html

@@ -36,12 +36,11 @@
     </igx-select>
   </div>
   <div igxButton (click)="createGrid()" [disabled]="docLayout.floatingPanes.length >= 5">Add Floating Pane</div>
-  <div igxOverlayOutlet #outlet></div>
 </div>
 <div slot="gridStockPrices" style="height: 100%;">
   <igx-grid #grid1 [data]="data | async" [isLoading]="isLoading"
     [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'"
-    [columnSelection]="'multiple'" [cellSelection]="'none'" [outlet]="filteringOverlayOutlet">
+    [columnSelection]="'multiple'" [cellSelection]="'none'">
     <igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
     <igx-column [field]="'category'" [width]="'120px'" [sortable]="true"></igx-column>
     <igx-column [field]="'type'" [width]="'100px'" [sortable]="true" [filterable]="false">
@@ -78,7 +77,7 @@
 </div>
 <div slot="forexMarket" style="height: 100%;">
   <igx-grid #grid2 [data]="data | async" [isLoading]="isLoading"
-    [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
+    [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'"
     [columnSelection]="'multiple'" [cellSelection]="'none'">
     <igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
     <igx-column [field]="'category'" [width]="'120px'" [sortable]="true" [groupable]="true"></igx-column>
@@ -116,7 +115,7 @@
 </div>
 <div slot="content4" style="height: 100%;">
   <igx-grid #grid3 [data]="data | async" [isLoading]="isLoading"
-    [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
+    [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'"
     [columnSelection]="'multiple'" [cellSelection]="'none'">
     <igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
     <igx-column [field]="'category'" [width]="'120px'" [sortable]="true" [groupable]="true"></igx-column>
@@ -154,7 +153,7 @@
 </div>
 <div slot="etfStockPrices" style="height: 100%;">
   <igx-grid #grid4 [data]="data | async" [isLoading]="isLoading"
-    [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
+    [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'"
     [columnSelection]="'multiple'" [cellSelection]="'none'">
     <igx-paginator></igx-paginator>
     <igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
@@ -194,4 +193,3 @@
 <ng-template #host gridHost>
 </ng-template>
 </igc-dockmanager>
-<div [class]="isDarkTheme ? 'dark-theme' : 'light-theme'" #filteringOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss

@@ -1,6 +1,31 @@
 @use 'igniteui-dockmanager/dist/collection/styles/igc.themes';
 @use '../../variables' as *;
 
+// Set the grid's background/foreground/accent tokens; the grid's derived-themes
+// layer cascades them to the paginator, scrollbars, chips, drop-downs, select,
+// excel filter, etc. Scoped mode emits the short `--background`/`--foreground`/
+// `--accent-color` aliases the derived layer reads first.
+$finjs-grid-accent-color: var(--ig-primary-500);
+$finjs-grid-background: var(--ig-surface-500);
+$finjs-grid-foreground: var(--ig-surface-500-contrast);
+
+$finjs-dark-grid-theme: grid-theme(
+    $schema: $dark-material-schema,
+    $background: $finjs-grid-background,
+    $foreground: $finjs-grid-foreground,
+    $accent-color: $finjs-grid-accent-color,
+);
+
+$finjs-light-grid-theme: grid-theme(
+    $schema: $light-material-schema,
+    $background: $finjs-grid-background,
+    $foreground: $finjs-grid-foreground,
+    $accent-color: $finjs-grid-accent-color,
+);
+
+@include tokens($finjs-dark-grid-theme, $mode: 'scoped', $scope: '.dark-theme igx-grid');
+@include tokens($finjs-light-grid-theme, $mode: 'scoped', $scope: '.light-theme igx-grid');
+
 .actionItem {
 	margin-block-end: rem(20px);
 }
@@ -44,7 +69,7 @@
 
 .negative.strongNegative {
 	.igx-grid__td-text {
-		color: color(null, 'success', 500, .8) !important;
+		color: color(null, 'error', 500, .8) !important;
 	}
 }
 

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Renderer2, OnDestroy, OnInit, DoCheck, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
-import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, GridColumnDataType, IgxOverlayOutletDirective, OverlaySettings, SortingDirection } from 'igniteui-angular/core';
+import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, GridColumnDataType, OverlaySettings, SortingDirection } from 'igniteui-angular/core';
 import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core';
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
@@ -23,7 +23,7 @@ import { AsyncPipe, CurrencyPipe } from '@angular/common';
     selector: 'app-finjs-dock-manager',
     templateUrl: './grid-finjs-dock-manager.component.html',
     styleUrls: ['./grid-finjs-dock-manager.component.scss'],
-    imports: [IgxSwitchComponent, FormsModule, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxButtonDirective, IgxOverlayOutletDirective, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, GridHostDirective, AsyncPipe, CurrencyPipe],
+    imports: [IgxSwitchComponent, FormsModule, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxButtonDirective, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, GridHostDirective, AsyncPipe, CurrencyPipe],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterViewInit, DoCheck {
@@ -41,7 +41,6 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
     public priceTemplate: TemplateRef<any>;
     @ViewChild(IgxSelectComponent) public select: IgxSelectComponent;
     @ViewChild('freq', { read: IgxSelectComponent }) public selectFrequency: IgxSelectComponent;
-    @ViewChild(IgxOverlayOutletDirective) outlet: IgxOverlayOutletDirective;
 
     public isDarkTheme = true;
 
@@ -204,9 +203,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
             this.paneService.initialPanePosition = { x, y };
             this.grid2.selectColumns(['price', 'change', 'changeP']);
             this.customOverlaySettings.target = this.select.inputGroup.element.nativeElement;
-            this.customOverlaySettings.outlet = this.outlet;
             this.freqOverlaySettings.target = this.selectFrequency.inputGroup.element.nativeElement;
-            this.freqOverlaySettings.outlet = this.outlet;
             this.grid1.groupingExpressions = [{
                 dir: SortingDirection.Desc,
                 fieldName: 'category',

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 {

projects/app-lob/src/styles.scss

@@ -37,15 +37,6 @@ body {
     .grid-chart-contextmenu-wrapper {
         @include fluent-dark-theme($fluent-excel-palette);
     }
-    // remove this workaround after resolving https://github.com/IgniteUI/igniteui-angular/issues/13039
-    igx-grid,
-    igx-hierarchical-grid,
-    igx-pivot-grid,
-    igx-tree-grid {
-        --ig-chip-disabled-background: #616161;
-        --ig-chip-disabled-border-color: #616161;
-        --ig-chip-disabled-text-color: #BDBDBD;
-    }
 }
 .fin-dark-theme {
     @include dark-theme($green-palette);

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);
 // }