refactor(grid-summary): remove redundant code

projects/igniteui-angular/migrations/migration-collection.json

@@ -226,6 +226,11 @@
             "version": "19.2.0",
             "description": "Updates Ignite UI for Angular from v19.1.0 to v19.2.0",
             "factory": "./update-19_2_0"
+        },
+        "migration-46": {
+            "version": "19.2.4",
+            "description": "Updates Ignite UI for Angular from v19.2.0 to v19.2.4",
+            "factory": "./update-19_2_4"
         }
     }
 }

projects/igniteui-angular/migrations/update-19_2_4/changes/theme-changes.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$focus-background-color",
+      "remove": true,
+      "owner": "grid-summary-theme",
+      "type": "property"
+    }
+  ]
+}

projects/igniteui-angular/migrations/update-19_2_4/index.spec.ts

@@ -0,0 +1,37 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '19.2.4';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = 'migration-46';
+
+    it('should remove the $focus-background-color property from the grid summary theme', async () => {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+
+        appTree.create(
+            testFilePath,
+            `$my-grid-theme: grid-summary-theme(
+                $label-color: white,
+                $focus-background-color: orange,
+            );`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `$my-grid-theme: grid-summary-theme(
+                $label-color: white,
+            );`
+        );
+    });
+});

projects/igniteui-angular/migrations/update-19_2_4/index.ts

@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '19.2.4';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};

projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss

@@ -12,7 +12,6 @@
 
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Color} $background-color [null] - The summaries background color is inherited form igx-grid__tfoot
-/// @param {Color} $focus-background-color [null] - The background color when a summary item is on focus.
 /// @param {Color} $label-color [null] - The summaries label color.
 /// @param {Color} $result-color [null] - The summaries value/result color.
 /// @param {Color} $border-color [null] - The summaries border color.
@@ -32,7 +31,6 @@
     $schema: $light-material-schema,
 
     $background-color: null,
-    $focus-background-color: null,
     $label-color: null,
     $result-color: null,
     $border-color: null,
@@ -74,7 +72,6 @@
         name: $name,
         selector: $selector,
         background-color: $background-color,
-        focus-background-color: $focus-background-color,
         label-color: $label-color,
         result-color: $result-color,
         border-color: $border-color,
@@ -131,15 +128,6 @@
         overflow: hidden;
         outline-style: none;
 
-        &::after {
-            position: absolute;
-            inset: 0;
-        }
-
-        &:focus::after {
-            background: var-get($theme, 'focus-background-color');
-        }
-
         @if $variant == 'indigo' {
             border-top: rem(1px) solid var-get($theme, 'border-color');
         }

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -225,7 +225,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
      * ```
      */
     @Output()
-    public dataChanged = new EventEmitter<any>();
+    public dataChanged = new EventEmitter<IForOfDataChangeEventArgs>();
 
     @Output()
     public beforeViewDestroyed = new EventEmitter<EmbeddedViewRef<any>>();
@@ -1512,11 +1512,16 @@ export interface IForOfState extends IBaseEventArgs {
     chunkSize?: number;
 }
 
+/**
+ * @deprecated in 19.2.7. Use `IForOfDataChangeEventArgs` instead.
+ */
 export interface IForOfDataChangingEventArgs extends IBaseEventArgs {
     containerSize: number;
     state: IForOfState;
 }
 
+export interface IForOfDataChangeEventArgs extends IForOfDataChangingEventArgs {}
+
 export class IgxGridForOfContext<T, U extends T[] = T[]> extends IgxForOfContext<T, U> {
     constructor(
         $implicit: T,
@@ -1585,7 +1590,7 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
      * An event that is emitted after data has been changed but before the view is refreshed
      */
     @Output()
-    public dataChanging = new EventEmitter<IForOfDataChangingEventArgs>();
+    public dataChanging = new EventEmitter<IForOfDataChangeEventArgs>();
 
     constructor(
         _viewContainer: ViewContainerRef,

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -208,8 +208,8 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
                     fields: this.filterableFields.map(f => ({
                             field: f.field,
                             dataType: f.dataType,
-                        //  label: f.label,
-                        //  header: f.header,
+                            label: f.label,
+                            header: f.header,
                             editorOptions: f.editorOptions,
                             filters: f.filters,
                             pipeArgs: f.pipeArgs,

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -40,7 +40,7 @@ import { cloneArray, mergeObjects, compareMaps, resolveNestedPath, isObject, Pla
 import { GridColumnDataType } from '../data-operations/data-util';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
 import { IGroupByRecord } from '../data-operations/groupby-record.interface';
-import { IForOfDataChangingEventArgs, IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
+import { IForOfDataChangeEventArgs, IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
 import { IgxTextHighlightService } from '../directives/text-highlight/text-highlight.service';
 import { ISummaryExpression } from './summaries/grid-summary';
 import { IgxGridBodyDirective, RowEditPositionStrategy } from './grid.common';
@@ -993,6 +993,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     @Output()
     public gridCopy = new EventEmitter<IGridClipboardEvent>();
 
+    /* blazorCSSuppress */
     /**
      * Emitted when the rows are expanded or collapsed.
      *
@@ -1117,7 +1118,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      * ```
      */
     @Output()
-    public dataChanging = new EventEmitter<IForOfDataChangingEventArgs>();
+    public dataChanging = new EventEmitter<IForOfDataChangeEventArgs>();
 
     /**
      * Emitted after the grid's data view is changed because of a data operation, rebinding, etc.
@@ -1128,7 +1129,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      * ```
      */
     @Output()
-    public dataChanged = new EventEmitter<any>();
+    public dataChanged = new EventEmitter<IForOfDataChangeEventArgs>();
 
 
     /**
@@ -3920,7 +3921,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     /**
      * @hidden @internal
      */
-    public dataRebinding(event: IForOfDataChangingEventArgs) {
+    public dataRebinding(event: IForOfDataChangeEventArgs) {
         if (event.state.chunkSize == 0) {
             this._shouldRecalcRowHeight = true;
         }
@@ -3930,7 +3931,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     /**
      * @hidden @internal
      */
-    public dataRebound(event) {
+    public dataRebound(event: IForOfDataChangeEventArgs) {
         this.selectionService.clearHeaderCBState();
         if (this._shouldRecalcRowHeight) {
             this._shouldRecalcRowHeight = false;
@@ -4194,7 +4195,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         col.toggleVisibility(args.newValue);
     }
 
-    /* blazorSuppress */
+    /* blazorCSSuppress */
     /**
      * Gets/Sets a list of key-value pairs [row ID, expansion state].
      *
@@ -4212,7 +4213,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         return this._expansionStates;
     }
 
-    /* blazorSuppress */
+    /* blazorCSSuppress */
     public set expansionStates(value) {
         this._expansionStates = new Map<any, boolean>(value);
         this.expansionStatesChange.emit(this._expansionStates);

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts

@@ -640,9 +640,9 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             fix.detectChanges();
             const dropdownItems = QueryBuilderFunctions.getQueryBuilderSelectDropdownItems(queryBuilderElement);
             expect(dropdownItems.length).toBe(4);
-            expect((dropdownItems[0] as HTMLElement).innerText).toBe('ID');
+            expect((dropdownItems[0] as HTMLElement).innerText).toBe('HeaderID');
             expect((dropdownItems[1] as HTMLElement).innerText).toBe('ProductName');
-            expect((dropdownItems[2] as HTMLElement).innerText).toBe('AnotherField');
+            expect((dropdownItems[2] as HTMLElement).innerText).toBe('Another Field');
             expect((dropdownItems[3] as HTMLElement).innerText).toBe('ReleaseTime');
         }));
 
@@ -1331,7 +1331,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             QueryBuilderFunctions.clickQueryBuilderColumnSelect(fix);
             fix.detectChanges();
             const dropdownValues = QueryBuilderFunctions.getQueryBuilderSelectDropdownItems(queryBuilderElement).map((x: any) => x.innerText);
-            const expectedValues = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'AnotherField', 'DateTimeCreated'];
+            const expectedValues = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'Another Field', 'DateTimeCreated'];
             expect(expectedValues).toEqual(dropdownValues);
         }));
     });

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts

@@ -574,6 +574,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         return this._defaultExpandState;
     }
 
+    /* blazorSuppress */
     /**
      * Gets/Sets the schema for the hierarchical grid.
      * This schema defines the structure and properties of the data displayed in the grid.
@@ -592,6 +593,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         this._hGridSchema = entities;
     }
 
+    /* blazorSuppress */
     public get schema() {
         if (!this._hGridSchema) {
             this._hGridSchema = this.generateSchema();
@@ -1233,8 +1235,8 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
 
     private generateSchema() {
         const filterableFields = this.columns.filter((column) => !column.columnGroup && column.filterable);
-        let entities: EntityType[];  
-      
+        let entities: EntityType[];
+
         if(filterableFields.length !== 0) {
             entities = [
                 {
@@ -1292,7 +1294,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
 
         if (rowIslandChildEntities?.length > 0) {
             childEntities = rowIslandChildEntities;
-        } 
+        }
 
         return {
             name: entityName,

projects/igniteui-angular/src/public_api.ts

@@ -20,7 +20,13 @@ export * from './lib/directives/filter/filter.directive';
 export * from './lib/directives/focus/focus.directive';
 export * from './lib/directives/focus-trap/focus-trap.directive';
 export {
-    IgxForOfContext, IgxForOfDirective, IForOfState, IgxGridForOfContext, IgxGridForOfDirective
+    IForOfDataChangeEventArgs,
+    IForOfDataChangingEventArgs,
+    IForOfState,
+    IgxForOfContext,
+    IgxForOfDirective,
+    IgxGridForOfContext,
+    IgxGridForOfDirective,
 } from './lib/directives/for-of/for_of.directive';
 export * from './lib/directives/button/icon-button.directive';
 export * from './lib/directives/layout/layout.directive';