igniteui-angular 21.0.4 → 21.0.6

package/fesm2022/igniteui-angular-grids-core.mjs

@@ -61,13 +61,12 @@ const GridSelectionMode = {
 };
 /**
  * Enumeration representing different cell merging modes for the grid elements.
- * - 'never': Never merge cells.
- * - 'always': Always merge adjacent cells based on merge strategy.
  * - 'onSort': Only merge cells in column that are sorted.
+ * - 'always': Always merge adjacent cells based on merge strategy.
  */
 const GridCellMergeMode = {
+    onSort: 'onSort',
     always: 'always',
-    onSort: 'onSort'
 };
 /** Enumeration representing different column display order options. */
 const ColumnDisplayOrder = {
@@ -394,10 +393,10 @@ class IgxColumnActionsComponent {
         this.actionsDirective.toggleColumn(column);
         this.columnToggled.emit({ column: column, checked: this.actionsDirective.columnChecked(column) });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxColumnActionsComponent, isStandalone: true, selector: "igx-column-actions", inputs: { grid: "grid", indentation: "indentation", columnsAreaMaxHeight: "columnsAreaMaxHeight", hideFilter: ["hideFilter", "hideFilter", booleanAttribute], title: "title", filterColumnsPrompt: "filterColumnsPrompt", filterCriteria: "filterCriteria", columnDisplayOrder: "columnDisplayOrder", uncheckAllText: "uncheckAllText", checkAllText: "checkAllText", id: "id" }, outputs: { columnToggled: "columnToggled" }, host: { properties: { "class": "this.cssClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "columnItems", predicate: IgxCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"igx-column-actions__header\">\n    @if (title) {\n        <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\">{{ title }}</h4>\n    }\n\n    @if (!hideFilter) {\n        <igx-input-group class=\"igx-column-actions__header-input\">\n            <input igxInput\n                type=\"text\"\n                [attr.aria-describedby]='titleID'\n                [(ngModel)]=\"filterCriteria\"\n                [placeholder]=\"filterColumnsPrompt\"\n                autocomplete=\"off\" />\n        </igx-input-group>\n    }\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    @for (\n        column of $any(grid)?._columns\n        | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n        | filterActionColumns:filterCriteria:pipeTrigger\n        | sortActionColumns:columnDisplayOrder:pipeTrigger; track column\n    ) {\n        <igx-checkbox\n            class=\"igx-column-actions__columns-item\"\n            [readonly]=\"true\"\n            (click)=\"toggleColumn(column)\"\n            [checked]=\"actionsDirective.columnChecked(column)\"\n            [style.margin-left.px]=\"column.level * indentation\">\n            {{ column.header || column.field }}\n        </igx-checkbox>\n    }\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button type=\"button\" igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button type=\"button\" igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => IgxInputGroupComponent), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(() => IgxInputDirective), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: i0.forwardRef(() => IgxCheckboxComponent), selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "directive", type: i0.forwardRef(() => IgxButtonDirective), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: i0.forwardRef(() => IgxRippleDirective), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: i0.forwardRef(() => IgxColumnActionEnabledPipe), name: "columnActionEnabled" }, { kind: "pipe", type: i0.forwardRef(() => IgxFilterActionColumnsPipe), name: "filterActionColumns" }, { kind: "pipe", type: i0.forwardRef(() => IgxSortActionColumnsPipe), name: "sortActionColumns" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxColumnActionsComponent, isStandalone: true, selector: "igx-column-actions", inputs: { grid: "grid", indentation: "indentation", columnsAreaMaxHeight: "columnsAreaMaxHeight", hideFilter: ["hideFilter", "hideFilter", booleanAttribute], title: "title", filterColumnsPrompt: "filterColumnsPrompt", filterCriteria: "filterCriteria", columnDisplayOrder: "columnDisplayOrder", uncheckAllText: "uncheckAllText", checkAllText: "checkAllText", id: "id" }, outputs: { columnToggled: "columnToggled" }, host: { properties: { "class": "this.cssClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "columnItems", predicate: IgxCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"igx-column-actions__header\">\n    @if (title) {\n        <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\">{{ title }}</h4>\n    }\n\n    @if (!hideFilter) {\n        <igx-input-group class=\"igx-column-actions__header-input\">\n            <input igxInput\n                type=\"text\"\n                [attr.aria-describedby]='titleID'\n                [(ngModel)]=\"filterCriteria\"\n                [placeholder]=\"filterColumnsPrompt\"\n                autocomplete=\"off\" />\n        </igx-input-group>\n    }\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    @for (\n        column of $any(grid)?._columns\n        | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n        | filterActionColumns:filterCriteria:pipeTrigger\n        | sortActionColumns:columnDisplayOrder:pipeTrigger; track column\n    ) {\n        <igx-checkbox\n            class=\"igx-column-actions__columns-item\"\n            [readonly]=\"true\"\n            (click)=\"toggleColumn(column)\"\n            [checked]=\"actionsDirective.columnChecked(column)\"\n            [style.margin-left.px]=\"column.level * indentation\">\n            {{ column.header || column.field }}\n        </igx-checkbox>\n    }\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button type=\"button\" igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button type=\"button\" igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => IgxInputGroupComponent), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(() => IgxInputDirective), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: i0.forwardRef(() => IgxCheckboxComponent), selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "directive", type: i0.forwardRef(() => IgxButtonDirective), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: i0.forwardRef(() => IgxRippleDirective), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: i0.forwardRef(() => IgxColumnActionEnabledPipe), name: "columnActionEnabled" }, { kind: "pipe", type: i0.forwardRef(() => IgxFilterActionColumnsPipe), name: "filterActionColumns" }, { kind: "pipe", type: i0.forwardRef(() => IgxSortActionColumnsPipe), name: "sortActionColumns" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-column-actions', imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxCheckboxComponent, IgxButtonDirective, IgxRippleDirective, forwardRef(() => IgxColumnActionEnabledPipe), forwardRef(() => IgxFilterActionColumnsPipe), forwardRef(() => IgxSortActionColumnsPipe)], template: "<div class=\"igx-column-actions__header\">\n    @if (title) {\n        <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\">{{ title }}</h4>\n    }\n\n    @if (!hideFilter) {\n        <igx-input-group class=\"igx-column-actions__header-input\">\n            <input igxInput\n                type=\"text\"\n                [attr.aria-describedby]='titleID'\n                [(ngModel)]=\"filterCriteria\"\n                [placeholder]=\"filterColumnsPrompt\"\n                autocomplete=\"off\" />\n        </igx-input-group>\n    }\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    @for (\n        column of $any(grid)?._columns\n        | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n        | filterActionColumns:filterCriteria:pipeTrigger\n        | sortActionColumns:columnDisplayOrder:pipeTrigger; track column\n    ) {\n        <igx-checkbox\n            class=\"igx-column-actions__columns-item\"\n            [readonly]=\"true\"\n            (click)=\"toggleColumn(column)\"\n            [checked]=\"actionsDirective.columnChecked(column)\"\n            [style.margin-left.px]=\"column.level * indentation\">\n            {{ column.header || column.field }}\n        </igx-checkbox>\n    }\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button type=\"button\" igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button type=\"button\" igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { grid: [{
@@ -454,10 +453,10 @@ class IgxColumnActionEnabledPipe {
         this.columnActions.actionableColumns = copy;
         return copy;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionEnabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionEnabledPipe, isStandalone: true, name: "columnActionEnabled" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnActionEnabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnActionEnabledPipe, isStandalone: true, name: "columnActionEnabled" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionEnabledPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnActionEnabledPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'columnActionEnabled',
@@ -488,10 +487,10 @@ class IgxFilterActionColumnsPipe {
         this.columnActions.filteredColumns = copy;
         return copy;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxFilterActionColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxFilterActionColumnsPipe, isStandalone: true, name: "filterActionColumns" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxFilterActionColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxFilterActionColumnsPipe, isStandalone: true, name: "filterActionColumns" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxFilterActionColumnsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxFilterActionColumnsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filterActionColumns',
@@ -505,10 +504,10 @@ class IgxSortActionColumnsPipe {
         }
         return collection;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSortActionColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxSortActionColumnsPipe, isStandalone: true, name: "sortActionColumns" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSortActionColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxSortActionColumnsPipe, isStandalone: true, name: "sortActionColumns" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSortActionColumnsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSortActionColumnsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sortActionColumns',
@@ -517,10 +516,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
         }] });
 
 class IgxColumnActionsBaseDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionsBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnActionsBaseDirective, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnActionsBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnActionsBaseDirective, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnActionsBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnActionsBaseDirective, decorators: [{
             type: Directive
         }] });
 
@@ -577,10 +576,10 @@ class IgxColumnHidingDirective extends IgxColumnActionsBaseDirective {
     get allUnchecked() {
         return this.columnActions.filteredColumns.every(col => this.columnChecked(col));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnHidingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnHidingDirective, isStandalone: true, selector: "[igxColumnHiding]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnHidingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnHidingDirective, isStandalone: true, selector: "[igxColumnHiding]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnHidingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnHidingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxColumnHiding]',
@@ -641,10 +640,10 @@ class IgxColumnPinningDirective extends IgxColumnActionsBaseDirective {
     get allChecked() {
         return !this.columnActions.filteredColumns.some(col => this.columnChecked(col));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnPinningDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnPinningDirective, isStandalone: true, selector: "[igxColumnPinning]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnPinningDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnPinningDirective, isStandalone: true, selector: "[igxColumnPinning]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnPinningDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnPinningDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxColumnPinning]',
@@ -663,14 +662,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
 // ] as const;
 
 class IgxColumnRequiredValidatorDirective extends RequiredValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnRequiredValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnRequiredValidatorDirective, isStandalone: true, selector: "igx-column[required]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnRequiredValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnRequiredValidatorDirective, isStandalone: true, selector: "igx-column[required]", providers: [{
                 provide: NG_VALIDATORS,
                 useExisting: IgxColumnRequiredValidatorDirective,
                 multi: true
             }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnRequiredValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnRequiredValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[required]',
@@ -683,14 +682,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 }]
         }] });
 class IgxColumnMinValidatorDirective extends MinValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMinValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnMinValidatorDirective, isStandalone: true, selector: "igx-column[min]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMinValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnMinValidatorDirective, isStandalone: true, selector: "igx-column[min]", providers: [{
                 provide: NG_VALIDATORS,
                 useExisting: IgxColumnMinValidatorDirective,
                 multi: true
             }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMinValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMinValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[min]',
@@ -703,14 +702,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 }]
         }] });
 class IgxColumnMaxValidatorDirective extends MaxValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMaxValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnMaxValidatorDirective, isStandalone: true, selector: "igx-column[max]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMaxValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnMaxValidatorDirective, isStandalone: true, selector: "igx-column[max]", providers: [{
                 provide: NG_VALIDATORS,
                 useExisting: IgxColumnMaxValidatorDirective,
                 multi: true
             }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMaxValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMaxValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[max]',
@@ -723,14 +722,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 }]
         }] });
 class IgxColumnEmailValidatorDirective extends EmailValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnEmailValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnEmailValidatorDirective, isStandalone: true, selector: "igx-column[email]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnEmailValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnEmailValidatorDirective, isStandalone: true, selector: "igx-column[email]", providers: [{
                 provide: NG_VALIDATORS,
                 useExisting: IgxColumnEmailValidatorDirective,
                 multi: true
             }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnEmailValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnEmailValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[email]',
@@ -743,14 +742,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 }]
         }] });
 class IgxColumnMinLengthValidatorDirective extends MinLengthValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnMinLengthValidatorDirective, isStandalone: true, selector: "igx-column[minlength]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnMinLengthValidatorDirective, isStandalone: true, selector: "igx-column[minlength]", providers: [{
                 provide: NG_VALIDATORS,
                 useExisting: IgxColumnMinLengthValidatorDirective,
                 multi: true
             }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[minlength]',
@@ -763,14 +762,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 }]
         }] });
 class IgxColumnMaxLengthValidatorDirective extends MaxLengthValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnMaxLengthValidatorDirective, isStandalone: true, selector: "igx-column[maxlength]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnMaxLengthValidatorDirective, isStandalone: true, selector: "igx-column[maxlength]", providers: [{
                 provide: NG_VALIDATORS,
                 useExisting: IgxColumnMaxLengthValidatorDirective,
                 multi: true
             }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[maxlength]',
@@ -783,14 +782,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 }]
         }] });
 class IgxColumnPatternValidatorDirective extends PatternValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnPatternValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnPatternValidatorDirective, isStandalone: true, selector: "igx-column[pattern]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnPatternValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnPatternValidatorDirective, isStandalone: true, selector: "igx-column[pattern]", providers: [{
                 provide: NG_VALIDATORS,
                 useExisting: IgxColumnPatternValidatorDirective,
                 multi: true
             }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnPatternValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnPatternValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[pattern]',
@@ -2656,10 +2655,10 @@ class IgxGridSelectionService {
     isRowDeleted(rowID) {
         return this.grid.gridAPI.row_deleted_transaction(rowID);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridSelectionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridSelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridSelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3321,10 +3320,10 @@ class IgxGridCRUDService extends IgxRowAddCrudState {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCRUDService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCRUDService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCRUDService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCRUDService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCRUDService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCRUDService, decorators: [{
             type: Injectable
         }] });
 
@@ -3333,9 +3332,13 @@ const IGX_GRID_SERVICE_BASE = /*@__PURE__*/ new InjectionToken('IgxGridServiceBa
 
 class IgxRowDirective {
     constructor() {
+        /* blazorSuppress */
         this.grid = inject(IGX_GRID_BASE);
+        /* blazorSuppress */
         this.selectionService = inject(IgxGridSelectionService);
+        /* blazorSuppress */
         this.element = inject(ElementRef);
+        /* blazorSuppress */
         this.cdr = inject(ChangeDetectorRef);
         /**
          * @hidden
@@ -3899,10 +3902,10 @@ class IgxRowDirective {
         const dragIndicatorOff = this.grid.rowDragging && !this.dragging ? 'igx-grid__drag-indicator--off' : '';
         return `${defaultDragIndicatorCssClass} ${dragIndicatorOff}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: IgxRowDirective, isStandalone: true, selector: "[igxRowBaseComponent]", inputs: { metaData: "metaData", data: "data", index: "index", disabled: ["disabled", "disabled", booleanAttribute], gridID: "gridID", selected: "selected" }, outputs: { addAnimationEnd: "addAnimationEnd" }, host: { listeners: { "click": "onClick($event)", "contextmenu": "onContextMenu($event)", "mouseenter": "showActionStrip()", "mouseleave": "hideActionStrip()" }, properties: { "attr.role": "this.role", "attr.aria-disabled": "this.disabled", "class.igx-grid__tr--disabled": "this.disabled", "style.min-height.px": "this.rowHeight", "attr.data-rowIndex": "this.dataRowIndex", "attr.aria-selected": "this.selected" } }, viewQueries: [{ propertyName: "checkboxElement", first: true, predicate: i0.forwardRef(() => IgxCheckboxComponent), descendants: true, read: IgxCheckboxComponent }, { propertyName: "_virtDirRow", predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_cells", predicate: ["cell"], descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.8", type: IgxRowDirective, isStandalone: true, selector: "[igxRowBaseComponent]", inputs: { metaData: "metaData", data: "data", index: "index", disabled: ["disabled", "disabled", booleanAttribute], gridID: "gridID", selected: "selected" }, outputs: { addAnimationEnd: "addAnimationEnd" }, host: { listeners: { "click": "onClick($event)", "contextmenu": "onContextMenu($event)", "mouseenter": "showActionStrip()", "mouseleave": "hideActionStrip()" }, properties: { "attr.role": "this.role", "attr.aria-disabled": "this.disabled", "class.igx-grid__tr--disabled": "this.disabled", "style.min-height.px": "this.rowHeight", "attr.data-rowIndex": "this.dataRowIndex", "attr.aria-selected": "this.selected" } }, viewQueries: [{ propertyName: "checkboxElement", first: true, predicate: i0.forwardRef(() => IgxCheckboxComponent), descendants: true, read: IgxCheckboxComponent }, { propertyName: "_virtDirRow", predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_cells", predicate: ["cell"], descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowBaseComponent]',
@@ -3971,10 +3974,10 @@ class IgxFilterCellTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxFilterCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxFilterCellTemplateDirective, isStandalone: true, selector: "[igxFilterCellTemplate]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxFilterCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxFilterCellTemplateDirective, isStandalone: true, selector: "[igxFilterCellTemplate]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxFilterCellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxFilterCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxFilterCellTemplate]',
@@ -3988,10 +3991,10 @@ class IgxCellTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCellTemplateDirective, isStandalone: true, selector: "[igxCell]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxCellTemplateDirective, isStandalone: true, selector: "[igxCell]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCell]',
@@ -4005,10 +4008,10 @@ class IgxCellValidationErrorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCellValidationErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCellValidationErrorDirective, isStandalone: true, selector: "[igxCellValidationError]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCellValidationErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxCellValidationErrorDirective, isStandalone: true, selector: "[igxCellValidationError]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCellValidationErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCellValidationErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCellValidationError]',
@@ -4022,10 +4025,10 @@ class IgxCellHeaderTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCellHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCellHeaderTemplateDirective, isStandalone: true, selector: "[igxHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCellHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxCellHeaderTemplateDirective, isStandalone: true, selector: "[igxHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCellHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCellHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeader]',
@@ -4039,10 +4042,10 @@ class IgxCellFooterTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCellFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCellFooterTemplateDirective, isStandalone: true, selector: "[igxFooter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCellFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxCellFooterTemplateDirective, isStandalone: true, selector: "[igxFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCellFooterTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCellFooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxFooter]',
@@ -4056,10 +4059,10 @@ class IgxCellEditorTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCellEditorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCellEditorTemplateDirective, isStandalone: true, selector: "[igxCellEditor]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCellEditorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxCellEditorTemplateDirective, isStandalone: true, selector: "[igxCellEditor]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCellEditorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCellEditorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCellEditor]',
@@ -4073,10 +4076,10 @@ class IgxCollapsibleIndicatorTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCollapsibleIndicatorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCollapsibleIndicatorTemplateDirective, isStandalone: true, selector: "[igxCollapsibleIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCollapsibleIndicatorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxCollapsibleIndicatorTemplateDirective, isStandalone: true, selector: "[igxCollapsibleIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCollapsibleIndicatorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCollapsibleIndicatorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCollapsibleIndicator]',
@@ -4090,10 +4093,10 @@ class IgxSummaryTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxSummaryTemplateDirective, isStandalone: true, selector: "[igxSummary]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSummaryTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxSummaryTemplateDirective, isStandalone: true, selector: "[igxSummary]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSummaryTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSummary]',
@@ -4116,10 +4119,10 @@ var DropPosition;
  * @internal
  */
 class IgxColumnMovingService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMovingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMovingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMovingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMovingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMovingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMovingService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4395,6 +4398,7 @@ const DEFAULT_DIGITS_INFO = '1.0-3';
  */
 class IgxColumnComponent {
     constructor() {
+        /* blazorSuppress */
         this.grid = inject(IGX_GRID_BASE);
         this._validators = inject(NG_VALIDATORS, { optional: true, self: true });
         /** @hidden @internal **/
@@ -6551,8 +6555,8 @@ class IgxColumnComponent {
             this._applySelectableClass = value;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.2", type: IgxColumnComponent, isStandalone: true, selector: "igx-column", inputs: { field: "field", merge: "merge", header: "header", title: "title", sortable: ["sortable", "sortable", booleanAttribute], selectable: "selectable", groupable: ["groupable", "groupable", booleanAttribute], editable: ["editable", "editable", booleanAttribute], filterable: ["filterable", "filterable", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], autosizeHeader: ["autosizeHeader", "autosizeHeader", booleanAttribute], hasSummary: ["hasSummary", "hasSummary", booleanAttribute], hidden: ["hidden", "hidden", booleanAttribute], disableHiding: ["disableHiding", "disableHiding", booleanAttribute], disablePinning: ["disablePinning", "disablePinning", booleanAttribute], width: "width", maxWidth: "maxWidth", headerClasses: "headerClasses", headerStyles: "headerStyles", headerGroupClasses: "headerGroupClasses", headerGroupStyles: "headerGroupStyles", cellClasses: "cellClasses", cellStyles: "cellStyles", formatter: "formatter", summaryFormatter: "summaryFormatter", filteringIgnoreCase: ["filteringIgnoreCase", "filteringIgnoreCase", booleanAttribute], sortingIgnoreCase: ["sortingIgnoreCase", "sortingIgnoreCase", booleanAttribute], searchable: ["searchable", "searchable", booleanAttribute], dataType: "dataType", collapsibleIndicatorTemplate: "collapsibleIndicatorTemplate", rowEnd: "rowEnd", colEnd: "colEnd", rowStart: "rowStart", colStart: "colStart", additionalTemplateContext: "additionalTemplateContext", minWidth: "minWidth", pinningPosition: "pinningPosition", pinned: ["pinned", "pinned", booleanAttribute], summaries: "summaries", disabledSummaries: "disabledSummaries", filters: "filters", sortStrategy: "sortStrategy", mergingComparer: "mergingComparer", groupingComparer: "groupingComparer", summaryTemplate: "summaryTemplate", bodyTemplate: ["cellTemplate", "bodyTemplate"], headerTemplate: "headerTemplate", inlineEditorTemplate: ["cellEditorTemplate", "inlineEditorTemplate"], errorTemplate: "errorTemplate", filterCellTemplate: "filterCellTemplate", visibleWhenCollapsed: ["visibleWhenCollapsed", "visibleWhenCollapsed", booleanAttribute], pipeArgs: "pipeArgs", editorOptions: "editorOptions" }, outputs: { hiddenChange: "hiddenChange", expandedChange: "expandedChange", collapsibleChange: "collapsibleChange", visibleWhenCollapsedChange: "visibleWhenCollapsedChange", columnChange: "columnChange", widthChange: "widthChange", pinnedChange: "pinnedChange" }, queries: [{ propertyName: "filterCellTemplateDirective", first: true, predicate: IgxFilterCellTemplateDirective, descendants: true, read: IgxFilterCellTemplateDirective }, { propertyName: "summaryTemplateDirective", first: true, predicate: IgxSummaryTemplateDirective, descendants: true, read: IgxSummaryTemplateDirective }, { propertyName: "cellTemplate", first: true, predicate: IgxCellTemplateDirective, descendants: true, read: IgxCellTemplateDirective }, { propertyName: "cellValidationErrorTemplate", first: true, predicate: IgxCellValidationErrorDirective, descendants: true, read: IgxCellValidationErrorDirective }, { propertyName: "editorTemplate", first: true, predicate: IgxCellEditorTemplateDirective, descendants: true, read: IgxCellEditorTemplateDirective }, { propertyName: "collapseIndicatorTemplate", first: true, predicate: IgxCollapsibleIndicatorTemplateDirective, descendants: true, read: IgxCollapsibleIndicatorTemplateDirective }, { propertyName: "headTemplate", predicate: IgxCellHeaderTemplateDirective, read: IgxCellHeaderTemplateDirective }], ngImport: i0, template: ``, isInline: true, styles: [":host{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.8", type: IgxColumnComponent, isStandalone: true, selector: "igx-column", inputs: { field: "field", merge: "merge", header: "header", title: "title", sortable: ["sortable", "sortable", booleanAttribute], selectable: "selectable", groupable: ["groupable", "groupable", booleanAttribute], editable: ["editable", "editable", booleanAttribute], filterable: ["filterable", "filterable", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], autosizeHeader: ["autosizeHeader", "autosizeHeader", booleanAttribute], hasSummary: ["hasSummary", "hasSummary", booleanAttribute], hidden: ["hidden", "hidden", booleanAttribute], disableHiding: ["disableHiding", "disableHiding", booleanAttribute], disablePinning: ["disablePinning", "disablePinning", booleanAttribute], width: "width", maxWidth: "maxWidth", headerClasses: "headerClasses", headerStyles: "headerStyles", headerGroupClasses: "headerGroupClasses", headerGroupStyles: "headerGroupStyles", cellClasses: "cellClasses", cellStyles: "cellStyles", formatter: "formatter", summaryFormatter: "summaryFormatter", filteringIgnoreCase: ["filteringIgnoreCase", "filteringIgnoreCase", booleanAttribute], sortingIgnoreCase: ["sortingIgnoreCase", "sortingIgnoreCase", booleanAttribute], searchable: ["searchable", "searchable", booleanAttribute], dataType: "dataType", collapsibleIndicatorTemplate: "collapsibleIndicatorTemplate", rowEnd: "rowEnd", colEnd: "colEnd", rowStart: "rowStart", colStart: "colStart", additionalTemplateContext: "additionalTemplateContext", minWidth: "minWidth", pinningPosition: "pinningPosition", pinned: ["pinned", "pinned", booleanAttribute], summaries: "summaries", disabledSummaries: "disabledSummaries", filters: "filters", sortStrategy: "sortStrategy", mergingComparer: "mergingComparer", groupingComparer: "groupingComparer", summaryTemplate: "summaryTemplate", bodyTemplate: ["cellTemplate", "bodyTemplate"], headerTemplate: "headerTemplate", inlineEditorTemplate: ["cellEditorTemplate", "inlineEditorTemplate"], errorTemplate: "errorTemplate", filterCellTemplate: "filterCellTemplate", visibleWhenCollapsed: ["visibleWhenCollapsed", "visibleWhenCollapsed", booleanAttribute], pipeArgs: "pipeArgs", editorOptions: "editorOptions" }, outputs: { hiddenChange: "hiddenChange", expandedChange: "expandedChange", collapsibleChange: "collapsibleChange", visibleWhenCollapsedChange: "visibleWhenCollapsedChange", columnChange: "columnChange", widthChange: "widthChange", pinnedChange: "pinnedChange" }, queries: [{ propertyName: "filterCellTemplateDirective", first: true, predicate: IgxFilterCellTemplateDirective, descendants: true, read: IgxFilterCellTemplateDirective }, { propertyName: "summaryTemplateDirective", first: true, predicate: IgxSummaryTemplateDirective, descendants: true, read: IgxSummaryTemplateDirective }, { propertyName: "cellTemplate", first: true, predicate: IgxCellTemplateDirective, descendants: true, read: IgxCellTemplateDirective }, { propertyName: "cellValidationErrorTemplate", first: true, predicate: IgxCellValidationErrorDirective, descendants: true, read: IgxCellValidationErrorDirective }, { propertyName: "editorTemplate", first: true, predicate: IgxCellEditorTemplateDirective, descendants: true, read: IgxCellEditorTemplateDirective }, { propertyName: "collapseIndicatorTemplate", first: true, predicate: IgxCollapsibleIndicatorTemplateDirective, descendants: true, read: IgxCollapsibleIndicatorTemplateDirective }, { propertyName: "headTemplate", predicate: IgxCellHeaderTemplateDirective, read: IgxCellHeaderTemplateDirective }], ngImport: i0, template: ``, isInline: true, styles: [":host{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     notifyChanges(),
@@ -6702,7 +6706,7 @@ __decorate([
     notifyChanges(),
     WatchColumnChanges()
 ], IgxColumnComponent.prototype, "editorOptions", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-column', template: ``, standalone: true, styles: [":host{display:none}\n"] }]
         }], propDecorators: { field: [{
@@ -7238,12 +7242,12 @@ class IgxColumnGroupComponent extends IgxColumnComponent {
         const li = visibleChildren[visibleChildren.length - 1].visibleIndex;
         return li - fi + 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxColumnGroupComponent, isStandalone: true, selector: "igx-column-group", inputs: { collapsible: ["collapsible", "collapsible", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute], summaries: "summaries", searchable: ["searchable", "searchable", booleanAttribute], filters: "filters", collapsibleIndicatorTemplate: "collapsibleIndicatorTemplate", hidden: ["hidden", "hidden", booleanAttribute] }, providers: [{ provide: IgxColumnComponent, useExisting: forwardRef(() => IgxColumnGroupComponent) }], queries: [{ propertyName: "children", predicate: IgxColumnComponent, read: IgxColumnComponent }], usesInheritance: true, ngImport: i0, template: `@if (platform.isElements) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxColumnGroupComponent, isStandalone: true, selector: "igx-column-group", inputs: { collapsible: ["collapsible", "collapsible", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute], summaries: "summaries", searchable: ["searchable", "searchable", booleanAttribute], filters: "filters", collapsibleIndicatorTemplate: "collapsibleIndicatorTemplate", hidden: ["hidden", "hidden", booleanAttribute] }, providers: [{ provide: IgxColumnComponent, useExisting: forwardRef(() => IgxColumnGroupComponent) }], queries: [{ propertyName: "children", predicate: IgxColumnComponent, read: IgxColumnComponent }], usesInheritance: true, ngImport: i0, template: `@if (platform.isElements) {
         <ng-content select="igx-column,igc-column,igx-column-group,igc-column-group"></ng-content>
     }`, isInline: true, styles: [":host{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnGroupComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: IgxColumnComponent, useExisting: forwardRef(() => IgxColumnGroupComponent) }], selector: 'igx-column-group', template: `@if (platform.isElements) {
         <ng-content select="igx-column,igc-column,igx-column-group,igc-column-group"></ng-content>
@@ -7409,12 +7413,12 @@ class IgxColumnLayoutComponent extends IgxColumnGroupComponent {
             this.childrenVisibleIndexes.push({ column: child, index: vIndex });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxColumnLayoutComponent, isStandalone: true, selector: "igx-column-layout", inputs: { hidden: ["hidden", "hidden", booleanAttribute] }, providers: [{ provide: IgxColumnComponent, useExisting: forwardRef(() => IgxColumnLayoutComponent) }], usesInheritance: true, ngImport: i0, template: `@if (platform.isElements) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxColumnLayoutComponent, isStandalone: true, selector: "igx-column-layout", inputs: { hidden: ["hidden", "hidden", booleanAttribute] }, providers: [{ provide: IgxColumnComponent, useExisting: forwardRef(() => IgxColumnLayoutComponent) }], usesInheritance: true, ngImport: i0, template: `@if (platform.isElements) {
         <ng-content select="igx-column,igc-column"></ng-content>
     }`, isInline: true, styles: [":host{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnLayoutComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: IgxColumnComponent, useExisting: forwardRef(() => IgxColumnLayoutComponent) }], selector: 'igx-column-layout', template: `@if (platform.isElements) {
         <ng-content select="igx-column,igc-column"></ng-content>
@@ -7656,10 +7660,10 @@ class IgxAdvancedFilteringDialogComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxAdvancedFilteringDialogComponent, isStandalone: true, selector: "igx-advanced-filtering-dialog", inputs: { grid: "grid" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "queryBuilder", first: true, predicate: ["queryBuilder"], descendants: true, read: IgxQueryBuilderComponent }], ngImport: i0, template: "@if (grid) {\n    <article class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n        (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n        [ngClass]=\"{\n            'igx-advanced-filter': true,\n            'igx-advanced-filter--inline': inline\n        }\">\n        <igx-query-builder #queryBuilder\n            [locale]=\"grid.locale\"\n            [entities]=\"generateEntity()\"\n            [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n            <igx-query-builder-header\n                [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n                igxDragHandle>\n            </igx-query-builder-header>\n        </igx-query-builder>\n\n        <footer class=\"igx-excel-filter__secondary-footer\">\n            <div class=\"igx-excel-filter__clear\">\n                <button igxButton=\"flat\" type=\"button\"\n                    (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__cancel\">\n                <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__apply\">\n                <button igxButton=\"contained\" type=\"button\"\n                    (click)=\"onApplyButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_apply }}\n                </button>\n            </div>\n        </footer>\n    </article>\n}\n", dependencies: [{ kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxQueryBuilderComponent, selector: "igx-query-builder", inputs: ["showEntityChangeDialog", "entities", "fields", "expressionTree", "locale", "resourceStrings", "disableEntityChange", "disableReturnFieldsChange"], outputs: ["expressionTreeChange"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxAdvancedFilteringDialogComponent, isStandalone: true, selector: "igx-advanced-filtering-dialog", inputs: { grid: "grid" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "queryBuilder", first: true, predicate: ["queryBuilder"], descendants: true, read: IgxQueryBuilderComponent }], ngImport: i0, template: "@if (grid) {\n    <article class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n        (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n        [ngClass]=\"{\n            'igx-advanced-filter': true,\n            'igx-advanced-filter--inline': inline\n        }\">\n        <igx-query-builder #queryBuilder\n            [locale]=\"grid.locale\"\n            [entities]=\"generateEntity()\"\n            [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n            <igx-query-builder-header\n                [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n                igxDragHandle>\n            </igx-query-builder-header>\n        </igx-query-builder>\n\n        <footer class=\"igx-excel-filter__secondary-footer\">\n            <div class=\"igx-excel-filter__clear\">\n                <button igxButton=\"flat\" type=\"button\"\n                    (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__cancel\">\n                <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__apply\">\n                <button igxButton=\"contained\" type=\"button\"\n                    (click)=\"onApplyButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_apply }}\n                </button>\n            </div>\n        </footer>\n    </article>\n}\n", dependencies: [{ kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxQueryBuilderComponent, selector: "igx-query-builder", inputs: ["showEntityChangeDialog", "entities", "fields", "expressionTree", "locale", "resourceStrings", "disableEntityChange", "disableReturnFieldsChange"], outputs: ["expressionTreeChange"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-advanced-filtering-dialog', imports: [IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective], template: "@if (grid) {\n    <article class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n        (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n        [ngClass]=\"{\n            'igx-advanced-filter': true,\n            'igx-advanced-filter--inline': inline\n        }\">\n        <igx-query-builder #queryBuilder\n            [locale]=\"grid.locale\"\n            [entities]=\"generateEntity()\"\n            [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n            <igx-query-builder-header\n                [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n                igxDragHandle>\n            </igx-query-builder-header>\n        </igx-query-builder>\n\n        <footer class=\"igx-excel-filter__secondary-footer\">\n            <div class=\"igx-excel-filter__clear\">\n                <button igxButton=\"flat\" type=\"button\"\n                    (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__cancel\">\n                <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__apply\">\n                <button igxButton=\"contained\" type=\"button\"\n                    (click)=\"onApplyButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_apply }}\n                </button>\n            </div>\n        </footer>\n    </article>\n}\n" }]
         }], propDecorators: { queryBuilder: [{
@@ -7678,10 +7682,10 @@ class BaseFilteringComponent {
         this.element = inject((ElementRef));
         this.platform = inject(PlatformUtil);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseFilteringComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: BaseFilteringComponent, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BaseFilteringComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: BaseFilteringComponent, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseFilteringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BaseFilteringComponent, decorators: [{
             type: Directive
         }] });
 
@@ -7725,10 +7729,10 @@ class IgxExcelStyleClearFiltersComponent {
         });
         this.esf.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStyleClearFiltersComponent, isStandalone: true, selector: "igx-excel-style-clear-filters", ngImport: i0, template: "@if (esf.column) {\n    <div\n        tabindex=\"0\"\n        [ngClass]=\"clearFilterClass()\"\n        (keydown)=\"onClearFilterKeyDown($event)\"\n        (click)=\"clearFilter()\"\n        role=\"menuitem\"\n        [attr.aria-disabled]=\"!this.esf.column.filteringExpressionsTree\">\n        <span>{{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }}</span>\n        <igx-icon family=\"default\" name=\"cancel\"></igx-icon>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxExcelStyleClearFiltersComponent, isStandalone: true, selector: "igx-excel-style-clear-filters", ngImport: i0, template: "@if (esf.column) {\n    <div\n        tabindex=\"0\"\n        [ngClass]=\"clearFilterClass()\"\n        (keydown)=\"onClearFilterKeyDown($event)\"\n        (click)=\"clearFilter()\"\n        role=\"menuitem\"\n        [attr.aria-disabled]=\"!this.esf.column.filteringExpressionsTree\">\n        <span>{{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }}</span>\n        <igx-icon family=\"default\" name=\"cancel\"></igx-icon>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-clear-filters', imports: [NgClass, IgxIconComponent], template: "@if (esf.column) {\n    <div\n        tabindex=\"0\"\n        [ngClass]=\"clearFilterClass()\"\n        (keydown)=\"onClearFilterKeyDown($event)\"\n        (click)=\"clearFilter()\"\n        role=\"menuitem\"\n        [attr.aria-disabled]=\"!this.esf.column.filteringExpressionsTree\">\n        <span>{{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }}</span>\n        <igx-icon family=\"default\" name=\"cancel\"></igx-icon>\n    </div>\n}\n" }]
         }] });
@@ -7845,10 +7849,10 @@ class IgxExcelStyleDefaultExpressionComponent {
     onOutletPointerDown(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStyleDefaultExpressionComponent, isStandalone: true, selector: "igx-excel-style-default-expression", inputs: { column: "column", expressionUI: "expressionUI", expressionsList: "expressionsList", grid: "grid" }, outputs: { expressionRemoved: "expressionRemoved", logicOperatorChanged: "logicOperatorChanged" }, viewQueries: [{ propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dropdownConditions", first: true, predicate: ["dropdownConditions"], descendants: true, read: IgxSelectComponent, static: true }, { propertyName: "logicOperatorButtonGroup", first: true, predicate: ["logicOperatorButtonGroup"], descendants: true, read: IgxButtonGroupComponent }, { propertyName: "inputValuesDirective", first: true, predicate: ["inputValues"], descendants: true, read: IgxInputDirective, static: true }], ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n            </div>\n        </igx-select-item>\n    }\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        (blur)=\"updateSearchValueOnBlur($event)\"\n    />\n</igx-input-group>\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            tabindex=\"0\"\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n            [selected]=\"expressionUI.afterOperator === 0\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n        </span>\n        <span igxButton\n            tabindex=\"0\"\n            #orButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n            [selected]=\"expressionUI.afterOperator === 1\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n        </span>\n    </igx-buttongroup>\n}\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxExcelStyleDefaultExpressionComponent, isStandalone: true, selector: "igx-excel-style-default-expression", inputs: { column: "column", expressionUI: "expressionUI", expressionsList: "expressionsList", grid: "grid" }, outputs: { expressionRemoved: "expressionRemoved", logicOperatorChanged: "logicOperatorChanged" }, viewQueries: [{ propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dropdownConditions", first: true, predicate: ["dropdownConditions"], descendants: true, read: IgxSelectComponent, static: true }, { propertyName: "logicOperatorButtonGroup", first: true, predicate: ["logicOperatorButtonGroup"], descendants: true, read: IgxButtonGroupComponent }, { propertyName: "inputValuesDirective", first: true, predicate: ["inputValues"], descendants: true, read: IgxInputDirective, static: true }], ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n            </div>\n        </igx-select-item>\n    }\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        (blur)=\"updateSearchValueOnBlur($event)\"\n    />\n</igx-input-group>\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            tabindex=\"0\"\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n            [selected]=\"expressionUI.afterOperator === 0\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n        </span>\n        <span igxButton\n            tabindex=\"0\"\n            #orButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n            [selected]=\"expressionUI.afterOperator === 1\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n        </span>\n    </igx-buttongroup>\n}\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-default-expression', imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective], template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n            </div>\n        </igx-select-item>\n    }\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        (blur)=\"updateSearchValueOnBlur($event)\"\n    />\n</igx-input-group>\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            tabindex=\"0\"\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n            [selected]=\"expressionUI.afterOperator === 0\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n        </span>\n        <span igxButton\n            tabindex=\"0\"\n            #orButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n            [selected]=\"expressionUI.afterOperator === 1\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n        </span>\n    </igx-buttongroup>\n}\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
         }], propDecorators: { column: [{
@@ -7899,12 +7903,12 @@ class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressio
     get weekStart() {
         return getLocaleFirstDayOfWeek(this.grid.locale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", inputs: { searchVal: "searchVal" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span>{{translateCondition(condition)}}</span>\n        </igx-select-item>\n    }\n</igx-select>\n\n@if (column.dataType === 'date') {\n    <igx-date-picker #picker\n        [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n        [(value)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n    <igx-time-picker #picker\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputTimePlaceholder\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n    <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n        <input #input igxInput tabindex=\"0\"\n            [placeholder]=\"inputDatePlaceholder\"\n            [locale]=\"column.grid.locale\"\n            [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n            [defaultFormatType]=\"column.dataType\"\n            [displayFormat]=\"column.pipeArgs.format\"\n            [(ngModel)]=\"searchVal\"\n            [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n    </igx-input-group>\n}\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" >\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n            tabindex=\"0\"\n            [selected]=\"expressionUI.afterOperator === 0\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n        </span>\n        <span igxButton\n            #orButton\n            tabindex=\"0\"\n            (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n            [selected]=\"expressionUI.afterOperator === 1\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n        </span>\n    </igx-buttongroup>\n}\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", inputs: { searchVal: "searchVal" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span>{{translateCondition(condition)}}</span>\n        </igx-select-item>\n    }\n</igx-select>\n\n@if (column.dataType === 'date') {\n    <igx-date-picker #picker\n        [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n    <igx-time-picker #picker\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputTimePlaceholder\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n    <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n        <input #input igxInput tabindex=\"0\"\n            [placeholder]=\"inputDatePlaceholder\"\n            [locale]=\"column.grid.locale\"\n            [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n            [defaultFormatType]=\"column.dataType\"\n            [displayFormat]=\"column.pipeArgs.format\"\n            [(ngModel)]=\"searchVal\"\n            [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n    </igx-input-group>\n}\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" >\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n            tabindex=\"0\"\n            [selected]=\"expressionUI.afterOperator === 0\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n        </span>\n        <span igxButton\n            #orButton\n            tabindex=\"0\"\n            (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n            [selected]=\"expressionUI.afterOperator === 1\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n        </span>\n    </igx-buttongroup>\n}\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-date-expression', imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective], template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span>{{translateCondition(condition)}}</span>\n        </igx-select-item>\n    }\n</igx-select>\n\n@if (column.dataType === 'date') {\n    <igx-date-picker #picker\n        [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n        [(value)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n    <igx-time-picker #picker\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputTimePlaceholder\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n    <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n        <input #input igxInput tabindex=\"0\"\n            [placeholder]=\"inputDatePlaceholder\"\n            [locale]=\"column.grid.locale\"\n            [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n            [defaultFormatType]=\"column.dataType\"\n            [displayFormat]=\"column.pipeArgs.format\"\n            [(ngModel)]=\"searchVal\"\n            [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n    </igx-input-group>\n}\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" >\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n            tabindex=\"0\"\n            [selected]=\"expressionUI.afterOperator === 0\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n        </span>\n        <span igxButton\n            #orButton\n            tabindex=\"0\"\n            (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n            [selected]=\"expressionUI.afterOperator === 1\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n        </span>\n    </igx-buttongroup>\n}\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
+            args: [{ selector: 'igx-excel-style-date-expression', imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective], template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span>{{translateCondition(condition)}}</span>\n        </igx-select-item>\n    }\n</igx-select>\n\n@if (column.dataType === 'date') {\n    <igx-date-picker #picker\n        [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n    <igx-time-picker #picker\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputTimePlaceholder\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n    <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n        <input #input igxInput tabindex=\"0\"\n            [placeholder]=\"inputDatePlaceholder\"\n            [locale]=\"column.grid.locale\"\n            [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n            [defaultFormatType]=\"column.dataType\"\n            [displayFormat]=\"column.pipeArgs.format\"\n            [(ngModel)]=\"searchVal\"\n            [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n    </igx-input-group>\n}\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" >\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n            tabindex=\"0\"\n            [selected]=\"expressionUI.afterOperator === 0\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n        </span>\n        <span igxButton\n            #orButton\n            tabindex=\"0\"\n            (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n            [selected]=\"expressionUI.afterOperator === 1\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n        </span>\n    </igx-buttongroup>\n}\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { read: IgxInputDirective, static: false }]
@@ -8175,10 +8179,10 @@ class IgxExcelStyleCustomDialogComponent {
             this.expressionsContainer.nativeElement.scrollTop = this.expressionsContainer.nativeElement.scrollHeight;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStyleCustomDialogComponent, isStandalone: true, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId" }, viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "defaultExpressionTemplate", first: true, predicate: ["defaultExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "dateExpressionTemplate", first: true, predicate: ["dateExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true, static: true }, { propertyName: "expressionComponents", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: "expressionDateComponents", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        @if (column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time') {\n            @for (expression of expressionsList; track expression.expressionId) {\n                <igx-excel-style-date-expression\n                    class=\"igx-excel-filter__condition\"\n                    [expressionUI]=\"expression\"\n                    [column]=\"column\"\n                    [grid]=\"grid\"\n                    [expressionsList]=\"expressionsList\"\n                    (expressionRemoved)=\"onExpressionRemoved($event)\"\n                    (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n                </igx-excel-style-date-expression>\n            }\n        }\n\n        @if (column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time') {\n            @for (expression of expressionsList; track expression.expressionId) {\n                <igx-excel-style-default-expression\n                    class=\"igx-excel-filter__condition\"\n                    [expressionUI]=\"expression\"\n                    [column]=\"column\"\n                    [grid]=\"grid\"\n                    [expressionsList]=\"expressionsList\"\n                    (expressionRemoved)=\"onExpressionRemoved($event)\"\n                    (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n                </igx-excel-style-default-expression>\n            }\n        }\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"cancelDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression", inputs: ["searchVal"] }, { kind: "component", type: IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: ["column", "expressionUI", "expressionsList", "grid"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxExcelStyleCustomDialogComponent, isStandalone: true, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId" }, viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "defaultExpressionTemplate", first: true, predicate: ["defaultExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "dateExpressionTemplate", first: true, predicate: ["dateExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true, static: true }, { propertyName: "expressionComponents", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: "expressionDateComponents", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        @if (column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time') {\n            @for (expression of expressionsList; track expression.expressionId) {\n                <igx-excel-style-date-expression\n                    class=\"igx-excel-filter__condition\"\n                    [expressionUI]=\"expression\"\n                    [column]=\"column\"\n                    [grid]=\"grid\"\n                    [expressionsList]=\"expressionsList\"\n                    (expressionRemoved)=\"onExpressionRemoved($event)\"\n                    (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n                </igx-excel-style-date-expression>\n            }\n        }\n\n        @if (column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time') {\n            @for (expression of expressionsList; track expression.expressionId) {\n                <igx-excel-style-default-expression\n                    class=\"igx-excel-filter__condition\"\n                    [expressionUI]=\"expression\"\n                    [column]=\"column\"\n                    [grid]=\"grid\"\n                    [expressionsList]=\"expressionsList\"\n                    (expressionRemoved)=\"onExpressionRemoved($event)\"\n                    (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n                </igx-excel-style-default-expression>\n            }\n        }\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"cancelDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression", inputs: ["searchVal"] }, { kind: "component", type: IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: ["column", "expressionUI", "expressionsList", "grid"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-custom-dialog', imports: [IgxToggleDirective, NgClass, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent], template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        @if (column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time') {\n            @for (expression of expressionsList; track expression.expressionId) {\n                <igx-excel-style-date-expression\n                    class=\"igx-excel-filter__condition\"\n                    [expressionUI]=\"expression\"\n                    [column]=\"column\"\n                    [grid]=\"grid\"\n                    [expressionsList]=\"expressionsList\"\n                    (expressionRemoved)=\"onExpressionRemoved($event)\"\n                    (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n                </igx-excel-style-date-expression>\n            }\n        }\n\n        @if (column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time') {\n            @for (expression of expressionsList; track expression.expressionId) {\n                <igx-excel-style-default-expression\n                    class=\"igx-excel-filter__condition\"\n                    [expressionUI]=\"expression\"\n                    [column]=\"column\"\n                    [grid]=\"grid\"\n                    [expressionsList]=\"expressionsList\"\n                    (expressionRemoved)=\"onExpressionRemoved($event)\"\n                    (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n                </igx-excel-style-default-expression>\n            }\n        }\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"cancelDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n" }]
         }], propDecorators: { expressionsList: [{
@@ -8362,10 +8366,10 @@ class IgxExcelStyleConditionalFilterComponent {
     get conditions() {
         return this.esf.column.filters.conditionList();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStyleConditionalFilterComponent, isStandalone: true, selector: "igx-excel-style-conditional-filter", viewQueries: [{ propertyName: "customDialog", first: true, predicate: ["customDialog"], descendants: true, read: IgxExcelStyleCustomDialogComponent }, { propertyName: "subMenu", first: true, predicate: ["subMenu"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "@if (esf.column) {\n    <div tabindex=\"0\"\n        class=\"igx-excel-filter__actions-filter\"\n        [ngClass]=\"filterNumber > 0 ? 'igx-excel-filter__actions-filter--active' : ''\"\n        (keydown)=\"onTextFilterKeyDown($event)\"\n        (click)=\"onTextFilterClick($event)\"\n        [igxDropDownItemNavigation]=\"subMenu\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        [attr.aria-controls]=\"subMenu?.listId\"\n        [attr.aria-activedescendant]=\"!subMenu?.collapsed ? subMenu?.focusedItem?.id : null\">\n        <span class=\"igx-excel-filter__filter-number\">\n            {{ subMenuText }}\n            @if (filterNumber > 0) { ({{filterNumber}}) }\n        </span>\n        <igx-icon name=\"chevron_right\" family=\"default\"></igx-icon>\n    </div>\n\n    <igx-drop-down\n        #subMenu\n        [maxHeight]=\"'397px'\"\n        (selectionChanging)=\"onSubMenuSelection($event)\"\n        (closed)=\"onSubMenuClosed()\">\n        <div>\n            @for (condition of conditions; track condition) {\n                <igx-drop-down-item\n                    [selected]=\"getSelectedCondition(condition)\"\n                    [value]=\"condition\">\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n                    </div>\n                </igx-drop-down-item>\n            }\n            @if (showCustomFilterItem()) {\n                <igx-drop-down-item\n                    [selected]=\"getSelectedCondition('custom')\" >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon name=\"filter_list\" family=\"default\"></igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n                    </div>\n                </igx-drop-down-item>\n            }\n        </div>\n    </igx-drop-down>\n\n    <igx-excel-style-custom-dialog\n        #customDialog\n        [column]=\"esf.column\"\n        [filteringService]=\"esf.grid.filteringService\"\n        [overlayComponentId]=\"esf.overlayComponentId\">\n    </igx-excel-style-custom-dialog>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: ["expressionsList", "column", "selectedOperator", "filteringService", "overlayComponentId"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxExcelStyleConditionalFilterComponent, isStandalone: true, selector: "igx-excel-style-conditional-filter", viewQueries: [{ propertyName: "customDialog", first: true, predicate: ["customDialog"], descendants: true, read: IgxExcelStyleCustomDialogComponent }, { propertyName: "subMenu", first: true, predicate: ["subMenu"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "@if (esf.column) {\n    <div tabindex=\"0\"\n        class=\"igx-excel-filter__actions-filter\"\n        [ngClass]=\"filterNumber > 0 ? 'igx-excel-filter__actions-filter--active' : ''\"\n        (keydown)=\"onTextFilterKeyDown($event)\"\n        (click)=\"onTextFilterClick($event)\"\n        [igxDropDownItemNavigation]=\"subMenu\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        [attr.aria-controls]=\"subMenu?.listId\"\n        [attr.aria-activedescendant]=\"!subMenu?.collapsed ? subMenu?.focusedItem?.id : null\">\n        <span class=\"igx-excel-filter__filter-number\">\n            {{ subMenuText }}\n            @if (filterNumber > 0) { ({{filterNumber}}) }\n        </span>\n        <igx-icon name=\"chevron_right\" family=\"default\"></igx-icon>\n    </div>\n\n    <igx-drop-down\n        #subMenu\n        [maxHeight]=\"'397px'\"\n        (selectionChanging)=\"onSubMenuSelection($event)\"\n        (closed)=\"onSubMenuClosed()\">\n        <div>\n            @for (condition of conditions; track condition) {\n                <igx-drop-down-item\n                    [selected]=\"getSelectedCondition(condition)\"\n                    [value]=\"condition\">\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n                    </div>\n                </igx-drop-down-item>\n            }\n            @if (showCustomFilterItem()) {\n                <igx-drop-down-item\n                    [selected]=\"getSelectedCondition('custom')\" >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon name=\"filter_list\" family=\"default\"></igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n                    </div>\n                </igx-drop-down-item>\n            }\n        </div>\n    </igx-drop-down>\n\n    <igx-excel-style-custom-dialog\n        #customDialog\n        [column]=\"esf.column\"\n        [filteringService]=\"esf.grid.filteringService\"\n        [overlayComponentId]=\"esf.overlayComponentId\">\n    </igx-excel-style-custom-dialog>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: ["expressionsList", "column", "selectedOperator", "filteringService", "overlayComponentId"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-conditional-filter', imports: [NgClass, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxExcelStyleCustomDialogComponent], template: "@if (esf.column) {\n    <div tabindex=\"0\"\n        class=\"igx-excel-filter__actions-filter\"\n        [ngClass]=\"filterNumber > 0 ? 'igx-excel-filter__actions-filter--active' : ''\"\n        (keydown)=\"onTextFilterKeyDown($event)\"\n        (click)=\"onTextFilterClick($event)\"\n        [igxDropDownItemNavigation]=\"subMenu\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        [attr.aria-controls]=\"subMenu?.listId\"\n        [attr.aria-activedescendant]=\"!subMenu?.collapsed ? subMenu?.focusedItem?.id : null\">\n        <span class=\"igx-excel-filter__filter-number\">\n            {{ subMenuText }}\n            @if (filterNumber > 0) { ({{filterNumber}}) }\n        </span>\n        <igx-icon name=\"chevron_right\" family=\"default\"></igx-icon>\n    </div>\n\n    <igx-drop-down\n        #subMenu\n        [maxHeight]=\"'397px'\"\n        (selectionChanging)=\"onSubMenuSelection($event)\"\n        (closed)=\"onSubMenuClosed()\">\n        <div>\n            @for (condition of conditions; track condition) {\n                <igx-drop-down-item\n                    [selected]=\"getSelectedCondition(condition)\"\n                    [value]=\"condition\">\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n                    </div>\n                </igx-drop-down-item>\n            }\n            @if (showCustomFilterItem()) {\n                <igx-drop-down-item\n                    [selected]=\"getSelectedCondition('custom')\" >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon name=\"filter_list\" family=\"default\"></igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n                    </div>\n                </igx-drop-down-item>\n            }\n        </div>\n    </igx-drop-down>\n\n    <igx-excel-style-custom-dialog\n        #customDialog\n        [column]=\"esf.column\"\n        [filteringService]=\"esf.grid.filteringService\"\n        [overlayComponentId]=\"esf.overlayComponentId\">\n    </igx-excel-style-custom-dialog>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { customDialog: [{
@@ -8383,10 +8387,10 @@ class IgxExcelStyleHeaderComponent {
     constructor() {
         this.esf = inject(BaseFilteringComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStyleHeaderComponent, isStandalone: true, selector: "igx-excel-style-header", inputs: { showPinning: ["showPinning", "showPinning", booleanAttribute], showSelecting: ["showSelecting", "showSelecting", booleanAttribute], showHiding: ["showHiding", "showHiding", booleanAttribute] }, ngImport: i0, template: "@if (esf.column) {\n    <header class=\"igx-excel-filter__menu-header\">\n        <h4>{{ esf.column.header || esf.column.field }}</h4>\n        <div class=\"igx-excel-filter__menu-header-actions\">\n            @if (showSelecting) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onSelect()\"\n                    [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n                    [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n                >\n                    <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n                </button>\n            }\n            @if (showPinning) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onPin()\"\n                    [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n                </button>\n            }\n            @if (showHiding) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onHideToggle()\"\n                    [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n                </button>\n            }\n        </div>\n    </header>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxExcelStyleHeaderComponent, isStandalone: true, selector: "igx-excel-style-header", inputs: { showPinning: ["showPinning", "showPinning", booleanAttribute], showSelecting: ["showSelecting", "showSelecting", booleanAttribute], showHiding: ["showHiding", "showHiding", booleanAttribute] }, ngImport: i0, template: "@if (esf.column) {\n    <header class=\"igx-excel-filter__menu-header\">\n        <h4>{{ esf.column.header || esf.column.field }}</h4>\n        <div class=\"igx-excel-filter__menu-header-actions\">\n            @if (showSelecting) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onSelect()\"\n                    [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n                    [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n                >\n                    <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n                </button>\n            }\n            @if (showPinning) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onPin()\"\n                    [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n                </button>\n            }\n            @if (showHiding) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onHideToggle()\"\n                    [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n                </button>\n            }\n        </div>\n    </header>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-header', imports: [NgClass, IgxIconComponent, IgxIconButtonDirective], template: "@if (esf.column) {\n    <header class=\"igx-excel-filter__menu-header\">\n        <h4>{{ esf.column.header || esf.column.field }}</h4>\n        <div class=\"igx-excel-filter__menu-header-actions\">\n            @if (showSelecting) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onSelect()\"\n                    [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n                    [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n                >\n                    <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n                </button>\n            }\n            @if (showPinning) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onPin()\"\n                    [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n                </button>\n            }\n            @if (showHiding) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onHideToggle()\"\n                    [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n                </button>\n            }\n        </div>\n    </header>\n}\n" }]
         }], propDecorators: { showPinning: [{
@@ -8407,10 +8411,10 @@ class IgxExcelStyleHidingComponent {
     constructor() {
         this.esf = inject(BaseFilteringComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleHidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStyleHidingComponent, isStandalone: true, selector: "igx-excel-style-hiding", ngImport: i0, template: "@if (esf.column) {\n    <div\n        class=\"igx-excel-filter__actions-hide\"\n        tabindex=\"0\"\n        (click)=\"esf.onHideToggle()\"\n        role=\"menuitem\">\n        <span>{{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}</span>\n        <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n    </div>\n}\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleHidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxExcelStyleHidingComponent, isStandalone: true, selector: "igx-excel-style-hiding", ngImport: i0, template: "@if (esf.column) {\n    <div\n        class=\"igx-excel-filter__actions-hide\"\n        tabindex=\"0\"\n        (click)=\"esf.onHideToggle()\"\n        role=\"menuitem\">\n        <span>{{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}</span>\n        <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n    </div>\n}\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleHidingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleHidingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-hiding', imports: [IgxIconComponent], template: "@if (esf.column) {\n    <div\n        class=\"igx-excel-filter__actions-hide\"\n        tabindex=\"0\"\n        (click)=\"esf.onHideToggle()\"\n        role=\"menuitem\">\n        <span>{{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}</span>\n        <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n    </div>\n}\n" }]
         }] });
@@ -8505,10 +8509,10 @@ class IgxExcelStyleMovingComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleMovingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStyleMovingComponent, isStandalone: true, selector: "igx-excel-style-moving", host: { properties: { "class.igx-excel-filter__move": "this.defaultClass" } }, ngImport: i0, template: "@if (esf.column) {\n    <header>\n        {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n    </header>\n    <igx-buttongroup>\n        <button\n            type=\"button\"\n            igxButton\n            [disabled]=\"canNotMoveLeft\"\n            (click)=\"onMoveButtonClicked(0)\">\n            <igx-icon family=\"default\" name=\"arrow_back\"></igx-icon>\n            <span>\n                {{ esfSize === '1'?\n                esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n                esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n            </span>\n        </button>\n        <button\n            type=\"button\"\n            igxButton\n            [disabled]=\"canNotMoveRight\"\n            (click)=\"onMoveButtonClicked(1)\">\n            <span>\n                {{ esfSize === '1'?\n                esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n                esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n            </span>\n            <igx-icon family=\"default\" name=\"arrow_forward\"></igx-icon>\n        </button>\n    </igx-buttongroup>\n}\n", dependencies: [{ kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleMovingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxExcelStyleMovingComponent, isStandalone: true, selector: "igx-excel-style-moving", host: { properties: { "class.igx-excel-filter__move": "this.defaultClass" } }, ngImport: i0, template: "@if (esf.column) {\n    <header>\n        {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n    </header>\n    <igx-buttongroup>\n        <button\n            type=\"button\"\n            igxButton\n            [disabled]=\"canNotMoveLeft\"\n            (click)=\"onMoveButtonClicked(0)\">\n            <igx-icon family=\"default\" name=\"arrow_back\"></igx-icon>\n            <span>\n                {{ esfSize === '1'?\n                esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n                esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n            </span>\n        </button>\n        <button\n            type=\"button\"\n            igxButton\n            [disabled]=\"canNotMoveRight\"\n            (click)=\"onMoveButtonClicked(1)\">\n            <span>\n                {{ esfSize === '1'?\n                esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n                esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n            </span>\n            <igx-icon family=\"default\" name=\"arrow_forward\"></igx-icon>\n        </button>\n    </igx-buttongroup>\n}\n", dependencies: [{ kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleMovingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleMovingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-moving', imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent], template: "@if (esf.column) {\n    <header>\n        {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n    </header>\n    <igx-buttongroup>\n        <button\n            type=\"button\"\n            igxButton\n            [disabled]=\"canNotMoveLeft\"\n            (click)=\"onMoveButtonClicked(0)\">\n            <igx-icon family=\"default\" name=\"arrow_back\"></igx-icon>\n            <span>\n                {{ esfSize === '1'?\n                esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n                esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n            </span>\n        </button>\n        <button\n            type=\"button\"\n            igxButton\n            [disabled]=\"canNotMoveRight\"\n            (click)=\"onMoveButtonClicked(1)\">\n            <span>\n                {{ esfSize === '1'?\n                esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n                esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n            </span>\n            <igx-icon family=\"default\" name=\"arrow_forward\"></igx-icon>\n        </button>\n    </igx-buttongroup>\n}\n" }]
         }], propDecorators: { defaultClass: [{
@@ -8523,10 +8527,10 @@ class IgxExcelStylePinningComponent {
     constructor() {
         this.esf = inject(BaseFilteringComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStylePinningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStylePinningComponent, isStandalone: true, selector: "igx-excel-style-pinning", ngImport: i0, template: "@if (esf.column) {\n    <div\n        [ngClass]=\"esf.column.pinned ? 'igx-excel-filter__actions-unpin' : 'igx-excel-filter__actions-pin'\"\n        (click)=\"esf.onPin()\"\n        tabindex=\"0\"\n        role=\"menuitem\">\n        <span>{{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}</span>\n        <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStylePinningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxExcelStylePinningComponent, isStandalone: true, selector: "igx-excel-style-pinning", ngImport: i0, template: "@if (esf.column) {\n    <div\n        [ngClass]=\"esf.column.pinned ? 'igx-excel-filter__actions-unpin' : 'igx-excel-filter__actions-pin'\"\n        (click)=\"esf.onPin()\"\n        tabindex=\"0\"\n        role=\"menuitem\">\n        <span>{{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}</span>\n        <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStylePinningComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStylePinningComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-pinning', imports: [NgClass, IgxIconComponent], template: "@if (esf.column) {\n    <div\n        [ngClass]=\"esf.column.pinned ? 'igx-excel-filter__actions-unpin' : 'igx-excel-filter__actions-pin'\"\n        (click)=\"esf.onPin()\"\n        tabindex=\"0\"\n        role=\"menuitem\">\n        <span>{{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}</span>\n        <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n    </div>\n}\n" }]
         }] });
@@ -8538,10 +8542,10 @@ class IgxExcelStyleLoadingValuesTemplateDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxExcelStyleLoadingValuesTemplateDirective, isStandalone: true, selector: "[igxExcelStyleLoading]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxExcelStyleLoadingValuesTemplateDirective, isStandalone: true, selector: "[igxExcelStyleLoading]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleLoading]',
@@ -8820,8 +8824,8 @@ class IgxExcelStyleSearchComponent {
      * @hidden @internal
      */
     get applyButtonDisabled() {
-        return (this._selectAllItem && !this._selectAllItem.isSelected && !this._selectAllItem.indeterminate) ||
-            (this.displayedListData && this.displayedListData.length === 0);
+        return ((this._selectAllItem && !this._selectAllItem.isSelected && !this._selectAllItem.indeterminate) ||
+            (this.displayedListData && this.displayedListData.length === 0)) && !this._addToCurrentFilterItem?.isSelected;
     }
     /**
      * @hidden @internal
@@ -8937,11 +8941,29 @@ class IgxExcelStyleSearchComponent {
             selectedItems = this._hierarchicalSelectedItems;
         }
         else {
-            const item = this.displayedListData[1];
-            const addToCurrentFilterOptionVisible = item === this.addToCurrentFilterItem;
-            selectedItems = addToCurrentFilterOptionVisible && item.isSelected ?
-                this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected || el.isFiltered) :
-                this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected);
+            const addToCurrentFilter = this._addToCurrentFilterItem?.isSelected;
+            const displayedSet = new Set(this.displayedListData);
+            const listData = this.esf.listData;
+            for (let i = 1; i < listData.length; i++) {
+                const el = listData[i];
+                const isDisplayed = displayedSet.has(el);
+                if (isDisplayed) {
+                    // Visible items: only include if selected
+                    if (el.isSelected) {
+                        selectedItems.push(el);
+                    }
+                }
+                else if (addToCurrentFilter) {
+                    // Hidden items with "add to current filter": include if selected or filtered
+                    if (el.isSelected || el.isFiltered) {
+                        selectedItems.push(el);
+                    }
+                }
+                else if (el.isSelected) {
+                    // Hidden items without "add to current filter": include if selected
+                    selectedItems.push(el);
+                }
+            }
         }
         let unselectedItem;
         if (this.isHierarchical()) {
@@ -9239,10 +9261,10 @@ class IgxExcelStyleSearchComponent {
         const subRequired = indexOutOfChunk || scrollNeeded;
         return subRequired;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStyleSearchComponent, isStandalone: true, selector: "igx-excel-style-search", inputs: { id: "id" }, host: { properties: { "class.igx-excel-filter__menu-main": "this.defaultClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "cancelButton", first: true, predicate: ["cancelButton"], descendants: true, read: IgxButtonDirective, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: IgxListComponent }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "addToCurrentFilterCheckbox", first: true, predicate: ["addToCurrentFilterCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: IgxTreeComponent }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true }, { propertyName: "defaultExcelStyleLoadingValuesTemplate", first: true, predicate: ["defaultExcelStyleLoadingValuesTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<igx-input-group type=\"box\">\n    <igx-icon igxPrefix family=\"default\" name=\"search\"></igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n        @if (searchValue || searchValue === 0) {\n            <igx-suffix>\n                <igx-icon\n                    family=\"default\"\n                    name=\"input_clear\"\n                    (click)=\"clearInput()\"\n                    tabindex=\"0\">\n                </igx-icon>\n            </igx-suffix>\n        }\n</igx-input-group>\n\n@if (!isHierarchical()) {\n    <igx-list #list role=\"listbox\" [isLoading]=\"isLoading\" (keydown)=\"handleKeyDown($event)\" tabindex=\"0\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\" (focus)=\"onFocus()\" (focusout)=\"onFocusOut()\">\n        <div style=\"overflow: hidden; position: relative;\">\n            <igx-list-item [class.igx-list__item-base--active]=\"focusedItem?.id === this.getItemId(i)\" [attr.id]=\"getItemId(i)\" role=\"option\"\n                *igxFor=\"let item of displayedListData;index as i; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n                <igx-checkbox\n                    [value]=\"item\"\n                    [tabindex]=\"-1\"\n                    [checked]=\"item?.isSelected\"\n                    [disableRipple]=\"true\"\n                    [indeterminate]=\"item?.indeterminate\"\n                    [disableTransitions]=\"true\"\n                    (change)=\"onCheckboxChange($event)\">\n                    {{ item.label }}\n                </igx-checkbox>\n            </igx-list-item>\n        </div>\n        <ng-template igxDataLoading>\n            <div class=\"igx-excel-filter__loading\">\n                <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template igxEmptyList>\n            <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n        </ng-template>\n        <div class=\"igx-excel-filter__filter-results\" aria-live=\"polite\" aria-atomic=\"true\">\n            {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}\n        </div>\n    </igx-list>\n}\n\n@if (isHierarchical()) {\n    <div class=\"igx-excel-filter__tree\">\n        @if (!isTreeEmpty()) {\n            <div class=\"igx-excel-filter__tree-alike\">\n                <div class=\"igx-excel-filter__tree-alike-item\">\n                    <igx-checkbox #selectAllCheckbox\n                        [value]=\"selectAllItem\"\n                        [checked]=\"selectAllItem?.isSelected\"\n                        [disableRipple]=\"true\"\n                        [indeterminate]=\"selectAllItem?.indeterminate\"\n                        [disableTransitions]=\"true\"\n                        (change)=\"onSelectAllCheckboxChange($event)\">\n                        {{ selectAllItem.label }}\n                    </igx-checkbox>\n                </div>\n                @if (searchValue) {\n                    <div class=\"igx-excel-filter__tree-alike-item\">\n                        <igx-checkbox #addToCurrentFilterCheckbox\n                            [value]=\"addToCurrentFilterItem\"\n                            [checked]=\"addToCurrentFilterItem.isSelected\"\n                            [disableRipple]=\"true\"\n                            [disableTransitions]=\"true\">\n                            {{ addToCurrentFilterItem.label }}\n                        </igx-checkbox>\n                    </div>\n                }\n            </div>\n        }\n        <igx-tree #tree selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n            @for (item of displayedListData; track item.value) {\n                <igx-tree-node [data]=\"item\" [selected]=\"item.isSelected\">\n                    <div>{{item.label}}</div>\n                    @for (childLevel1 of item.children; track childLevel1.value) {\n                        <igx-tree-node [data]=\"childLevel1\" [selected]=\"childLevel1.isSelected\">\n                            <div>{{childLevel1.label}}</div>\n                            @for (childLevel2 of childLevel1.children; track childLevel2.value) {\n                                <igx-tree-node [data]=\"childLevel2\" [selected]=\"childLevel2.isSelected\">\n                                    <div>{{childLevel2.label}}</div>\n                                    @for (childLevel3 of childLevel2.children; track childLevel3.value) {\n                                        <igx-tree-node [data]=\"childLevel3\" [selected]=\"childLevel3.isSelected\">\n                                            <div>{{childLevel3.label}}</div>\n                                            @for (childLevel4 of childLevel3.children; track childLevel4.value) {\n                                                <igx-tree-node [data]=\"childLevel4\" [selected]=\"childLevel4.isSelected\">\n                                                    <div>{{childLevel4.label}}</div>\n                                                    @for (childLevel5 of childLevel4.children; track childLevel5.value) {\n                                                        <igx-tree-node [data]=\"childLevel5\" [selected]=\"childLevel5.isSelected\">\n                                                            <div>{{childLevel5.label}}</div>\n                                                            @for (childLevel6 of childLevel5.children; track childLevel6.value) {\n                                                                <igx-tree-node [data]=\"childLevel6\" [selected]=\"childLevel6.isSelected\">\n                                                                    <div>{{childLevel6.label}}</div>\n                                                                    @for (childLevel7 of childLevel6.children; track childLevel7.value) {\n                                                                        <igx-tree-node [data]=\"childLevel7\" [selected]=\"childLevel7.isSelected\">\n                                                                            <div>{{childLevel7.label}}</div>\n                                                                            @for (childLevel8 of childLevel7.children; track childLevel8.value) {\n                                                                                <igx-tree-node [data]=\"childLevel8\" [selected]=\"childLevel8.isSelected\">\n                                                                                    <div>{{childLevel8.label}}</div>\n                                                                                    @for (childLevel9 of childLevel8.children; track childLevel9.value) {\n                                                                                        <igx-tree-node [data]=\"childLevel9\" [selected]=\"childLevel9.isSelected\">\n                                                                                            <div>{{childLevel9.label}}</div>\n                                                                                        </igx-tree-node>\n                                                                                    }\n                                                                                </igx-tree-node>\n                                                                            }\n                                                                        </igx-tree-node>\n                                                                    }\n                                                                </igx-tree-node>\n                                                            }\n                                                        </igx-tree-node>\n                                                    }\n                                                </igx-tree-node>\n                                            }\n                                        </igx-tree-node>\n                                    }\n                                </igx-tree-node>\n                            }\n                        </igx-tree-node>\n                    }\n                </igx-tree-node>\n            }\n        </igx-tree>\n        <ng-template igxDataLoading>\n            <div class=\"igx-excel-filter__loading\">\n                <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n                </ng-container>\n            </div>\n        </ng-template>\n        @if (isTreeEmpty()) {\n            <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n        }\n    </div>\n}\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button type=\"button\" #cancelButton\n            igxButton=\"flat\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"contained\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n", dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForInitialChunkSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role", "selected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "directive", type: IgxDataLoadingTemplateDirective, selector: "[igxDataLoading]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxEmptyListTemplateDirective, selector: "[igxEmptyList]" }, { kind: "component", type: IgxTreeComponent, selector: "igx-tree", inputs: ["selection", "singleBranchExpand", "toggleNodeOnClick", "animationSettings"], outputs: ["nodeSelection", "nodeExpanding", "nodeExpanded", "nodeCollapsing", "nodeCollapsed", "activeNodeChanged"] }, { kind: "component", type: IgxTreeNodeComponent, selector: "igx-tree-node", inputs: ["data", "loading", "resourceStrings", "active", "disabled", "selected", "expanded"], outputs: ["selectedChange", "expandedChange"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxExcelStyleSearchComponent, isStandalone: true, selector: "igx-excel-style-search", inputs: { id: "id" }, host: { properties: { "class.igx-excel-filter__menu-main": "this.defaultClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "cancelButton", first: true, predicate: ["cancelButton"], descendants: true, read: IgxButtonDirective, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: IgxListComponent }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "addToCurrentFilterCheckbox", first: true, predicate: ["addToCurrentFilterCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: IgxTreeComponent }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true }, { propertyName: "defaultExcelStyleLoadingValuesTemplate", first: true, predicate: ["defaultExcelStyleLoadingValuesTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<igx-input-group type=\"box\">\n    <igx-icon igxPrefix family=\"default\" name=\"search\"></igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n        @if (searchValue || searchValue === 0) {\n            <igx-suffix>\n                <igx-icon\n                    family=\"default\"\n                    name=\"input_clear\"\n                    (click)=\"clearInput()\"\n                    tabindex=\"0\">\n                </igx-icon>\n            </igx-suffix>\n        }\n</igx-input-group>\n\n@if (!isHierarchical()) {\n    <igx-list #list role=\"listbox\" [isLoading]=\"isLoading\" (keydown)=\"handleKeyDown($event)\" tabindex=\"0\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\" (focus)=\"onFocus()\" (focusout)=\"onFocusOut()\">\n        <div style=\"overflow: hidden; position: relative;\">\n            <igx-list-item [class.igx-list__item-base--active]=\"focusedItem?.id === this.getItemId(i)\" [attr.id]=\"getItemId(i)\" role=\"option\"\n                *igxFor=\"let item of displayedListData;index as i; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n                <igx-checkbox\n                    [value]=\"item\"\n                    [tabindex]=\"-1\"\n                    [checked]=\"item?.isSelected\"\n                    [disableRipple]=\"true\"\n                    [indeterminate]=\"item?.indeterminate\"\n                    [disableTransitions]=\"true\"\n                    (change)=\"onCheckboxChange($event)\">\n                    {{ item.label }}\n                </igx-checkbox>\n            </igx-list-item>\n        </div>\n        <ng-template igxDataLoading>\n            <div class=\"igx-excel-filter__loading\">\n                <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template igxEmptyList>\n            <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n        </ng-template>\n        <div class=\"igx-excel-filter__filter-results\" aria-live=\"polite\" aria-atomic=\"true\">\n            {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}\n        </div>\n    </igx-list>\n}\n\n@if (isHierarchical()) {\n    <div class=\"igx-excel-filter__tree\">\n        @if (!isTreeEmpty()) {\n            <div class=\"igx-excel-filter__tree-alike\">\n                <div class=\"igx-excel-filter__tree-alike-item\">\n                    <igx-checkbox #selectAllCheckbox\n                        [value]=\"selectAllItem\"\n                        [checked]=\"selectAllItem?.isSelected\"\n                        [disableRipple]=\"true\"\n                        [indeterminate]=\"selectAllItem?.indeterminate\"\n                        [disableTransitions]=\"true\"\n                        (change)=\"onSelectAllCheckboxChange($event)\">\n                        {{ selectAllItem.label }}\n                    </igx-checkbox>\n                </div>\n                @if (searchValue) {\n                    <div class=\"igx-excel-filter__tree-alike-item\">\n                        <igx-checkbox #addToCurrentFilterCheckbox\n                            [value]=\"addToCurrentFilterItem\"\n                            [checked]=\"addToCurrentFilterItem.isSelected\"\n                            [disableRipple]=\"true\"\n                            [disableTransitions]=\"true\">\n                            {{ addToCurrentFilterItem.label }}\n                        </igx-checkbox>\n                    </div>\n                }\n            </div>\n        }\n        <igx-tree #tree selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n            @for (item of displayedListData; track item.value) {\n                <igx-tree-node [data]=\"item\" [selected]=\"item.isSelected\">\n                    <div>{{item.label}}</div>\n                    @for (childLevel1 of item.children; track childLevel1.value) {\n                        <igx-tree-node [data]=\"childLevel1\" [selected]=\"childLevel1.isSelected\">\n                            <div>{{childLevel1.label}}</div>\n                            @for (childLevel2 of childLevel1.children; track childLevel2.value) {\n                                <igx-tree-node [data]=\"childLevel2\" [selected]=\"childLevel2.isSelected\">\n                                    <div>{{childLevel2.label}}</div>\n                                    @for (childLevel3 of childLevel2.children; track childLevel3.value) {\n                                        <igx-tree-node [data]=\"childLevel3\" [selected]=\"childLevel3.isSelected\">\n                                            <div>{{childLevel3.label}}</div>\n                                            @for (childLevel4 of childLevel3.children; track childLevel4.value) {\n                                                <igx-tree-node [data]=\"childLevel4\" [selected]=\"childLevel4.isSelected\">\n                                                    <div>{{childLevel4.label}}</div>\n                                                    @for (childLevel5 of childLevel4.children; track childLevel5.value) {\n                                                        <igx-tree-node [data]=\"childLevel5\" [selected]=\"childLevel5.isSelected\">\n                                                            <div>{{childLevel5.label}}</div>\n                                                            @for (childLevel6 of childLevel5.children; track childLevel6.value) {\n                                                                <igx-tree-node [data]=\"childLevel6\" [selected]=\"childLevel6.isSelected\">\n                                                                    <div>{{childLevel6.label}}</div>\n                                                                    @for (childLevel7 of childLevel6.children; track childLevel7.value) {\n                                                                        <igx-tree-node [data]=\"childLevel7\" [selected]=\"childLevel7.isSelected\">\n                                                                            <div>{{childLevel7.label}}</div>\n                                                                            @for (childLevel8 of childLevel7.children; track childLevel8.value) {\n                                                                                <igx-tree-node [data]=\"childLevel8\" [selected]=\"childLevel8.isSelected\">\n                                                                                    <div>{{childLevel8.label}}</div>\n                                                                                    @for (childLevel9 of childLevel8.children; track childLevel9.value) {\n                                                                                        <igx-tree-node [data]=\"childLevel9\" [selected]=\"childLevel9.isSelected\">\n                                                                                            <div>{{childLevel9.label}}</div>\n                                                                                        </igx-tree-node>\n                                                                                    }\n                                                                                </igx-tree-node>\n                                                                            }\n                                                                        </igx-tree-node>\n                                                                    }\n                                                                </igx-tree-node>\n                                                            }\n                                                        </igx-tree-node>\n                                                    }\n                                                </igx-tree-node>\n                                            }\n                                        </igx-tree-node>\n                                    }\n                                </igx-tree-node>\n                            }\n                        </igx-tree-node>\n                    }\n                </igx-tree-node>\n            }\n        </igx-tree>\n        <ng-template igxDataLoading>\n            <div class=\"igx-excel-filter__loading\">\n                <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n                </ng-container>\n            </div>\n        </ng-template>\n        @if (isTreeEmpty()) {\n            <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n        }\n    </div>\n}\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button type=\"button\" #cancelButton\n            igxButton=\"flat\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"contained\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n", dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForInitialChunkSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role", "selected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "directive", type: IgxDataLoadingTemplateDirective, selector: "[igxDataLoading]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxEmptyListTemplateDirective, selector: "[igxEmptyList]" }, { kind: "component", type: IgxTreeComponent, selector: "igx-tree", inputs: ["selection", "singleBranchExpand", "toggleNodeOnClick", "animationSettings"], outputs: ["nodeSelection", "nodeExpanding", "nodeExpanded", "nodeCollapsing", "nodeCollapsed", "activeNodeChanged"] }, { kind: "component", type: IgxTreeNodeComponent, selector: "igx-tree-node", inputs: ["data", "loading", "resourceStrings", "active", "disabled", "selected", "expanded"], outputs: ["selectedChange", "expandedChange"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-search', imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxForOfDirective, IgxListItemComponent, IgxCheckboxComponent, IgxDataLoadingTemplateDirective, NgTemplateOutlet, IgxEmptyListTemplateDirective, IgxTreeComponent, IgxTreeNodeComponent, IgxCircularProgressBarComponent, IgxButtonDirective], template: "<igx-input-group type=\"box\">\n    <igx-icon igxPrefix family=\"default\" name=\"search\"></igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n        @if (searchValue || searchValue === 0) {\n            <igx-suffix>\n                <igx-icon\n                    family=\"default\"\n                    name=\"input_clear\"\n                    (click)=\"clearInput()\"\n                    tabindex=\"0\">\n                </igx-icon>\n            </igx-suffix>\n        }\n</igx-input-group>\n\n@if (!isHierarchical()) {\n    <igx-list #list role=\"listbox\" [isLoading]=\"isLoading\" (keydown)=\"handleKeyDown($event)\" tabindex=\"0\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\" (focus)=\"onFocus()\" (focusout)=\"onFocusOut()\">\n        <div style=\"overflow: hidden; position: relative;\">\n            <igx-list-item [class.igx-list__item-base--active]=\"focusedItem?.id === this.getItemId(i)\" [attr.id]=\"getItemId(i)\" role=\"option\"\n                *igxFor=\"let item of displayedListData;index as i; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n                <igx-checkbox\n                    [value]=\"item\"\n                    [tabindex]=\"-1\"\n                    [checked]=\"item?.isSelected\"\n                    [disableRipple]=\"true\"\n                    [indeterminate]=\"item?.indeterminate\"\n                    [disableTransitions]=\"true\"\n                    (change)=\"onCheckboxChange($event)\">\n                    {{ item.label }}\n                </igx-checkbox>\n            </igx-list-item>\n        </div>\n        <ng-template igxDataLoading>\n            <div class=\"igx-excel-filter__loading\">\n                <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template igxEmptyList>\n            <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n        </ng-template>\n        <div class=\"igx-excel-filter__filter-results\" aria-live=\"polite\" aria-atomic=\"true\">\n            {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}\n        </div>\n    </igx-list>\n}\n\n@if (isHierarchical()) {\n    <div class=\"igx-excel-filter__tree\">\n        @if (!isTreeEmpty()) {\n            <div class=\"igx-excel-filter__tree-alike\">\n                <div class=\"igx-excel-filter__tree-alike-item\">\n                    <igx-checkbox #selectAllCheckbox\n                        [value]=\"selectAllItem\"\n                        [checked]=\"selectAllItem?.isSelected\"\n                        [disableRipple]=\"true\"\n                        [indeterminate]=\"selectAllItem?.indeterminate\"\n                        [disableTransitions]=\"true\"\n                        (change)=\"onSelectAllCheckboxChange($event)\">\n                        {{ selectAllItem.label }}\n                    </igx-checkbox>\n                </div>\n                @if (searchValue) {\n                    <div class=\"igx-excel-filter__tree-alike-item\">\n                        <igx-checkbox #addToCurrentFilterCheckbox\n                            [value]=\"addToCurrentFilterItem\"\n                            [checked]=\"addToCurrentFilterItem.isSelected\"\n                            [disableRipple]=\"true\"\n                            [disableTransitions]=\"true\">\n                            {{ addToCurrentFilterItem.label }}\n                        </igx-checkbox>\n                    </div>\n                }\n            </div>\n        }\n        <igx-tree #tree selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n            @for (item of displayedListData; track item.value) {\n                <igx-tree-node [data]=\"item\" [selected]=\"item.isSelected\">\n                    <div>{{item.label}}</div>\n                    @for (childLevel1 of item.children; track childLevel1.value) {\n                        <igx-tree-node [data]=\"childLevel1\" [selected]=\"childLevel1.isSelected\">\n                            <div>{{childLevel1.label}}</div>\n                            @for (childLevel2 of childLevel1.children; track childLevel2.value) {\n                                <igx-tree-node [data]=\"childLevel2\" [selected]=\"childLevel2.isSelected\">\n                                    <div>{{childLevel2.label}}</div>\n                                    @for (childLevel3 of childLevel2.children; track childLevel3.value) {\n                                        <igx-tree-node [data]=\"childLevel3\" [selected]=\"childLevel3.isSelected\">\n                                            <div>{{childLevel3.label}}</div>\n                                            @for (childLevel4 of childLevel3.children; track childLevel4.value) {\n                                                <igx-tree-node [data]=\"childLevel4\" [selected]=\"childLevel4.isSelected\">\n                                                    <div>{{childLevel4.label}}</div>\n                                                    @for (childLevel5 of childLevel4.children; track childLevel5.value) {\n                                                        <igx-tree-node [data]=\"childLevel5\" [selected]=\"childLevel5.isSelected\">\n                                                            <div>{{childLevel5.label}}</div>\n                                                            @for (childLevel6 of childLevel5.children; track childLevel6.value) {\n                                                                <igx-tree-node [data]=\"childLevel6\" [selected]=\"childLevel6.isSelected\">\n                                                                    <div>{{childLevel6.label}}</div>\n                                                                    @for (childLevel7 of childLevel6.children; track childLevel7.value) {\n                                                                        <igx-tree-node [data]=\"childLevel7\" [selected]=\"childLevel7.isSelected\">\n                                                                            <div>{{childLevel7.label}}</div>\n                                                                            @for (childLevel8 of childLevel7.children; track childLevel8.value) {\n                                                                                <igx-tree-node [data]=\"childLevel8\" [selected]=\"childLevel8.isSelected\">\n                                                                                    <div>{{childLevel8.label}}</div>\n                                                                                    @for (childLevel9 of childLevel8.children; track childLevel9.value) {\n                                                                                        <igx-tree-node [data]=\"childLevel9\" [selected]=\"childLevel9.isSelected\">\n                                                                                            <div>{{childLevel9.label}}</div>\n                                                                                        </igx-tree-node>\n                                                                                    }\n                                                                                </igx-tree-node>\n                                                                            }\n                                                                        </igx-tree-node>\n                                                                    }\n                                                                </igx-tree-node>\n                                                            }\n                                                        </igx-tree-node>\n                                                    }\n                                                </igx-tree-node>\n                                            }\n                                        </igx-tree-node>\n                                    }\n                                </igx-tree-node>\n                            }\n                        </igx-tree-node>\n                    }\n                </igx-tree-node>\n            }\n        </igx-tree>\n        <ng-template igxDataLoading>\n            <div class=\"igx-excel-filter__loading\">\n                <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n                </ng-container>\n            </div>\n        </ng-template>\n        @if (isTreeEmpty()) {\n            <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n        }\n    </div>\n}\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button type=\"button\" #cancelButton\n            igxButton=\"flat\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"contained\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n" }]
         }], ctorParameters: () => [], propDecorators: { defaultClass: [{
@@ -9286,10 +9308,10 @@ class IgxExcelStyleSelectingComponent {
     constructor() {
         this.esf = inject(BaseFilteringComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleSelectingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStyleSelectingComponent, isStandalone: true, selector: "igx-excel-style-selecting", ngImport: i0, template: "@if (esf.column) {\n    <div\n        [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n        tabindex=\"0\"\n        (click)=\"esf.onSelect()\"\n        role=\"button\"\n        [attr.aria-pressed]=\"esf.column.selected\">\n        <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>\n        <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleSelectingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxExcelStyleSelectingComponent, isStandalone: true, selector: "igx-excel-style-selecting", ngImport: i0, template: "@if (esf.column) {\n    <div\n        [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n        tabindex=\"0\"\n        (click)=\"esf.onSelect()\"\n        role=\"button\"\n        [attr.aria-pressed]=\"esf.column.selected\">\n        <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>\n        <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleSelectingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleSelectingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-selecting', imports: [NgClass, IgxIconComponent], template: "@if (esf.column) {\n    <div\n        [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n        tabindex=\"0\"\n        (click)=\"esf.onSelect()\"\n        role=\"button\"\n        [attr.aria-pressed]=\"esf.column.selected\">\n        <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>\n        <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n    </div>\n}\n" }]
         }] });
@@ -9345,10 +9367,10 @@ class IgxExcelStyleSortingComponent {
             this.sortButtonGroup.selectButton(sortDirection - 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStyleSortingComponent, isStandalone: true, selector: "igx-excel-style-sorting", host: { properties: { "class.igx-excel-filter__sort": "this.defaultClass" } }, viewQueries: [{ propertyName: "sortButtonGroup", first: true, predicate: ["sortButtonGroup"], descendants: true, read: IgxButtonGroupComponent }], ngImport: i0, template: "@if (esf.column) {\n    <header>\n        {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }}\n    </header>\n    <igx-buttongroup #sortButtonGroup>\n        <button type=\"button\"\n            igxButton\n            [attr.data-togglable]=\"true\"\n            (buttonSelected)=\"onSortButtonClicked(1)\"\n            >\n            <igx-icon family=\"default\" name=\"sort_asc\"></igx-icon>\n            <span>\n                {{ esfSize === '1'?\n                esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc_short:\n                esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc  }}\n            </span>\n        </button>\n        <button type=\"button\"\n            igxButton\n            [attr.data-togglable]=\"true\"\n            (buttonSelected)=\"onSortButtonClicked(2)\"\n            >\n            <igx-icon family=\"default\" name=\"sort_desc\"></igx-icon>\n            <span>\n                {{ esfSize === '1' ?\n                esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc_short:\n                esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc\n                }}\n            </span>\n        </button>\n    </igx-buttongroup>\n}\n", dependencies: [{ kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxExcelStyleSortingComponent, isStandalone: true, selector: "igx-excel-style-sorting", host: { properties: { "class.igx-excel-filter__sort": "this.defaultClass" } }, viewQueries: [{ propertyName: "sortButtonGroup", first: true, predicate: ["sortButtonGroup"], descendants: true, read: IgxButtonGroupComponent }], ngImport: i0, template: "@if (esf.column) {\n    <header>\n        {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }}\n    </header>\n    <igx-buttongroup #sortButtonGroup>\n        <button type=\"button\"\n            igxButton\n            [attr.data-togglable]=\"true\"\n            (buttonSelected)=\"onSortButtonClicked(1)\"\n            >\n            <igx-icon family=\"default\" name=\"sort_asc\"></igx-icon>\n            <span>\n                {{ esfSize === '1'?\n                esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc_short:\n                esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc  }}\n            </span>\n        </button>\n        <button type=\"button\"\n            igxButton\n            [attr.data-togglable]=\"true\"\n            (buttonSelected)=\"onSortButtonClicked(2)\"\n            >\n            <igx-icon family=\"default\" name=\"sort_desc\"></igx-icon>\n            <span>\n                {{ esfSize === '1' ?\n                esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc_short:\n                esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc\n                }}\n            </span>\n        </button>\n    </igx-buttongroup>\n}\n", dependencies: [{ kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleSortingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleSortingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-sorting', imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent], template: "@if (esf.column) {\n    <header>\n        {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }}\n    </header>\n    <igx-buttongroup #sortButtonGroup>\n        <button type=\"button\"\n            igxButton\n            [attr.data-togglable]=\"true\"\n            (buttonSelected)=\"onSortButtonClicked(1)\"\n            >\n            <igx-icon family=\"default\" name=\"sort_asc\"></igx-icon>\n            <span>\n                {{ esfSize === '1'?\n                esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc_short:\n                esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc  }}\n            </span>\n        </button>\n        <button type=\"button\"\n            igxButton\n            [attr.data-togglable]=\"true\"\n            (buttonSelected)=\"onSortButtonClicked(2)\"\n            >\n            <igx-icon family=\"default\" name=\"sort_desc\"></igx-icon>\n            <span>\n                {{ esfSize === '1' ?\n                esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc_short:\n                esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc\n                }}\n            </span>\n        </button>\n    </igx-buttongroup>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { defaultClass: [{
@@ -9360,10 +9382,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
             }] } });
 
 class IgxExcelStyleColumnOperationsTemplateDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxExcelStyleColumnOperationsTemplateDirective, isStandalone: true, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxExcelStyleColumnOperationsTemplateDirective, isStandalone: true, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-excel-style-column-operations,[igxExcelStyleColumnOperations]',
@@ -9371,10 +9393,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 }]
         }] });
 class IgxExcelStyleFilterOperationsTemplateDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxExcelStyleFilterOperationsTemplateDirective, isStandalone: true, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxExcelStyleFilterOperationsTemplateDirective, isStandalone: true, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]',
@@ -9947,10 +9969,10 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridExcelStyleFilteringComponent, isStandalone: true, selector: "igx-grid-excel-style-filtering", inputs: { column: "column", minHeight: "minHeight", maxHeight: "maxHeight" }, outputs: { loadingStart: "loadingStart", loadingEnd: "loadingEnd", initialized: "initialized", sortingChanged: "sortingChanged", columnChange: "columnChange", listDataLoaded: "listDataLoaded", filterCleared: "filterCleared" }, host: { properties: { "class.igx-excel-filter": "this.defaultClass", "class.igx-excel-filter__sizing": "this.shouldApplySizes", "class.igx-excel-filter--inline": "this.inline", "style.max-height": "this.maxHeight" } }, providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], queries: [{ propertyName: "excelColumnOperationsDirective", first: true, predicate: IgxExcelStyleColumnOperationsTemplateDirective, descendants: true, read: IgxExcelStyleColumnOperationsTemplateDirective }, { propertyName: "excelFilterOperationsDirective", first: true, predicate: IgxExcelStyleFilterOperationsTemplateDirective, descendants: true, read: IgxExcelStyleFilterOperationsTemplateDirective }], viewQueries: [{ propertyName: "mainDropdown", first: true, predicate: ["mainDropdown"], descendants: true, read: ElementRef }, { propertyName: "defaultExcelColumnOperations", first: true, predicate: ["defaultExcelColumnOperations"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultExcelFilterOperations", first: true, predicate: ["defaultExcelFilterOperations"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__sizing': shouldApplySizes,\n        'igx-excel-filter__menu--cosy': size === '2',\n        'igx-excel-filter__menu--compact': size === '1'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    role=\"menu\">\n\n    @if (this.excelColumnOperationsDirective) {\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    } @else {\n        <igx-excel-style-header\n            [showHiding]=\"size !== '3' && !column?.disableHiding\"\n            [showPinning]=\"size !== '3' && !column?.disablePinning\"\n            [showSelecting]=\"size !== '3' && columnSelectable()\"\n        >\n        </igx-excel-style-header>\n        @if (column?.sortable) {\n            <igx-excel-style-sorting>\n            </igx-excel-style-sorting>\n        }\n        @if (grid?.moving) {\n            <igx-excel-style-moving></igx-excel-style-moving>\n        }\n        @if (!column?.disablePinning && size === '3') {\n            <igx-excel-style-pinning></igx-excel-style-pinning>\n        }\n        @if (!column?.disableHiding && size === '3') {\n            <igx-excel-style-hiding></igx-excel-style-hiding>\n        }\n        @if (columnSelectable() && size === '3') {\n            <igx-excel-style-selecting></igx-excel-style-selecting>\n        }\n    }\n\n    @if (this.excelFilterOperationsDirective) {\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    } @else {\n        <igx-excel-style-clear-filters></igx-excel-style-clear-filters>\n        <igx-excel-style-conditional-filter></igx-excel-style-conditional-filter>\n        <igx-excel-style-search></igx-excel-style-search>\n    }\n</article>\n", dependencies: [{ kind: "component", type: IgxExcelStyleHeaderComponent, selector: "igx-excel-style-header", inputs: ["showPinning", "showSelecting", "showHiding"] }, { kind: "component", type: IgxExcelStyleSortingComponent, selector: "igx-excel-style-sorting" }, { kind: "component", type: IgxExcelStyleMovingComponent, selector: "igx-excel-style-moving" }, { kind: "component", type: IgxExcelStylePinningComponent, selector: "igx-excel-style-pinning" }, { kind: "component", type: IgxExcelStyleHidingComponent, selector: "igx-excel-style-hiding" }, { kind: "component", type: IgxExcelStyleSelectingComponent, selector: "igx-excel-style-selecting" }, { kind: "component", type: IgxExcelStyleClearFiltersComponent, selector: "igx-excel-style-clear-filters" }, { kind: "component", type: IgxExcelStyleConditionalFilterComponent, selector: "igx-excel-style-conditional-filter" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridExcelStyleFilteringComponent, isStandalone: true, selector: "igx-grid-excel-style-filtering", inputs: { column: "column", minHeight: "minHeight", maxHeight: "maxHeight" }, outputs: { loadingStart: "loadingStart", loadingEnd: "loadingEnd", initialized: "initialized", sortingChanged: "sortingChanged", columnChange: "columnChange", listDataLoaded: "listDataLoaded", filterCleared: "filterCleared" }, host: { properties: { "class.igx-excel-filter": "this.defaultClass", "class.igx-excel-filter__sizing": "this.shouldApplySizes", "class.igx-excel-filter--inline": "this.inline", "style.max-height": "this.maxHeight" } }, providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], queries: [{ propertyName: "excelColumnOperationsDirective", first: true, predicate: IgxExcelStyleColumnOperationsTemplateDirective, descendants: true, read: IgxExcelStyleColumnOperationsTemplateDirective }, { propertyName: "excelFilterOperationsDirective", first: true, predicate: IgxExcelStyleFilterOperationsTemplateDirective, descendants: true, read: IgxExcelStyleFilterOperationsTemplateDirective }], viewQueries: [{ propertyName: "mainDropdown", first: true, predicate: ["mainDropdown"], descendants: true, read: ElementRef }, { propertyName: "defaultExcelColumnOperations", first: true, predicate: ["defaultExcelColumnOperations"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultExcelFilterOperations", first: true, predicate: ["defaultExcelFilterOperations"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__sizing': shouldApplySizes,\n        'igx-excel-filter__menu--cosy': size === '2',\n        'igx-excel-filter__menu--compact': size === '1'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    role=\"menu\">\n\n    @if (this.excelColumnOperationsDirective) {\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    } @else {\n        <igx-excel-style-header\n            [showHiding]=\"size !== '3' && !column?.disableHiding\"\n            [showPinning]=\"size !== '3' && !column?.disablePinning\"\n            [showSelecting]=\"size !== '3' && columnSelectable()\"\n        >\n        </igx-excel-style-header>\n        @if (column?.sortable) {\n            <igx-excel-style-sorting>\n            </igx-excel-style-sorting>\n        }\n        @if (grid?.moving) {\n            <igx-excel-style-moving></igx-excel-style-moving>\n        }\n        @if (!column?.disablePinning && size === '3') {\n            <igx-excel-style-pinning></igx-excel-style-pinning>\n        }\n        @if (!column?.disableHiding && size === '3') {\n            <igx-excel-style-hiding></igx-excel-style-hiding>\n        }\n        @if (columnSelectable() && size === '3') {\n            <igx-excel-style-selecting></igx-excel-style-selecting>\n        }\n    }\n\n    @if (this.excelFilterOperationsDirective) {\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    } @else {\n        <igx-excel-style-clear-filters></igx-excel-style-clear-filters>\n        <igx-excel-style-conditional-filter></igx-excel-style-conditional-filter>\n        <igx-excel-style-search></igx-excel-style-search>\n    }\n</article>\n", dependencies: [{ kind: "component", type: IgxExcelStyleHeaderComponent, selector: "igx-excel-style-header", inputs: ["showPinning", "showSelecting", "showHiding"] }, { kind: "component", type: IgxExcelStyleSortingComponent, selector: "igx-excel-style-sorting" }, { kind: "component", type: IgxExcelStyleMovingComponent, selector: "igx-excel-style-moving" }, { kind: "component", type: IgxExcelStylePinningComponent, selector: "igx-excel-style-pinning" }, { kind: "component", type: IgxExcelStyleHidingComponent, selector: "igx-excel-style-hiding" }, { kind: "component", type: IgxExcelStyleSelectingComponent, selector: "igx-excel-style-selecting" }, { kind: "component", type: IgxExcelStyleClearFiltersComponent, selector: "igx-excel-style-clear-filters" }, { kind: "component", type: IgxExcelStyleConditionalFilterComponent, selector: "igx-excel-style-conditional-filter" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], selector: 'igx-grid-excel-style-filtering', imports: [IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleSearchComponent, NgClass], template: "<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__sizing': shouldApplySizes,\n        'igx-excel-filter__menu--cosy': size === '2',\n        'igx-excel-filter__menu--compact': size === '1'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    role=\"menu\">\n\n    @if (this.excelColumnOperationsDirective) {\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    } @else {\n        <igx-excel-style-header\n            [showHiding]=\"size !== '3' && !column?.disableHiding\"\n            [showPinning]=\"size !== '3' && !column?.disablePinning\"\n            [showSelecting]=\"size !== '3' && columnSelectable()\"\n        >\n        </igx-excel-style-header>\n        @if (column?.sortable) {\n            <igx-excel-style-sorting>\n            </igx-excel-style-sorting>\n        }\n        @if (grid?.moving) {\n            <igx-excel-style-moving></igx-excel-style-moving>\n        }\n        @if (!column?.disablePinning && size === '3') {\n            <igx-excel-style-pinning></igx-excel-style-pinning>\n        }\n        @if (!column?.disableHiding && size === '3') {\n            <igx-excel-style-hiding></igx-excel-style-hiding>\n        }\n        @if (columnSelectable() && size === '3') {\n            <igx-excel-style-selecting></igx-excel-style-selecting>\n        }\n    }\n\n    @if (this.excelFilterOperationsDirective) {\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    } @else {\n        <igx-excel-style-clear-filters></igx-excel-style-clear-filters>\n        <igx-excel-style-conditional-filter></igx-excel-style-conditional-filter>\n        <igx-excel-style-search></igx-excel-style-search>\n    }\n</article>\n" }]
         }], propDecorators: { defaultClass: [{
@@ -10069,10 +10091,10 @@ class IgxGridActionButtonComponent {
             event.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridActionButtonComponent, isStandalone: true, selector: "igx-grid-action-button", inputs: { asMenuItem: ["asMenuItem", "asMenuItem", booleanAttribute], iconName: "iconName", classNames: "classNames", iconSet: "iconSet", labelText: "labelText" }, outputs: { actionClick: "actionClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "templateRef", first: true, predicate: ["menuItemTemplate"], descendants: true }], ngImport: i0, template: "@if (!asMenuItem) {\n    <button type=\"button\" [title]=\"labelText\" igxIconButton=\"flat\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        @if (iconSet) {\n            <igx-icon [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        }\n        @if (!iconSet) {\n            <igx-icon>{{iconName}}</igx-icon>\n        }\n    </button>\n}\n\n<ng-template #menuItemTemplate>\n    @if (asMenuItem) {\n        <div #container [className]=\"containerClass\">\n            @if (iconSet) {\n                <igx-icon [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            }\n            @if (!iconSet) {\n                <igx-icon>{{iconName}}</igx-icon>\n            }\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridActionButtonComponent, isStandalone: true, selector: "igx-grid-action-button", inputs: { asMenuItem: ["asMenuItem", "asMenuItem", booleanAttribute], iconName: "iconName", classNames: "classNames", iconSet: "iconSet", labelText: "labelText" }, outputs: { actionClick: "actionClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "templateRef", first: true, predicate: ["menuItemTemplate"], descendants: true }], ngImport: i0, template: "@if (!asMenuItem) {\n    <button type=\"button\" [title]=\"labelText\" igxIconButton=\"flat\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        @if (iconSet) {\n            <igx-icon [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        }\n        @if (!iconSet) {\n            <igx-icon>{{iconName}}</igx-icon>\n        }\n    </button>\n}\n\n<ng-template #menuItemTemplate>\n    @if (asMenuItem) {\n        <div #container [className]=\"containerClass\">\n            @if (iconSet) {\n                <igx-icon [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            }\n            @if (!iconSet) {\n                <igx-icon>{{iconName}}</igx-icon>\n            }\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridActionButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridActionButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-action-button', imports: [IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective], template: "@if (!asMenuItem) {\n    <button type=\"button\" [title]=\"labelText\" igxIconButton=\"flat\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        @if (iconSet) {\n            <igx-icon [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        }\n        @if (!iconSet) {\n            <igx-icon>{{iconName}}</igx-icon>\n        }\n    </button>\n}\n\n<ng-template #menuItemTemplate>\n    @if (asMenuItem) {\n        <div #container [className]=\"containerClass\">\n            @if (iconSet) {\n                <igx-icon [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            }\n            @if (!iconSet) {\n                <igx-icon>{{iconName}}</igx-icon>\n            }\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    }\n</ng-template>\n" }]
         }], propDecorators: { container: [{
@@ -10153,10 +10175,10 @@ class IgxGridActionsBaseDirective {
     isRow(context) {
         return context && context instanceof IgxRowDirective;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridActionsBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: IgxGridActionsBaseDirective, isStandalone: true, selector: "[igxGridActionsBase]", inputs: { asMenuItems: ["asMenuItems", "asMenuItems", booleanAttribute] }, viewQueries: [{ propertyName: "buttons", predicate: IgxGridActionButtonComponent, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridActionsBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.8", type: IgxGridActionsBaseDirective, isStandalone: true, selector: "[igxGridActionsBase]", inputs: { asMenuItems: ["asMenuItems", "asMenuItems", booleanAttribute] }, viewQueries: [{ propertyName: "buttons", predicate: IgxGridActionButtonComponent, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridActionsBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridActionsBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridActionsBase]',
@@ -10317,10 +10339,10 @@ class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective {
         this.iconService.addSvgIconFromText(addRow.name, addRow.value, 'imx-icons', true);
         this.iconService.addSvgIconFromText(addChild.name, addChild.value, 'imx-icons', true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridEditingActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridEditingActionsComponent, isStandalone: true, selector: "igx-grid-editing-actions", inputs: { addRow: ["addRow", "addRow", booleanAttribute], editRow: ["editRow", "editRow", booleanAttribute], deleteRow: ["deleteRow", "deleteRow", booleanAttribute], addChild: ["addChild", "addChild", booleanAttribute] }, host: { properties: { "class.igx-action-strip__editing-actions": "this.cssClass" } }, providers: [{ provide: IgxActionStripActionsToken, useExisting: IgxGridEditingActionsComponent }], usesInheritance: true, ngImport: i0, template: "\n@if (isRowContext) {\n    @if (!disabled && editRow) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconName=\"edit\" [labelText]=\"grid.resourceStrings.igx_grid_actions_edit_label\" (actionClick)=\"startEdit($event)\"></igx-grid-action-button>\n    }\n    @if (addRow && isRootRow) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconName=\"add_row\" iconSet=\"default\" [labelText]=\"grid.resourceStrings.igx_grid_actions_add_label\" (actionClick)=\"addRowHandler($event)\"></igx-grid-action-button>\n    }\n    @if (addChild && hasChildren) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconName=\"add_child\" iconSet=\"default\" [labelText]=\"grid.resourceStrings.igx_grid_actions_add_child_label\" (actionClick)=\"addRowHandler($event, true)\"></igx-grid-action-button>\n    }\n    @if (!disabled && deleteRow) {\n        <igx-grid-action-button class=\"igx-action-strip__delete\" classNames=\"igx-action-strip__menu-item--danger\" [asMenuItem]=\"asMenuItems\" iconName=\"delete\" [labelText]=\"grid.resourceStrings.igx_grid_actions_delete_label\" (actionClick)=\"deleteRowHandler($event)\"></igx-grid-action-button>\n    }\n}\n\n", dependencies: [{ kind: "component", type: IgxGridActionButtonComponent, selector: "igx-grid-action-button", inputs: ["asMenuItem", "iconName", "classNames", "iconSet", "labelText"], outputs: ["actionClick"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridEditingActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridEditingActionsComponent, isStandalone: true, selector: "igx-grid-editing-actions", inputs: { addRow: ["addRow", "addRow", booleanAttribute], editRow: ["editRow", "editRow", booleanAttribute], deleteRow: ["deleteRow", "deleteRow", booleanAttribute], addChild: ["addChild", "addChild", booleanAttribute] }, host: { properties: { "class.igx-action-strip__editing-actions": "this.cssClass" } }, providers: [{ provide: IgxActionStripActionsToken, useExisting: IgxGridEditingActionsComponent }], usesInheritance: true, ngImport: i0, template: "\n@if (isRowContext) {\n    @if (!disabled && editRow) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconName=\"edit\" [labelText]=\"grid.resourceStrings.igx_grid_actions_edit_label\" (actionClick)=\"startEdit($event)\"></igx-grid-action-button>\n    }\n    @if (addRow && isRootRow) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconName=\"add_row\" iconSet=\"default\" [labelText]=\"grid.resourceStrings.igx_grid_actions_add_label\" (actionClick)=\"addRowHandler($event)\"></igx-grid-action-button>\n    }\n    @if (addChild && hasChildren) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconName=\"add_child\" iconSet=\"default\" [labelText]=\"grid.resourceStrings.igx_grid_actions_add_child_label\" (actionClick)=\"addRowHandler($event, true)\"></igx-grid-action-button>\n    }\n    @if (!disabled && deleteRow) {\n        <igx-grid-action-button class=\"igx-action-strip__delete\" classNames=\"igx-action-strip__menu-item--danger\" [asMenuItem]=\"asMenuItems\" iconName=\"delete\" [labelText]=\"grid.resourceStrings.igx_grid_actions_delete_label\" (actionClick)=\"deleteRowHandler($event)\"></igx-grid-action-button>\n    }\n}\n\n", dependencies: [{ kind: "component", type: IgxGridActionButtonComponent, selector: "igx-grid-action-button", inputs: ["asMenuItem", "iconName", "classNames", "iconSet", "labelText"], outputs: ["actionClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridEditingActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridEditingActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-editing-actions', providers: [{ provide: IgxActionStripActionsToken, useExisting: IgxGridEditingActionsComponent }], imports: [IgxGridActionButtonComponent], template: "\n@if (isRowContext) {\n    @if (!disabled && editRow) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconName=\"edit\" [labelText]=\"grid.resourceStrings.igx_grid_actions_edit_label\" (actionClick)=\"startEdit($event)\"></igx-grid-action-button>\n    }\n    @if (addRow && isRootRow) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconName=\"add_row\" iconSet=\"default\" [labelText]=\"grid.resourceStrings.igx_grid_actions_add_label\" (actionClick)=\"addRowHandler($event)\"></igx-grid-action-button>\n    }\n    @if (addChild && hasChildren) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconName=\"add_child\" iconSet=\"default\" [labelText]=\"grid.resourceStrings.igx_grid_actions_add_child_label\" (actionClick)=\"addRowHandler($event, true)\"></igx-grid-action-button>\n    }\n    @if (!disabled && deleteRow) {\n        <igx-grid-action-button class=\"igx-action-strip__delete\" classNames=\"igx-action-strip__menu-item--danger\" [asMenuItem]=\"asMenuItems\" iconName=\"delete\" [labelText]=\"grid.resourceStrings.igx_grid_actions_delete_label\" (actionClick)=\"deleteRowHandler($event)\"></igx-grid-action-button>\n    }\n}\n\n" }]
         }], propDecorators: { cssClass: [{
@@ -10465,10 +10487,10 @@ class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective {
             this.iconService.addSvgIconFromText(jumpUp.name, jumpUp.value, 'imx-icons', true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridPinningActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridPinningActionsComponent, isStandalone: true, selector: "igx-grid-pinning-actions", host: { properties: { "class.igx-action-strip__pinning-actions": "this.cssClass" } }, providers: [{ provide: IgxActionStripActionsToken, useExisting: IgxGridPinningActionsComponent }], usesInheritance: true, ngImport: i0, template: "@if (isRowContext) {\n    @if (inPinnedArea && pinnedTop) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconSet=\"default\" iconName=\"jump_down\" [labelText]=\"grid.resourceStrings.igx_grid_actions_jumpDown_label\" (actionClick)=\"scrollToRow($event)\"></igx-grid-action-button>\n    }\n    @if (inPinnedArea && !pinnedTop) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconSet=\"default\" iconName=\"jump_up\" [labelText]=\"grid.resourceStrings.igx_grid_actions_jumpUp_label\" (actionClick)=\"scrollToRow($event)\"></igx-grid-action-button>\n    }\n    @if (!pinned) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconSet=\"default\" iconName=\"pin\" [labelText]=\"grid.resourceStrings.igx_grid_actions_pin_label\" (actionClick)=\"pin($event)\"></igx-grid-action-button>\n    }\n    @if (pinned) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconSet=\"default\" iconName=\"unpin\" [labelText]=\"grid.resourceStrings.igx_grid_actions_unpin_label\" (actionClick)=\"unpin($event)\"></igx-grid-action-button>\n    }\n}\n", dependencies: [{ kind: "component", type: IgxGridActionButtonComponent, selector: "igx-grid-action-button", inputs: ["asMenuItem", "iconName", "classNames", "iconSet", "labelText"], outputs: ["actionClick"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridPinningActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridPinningActionsComponent, isStandalone: true, selector: "igx-grid-pinning-actions", host: { properties: { "class.igx-action-strip__pinning-actions": "this.cssClass" } }, providers: [{ provide: IgxActionStripActionsToken, useExisting: IgxGridPinningActionsComponent }], usesInheritance: true, ngImport: i0, template: "@if (isRowContext) {\n    @if (inPinnedArea && pinnedTop) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconSet=\"default\" iconName=\"jump_down\" [labelText]=\"grid.resourceStrings.igx_grid_actions_jumpDown_label\" (actionClick)=\"scrollToRow($event)\"></igx-grid-action-button>\n    }\n    @if (inPinnedArea && !pinnedTop) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconSet=\"default\" iconName=\"jump_up\" [labelText]=\"grid.resourceStrings.igx_grid_actions_jumpUp_label\" (actionClick)=\"scrollToRow($event)\"></igx-grid-action-button>\n    }\n    @if (!pinned) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconSet=\"default\" iconName=\"pin\" [labelText]=\"grid.resourceStrings.igx_grid_actions_pin_label\" (actionClick)=\"pin($event)\"></igx-grid-action-button>\n    }\n    @if (pinned) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconSet=\"default\" iconName=\"unpin\" [labelText]=\"grid.resourceStrings.igx_grid_actions_unpin_label\" (actionClick)=\"unpin($event)\"></igx-grid-action-button>\n    }\n}\n", dependencies: [{ kind: "component", type: IgxGridActionButtonComponent, selector: "igx-grid-action-button", inputs: ["asMenuItem", "iconName", "classNames", "iconSet", "labelText"], outputs: ["actionClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridPinningActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridPinningActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-pinning-actions', providers: [{ provide: IgxActionStripActionsToken, useExisting: IgxGridPinningActionsComponent }], imports: [IgxGridActionButtonComponent], template: "@if (isRowContext) {\n    @if (inPinnedArea && pinnedTop) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconSet=\"default\" iconName=\"jump_down\" [labelText]=\"grid.resourceStrings.igx_grid_actions_jumpDown_label\" (actionClick)=\"scrollToRow($event)\"></igx-grid-action-button>\n    }\n    @if (inPinnedArea && !pinnedTop) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconSet=\"default\" iconName=\"jump_up\" [labelText]=\"grid.resourceStrings.igx_grid_actions_jumpUp_label\" (actionClick)=\"scrollToRow($event)\"></igx-grid-action-button>\n    }\n    @if (!pinned) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconSet=\"default\" iconName=\"pin\" [labelText]=\"grid.resourceStrings.igx_grid_actions_pin_label\" (actionClick)=\"pin($event)\"></igx-grid-action-button>\n    }\n    @if (pinned) {\n        <igx-grid-action-button [asMenuItem]=\"asMenuItems\" iconSet=\"default\" iconName=\"unpin\" [labelText]=\"grid.resourceStrings.igx_grid_actions_unpin_label\" (actionClick)=\"unpin($event)\"></igx-grid-action-button>\n    }\n}\n" }]
         }], propDecorators: { cssClass: [{
@@ -10477,10 +10499,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
             }] } });
 
 class IgxGridFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxGridFooterComponent, isStandalone: true, selector: "igx-grid-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IgxGridFooterComponent, isStandalone: true, selector: "igx-grid-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-grid-footer',
@@ -10595,10 +10617,10 @@ class IgxColumnMovingDragDirective extends IgxDragDirective {
             this.subscription$ = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMovingDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnMovingDragDirective, isStandalone: true, selector: "[igxColumnMovingDrag]", inputs: { column: ["igxColumnMovingDrag", "column"] }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMovingDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnMovingDragDirective, isStandalone: true, selector: "[igxColumnMovingDrag]", inputs: { column: ["igxColumnMovingDrag", "column"] }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMovingDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMovingDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxColumnMovingDrag]',
@@ -10705,10 +10727,10 @@ class IgxGroupByAreaDirective {
     }
     expressionsChanged() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGroupByAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxGroupByAreaDirective, isStandalone: true, inputs: { dropAreaTemplate: "dropAreaTemplate", grid: "grid", expressions: "expressions", dropAreaMessage: "dropAreaMessage" }, outputs: { expressionsChange: "expressionsChange" }, host: { properties: { "class.igx-grid-grouparea": "this.defaultClass" } }, viewQueries: [{ propertyName: "chips", predicate: IgxChipComponent, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGroupByAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxGroupByAreaDirective, isStandalone: true, inputs: { dropAreaTemplate: "dropAreaTemplate", grid: "grid", expressions: "expressions", dropAreaMessage: "dropAreaMessage" }, outputs: { expressionsChange: "expressionsChange" }, host: { properties: { "class.igx-grid-grouparea": "this.defaultClass" } }, viewQueries: [{ propertyName: "chips", predicate: IgxChipComponent, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGroupByAreaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGroupByAreaDirective, decorators: [{
             type: Directive
         }], propDecorators: { dropAreaTemplate: [{
                 type: Input
@@ -10739,10 +10761,10 @@ class IgxGroupByMetaPipe {
         const column = grid.getColumnByName(key);
         return { groupable: !!column?.groupable, title: column?.header || key };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGroupByMetaPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGroupByMetaPipe, isStandalone: true, name: "igxGroupByMeta" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGroupByMetaPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGroupByMetaPipe, isStandalone: true, name: "igxGroupByMeta" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGroupByMetaPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGroupByMetaPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGroupByMeta',
@@ -10760,10 +10782,10 @@ class IgxGroupByRowTemplateDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGroupByRowTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxGroupByRowTemplateDirective, isStandalone: true, selector: "[igxGroupByRow]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGroupByRowTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxGroupByRowTemplateDirective, isStandalone: true, selector: "[igxGroupByRow]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGroupByRowTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGroupByRowTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGroupByRow]',
@@ -10777,10 +10799,10 @@ class IgxGridDetailTemplateDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxGridDetailTemplateDirective, isStandalone: true, selector: "[igxGridDetail]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxGridDetailTemplateDirective, isStandalone: true, selector: "[igxGridDetail]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridDetailTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridDetailTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridDetail]',
@@ -10794,10 +10816,10 @@ class IgxRowExpandedIndicatorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxRowExpandedIndicatorDirective, isStandalone: true, selector: "[igxRowExpandedIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxRowExpandedIndicatorDirective, isStandalone: true, selector: "[igxRowExpandedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowExpandedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowExpandedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowExpandedIndicator]',
@@ -10811,10 +10833,10 @@ class IgxRowCollapsedIndicatorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxRowCollapsedIndicatorDirective, isStandalone: true, selector: "[igxRowCollapsedIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxRowCollapsedIndicatorDirective, isStandalone: true, selector: "[igxRowCollapsedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowCollapsedIndicator]',
@@ -10828,10 +10850,10 @@ class IgxHeaderExpandedIndicatorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxHeaderExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxHeaderExpandedIndicatorDirective, isStandalone: true, selector: "[igxHeaderExpandedIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHeaderExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxHeaderExpandedIndicatorDirective, isStandalone: true, selector: "[igxHeaderExpandedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxHeaderExpandedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHeaderExpandedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeaderExpandedIndicator]',
@@ -10845,10 +10867,10 @@ class IgxHeaderCollapsedIndicatorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxHeaderCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxHeaderCollapsedIndicatorDirective, isStandalone: true, selector: "[igxHeaderCollapsedIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHeaderCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxHeaderCollapsedIndicatorDirective, isStandalone: true, selector: "[igxHeaderCollapsedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxHeaderCollapsedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHeaderCollapsedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeaderCollapsedIndicator]',
@@ -10862,10 +10884,10 @@ class IgxExcelStyleHeaderIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxExcelStyleHeaderIconDirective, isStandalone: true, selector: "[igxExcelStyleHeaderIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxExcelStyleHeaderIconDirective, isStandalone: true, selector: "[igxExcelStyleHeaderIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleHeaderIcon]',
@@ -10879,10 +10901,10 @@ class IgxSortHeaderIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSortHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxSortHeaderIconDirective, isStandalone: true, selector: "[igxSortHeaderIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSortHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxSortHeaderIconDirective, isStandalone: true, selector: "[igxSortHeaderIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSortHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSortHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSortHeaderIcon]',
@@ -10896,10 +10918,10 @@ class IgxSortAscendingHeaderIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxSortAscendingHeaderIconDirective, isStandalone: true, selector: "[igxSortAscendingHeaderIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxSortAscendingHeaderIconDirective, isStandalone: true, selector: "[igxSortAscendingHeaderIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSortAscendingHeaderIcon]',
@@ -10913,10 +10935,10 @@ class IgxSortDescendingHeaderIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxSortDescendingHeaderIconDirective, isStandalone: true, selector: "[igxSortDescendingHeaderIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxSortDescendingHeaderIconDirective, isStandalone: true, selector: "[igxSortDescendingHeaderIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSortDescendingHeaderIcon]',
@@ -10928,10 +10950,10 @@ class IgxGridLoadingTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxGridLoadingTemplateDirective, isStandalone: true, selector: "[igxGridLoading]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxGridLoadingTemplateDirective, isStandalone: true, selector: "[igxGridLoading]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridLoadingTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridLoadingTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridLoading]',
@@ -10943,10 +10965,10 @@ class IgxGridEmptyTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridEmptyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxGridEmptyTemplateDirective, isStandalone: true, selector: "[igxGridEmpty]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridEmptyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxGridEmptyTemplateDirective, isStandalone: true, selector: "[igxGridEmpty]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridEmptyTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridEmptyTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridEmpty]',
@@ -11008,10 +11030,10 @@ class IgxGroupAreaDropDirective extends IgxDropDirective {
             return true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGroupAreaDropDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxGroupAreaDropDirective, isStandalone: true, selector: "[igxGroupAreaDrop]", host: { properties: { "class.igx-drop-area--hover": "this.hovered" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGroupAreaDropDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxGroupAreaDropDirective, isStandalone: true, selector: "[igxGroupAreaDrop]", host: { properties: { "class.igx-drop-area--hover": "this.hovered" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGroupAreaDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGroupAreaDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGroupAreaDrop]',
@@ -11217,10 +11239,10 @@ class IgxColumnResizingService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnResizingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnResizingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnResizingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnResizingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnResizingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnResizingService, decorators: [{
             type: Injectable
         }] });
 
@@ -11229,10 +11251,10 @@ class SortingIndexPipe {
         let sortIndex = sortingExpressions.findIndex(expression => expression.fieldName === columnField);
         return sortIndex !== -1 ? ++sortIndex : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SortingIndexPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: SortingIndexPipe, isStandalone: true, name: "sortingIndex" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SortingIndexPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SortingIndexPipe, isStandalone: true, name: "sortingIndex" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SortingIndexPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SortingIndexPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sortingIndex',
@@ -11251,10 +11273,10 @@ class IgxHeaderGroupStylePipe {
         }
         return css;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxHeaderGroupStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxHeaderGroupStylePipe, isStandalone: true, name: "igxHeaderGroupStyle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHeaderGroupStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxHeaderGroupStylePipe, isStandalone: true, name: "igxHeaderGroupStyle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxHeaderGroupStylePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHeaderGroupStylePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxHeaderGroupStyle',
@@ -11505,10 +11527,10 @@ class IgxGridHeaderComponent {
             strategy: this.column.sortStrategy
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridHeaderComponent, isStandalone: true, selector: "igx-grid-header", inputs: { column: "column", id: "id" }, host: { listeners: { "click": "onClick($event)", "pointerenter": "onPinterEnter()", "pointerleave": "onPointerLeave()" }, properties: { "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS", "attr.id": "this.id", "attr.aria-selected": "this.ariaSelected", "attr.aria-sort": "this.ariaSort", "attr.aria-colindex": "this.ariaColIndx", "attr.aria-rowindex": "this.ariaRowIndx", "class.igx-grid-th": "this.columnGroupStyle", "class.asc": "this.sortAscendingStyle", "class.desc": "this.sortDescendingStyle", "class.igx-grid-th--number": "this.numberStyle", "class.igx-grid-th--sortable": "this.sortableStyle", "class.igx-grid-th--selectable": "this.selectableStyle", "class.igx-grid-th--filtrable": "this.filterableStyle", "class.igx-grid-th--sorted": "this.sortedStyle", "class.igx-grid-th--selected": "this.selectedStyle" } }, viewQueries: [{ propertyName: "defaultESFHeaderIconTemplate", first: true, predicate: ["defaultESFHeaderIconTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSortHeaderIconTemplate", first: true, predicate: ["defaultSortHeaderIconTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "sortIconContainer", first: true, predicate: ["sortIconContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-template #defaultColumn>\n    <span [title]=\"title\">{{ column.header || column.field }}</span>\n</ng-template>\n\n<ng-template #defaultESFHeaderIconTemplate>\n    <igx-icon family=\"default\" name=\"more_vert\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultSortHeaderIconTemplate>\n    <igx-icon\n        family=\"default\"\n        [name]=\"sortDirection < 2 ? 'sort_asc' : 'sort_desc'\">\n    </igx-icon>\n</ng-template>\n\n<span class=\"igx-grid-th__title\">\n    <ng-container\n        *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n    </ng-container>\n</span>\n@if (!column.columnGroup) {\n    <div class=\"igx-grid-th__icons\">\n        @if (column.sortable && !disabled) {\n            <div #sortIconContainer class=\"sort-icon\"\n                [attr.data-sortIndex]=\"(grid.sortingOptions.mode === 'single' && grid.sortingExpressions.length <=1) ? null : column.field | sortingIndex:grid.sortingExpressions\"\n                (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"onSortingIconClick($event)\">\n                <ng-container *ngTemplateOutlet=\"sortIconTemplate; context: { $implicit:  this }\"></ng-container>\n            </div>\n        }\n        @if (grid.allowFiltering && column.filterable && grid.filterMode === 'excelStyleFilter') {\n            <div [ngClass]=\"filterIconClassName\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"onFilteringIconClick($event)\" >\n                <ng-container *ngTemplateOutlet=\"esfIconTemplate; context: { $implicit:  this }\"></ng-container>\n            </div>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SortingIndexPipe, name: "sortingIndex" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridHeaderComponent, isStandalone: true, selector: "igx-grid-header", inputs: { column: "column", id: "id" }, host: { listeners: { "click": "onClick($event)", "pointerenter": "onPinterEnter()", "pointerleave": "onPointerLeave()" }, properties: { "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS", "attr.id": "this.id", "attr.aria-selected": "this.ariaSelected", "attr.aria-sort": "this.ariaSort", "attr.aria-colindex": "this.ariaColIndx", "attr.aria-rowindex": "this.ariaRowIndx", "class.igx-grid-th": "this.columnGroupStyle", "class.asc": "this.sortAscendingStyle", "class.desc": "this.sortDescendingStyle", "class.igx-grid-th--number": "this.numberStyle", "class.igx-grid-th--sortable": "this.sortableStyle", "class.igx-grid-th--selectable": "this.selectableStyle", "class.igx-grid-th--filtrable": "this.filterableStyle", "class.igx-grid-th--sorted": "this.sortedStyle", "class.igx-grid-th--selected": "this.selectedStyle" } }, viewQueries: [{ propertyName: "defaultESFHeaderIconTemplate", first: true, predicate: ["defaultESFHeaderIconTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSortHeaderIconTemplate", first: true, predicate: ["defaultSortHeaderIconTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "sortIconContainer", first: true, predicate: ["sortIconContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-template #defaultColumn>\n    <span [title]=\"title\">{{ column.header || column.field }}</span>\n</ng-template>\n\n<ng-template #defaultESFHeaderIconTemplate>\n    <igx-icon family=\"default\" name=\"more_vert\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultSortHeaderIconTemplate>\n    <igx-icon\n        family=\"default\"\n        [name]=\"sortDirection < 2 ? 'sort_asc' : 'sort_desc'\">\n    </igx-icon>\n</ng-template>\n\n<span class=\"igx-grid-th__title\">\n    <ng-container\n        *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n    </ng-container>\n</span>\n@if (!column.columnGroup) {\n    <div class=\"igx-grid-th__icons\">\n        @if (column.sortable && !disabled) {\n            <div #sortIconContainer class=\"sort-icon\"\n                [attr.data-sortIndex]=\"(grid.sortingOptions.mode === 'single' && grid.sortingExpressions.length <=1) ? null : column.field | sortingIndex:grid.sortingExpressions\"\n                (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"onSortingIconClick($event)\">\n                <ng-container *ngTemplateOutlet=\"sortIconTemplate; context: { $implicit:  this }\"></ng-container>\n            </div>\n        }\n        @if (grid.allowFiltering && column.filterable && grid.filterMode === 'excelStyleFilter') {\n            <div [ngClass]=\"filterIconClassName\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"onFilteringIconClick($event)\" >\n                <ng-container *ngTemplateOutlet=\"esfIconTemplate; context: { $implicit:  this }\"></ng-container>\n            </div>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SortingIndexPipe, name: "sortingIndex" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridHeaderComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header', imports: [IgxIconComponent, NgTemplateOutlet, NgClass, SortingIndexPipe], template: "<ng-template #defaultColumn>\n    <span [title]=\"title\">{{ column.header || column.field }}</span>\n</ng-template>\n\n<ng-template #defaultESFHeaderIconTemplate>\n    <igx-icon family=\"default\" name=\"more_vert\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultSortHeaderIconTemplate>\n    <igx-icon\n        family=\"default\"\n        [name]=\"sortDirection < 2 ? 'sort_asc' : 'sort_desc'\">\n    </igx-icon>\n</ng-template>\n\n<span class=\"igx-grid-th__title\">\n    <ng-container\n        *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n    </ng-container>\n</span>\n@if (!column.columnGroup) {\n    <div class=\"igx-grid-th__icons\">\n        @if (column.sortable && !disabled) {\n            <div #sortIconContainer class=\"sort-icon\"\n                [attr.data-sortIndex]=\"(grid.sortingOptions.mode === 'single' && grid.sortingExpressions.length <=1) ? null : column.field | sortingIndex:grid.sortingExpressions\"\n                (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"onSortingIconClick($event)\">\n                <ng-container *ngTemplateOutlet=\"sortIconTemplate; context: { $implicit:  this }\"></ng-container>\n            </div>\n        }\n        @if (grid.allowFiltering && column.filterable && grid.filterMode === 'excelStyleFilter') {\n            <div [ngClass]=\"filterIconClassName\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"onFilteringIconClick($event)\" >\n                <ng-container *ngTemplateOutlet=\"esfIconTemplate; context: { $implicit:  this }\"></ng-container>\n            </div>\n        }\n    </div>\n}\n" }]
         }], propDecorators: { column: [{
@@ -12087,10 +12109,10 @@ class IgxFilteringService {
         }
         return count;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxFilteringService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxFilteringService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxFilteringService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxFilteringService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxFilteringService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxFilteringService, decorators: [{
             type: Injectable
         }] });
 
@@ -12268,10 +12290,10 @@ class IgxGridFilteringCellComponent {
             this.cdr.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridFilteringCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridFilteringCellComponent, isStandalone: true, selector: "igx-grid-filtering-cell", inputs: { column: "column" }, host: { properties: { "class": "this.styleClasses", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS" } }, viewQueries: [{ propertyName: "emptyFilter", first: true, predicate: ["emptyFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultFilter", first: true, predicate: ["defaultFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexFilter", first: true, predicate: ["complexFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent }, { propertyName: "moreIcon", first: true, predicate: ["moreIcon"], descendants: true, read: ElementRef }, { propertyName: "ghostChip", first: true, predicate: ["ghostChip"], descendants: true, read: IgxChipComponent }, { propertyName: "complexChip", first: true, predicate: ["complexChip"], descendants: true, read: IgxChipComponent }], ngImport: i0, template: "<ng-template #emptyFilter>\n    <igx-chips-area [attr.draggable]=\"false\" class=\"igx-filtering-chips\">\n        <igx-chip #ghostChip [attr.draggable]=\"false\" (click)=\"onChipClicked()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon\n                [attr.draggable]=\"false\"\n                igxPrefix\n                family=\"default\"\n                name=\"filter_list\"\n            ></igx-icon>\n            <span [attr.draggable]=\"false\">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>\n        </igx-chip>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #defaultFilter>\n    <igx-chips-area #chipsArea class=\"igx-filtering-chips\">\n        <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n        @for (item of expressionsList; track item.expression; let last = $last; let index = $index) {\n            @if (isChipVisible(index)) {\n                <igx-chip\n                    [removable]=\"true\"\n                    [tabIndex]=\"-1\"\n                    [style.--ig-size]=\"filteringElementsSize\"\n                    (click)=\"onChipClicked(item.expression)\"\n                    (remove)=\"onChipRemoved($event, item)\">\n                    <igx-icon igxPrefix\n                        family=\"default\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span #label>\n                        {{filteringService.getChipLabel(item.expression)}}\n                    </span>\n                </igx-chip>\n            }\n            @if (!last && isChipVisible(index + 1)) {\n                <span class=\"igx-filtering-chips__connector\">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n            }\n        }\n        <div #moreIcon [ngClass]=\"filteringIndicatorClass()\" (click)=\"onChipClicked()\">\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n            <igx-badge [value]=\"moreFiltersCount\"></igx-badge>\n        </div>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #complexFilter>\n    <igx-chip #complexChip [removable]=\"true\" (remove)=\"clearFiltering()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-icon igxPrefix family=\"default\" name=\"filter_list\"></igx-icon>\n        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>\n    </igx-chip>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridFilteringCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridFilteringCellComponent, isStandalone: true, selector: "igx-grid-filtering-cell", inputs: { column: "column" }, host: { properties: { "class": "this.styleClasses", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS" } }, viewQueries: [{ propertyName: "emptyFilter", first: true, predicate: ["emptyFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultFilter", first: true, predicate: ["defaultFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexFilter", first: true, predicate: ["complexFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent }, { propertyName: "moreIcon", first: true, predicate: ["moreIcon"], descendants: true, read: ElementRef }, { propertyName: "ghostChip", first: true, predicate: ["ghostChip"], descendants: true, read: IgxChipComponent }, { propertyName: "complexChip", first: true, predicate: ["complexChip"], descendants: true, read: IgxChipComponent }], ngImport: i0, template: "<ng-template #emptyFilter>\n    <igx-chips-area [attr.draggable]=\"false\" class=\"igx-filtering-chips\">\n        <igx-chip #ghostChip [attr.draggable]=\"false\" (click)=\"onChipClicked()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon\n                [attr.draggable]=\"false\"\n                igxPrefix\n                family=\"default\"\n                name=\"filter_list\"\n            ></igx-icon>\n            <span [attr.draggable]=\"false\">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>\n        </igx-chip>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #defaultFilter>\n    <igx-chips-area #chipsArea class=\"igx-filtering-chips\">\n        <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n        @for (item of expressionsList; track item.expression; let last = $last; let index = $index) {\n            @if (isChipVisible(index)) {\n                <igx-chip\n                    [removable]=\"true\"\n                    [tabIndex]=\"-1\"\n                    [style.--ig-size]=\"filteringElementsSize\"\n                    (click)=\"onChipClicked(item.expression)\"\n                    (remove)=\"onChipRemoved($event, item)\">\n                    <igx-icon igxPrefix\n                        family=\"default\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span #label>\n                        {{filteringService.getChipLabel(item.expression)}}\n                    </span>\n                </igx-chip>\n            }\n            @if (!last && isChipVisible(index + 1)) {\n                <span class=\"igx-filtering-chips__connector\">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n            }\n        }\n        <div #moreIcon [ngClass]=\"filteringIndicatorClass()\" (click)=\"onChipClicked()\">\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n            <igx-badge [value]=\"moreFiltersCount\"></igx-badge>\n        </div>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #complexFilter>\n    <igx-chip #complexChip [removable]=\"true\" (remove)=\"clearFiltering()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-icon igxPrefix family=\"default\" name=\"filter_list\"></igx-icon>\n        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>\n    </igx-chip>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridFilteringCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridFilteringCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-filtering-cell', imports: [
                         IgxChipsAreaComponent,
@@ -12399,10 +12421,10 @@ class IgxResizeHandleDirective {
             this.colResizingService.startResizePos = event.clientX;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxResizeHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxResizeHandleDirective, isStandalone: true, selector: "[igxResizeHandle]", inputs: { column: ["igxResizeHandle", "column"] }, host: { listeners: { "dblclick": "onDoubleClick()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxResizeHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxResizeHandleDirective, isStandalone: true, selector: "[igxResizeHandle]", inputs: { column: ["igxResizeHandle", "column"] }, host: { listeners: { "dblclick": "onDoubleClick()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxResizeHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxResizeHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxResizeHandle]',
@@ -12546,10 +12568,10 @@ class IgxColumnMovingDropDirective extends IgxDropDirective {
             this.column.grid.cdr.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMovingDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnMovingDropDirective, isStandalone: true, selector: "[igxColumnMovingDrop]", inputs: { data: ["igxColumnMovingDrop", "data"] }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMovingDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnMovingDropDirective, isStandalone: true, selector: "[igxColumnMovingDrop]", inputs: { data: ["igxColumnMovingDrop", "data"] }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnMovingDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnMovingDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxColumnMovingDrop]',
@@ -12806,10 +12828,10 @@ class IgxGridHeaderGroupComponent {
             } : null
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridHeaderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridHeaderGroupComponent, isStandalone: true, selector: "igx-grid-header-group", inputs: { column: "column" }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "style.grid-row-end": "this.rowEnd", "style.grid-column-end": "this.colEnd", "style.grid-row-start": "this.rowStart", "style.grid-column-start": "this.colStart", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--active": "this.active", "class.igx-grid-thead__item": "this.defaultCss", "class.igx-grid__drag-col-header": "this.headerDragCss", "class.igx-grid-th--filtering": "this.filteringCss", "style.z-index": "this.zIndex", "style.display": "this.groupDisplayStyle" } }, viewQueries: [{ propertyName: "header", first: true, predicate: IgxGridHeaderComponent, descendants: true }, { propertyName: "filter", first: true, predicate: IgxGridFilteringCellComponent, descendants: true }, { propertyName: "children", predicate: i0.forwardRef(() => IgxGridHeaderGroupComponent), descendants: true, read: IgxGridHeaderGroupComponent }], ngImport: i0, template: "@if (grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__group igx-grid__mrl-block\"\n     [ngClass]=\"{\n         'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n         'igx-grid-th--pinned-first': hasFirstPinnedChildColumn\n        }\"\n     [ngStyle]=\"{'grid-template-rows':column.getGridTemplate(true),\n     'grid-template-columns':column.getGridTemplate(false)}\">\n        @for (child of column.children; track child) {\n            @if (!child.hidden) {\n                <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                    [ngClass]=\"child.headerGroupClasses\"\n                    [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                    [column]=\"child\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n\n<ng-template #defaultColumn>\n    <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n    <igx-icon\n        family=\"default\"\n        [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n    </igx-icon>\n</ng-template>\n\n@if (!grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__title\"\n        role=\"columnheader\"\n        [id]=\"headerID\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        [attr.aria-label]=\"column.header || column.field\"\n        [attr.aria-expanded]=\"column.expanded\"\n        [attr.aria-selected]=\"column.selected\"\n        [attr.aria-colindex]=\"column.index + 1\"\n        [attr.aria-colspan]=\"column.children.length\"\n        [attr.aria-rowindex]=\"1\"\n        [ngClass]=\"{\n            'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n            'igx-grid-th--pinned-first': hasFirstPinnedChildColumn,\n            'igx-grid-th--collapsible': column.collapsible,\n            'igx-grid-th--selectable': selectable,\n            'igx-grid-th--selected': selected,\n            'igx-grid-th--active': activeGroup}\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        [igxColumnMovingDrop]=\"column\"\n        (pointerdown)=\"pointerdown($event)\"\n        (click)=\"groupClicked($event)\"\n        (pointerenter)=\"onPinterEnter()\"\n        (pointerleave)=\"onPointerLeave()\"\n        [style.max-width]=\"column.resolvedWidth\"\n        [style.flex-basis]=\"column.resolvedWidth\"\n        >\n        @if (column.collapsible) {\n            <div class=\"igx-grid-th__expander\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"toggleExpandState($event)\">\n                <ng-container\n                    *ngTemplateOutlet=\"column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}\">\n                </ng-container>\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n        </ng-container>\n    </div>\n    @if (grid.type !== 'pivot') {\n        <div class=\"igx-grid-thead__group\">\n            @for (child of column.children; track child) {\n                @if (!child.hidden) {\n                    <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                        [ngClass]=\"child.headerGroupClasses\"\n                        [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                        [column]=\"child\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n@if (!column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-grid-header\n        role=\"columnheader\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"headerID\"\n        [ngClass]=\"column.headerClasses\"\n        [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        (pointerdown)=\"activate()\"\n        [style.width]=\"column.resolvedWidth\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n    >\n    </igx-grid-header>\n    @if (grid.allowFiltering && grid.filterMode === 'quickFilter') {\n        <igx-grid-filtering-cell [column]=\"column\" [attr.draggable]=\"false\" [style.width]=\"column.resolvedWidth\"></igx-grid-filtering-cell>\n    }\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxResizeHandle]=\"column\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n", dependencies: [{ kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxColumnMovingDragDirective, selector: "[igxColumnMovingDrag]", inputs: ["igxColumnMovingDrag"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderComponent, selector: "igx-grid-header", inputs: ["column", "id"] }, { kind: "component", type: IgxGridFilteringCellComponent, selector: "igx-grid-filtering-cell", inputs: ["column"] }, { kind: "directive", type: IgxResizeHandleDirective, selector: "[igxResizeHandle]", inputs: ["igxResizeHandle"] }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridHeaderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridHeaderGroupComponent, isStandalone: true, selector: "igx-grid-header-group", inputs: { column: "column" }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "style.grid-row-end": "this.rowEnd", "style.grid-column-end": "this.colEnd", "style.grid-row-start": "this.rowStart", "style.grid-column-start": "this.colStart", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--active": "this.active", "class.igx-grid-thead__item": "this.defaultCss", "class.igx-grid__drag-col-header": "this.headerDragCss", "class.igx-grid-th--filtering": "this.filteringCss", "style.z-index": "this.zIndex", "style.display": "this.groupDisplayStyle" } }, viewQueries: [{ propertyName: "header", first: true, predicate: IgxGridHeaderComponent, descendants: true }, { propertyName: "filter", first: true, predicate: IgxGridFilteringCellComponent, descendants: true }, { propertyName: "children", predicate: i0.forwardRef(() => IgxGridHeaderGroupComponent), descendants: true, read: IgxGridHeaderGroupComponent }], ngImport: i0, template: "@if (grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__group igx-grid__mrl-block\"\n     [ngClass]=\"{\n         'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n         'igx-grid-th--pinned-first': hasFirstPinnedChildColumn\n        }\"\n     [ngStyle]=\"{'grid-template-rows':column.getGridTemplate(true),\n     'grid-template-columns':column.getGridTemplate(false)}\">\n        @for (child of column.children; track child) {\n            @if (!child.hidden) {\n                <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                    [ngClass]=\"child.headerGroupClasses\"\n                    [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                    [column]=\"child\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n\n<ng-template #defaultColumn>\n    <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n    <igx-icon\n        family=\"default\"\n        [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n    </igx-icon>\n</ng-template>\n\n@if (!grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__title\"\n        role=\"columnheader\"\n        [id]=\"headerID\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        [attr.aria-label]=\"column.header || column.field\"\n        [attr.aria-expanded]=\"column.expanded\"\n        [attr.aria-selected]=\"column.selected\"\n        [attr.aria-colindex]=\"column.index + 1\"\n        [attr.aria-colspan]=\"column.children.length\"\n        [attr.aria-rowindex]=\"1\"\n        [ngClass]=\"{\n            'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n            'igx-grid-th--pinned-first': hasFirstPinnedChildColumn,\n            'igx-grid-th--collapsible': column.collapsible,\n            'igx-grid-th--selectable': selectable,\n            'igx-grid-th--selected': selected,\n            'igx-grid-th--active': activeGroup}\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        [igxColumnMovingDrop]=\"column\"\n        (pointerdown)=\"pointerdown($event)\"\n        (click)=\"groupClicked($event)\"\n        (pointerenter)=\"onPinterEnter()\"\n        (pointerleave)=\"onPointerLeave()\"\n        [style.max-width]=\"column.resolvedWidth\"\n        [style.flex-basis]=\"column.resolvedWidth\"\n        >\n        @if (column.collapsible) {\n            <div class=\"igx-grid-th__expander\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"toggleExpandState($event)\">\n                <ng-container\n                    *ngTemplateOutlet=\"column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}\">\n                </ng-container>\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n        </ng-container>\n    </div>\n    @if (grid.type !== 'pivot') {\n        <div class=\"igx-grid-thead__group\">\n            @for (child of column.children; track child) {\n                @if (!child.hidden) {\n                    <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                        [ngClass]=\"child.headerGroupClasses\"\n                        [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                        [column]=\"child\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n@if (!column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-grid-header\n        role=\"columnheader\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"headerID\"\n        [ngClass]=\"column.headerClasses\"\n        [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        (pointerdown)=\"activate()\"\n        [style.width]=\"column.resolvedWidth\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n    >\n    </igx-grid-header>\n    @if (grid.allowFiltering && grid.filterMode === 'quickFilter') {\n        <igx-grid-filtering-cell [column]=\"column\" [attr.draggable]=\"false\" [style.width]=\"column.resolvedWidth\"></igx-grid-filtering-cell>\n    }\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxResizeHandle]=\"column\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n", dependencies: [{ kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxColumnMovingDragDirective, selector: "[igxColumnMovingDrag]", inputs: ["igxColumnMovingDrag"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderComponent, selector: "igx-grid-header", inputs: ["column", "id"] }, { kind: "component", type: IgxGridFilteringCellComponent, selector: "igx-grid-filtering-cell", inputs: ["column"] }, { kind: "directive", type: IgxResizeHandleDirective, selector: "[igxResizeHandle]", inputs: ["igxResizeHandle"] }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridHeaderGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridHeaderGroupComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-group', imports: [NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupStylePipe], template: "@if (grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__group igx-grid__mrl-block\"\n     [ngClass]=\"{\n         'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n         'igx-grid-th--pinned-first': hasFirstPinnedChildColumn\n        }\"\n     [ngStyle]=\"{'grid-template-rows':column.getGridTemplate(true),\n     'grid-template-columns':column.getGridTemplate(false)}\">\n        @for (child of column.children; track child) {\n            @if (!child.hidden) {\n                <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                    [ngClass]=\"child.headerGroupClasses\"\n                    [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                    [column]=\"child\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n\n<ng-template #defaultColumn>\n    <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n    <igx-icon\n        family=\"default\"\n        [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n    </igx-icon>\n</ng-template>\n\n@if (!grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__title\"\n        role=\"columnheader\"\n        [id]=\"headerID\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        [attr.aria-label]=\"column.header || column.field\"\n        [attr.aria-expanded]=\"column.expanded\"\n        [attr.aria-selected]=\"column.selected\"\n        [attr.aria-colindex]=\"column.index + 1\"\n        [attr.aria-colspan]=\"column.children.length\"\n        [attr.aria-rowindex]=\"1\"\n        [ngClass]=\"{\n            'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n            'igx-grid-th--pinned-first': hasFirstPinnedChildColumn,\n            'igx-grid-th--collapsible': column.collapsible,\n            'igx-grid-th--selectable': selectable,\n            'igx-grid-th--selected': selected,\n            'igx-grid-th--active': activeGroup}\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        [igxColumnMovingDrop]=\"column\"\n        (pointerdown)=\"pointerdown($event)\"\n        (click)=\"groupClicked($event)\"\n        (pointerenter)=\"onPinterEnter()\"\n        (pointerleave)=\"onPointerLeave()\"\n        [style.max-width]=\"column.resolvedWidth\"\n        [style.flex-basis]=\"column.resolvedWidth\"\n        >\n        @if (column.collapsible) {\n            <div class=\"igx-grid-th__expander\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"toggleExpandState($event)\">\n                <ng-container\n                    *ngTemplateOutlet=\"column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}\">\n                </ng-container>\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n        </ng-container>\n    </div>\n    @if (grid.type !== 'pivot') {\n        <div class=\"igx-grid-thead__group\">\n            @for (child of column.children; track child) {\n                @if (!child.hidden) {\n                    <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                        [ngClass]=\"child.headerGroupClasses\"\n                        [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                        [column]=\"child\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n@if (!column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-grid-header\n        role=\"columnheader\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"headerID\"\n        [ngClass]=\"column.headerClasses\"\n        [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        (pointerdown)=\"activate()\"\n        [style.width]=\"column.resolvedWidth\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n    >\n    </igx-grid-header>\n    @if (grid.allowFiltering && grid.filterMode === 'quickFilter') {\n        <igx-grid-filtering-cell [column]=\"column\" [attr.draggable]=\"false\" [style.width]=\"column.resolvedWidth\"></igx-grid-filtering-cell>\n    }\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxResizeHandle]=\"column\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n" }]
         }], propDecorators: { rowEnd: [{
@@ -13555,10 +13577,10 @@ class IgxGridFilteringRowComponent {
     get isNarrowWidth() {
         return this.nativeElement.offsetWidth < this.NARROW_WIDTH_THRESHOLD;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridFilteringRowComponent, isStandalone: true, selector: "igx-grid-filtering-row", inputs: { column: "column", value: "value" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, properties: { "class.igx-grid__filtering-row": "this.defaultCSSClass" } }, viewQueries: [{ propertyName: "defaultFilterUI", first: true, predicate: ["defaultFilterUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateUI", first: true, predicate: ["defaultDateUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTimeUI", first: true, predicate: ["defaultTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateTimeUI", first: true, predicate: ["defaultDateTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }, { propertyName: "dropDownConditions", first: true, predicate: ["inputGroupConditions"], descendants: true, read: IgxDropDownComponent, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent, static: true }, { propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "inputGroupPrefix", first: true, predicate: ["inputGroupPrefix"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "operand", first: true, predicate: ["operand"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, static: true }, { propertyName: "dropDownOperators", predicate: ["operators"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [style.--ig-size]=\"filteringElementsSize\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n    @for (condition of conditions; track condition) {\n        <igx-drop-down-item\n            [value]=\"condition\"\n            [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n            </div>\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n    <igx-input-group #inputGroup type=\"box\" (focusout)=\"onInputGroupFocusout()\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            autocomplete=\"off\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            [type]=\"type\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n        @if (value || value === 0) {\n            <igx-suffix>\n                <igx-icon\n                    (keydown)=\"onCommitKeyDown($event)\"\n                    (click)=\"onCommitClick()\"\n                    tabindex=\"0\"\n                    family=\"default\"\n                    name=\"confirm\">\n                </igx-icon>\n                <igx-icon\n                    (keydown)=\"onClearKeyDown($event)\"\n                    (click)=\"onClearClick()\"\n                    tabindex=\"0\"\n                    family=\"default\"\n                    name=\"input_clear\">\n                </igx-icon>\n            </igx-suffix>\n        }\n    </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n    <igx-date-picker #picker\n        [(value)]=\"value\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [locale]=\"filteringService.grid.locale\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\"\n        type=\"box\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [formatter]=\"column.formatter\"\n        [placeholder]=\"placeholder\"\n        [weekStart]=\"column.pipeArgs.weekStart\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (closed)=\"focusEditElement()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"default\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        @if (value) {\n            <igx-suffix>\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"onCommitKeyDown($event)\"\n                    (click)=\"onCommitClick($event)\"\n                    family=\"default\"\n                    name=\"confirm\">\n                </igx-icon>\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"onClearKeyDown($event)\"\n                    (click)=\"clearInput($event)\"\n                    family=\"default\"\n                    name=\"input_clear\">\n                </igx-icon>\n            </igx-suffix>\n        }\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n    <igx-time-picker #picker\n        [(value)]=\"value\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [locale]=\"filteringService.grid.locale\"\n        [formatter]=\"column.formatter\"\n        [outlet]=\"filteringService.grid.outlet\"\n        type=\"box\"\n        [style.--ig-size]=\"filteringElementsSize\"\n        [placeholder]=\"placeholder\"\n        (closed)=\"focusEditElement()\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"default\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        @if (value) {\n            <igx-suffix>\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"onCommitKeyDown($event)\"\n                    (click)=\"onCommitClick($event)\"\n                    family=\"default\"\n                    name=\"confirm\">\n                </igx-icon>\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"onClearKeyDown($event)\"\n                    (click)=\"clearInput($event)\"\n                    family=\"default\"\n                    name=\"input_clear\">\n                </igx-icon>\n            </igx-suffix>\n        }\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n    <igx-input-group #inputGroup type=\"box\" (focusout)=\"onInputGroupFocusout()\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            [locale]=\"filteringService.grid.locale\"\n            [displayFormat]=\"column.pipeArgs.format\"\n            [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n            defaultFormatType=\"dateTime\"\n            [value]=\"value\"\n            (valueChange)=\"onInput($event)\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n        @if (value || value === 0) {\n            <igx-suffix>\n                <igx-icon\n                    (keydown)=\"onCommitKeyDown($event)\"\n                    (click)=\"onCommitClick()\"\n                    tabindex=\"0\"\n                    family=\"default\"\n                    name=\"confirm\">\n                </igx-icon>\n                <igx-icon\n                    (keydown)=\"onClearKeyDown($event)\"\n                    (click)=\"onClearClick()\"\n                    tabindex=\"0\"\n                    family=\"default\"\n                    name=\"input_clear\">\n                </igx-icon>\n            </igx-suffix>\n        }\n    </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n@if (showArrows) {\n    <button igxIconButton=\"flat\" type=\"button\" class=\"igx-grid__filtering-row-scroll-start\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n        <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n    </button>\n}\n\n<div #container class=\"igx-grid__filtering-row-main\">\n    <div>\n        <igx-chips-area #chipsArea>\n            <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n            @for (item of expressionsList; track item.expression; let i = $index; let last = $last) {\n                <ng-container tabindex=\"0\">\n                    <igx-chip #chip id=\"chip\"\n                        (pointerdown)=\"onChipPointerdown($event, chip)\"\n                        (click)=\"onChipClick($event, item)\"\n                        (keydown)=\"onChipKeyDown($event, item)\"\n                        (remove)=\"onChipRemoved($event, item)\"\n                        [selectable]=\"false\"\n                        [selected]=\"item.isSelected\"\n                        [style.--ig-size]=\"filteringElementsSize\"\n                        [removable]=\"true\">\n                        <igx-icon\n                            igxPrefix\n                            family=\"default\"\n                            [name]=\"item.expression.condition.iconName\">\n                        </igx-icon>\n                        <span>{{filteringService.getChipLabel(item.expression)}}</span>\n                    </igx-chip>\n                    @if (!last) {\n                        <span id=\"operand\">\n                            <button\n                                igxButton\n                                type=\"button\"\n                                (click)=\"toggleOperatorsDropDown($event, i)\"\n                                [igxDropDownItemNavigation]=\"operators\"\n                                [style.--ig-size]=\"filteringElementsSize\">\n                                <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n                                <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n                            </button>\n                            <igx-drop-down #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n                                <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n                                <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n                            </igx-drop-down>\n                        </span>\n                    }\n                </ng-container>\n            }\n        </igx-chips-area>\n    </div>\n</div>\n\n@if (showArrows) {\n    <button igxIconButton=\"flat\" type=\"button\" class=\"igx-grid__filtering-row-scroll-end\" (click)=\"scrollChipsOnArrowPress('right')\">\n        <igx-icon family=\"default\" name=\"next\"></igx-icon>\n    </button>\n}\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n    @if (!isNarrowWidth) {\n        <button igxButton=\"flat\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n            <span>{{ filteringService.grid.resourceStrings.igx_grid_filter_row_reset }}</span>\n        </button>\n        <button #closeButton igxButton=\"flat\" type=\"button\" igxRipple (click)=\"close()\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon family=\"default\" name=\"close\"></igx-icon>\n            <span>{{ filteringService.grid.resourceStrings.igx_grid_filter_row_close }}</span>\n        </button>\n    }\n    @if (isNarrowWidth) {\n        <button igxIconButton=\"flat\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n        </button>\n        <button #closeButton igxIconButton=\"flat\" type=\"button\" igxRipple (click)=\"close()\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon family=\"default\" name=\"close\"></igx-icon>\n        </button>\n    }\n</div>\n", dependencies: [{ kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridFilteringRowComponent, isStandalone: true, selector: "igx-grid-filtering-row", inputs: { column: "column", value: "value" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, properties: { "class.igx-grid__filtering-row": "this.defaultCSSClass" } }, viewQueries: [{ propertyName: "defaultFilterUI", first: true, predicate: ["defaultFilterUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateUI", first: true, predicate: ["defaultDateUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTimeUI", first: true, predicate: ["defaultTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateTimeUI", first: true, predicate: ["defaultDateTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }, { propertyName: "dropDownConditions", first: true, predicate: ["inputGroupConditions"], descendants: true, read: IgxDropDownComponent, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent, static: true }, { propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "inputGroupPrefix", first: true, predicate: ["inputGroupPrefix"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "operand", first: true, predicate: ["operand"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, static: true }, { propertyName: "dropDownOperators", predicate: ["operators"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [style.--ig-size]=\"filteringElementsSize\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n    @for (condition of conditions; track condition) {\n        <igx-drop-down-item\n            [value]=\"condition\"\n            [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n            </div>\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n    <igx-input-group #inputGroup type=\"box\" (focusout)=\"onInputGroupFocusout()\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            autocomplete=\"off\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            [type]=\"type\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n        @if (value || value === 0) {\n            <igx-suffix>\n                <igx-icon\n                    (keydown)=\"onCommitKeyDown($event)\"\n                    (click)=\"onCommitClick()\"\n                    tabindex=\"0\"\n                    family=\"default\"\n                    name=\"confirm\">\n                </igx-icon>\n                <igx-icon\n                    (keydown)=\"onClearKeyDown($event)\"\n                    (click)=\"onClearClick()\"\n                    tabindex=\"0\"\n                    family=\"default\"\n                    name=\"input_clear\">\n                </igx-icon>\n            </igx-suffix>\n        }\n    </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n    <igx-date-picker #picker\n        [(value)]=\"value\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [locale]=\"filteringService.grid.locale\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\"\n        type=\"box\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [formatter]=\"column.formatter\"\n        [placeholder]=\"placeholder\"\n        [weekStart]=\"column.pipeArgs.weekStart\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (closed)=\"focusEditElement()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"default\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        @if (value) {\n            <igx-suffix>\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"onCommitKeyDown($event)\"\n                    (click)=\"onCommitClick($event)\"\n                    family=\"default\"\n                    name=\"confirm\">\n                </igx-icon>\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"onClearKeyDown($event)\"\n                    (click)=\"clearInput($event)\"\n                    family=\"default\"\n                    name=\"input_clear\">\n                </igx-icon>\n            </igx-suffix>\n        }\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n    <igx-time-picker #picker\n        [(value)]=\"value\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [locale]=\"filteringService.grid.locale\"\n        [formatter]=\"column.formatter\"\n        [outlet]=\"filteringService.grid.outlet\"\n        type=\"box\"\n        [style.--ig-size]=\"filteringElementsSize\"\n        [placeholder]=\"placeholder\"\n        (closed)=\"focusEditElement()\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"default\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        @if (value) {\n            <igx-suffix>\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"onCommitKeyDown($event)\"\n                    (click)=\"onCommitClick($event)\"\n                    family=\"default\"\n                    name=\"confirm\">\n                </igx-icon>\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"onClearKeyDown($event)\"\n                    (click)=\"clearInput($event)\"\n                    family=\"default\"\n                    name=\"input_clear\">\n                </igx-icon>\n            </igx-suffix>\n        }\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n    <igx-input-group #inputGroup type=\"box\" (focusout)=\"onInputGroupFocusout()\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            [locale]=\"filteringService.grid.locale\"\n            [displayFormat]=\"column.pipeArgs.format\"\n            [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n            defaultFormatType=\"dateTime\"\n            [value]=\"value\"\n            (valueChange)=\"onInput($event)\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n        @if (value || value === 0) {\n            <igx-suffix>\n                <igx-icon\n                    (keydown)=\"onCommitKeyDown($event)\"\n                    (click)=\"onCommitClick()\"\n                    tabindex=\"0\"\n                    family=\"default\"\n                    name=\"confirm\">\n                </igx-icon>\n                <igx-icon\n                    (keydown)=\"onClearKeyDown($event)\"\n                    (click)=\"onClearClick()\"\n                    tabindex=\"0\"\n                    family=\"default\"\n                    name=\"input_clear\">\n                </igx-icon>\n            </igx-suffix>\n        }\n    </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n@if (showArrows) {\n    <button igxIconButton=\"flat\" type=\"button\" class=\"igx-grid__filtering-row-scroll-start\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n        <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n    </button>\n}\n\n<div #container class=\"igx-grid__filtering-row-main\">\n    <div>\n        <igx-chips-area #chipsArea>\n            <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n            @for (item of expressionsList; track item.expression; let i = $index; let last = $last) {\n                <ng-container tabindex=\"0\">\n                    <igx-chip #chip id=\"chip\"\n                        (pointerdown)=\"onChipPointerdown($event, chip)\"\n                        (click)=\"onChipClick($event, item)\"\n                        (keydown)=\"onChipKeyDown($event, item)\"\n                        (remove)=\"onChipRemoved($event, item)\"\n                        [selectable]=\"false\"\n                        [selected]=\"item.isSelected\"\n                        [style.--ig-size]=\"filteringElementsSize\"\n                        [removable]=\"true\">\n                        <igx-icon\n                            igxPrefix\n                            family=\"default\"\n                            [name]=\"item.expression.condition.iconName\">\n                        </igx-icon>\n                        <span>{{filteringService.getChipLabel(item.expression)}}</span>\n                    </igx-chip>\n                    @if (!last) {\n                        <span id=\"operand\">\n                            <button\n                                igxButton\n                                type=\"button\"\n                                (click)=\"toggleOperatorsDropDown($event, i)\"\n                                [igxDropDownItemNavigation]=\"operators\"\n                                [style.--ig-size]=\"filteringElementsSize\">\n                                <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n                                <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n                            </button>\n                            <igx-drop-down #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n                                <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n                                <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n                            </igx-drop-down>\n                        </span>\n                    }\n                </ng-container>\n            }\n        </igx-chips-area>\n    </div>\n</div>\n\n@if (showArrows) {\n    <button igxIconButton=\"flat\" type=\"button\" class=\"igx-grid__filtering-row-scroll-end\" (click)=\"scrollChipsOnArrowPress('right')\">\n        <igx-icon family=\"default\" name=\"next\"></igx-icon>\n    </button>\n}\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n    @if (!isNarrowWidth) {\n        <button igxButton=\"flat\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n            <span>{{ filteringService.grid.resourceStrings.igx_grid_filter_row_reset }}</span>\n        </button>\n        <button #closeButton igxButton=\"flat\" type=\"button\" igxRipple (click)=\"close()\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon family=\"default\" name=\"close\"></igx-icon>\n            <span>{{ filteringService.grid.resourceStrings.igx_grid_filter_row_close }}</span>\n        </button>\n    }\n    @if (isNarrowWidth) {\n        <button igxIconButton=\"flat\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n        </button>\n        <button #closeButton igxIconButton=\"flat\" type=\"button\" igxRipple (click)=\"close()\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon family=\"default\" name=\"close\"></igx-icon>\n        </button>\n    }\n</div>\n", dependencies: [{ kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-filtering-row', imports: [
                         IgxDropDownComponent,
@@ -14343,10 +14365,10 @@ class IgxGridCellStyleClassesPipe {
         }
         return result.join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellStyleClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellStyleClassesPipe, isStandalone: true, name: "igxCellStyleClasses" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCellStyleClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCellStyleClassesPipe, isStandalone: true, name: "igxCellStyleClasses" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellStyleClassesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCellStyleClassesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxCellStyleClasses',
@@ -14370,10 +14392,10 @@ class IgxGridCellStylesPipe {
         }
         return css;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellStylesPipe, isStandalone: true, name: "igxCellStyles" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCellStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCellStylesPipe, isStandalone: true, name: "igxCellStyles" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellStylesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCellStylesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxCellStyles',
@@ -14393,10 +14415,10 @@ class IgxGridCellImageAltPipe {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellImageAltPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellImageAltPipe, isStandalone: true, name: "igxCellImageAlt" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCellImageAltPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCellImageAltPipe, isStandalone: true, name: "igxCellImageAlt" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellImageAltPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCellImageAltPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxCellImageAlt',
@@ -14441,10 +14463,10 @@ class IgxGridRowClassesPipe {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridRowClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridRowClassesPipe, isStandalone: true, name: "igxGridRowClasses" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridRowClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridRowClassesPipe, isStandalone: true, name: "igxGridRowClasses" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridRowClassesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridRowClassesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGridRowClasses',
@@ -14472,10 +14494,10 @@ class IgxGridRowStylesPipe {
         }
         return css;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridRowStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridRowStylesPipe, isStandalone: true, name: "igxGridRowStyles" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridRowStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridRowStylesPipe, isStandalone: true, name: "igxGridRowStyles" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridRowStylesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridRowStylesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGridRowStyles',
@@ -14490,10 +14512,10 @@ class IgxGridNotGroupedPipe {
     transform(value) {
         return value.filter(item => !item.columnGroup);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridNotGroupedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridNotGroupedPipe, isStandalone: true, name: "igxNotGrouped" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridNotGroupedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridNotGroupedPipe, isStandalone: true, name: "igxNotGrouped" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridNotGroupedPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridNotGroupedPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxNotGrouped',
@@ -14508,10 +14530,10 @@ class IgxGridTopLevelColumns {
     transform(value) {
         return value.filter(item => item.level === 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridTopLevelColumns, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridTopLevelColumns, isStandalone: true, name: "igxTopLevel" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridTopLevelColumns, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridTopLevelColumns, isStandalone: true, name: "igxTopLevel" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridTopLevelColumns, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridTopLevelColumns, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxTopLevel',
@@ -14526,10 +14548,10 @@ class IgxGridFilterConditionPipe {
     transform(value) {
         return value.split(/(?=[A-Z])/).join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridFilterConditionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridFilterConditionPipe, isStandalone: true, name: "filterCondition" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridFilterConditionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridFilterConditionPipe, isStandalone: true, name: "filterCondition" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridFilterConditionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridFilterConditionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filterCondition',
@@ -14552,10 +14574,10 @@ class IgxGridTransactionPipe {
         }
         return collection;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridTransactionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridTransactionPipe, isStandalone: true, name: "gridTransaction" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridTransactionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridTransactionPipe, isStandalone: true, name: "gridTransaction" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridTransactionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridTransactionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridTransaction',
@@ -14570,10 +14592,10 @@ class IgxGridPaginatorOptionsPipe {
     transform(values) {
         return Array.from(new Set([...values])).sort((a, b) => a - b);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridPaginatorOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridPaginatorOptionsPipe, isStandalone: true, name: "paginatorOptions" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridPaginatorOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridPaginatorOptionsPipe, isStandalone: true, name: "paginatorOptions" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridPaginatorOptionsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridPaginatorOptionsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'paginatorOptions',
@@ -14591,10 +14613,10 @@ class IgxHasVisibleColumnsPipe {
         }
         return hasVisibleColumns ? values : [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxHasVisibleColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxHasVisibleColumnsPipe, isStandalone: true, name: "visibleColumns" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHasVisibleColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxHasVisibleColumnsPipe, isStandalone: true, name: "visibleColumns" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxHasVisibleColumnsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHasVisibleColumnsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'visibleColumns',
@@ -14634,13 +14656,13 @@ class IgxGridRowPinningPipe {
         return collection.map((rec) => !this.grid.isSummaryRow(rec) &&
             this.grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true } : rec);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridRowPinningPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridRowPinningPipe, isStandalone: true, name: "gridRowPinning" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridRowPinningPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridRowPinningPipe, isStandalone: true, name: "gridRowPinning" }); }
 }
 __decorate([
     buildDataView()
 ], IgxGridRowPinningPipe.prototype, "transform", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridRowPinningPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridRowPinningPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridRowPinning',
@@ -14651,10 +14673,10 @@ class IgxGridDataMapperPipe {
     transform(data, field, _, val, isNestedPath) {
         return isNestedPath ? resolveNestedPath(data, columnFieldPath(field)) : val;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridDataMapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridDataMapperPipe, isStandalone: true, name: "dataMapper" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridDataMapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridDataMapperPipe, isStandalone: true, name: "dataMapper" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridDataMapperPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridDataMapperPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dataMapper',
@@ -14665,10 +14687,10 @@ class IgxStringReplacePipe {
     transform(value, search, replacement) {
         return value.replace(search, replacement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxStringReplacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxStringReplacePipe, isStandalone: true, name: "igxStringReplace" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxStringReplacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxStringReplacePipe, isStandalone: true, name: "igxStringReplace" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxStringReplacePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxStringReplacePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxStringReplace',
@@ -14690,10 +14712,10 @@ class IgxGridTransactionStatePipe {
             return transaction?.value && (value || value === 0 || value === false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridTransactionStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridTransactionStatePipe, isStandalone: true, name: "transactionState" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridTransactionStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridTransactionStatePipe, isStandalone: true, name: "transactionState" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridTransactionStatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridTransactionStatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'transactionState',
@@ -14704,10 +14726,10 @@ class IgxColumnFormatterPipe {
     transform(value, formatter, rowData, columnData) {
         return formatter(value, rowData, columnData);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnFormatterPipe, isStandalone: true, name: "columnFormatter" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnFormatterPipe, isStandalone: true, name: "columnFormatter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'columnFormatter',
@@ -14718,10 +14740,10 @@ class IgxSummaryFormatterPipe {
     transform(summaryResult, summaryOperand, summaryFormatter) {
         return summaryFormatter(summaryResult, summaryOperand);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryFormatterPipe, isStandalone: true, name: "summaryFormatter" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSummaryFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxSummaryFormatterPipe, isStandalone: true, name: "summaryFormatter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSummaryFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'summaryFormatter',
@@ -14742,10 +14764,10 @@ class IgxGridAddRowPipe {
         copy.splice(this.grid.crudService.row.index, 0, rec);
         return copy;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridAddRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGridAddRowPipe, isStandalone: true, name: "gridAddRow" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridAddRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridAddRowPipe, isStandalone: true, name: "gridAddRow" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridAddRowPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridAddRowPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridAddRow',
@@ -14877,10 +14899,10 @@ class IgxGridHeaderRowComponent {
             this.grid.selectionService.selectAllRows(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedStartColumnCollection: "pinnedStartColumnCollection", pinnedEndColumnCollection: "pinnedEndColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", hasMRL: ["hasMRL", "hasMRL", booleanAttribute], width: "width" }, host: { properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [attr.aria-rowindex]=\"1\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length <= 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length > 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedStartColumnCollection.length) {\n            @for (column of pinnedStartColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        @if (pinnedEndColumnCollection.length) {\n            @for (column of pinnedEndColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (grid.filteringService.isFilterRowVisible) {\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedStartColumnCollection: "pinnedStartColumnCollection", pinnedEndColumnCollection: "pinnedEndColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", hasMRL: ["hasMRL", "hasMRL", booleanAttribute], width: "width" }, host: { properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [attr.aria-rowindex]=\"1\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length <= 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length > 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedStartColumnCollection.length) {\n            @for (column of pinnedStartColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        @if (pinnedEndColumnCollection.length) {\n            @for (column of pinnedEndColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (grid.filteringService.isFilterRowVisible) {\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupStylePipe], template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [attr.aria-rowindex]=\"1\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length <= 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length > 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedStartColumnCollection.length) {\n            @for (column of pinnedStartColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        @if (pinnedEndColumnCollection.length) {\n            @for (column of pinnedEndColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (grid.filteringService.isFilterRowVisible) {\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n" }]
         }], propDecorators: { grid: [{
@@ -15068,10 +15090,10 @@ class IgxRowDragDirective extends IgxDragDirective {
     get isHierarchicalGrid() {
         return this.row.grid.type === 'hierarchical';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowDragDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxRowDragDirective, isStandalone: true, selector: "[igxRowDrag]", inputs: { data: ["igxRowDrag", "data"] }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowDragDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxRowDragDirective, isStandalone: true, selector: "[igxRowDrag]", inputs: { data: ["igxRowDrag", "data"] }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowDrag]',
@@ -15088,10 +15110,10 @@ class IgxDragIndicatorIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDragIndicatorIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxDragIndicatorIconDirective, isStandalone: true, selector: "[igxDragIndicatorIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxDragIndicatorIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxDragIndicatorIconDirective, isStandalone: true, selector: "[igxDragIndicatorIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDragIndicatorIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxDragIndicatorIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDragIndicatorIcon]',
@@ -15108,10 +15130,10 @@ class IgxRowDragGhostDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowDragGhostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxRowDragGhostDirective, isStandalone: true, selector: "[igxRowDragGhost]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowDragGhostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxRowDragGhostDirective, isStandalone: true, selector: "[igxRowDragGhost]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowDragGhostDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowDragGhostDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowDragGhost]',
@@ -15130,10 +15152,10 @@ class IgxRowSelectorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxRowSelectorDirective, isStandalone: true, selector: "[igxRowSelector]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxRowSelectorDirective, isStandalone: true, selector: "[igxRowSelector]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowSelectorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowSelectorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowSelector]',
@@ -15151,10 +15173,10 @@ class IgxGroupByRowSelectorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGroupByRowSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxGroupByRowSelectorDirective, isStandalone: true, selector: "[igxGroupByRowSelector]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGroupByRowSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxGroupByRowSelectorDirective, isStandalone: true, selector: "[igxGroupByRowSelector]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGroupByRowSelectorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGroupByRowSelectorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGroupByRowSelector]',
@@ -15172,10 +15194,10 @@ class IgxHeadSelectorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxHeadSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxHeadSelectorDirective, isStandalone: true, selector: "[igxHeadSelector]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHeadSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxHeadSelectorDirective, isStandalone: true, selector: "[igxHeadSelector]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxHeadSelectorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHeadSelectorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeadSelector]',
@@ -15311,10 +15333,10 @@ class IgxGridDragSelectDirective {
             this._sub.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridDragSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: IgxGridDragSelectDirective, isStandalone: true, selector: "[igxGridDragSelect]", inputs: { activeDrag: ["igxGridDragSelect", "activeDrag", booleanAttribute] }, outputs: { dragStop: "dragStop", dragScroll: "dragScroll" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridDragSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.8", type: IgxGridDragSelectDirective, isStandalone: true, selector: "[igxGridDragSelect]", inputs: { activeDrag: ["igxGridDragSelect", "activeDrag", booleanAttribute] }, outputs: { dragStop: "dragStop", dragScroll: "dragScroll" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridDragSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridDragSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridDragSelect]',
@@ -15489,6 +15511,7 @@ class IgxPivotDateDimension {
 /* blazorIndirectRender */
 class IgxGridStateBaseDirective {
     constructor() {
+        /* blazorSuppress */
         this.grid = inject(IGX_GRID_BASE, { host: true, optional: true });
         this.viewRef = inject(ViewContainerRef);
         this.envInjector = inject(EnvironmentInjector);
@@ -16045,10 +16068,10 @@ class IgxGridStateBaseDirective {
         const feature = this.FEATURES[key];
         return feature;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridStateBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxGridStateBaseDirective, isStandalone: true, inputs: { options: "options" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridStateBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxGridStateBaseDirective, isStandalone: true, inputs: { options: "options" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridStateBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridStateBaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { options: [{
                 type: Input
@@ -16120,10 +16143,10 @@ class IgxGridStateDirective extends IgxGridStateBaseDirective {
         }
         return super.setStateInternal(state, features);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxGridStateDirective, isStandalone: true, selector: "[igxGridState]", inputs: { options: ["igxGridState", "options"] }, outputs: { stateParsed: "stateParsed" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxGridStateDirective, isStandalone: true, selector: "[igxGridState]", inputs: { options: ["igxGridState", "options"] }, outputs: { stateParsed: "stateParsed" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridState]',
@@ -16137,10 +16160,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
             }] } });
 
 class IgxExcelTextDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxExcelTextDirective, isStandalone: true, selector: "[excelText],excel-text", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxExcelTextDirective, isStandalone: true, selector: "[excelText],excel-text", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[excelText],excel-text',
@@ -16148,10 +16171,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 }]
         }] });
 class IgxCSVTextDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCSVTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCSVTextDirective, isStandalone: true, selector: "[csvText],csv-text", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCSVTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxCSVTextDirective, isStandalone: true, selector: "[csvText],csv-text", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCSVTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCSVTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[csvText],csv-text',
@@ -16159,10 +16182,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 }]
         }] });
 class IgxPdfTextDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPdfTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxPdfTextDirective, isStandalone: true, selector: "[pdfText],pdf-text", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPdfTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxPdfTextDirective, isStandalone: true, selector: "[pdfText],pdf-text", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPdfTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPdfTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pdfText],pdf-text',
@@ -16195,10 +16218,10 @@ class IgxGridToolbarTitleComponent {
          */
         this.cssClass = 'igx-grid-toolbar__title';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxGridToolbarTitleComponent, isStandalone: true, selector: "igx-grid-toolbar-title", host: { properties: { "class.igx-grid-toolbar__title": "this.cssClass" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IgxGridToolbarTitleComponent, isStandalone: true, selector: "igx-grid-toolbar-title", host: { properties: { "class.igx-grid-toolbar__title": "this.cssClass" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-grid-toolbar-title', template: '<ng-content></ng-content>',
@@ -16236,10 +16259,10 @@ class IgxGridToolbarActionsComponent {
          */
         this.cssClass = 'igx-grid-toolbar__actions';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxGridToolbarActionsComponent, isStandalone: true, selector: "igx-grid-toolbar-actions", host: { properties: { "class.igx-grid-toolbar__actions": "this.cssClass" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IgxGridToolbarActionsComponent, isStandalone: true, selector: "igx-grid-toolbar-actions", host: { properties: { "class.igx-grid-toolbar__actions": "this.cssClass" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-grid-toolbar-actions', template: '<ng-content></ng-content>',
@@ -16256,10 +16279,10 @@ class IgxGridToolbarDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxGridToolbarDirective, isStandalone: true, selector: "[igxGridToolbar]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxGridToolbarDirective, isStandalone: true, selector: "[igxGridToolbar]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridToolbar]',
@@ -16326,10 +16349,10 @@ class IgxGridToolbarAdvancedFilteringComponent {
         });
         return [...new Set(columnNames)];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridToolbarAdvancedFilteringComponent, isStandalone: true, selector: "igx-grid-toolbar-advanced-filtering", inputs: { overlaySettings: "overlaySettings" }, ngImport: i0, template: "<button igxButton=\"outlined\" type=\"button\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n    class=\"igx-grid-toolbar__adv-filter\">\n    <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <!-- D.P. fix(elements): Angular trims child nodes, native doesn't leaving white space when other items project\n    textContent (avoids layout trash of innerText) should avoid wiping the default text without user set one -->\n    @if (!ref.textContent.trim()) {\n        <span>{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n    }\n    @if (grid?.advancedFilteringExpressionsTree) {\n        <span class=\"igx-adv-filter--column-number\"> ({{ numberOfColumns }}) </span>\n    }\n</button>\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridToolbarAdvancedFilteringComponent, isStandalone: true, selector: "igx-grid-toolbar-advanced-filtering", inputs: { overlaySettings: "overlaySettings" }, ngImport: i0, template: "<button igxButton=\"outlined\" type=\"button\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n    class=\"igx-grid-toolbar__adv-filter\">\n    <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <!-- D.P. fix(elements): Angular trims child nodes, native doesn't leaving white space when other items project\n    textContent (avoids layout trash of innerText) should avoid wiping the default text without user set one -->\n    @if (!ref.textContent.trim()) {\n        <span>{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n    }\n    @if (grid?.advancedFilteringExpressionsTree) {\n        <span class=\"igx-adv-filter--column-number\"> ({{ numberOfColumns }}) </span>\n    }\n</button>\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-toolbar-advanced-filtering', imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent], template: "<button igxButton=\"outlined\" type=\"button\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n    class=\"igx-grid-toolbar__adv-filter\">\n    <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <!-- D.P. fix(elements): Angular trims child nodes, native doesn't leaving white space when other items project\n    textContent (avoids layout trash of innerText) should avoid wiping the default text without user set one -->\n    @if (!ref.textContent.trim()) {\n        <span>{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n    }\n    @if (grid?.advancedFilteringExpressionsTree) {\n        <span class=\"igx-adv-filter--column-number\"> ({{ numberOfColumns }}) </span>\n    }\n</button>\n" }]
         }], propDecorators: { overlaySettings: [{
@@ -16400,10 +16423,10 @@ class IgxGridToolbarComponent {
     ngOnDestroy() {
         this.sub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridToolbarComponent, isStandalone: true, selector: "igx-grid-toolbar", inputs: { showProgress: ["showProgress", "showProgress", booleanAttribute], grid: "grid" }, host: { properties: { "class.igx-grid-toolbar": "this.defaultStyle" } }, providers: [{ provide: IgxToolbarToken, useExisting: IgxGridToolbarComponent }], queries: [{ propertyName: "hasActions", first: true, predicate: IgxGridToolbarActionsComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[igxGridToolbarTitle],igx-grid-toolbar-title,igc-grid-toolbar-title\"></ng-content>\n\n<div class=\"igx-grid-toolbar__custom-content\">\n    <ng-content></ng-content>\n</div>\n\n<ng-template #actions>\n    <ng-content select=\"[igxGridToolbarActions],igx-grid-toolbar-actions,igc-grid-toolbar-actions\"></ng-content>\n</ng-template>\n@if (!hasActions) {\n    <igx-grid-toolbar-actions>\n        @if (grid?.allowAdvancedFiltering) {\n            <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>\n        }\n    </igx-grid-toolbar-actions>\n}\n<ng-container *ngTemplateOutlet=\"actions\"></ng-container>\n\n@if (showProgress) {\n    <div class=\"igx-grid-toolbar__progress-bar\">\n        <igx-linear-bar [indeterminate]=\"true\"></igx-linear-bar>\n    </div>\n}\n", dependencies: [{ kind: "component", type: IgxGridToolbarActionsComponent, selector: "igx-grid-toolbar-actions" }, { kind: "component", type: IgxGridToolbarAdvancedFilteringComponent, selector: "igx-grid-toolbar-advanced-filtering", inputs: ["overlaySettings"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxLinearProgressBarComponent, selector: "igx-linear-bar", inputs: ["striped", "role", "id", "textAlign", "textVisibility", "textTop", "type"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridToolbarComponent, isStandalone: true, selector: "igx-grid-toolbar", inputs: { showProgress: ["showProgress", "showProgress", booleanAttribute], grid: "grid" }, host: { properties: { "class.igx-grid-toolbar": "this.defaultStyle" } }, providers: [{ provide: IgxToolbarToken, useExisting: IgxGridToolbarComponent }], queries: [{ propertyName: "hasActions", first: true, predicate: IgxGridToolbarActionsComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[igxGridToolbarTitle],igx-grid-toolbar-title,igc-grid-toolbar-title\"></ng-content>\n\n<div class=\"igx-grid-toolbar__custom-content\">\n    <ng-content></ng-content>\n</div>\n\n<ng-template #actions>\n    <ng-content select=\"[igxGridToolbarActions],igx-grid-toolbar-actions,igc-grid-toolbar-actions\"></ng-content>\n</ng-template>\n@if (!hasActions) {\n    <igx-grid-toolbar-actions>\n        @if (grid?.allowAdvancedFiltering) {\n            <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>\n        }\n    </igx-grid-toolbar-actions>\n}\n<ng-container *ngTemplateOutlet=\"actions\"></ng-container>\n\n@if (showProgress) {\n    <div class=\"igx-grid-toolbar__progress-bar\">\n        <igx-linear-bar [indeterminate]=\"true\"></igx-linear-bar>\n    </div>\n}\n", dependencies: [{ kind: "component", type: IgxGridToolbarActionsComponent, selector: "igx-grid-toolbar-actions" }, { kind: "component", type: IgxGridToolbarAdvancedFilteringComponent, selector: "igx-grid-toolbar-advanced-filtering", inputs: ["overlaySettings"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxLinearProgressBarComponent, selector: "igx-linear-bar", inputs: ["striped", "role", "id", "textAlign", "textVisibility", "textTop", "type"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-toolbar', providers: [{ provide: IgxToolbarToken, useExisting: IgxGridToolbarComponent }], imports: [IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, NgTemplateOutlet, IgxLinearProgressBarComponent], template: "<ng-content select=\"[igxGridToolbarTitle],igx-grid-toolbar-title,igc-grid-toolbar-title\"></ng-content>\n\n<div class=\"igx-grid-toolbar__custom-content\">\n    <ng-content></ng-content>\n</div>\n\n<ng-template #actions>\n    <ng-content select=\"[igxGridToolbarActions],igx-grid-toolbar-actions,igc-grid-toolbar-actions\"></ng-content>\n</ng-template>\n@if (!hasActions) {\n    <igx-grid-toolbar-actions>\n        @if (grid?.allowAdvancedFiltering) {\n            <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>\n        }\n    </igx-grid-toolbar-actions>\n}\n<ng-container *ngTemplateOutlet=\"actions\"></ng-container>\n\n@if (showProgress) {\n    <div class=\"igx-grid-toolbar__progress-bar\">\n        <igx-linear-bar [indeterminate]=\"true\"></igx-linear-bar>\n    </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { showProgress: [{
@@ -16526,10 +16549,10 @@ class BaseToolbarDirective {
             toggleRef.closed.pipe(first$1(), takeUntil(this.$destroy)).subscribe((event) => this.closed.emit(event));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: BaseToolbarDirective, isStandalone: true, inputs: { columnListHeight: "columnListHeight", title: "title", prompt: "prompt", overlaySettings: "overlaySettings" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", columnToggle: "columnToggle" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BaseToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: BaseToolbarDirective, isStandalone: true, inputs: { columnListHeight: "columnListHeight", title: "title", prompt: "prompt", overlaySettings: "overlaySettings" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", columnToggle: "columnToggle" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseToolbarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BaseToolbarDirective, decorators: [{
             type: Directive
         }], propDecorators: { columnListHeight: [{
                 type: Input
@@ -16571,10 +16594,10 @@ class BaseToolbarColumnActionsDirective extends BaseToolbarDirective {
     uncheckAll() {
         this.columnActionsUI.uncheckAllColumns();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseToolbarColumnActionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: BaseToolbarColumnActionsDirective, isStandalone: true, inputs: { hideFilter: ["hideFilter", "hideFilter", booleanAttribute], filterCriteria: "filterCriteria", columnDisplayOrder: "columnDisplayOrder", columnsAreaMaxHeight: "columnsAreaMaxHeight", uncheckAllText: "uncheckAllText", checkAllText: "checkAllText", indentetion: "indentetion", buttonText: "buttonText" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BaseToolbarColumnActionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.8", type: BaseToolbarColumnActionsDirective, isStandalone: true, inputs: { hideFilter: ["hideFilter", "hideFilter", booleanAttribute], filterCriteria: "filterCriteria", columnDisplayOrder: "columnDisplayOrder", columnsAreaMaxHeight: "columnsAreaMaxHeight", uncheckAllText: "uncheckAllText", checkAllText: "checkAllText", indentetion: "indentetion", buttonText: "buttonText" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseToolbarColumnActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BaseToolbarColumnActionsDirective, decorators: [{
             type: Directive
         }], propDecorators: { hideFilter: [{
                 type: Input,
@@ -17291,7 +17314,8 @@ class IgxBaseExporter {
             this._ownersMap.set(grid, columnList);
             const childLayoutList = grid.childLayoutList;
             for (const island of childLayoutList) {
-                this.mapHierarchicalGridColumns(island, grid.data[0]);
+                const gridData = grid.data && grid.data.length > 0 ? grid.data[0] : {};
+                this.mapHierarchicalGridColumns(island, gridData);
             }
         }
         else if (grid.type === 'pivot') {
@@ -18093,27 +18117,33 @@ class IgxBaseExporter {
         let columnList;
         let keyData;
         if (island.autoGenerate) {
-            keyData = gridData[island.key];
-            const islandKeys = island.children.map(i => i.key);
-            const islandData = keyData.map(i => {
-                const newItem = {};
-                Object.keys(i).map(k => {
-                    if (!islandKeys.includes(k)) {
-                        newItem[k] = i[k];
-                    }
+            keyData = gridData && gridData[island.key] ? gridData[island.key] : undefined;
+            const islandKeys = island.children && island.children.length > 0 ? island.children.map(i => i.key) : [];
+            if (keyData && Array.isArray(keyData) && keyData.length > 0) {
+                const islandData = keyData.map(i => {
+                    const newItem = {};
+                    Object.keys(i).map(k => {
+                        if (!islandKeys.includes(k)) {
+                            newItem[k] = i[k];
+                        }
+                    });
+                    return newItem;
                 });
-                return newItem;
-            });
-            columnList = this.getAutoGeneratedColumns(islandData);
+                columnList = this.getAutoGeneratedColumns(islandData);
+            }
+            else {
+                // If no data available, create empty column list
+                columnList = this.getAutoGeneratedColumns([{}]);
+            }
         }
         else {
             const islandColumnList = island.columns;
             columnList = this.getColumns(islandColumnList);
         }
         this._ownersMap.set(island, columnList);
-        if (island.children.length > 0) {
+        if (island.children && island.children.length > 0) {
             for (const childIsland of island.children) {
-                const islandKeyData = keyData !== undefined ? keyData[0] : {};
+                const islandKeyData = keyData && Array.isArray(keyData) && keyData.length > 0 ? keyData[0] : {};
                 this.mapHierarchicalGridColumns(childIsland, islandKeyData);
             }
         }
@@ -18733,9 +18763,15 @@ class WorksheetFile {
         }
     }
     getSummaryFunction(type, key, dimensionMapKey, recordLevel, col) {
-        const dimensionMap = dimensionMapKey ? this.hierarchicalDimensionMap.get(dimensionMapKey) : this.dimensionMap;
+        const dimensionMap = dimensionMapKey ? (this.hierarchicalDimensionMap.get(dimensionMapKey) ?? this.dimensionMap) : this.dimensionMap;
+        if (!dimensionMap) {
+            return '';
+        }
         const dimensions = dimensionMap.get(key);
         const levelDimensions = dimensionMap.get(GRID_LEVEL_COL);
+        if (!dimensions || !levelDimensions) {
+            return '';
+        }
         let func = '';
         let funcType = '';
         let result = '';
@@ -19360,6 +19396,10 @@ class IgxExcelExporterService extends IgxBaseExporter {
         const firstDataElement = data[0];
         const isHierarchicalGrid = firstDataElement?.type === ExportRecordType.HierarchicalGridRecord;
         const isPivotGrid = firstDataElement?.type === ExportRecordType.PivotGridRecord;
+        const ownersKeys = Array.from(this._ownersMap.keys());
+        const firstKey = ownersKeys[0];
+        const isHierarchicalGridByMap = firstKey && typeof firstKey !== 'string';
+        const filterColumns = (columns) => columns.filter(col => col.field !== GRID_LEVEL_COL && !col.skip && col.headerType === ExportHeaderType.ColumnHeader);
         let rootKeys;
         let columnCount;
         let columnWidths;
@@ -19389,19 +19429,28 @@ class IgxExcelExporterService extends IgxBaseExporter {
                 defaultOwner = this._ownersMap.get(firstDataElement.owner);
             }
             else {
-                defaultOwner = this._ownersMap.get(DEFAULT_OWNER);
-                const columns = defaultOwner.columns.filter(col => col.field !== GRID_LEVEL_COL && !col.skip && col.headerType === ExportHeaderType.ColumnHeader);
-                columnWidths = defaultOwner.columnWidths;
-                indexOfLastPinnedColumn = defaultOwner.indexOfLastPinnedColumn;
-                columnCount = isPivotGrid ? columns.length + this.pivotGridFilterFieldsCount : columns.length;
-                rootKeys = columns.map(c => c.field);
+                // Check if this is actually a hierarchical grid (when data only contains summary records)
+                defaultOwner = isHierarchicalGridByMap
+                    ? this._ownersMap.get(firstKey)
+                    : this._ownersMap.get(DEFAULT_OWNER) || this._ownersMap.get(firstKey);
+                if (defaultOwner) {
+                    const columns = filterColumns(defaultOwner.columns);
+                    columnWidths = defaultOwner.columnWidths;
+                    indexOfLastPinnedColumn = defaultOwner.indexOfLastPinnedColumn;
+                    columnCount = isPivotGrid ? columns.length + this.pivotGridFilterFieldsCount : columns.length;
+                    rootKeys = columns.map(c => c.field);
+                }
             }
         }
         else {
-            const ownersKeys = Array.from(this._ownersMap.keys());
-            defaultOwner = this._ownersMap.get(ownersKeys[0]);
-            columnWidths = defaultOwner.columnWidths;
-            columnCount = defaultOwner.columns.filter(col => col.field !== GRID_LEVEL_COL && !col.skip && col.headerType === ExportHeaderType.ColumnHeader).length;
+            // For hierarchical grids with empty data, use the grid instance; otherwise try DEFAULT_OWNER first
+            defaultOwner = isHierarchicalGridByMap
+                ? this._ownersMap.get(firstKey)
+                : this._ownersMap.get(DEFAULT_OWNER) || this._ownersMap.get(firstKey);
+            if (defaultOwner) {
+                columnWidths = defaultOwner.columnWidths;
+                columnCount = filterColumns(defaultOwner.columns).length;
+            }
         }
         const worksheetData = new WorksheetData(data, options, this._sort, columnCount, rootKeys, indexOfLastPinnedColumn, columnWidths, defaultOwner, this._ownersMap);
         const rootFolder = ExcelElementsFactory.getExcelFolder(ExcelFolderTypes.RootExcelFolder);
@@ -19421,10 +19470,10 @@ class IgxExcelExporterService extends IgxBaseExporter {
         });
         ExportUtilities.saveBlobToFile(blob, fileName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelExporterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelExporterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelExporterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxExcelExporterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -19466,19 +19515,27 @@ class CharSeparatedValueData {
         this._dataRecords = this.processDataRecords(this._data, keys);
         return this._headerRecord + this._dataRecords;
     }
-    prepareDataAsync(done) {
+    prepareDataAsync(done, alwaysExportHeaders = true) {
         const columns = this.columns?.filter(c => !c.skip)
             .sort((a, b) => a.startIndex - b.startIndex)
             .sort((a, b) => a.pinnedIndex - b.pinnedIndex);
         const keys = columns && columns.length ? columns.map(c => c.field) : ExportUtilities.getKeysFromData(this._data);
-        this._isSpecialData = ExportUtilities.isSpecialData(this._data[0]);
+        if (this._data && this._data.length > 0) {
+            this._isSpecialData = ExportUtilities.isSpecialData(this._data[0]);
+        }
         this._escapeCharacters.push(this._delimiter);
         const headers = columns && columns.length ?
             columns.map(c => c.header ?? c.field) :
             keys;
         this._headerRecord = this.processHeaderRecord(headers, this._data.length);
         if (keys.length === 0 || ((!this._data || this._data.length === 0) && keys.length === 0)) {
-            done('');
+            // If alwaysExportHeaders is true and we have headers, export headers only
+            if (alwaysExportHeaders && headers && headers.length > 0) {
+                done(this._headerRecord);
+            }
+            else {
+                done('');
+            }
         }
         else {
             this.processDataRecordsAsync(this._data, keys, (dr) => {
@@ -19570,10 +19627,33 @@ class IgxCsvExporterService extends IgxBaseExporter {
         this.exportEnded = new EventEmitter();
     }
     exportDataImplementation(data, options, done) {
-        const dimensionKeys = data[0]?.dimensionKeys;
-        data = dimensionKeys?.length ?
-            data.map((item) => item.rawData) :
-            data.map((item) => item.data);
+        const firstDataElement = data[0];
+        const dimensionKeys = firstDataElement?.dimensionKeys;
+        const dataRecords = dimensionKeys?.length ?
+            data.filter(item => item.type !== ExportRecordType.SummaryRecord).map((item) => item.rawData) :
+            data.filter(item => item.type !== ExportRecordType.SummaryRecord).map((item) => item.data);
+        // Get summary records if exportSummaries is enabled
+        const summaryRecords = [];
+        if (options.exportSummaries) {
+            const summaries = data.filter(item => item.type === ExportRecordType.SummaryRecord);
+            for (const summary of summaries) {
+                // Convert summary record data to a flat object format for CSV
+                const summaryData = {};
+                if (summary.data) {
+                    for (const [key, value] of Object.entries(summary.data)) {
+                        if (value && typeof value === 'object' && 'label' in value && 'value' in value) {
+                            summaryData[key] = `${value.label}: ${value.value}`;
+                        }
+                        else {
+                            summaryData[key] = value;
+                        }
+                    }
+                }
+                summaryRecords.push(summaryData);
+            }
+        }
+        // Combine data records and summary records
+        const allRecords = [...dataRecords, ...summaryRecords];
         const columnList = this._ownersMap.get(DEFAULT_OWNER);
         const columns = columnList?.columns.filter(c => c.headerType === ExportHeaderType.ColumnHeader);
         if (dimensionKeys) {
@@ -19591,13 +19671,13 @@ class IgxCsvExporterService extends IgxBaseExporter {
             });
             columns.unshift(...dimensionCols);
         }
-        const csvData = new CharSeparatedValueData(data, options.valueDelimiter, columns);
+        const csvData = new CharSeparatedValueData(allRecords, options.valueDelimiter, columns);
         csvData.prepareDataAsync((r) => {
             this._stringData = r;
             this.saveFile(options);
             this.exportEnded.emit({ csvData: this._stringData });
             done();
-        });
+        }, options.alwaysExportHeaders);
     }
     saveFile(options) {
         switch (options.fileType) {
@@ -19614,10 +19694,10 @@ class IgxCsvExporterService extends IgxBaseExporter {
         const blob = new Blob([data ? '\ufeff' : '', data], { type: fileType });
         ExportUtilities.saveBlobToFile(blob, fileName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCsvExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCsvExporterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCsvExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCsvExporterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCsvExporterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCsvExporterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -20498,10 +20578,10 @@ class IgxPdfExporterService extends IgxBaseExporter {
         const blob = pdf.output('blob');
         ExportUtilities.saveBlobToFile(blob, fileName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPdfExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPdfExporterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPdfExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPdfExporterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPdfExporterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPdfExporterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -20600,10 +20680,10 @@ class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
         });
         exporter.export(this.grid, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarExporterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridToolbarExporterComponent, isStandalone: true, selector: "igx-grid-toolbar-exporter", inputs: { exportCSV: ["exportCSV", "exportCSV", booleanAttribute], exportExcel: ["exportExcel", "exportExcel", booleanAttribute], exportPDF: ["exportPDF", "exportPDF", booleanAttribute], filename: "filename" }, outputs: { exportStarted: "exportStarted", exportEnded: "exportEnded" }, usesInheritance: true, ngImport: i0, template: "<button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n    igxButton=\"outlined\" type=\"button\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n\n    <igx-icon family=\"default\" name=\"file_download\"></igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    @if (!ref.textContent.trim()) {\n        <span>\n            {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n        </span>\n    }\n    <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n</button>\n\n<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        @if (exportExcel) {\n            <li #btnExportExcel id=\"btnExportExcel\"\n                class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"exportClicked('excel', toggleRef)\">\n                <span #excel>\n                    <ng-content select=[excelText],excel-text></ng-content>\n                </span>\n                @if (!excel.childNodes.length) {\n                    <excel-text>\n                        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n                    </excel-text>\n                }\n            </li>\n        }\n\n        @if (exportCSV) {\n            <li #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n                igxRipple (click)=\"exportClicked('csv', toggleRef)\">\n                <span #csv>\n                    <ng-content select=[csvText],csv-text></ng-content>\n                </span>\n                @if (!csv.childNodes.length) {\n                    <csv-text>\n                        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}\n                    </csv-text>\n                }\n            </li>\n        }\n\n        @if (exportPDF) {\n            <li #btnExportPdf id=\"btnExportPdf\" class=\"igx-grid-toolbar__dd-list-items\"\n                igxRipple (click)=\"exportClicked('pdf', toggleRef)\">\n                <span #pdf>\n                    <ng-content select=[pdfText],pdf-text></ng-content>\n                </span>\n                @if (!pdf.childNodes.length) {\n                    <pdf-text>\n                        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_pdf_entry_text }}\n                    </pdf-text>\n                }\n            </li>\n        }\n    </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: IgxExcelTextDirective, selector: "[excelText],excel-text" }, { kind: "directive", type: IgxCSVTextDirective, selector: "[csvText],csv-text" }, { kind: "directive", type: IgxPdfTextDirective, selector: "[pdfText],pdf-text" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarExporterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridToolbarExporterComponent, isStandalone: true, selector: "igx-grid-toolbar-exporter", inputs: { exportCSV: ["exportCSV", "exportCSV", booleanAttribute], exportExcel: ["exportExcel", "exportExcel", booleanAttribute], exportPDF: ["exportPDF", "exportPDF", booleanAttribute], filename: "filename" }, outputs: { exportStarted: "exportStarted", exportEnded: "exportEnded" }, usesInheritance: true, ngImport: i0, template: "<button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n    igxButton=\"outlined\" type=\"button\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n\n    <igx-icon family=\"default\" name=\"file_download\"></igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    @if (!ref.textContent.trim()) {\n        <span>\n            {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n        </span>\n    }\n    <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n</button>\n\n<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        @if (exportExcel) {\n            <li #btnExportExcel id=\"btnExportExcel\"\n                class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"exportClicked('excel', toggleRef)\">\n                <span #excel>\n                    <ng-content select=[excelText],excel-text></ng-content>\n                </span>\n                @if (!excel.childNodes.length) {\n                    <excel-text>\n                        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n                    </excel-text>\n                }\n            </li>\n        }\n\n        @if (exportCSV) {\n            <li #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n                igxRipple (click)=\"exportClicked('csv', toggleRef)\">\n                <span #csv>\n                    <ng-content select=[csvText],csv-text></ng-content>\n                </span>\n                @if (!csv.childNodes.length) {\n                    <csv-text>\n                        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}\n                    </csv-text>\n                }\n            </li>\n        }\n\n        @if (exportPDF) {\n            <li #btnExportPdf id=\"btnExportPdf\" class=\"igx-grid-toolbar__dd-list-items\"\n                igxRipple (click)=\"exportClicked('pdf', toggleRef)\">\n                <span #pdf>\n                    <ng-content select=[pdfText],pdf-text></ng-content>\n                </span>\n                @if (!pdf.childNodes.length) {\n                    <pdf-text>\n                        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_pdf_entry_text }}\n                    </pdf-text>\n                }\n            </li>\n        }\n    </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: IgxExcelTextDirective, selector: "[excelText],excel-text" }, { kind: "directive", type: IgxCSVTextDirective, selector: "[csvText],csv-text" }, { kind: "directive", type: IgxPdfTextDirective, selector: "[pdfText],pdf-text" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarExporterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarExporterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-toolbar-exporter', imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxToggleDirective, IgxExcelTextDirective, IgxCSVTextDirective, IgxPdfTextDirective], template: "<button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n    igxButton=\"outlined\" type=\"button\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n\n    <igx-icon family=\"default\" name=\"file_download\"></igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    @if (!ref.textContent.trim()) {\n        <span>\n            {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n        </span>\n    }\n    <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n</button>\n\n<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        @if (exportExcel) {\n            <li #btnExportExcel id=\"btnExportExcel\"\n                class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"exportClicked('excel', toggleRef)\">\n                <span #excel>\n                    <ng-content select=[excelText],excel-text></ng-content>\n                </span>\n                @if (!excel.childNodes.length) {\n                    <excel-text>\n                        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n                    </excel-text>\n                }\n            </li>\n        }\n\n        @if (exportCSV) {\n            <li #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n                igxRipple (click)=\"exportClicked('csv', toggleRef)\">\n                <span #csv>\n                    <ng-content select=[csvText],csv-text></ng-content>\n                </span>\n                @if (!csv.childNodes.length) {\n                    <csv-text>\n                        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}\n                    </csv-text>\n                }\n            </li>\n        }\n\n        @if (exportPDF) {\n            <li #btnExportPdf id=\"btnExportPdf\" class=\"igx-grid-toolbar__dd-list-items\"\n                igxRipple (click)=\"exportClicked('pdf', toggleRef)\">\n                <span #pdf>\n                    <ng-content select=[pdfText],pdf-text></ng-content>\n                </span>\n                @if (!pdf.childNodes.length) {\n                    <pdf-text>\n                        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_pdf_entry_text }}\n                    </pdf-text>\n                }\n            </li>\n        }\n    </ul>\n</div>\n" }]
         }], propDecorators: { exportCSV: [{
@@ -20644,10 +20724,10 @@ class IgxGridToolbarHidingComponent extends BaseToolbarColumnActionsDirective {
     set content(content) {
         this.columnActionsUI = content;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarHidingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridToolbarHidingComponent, isStandalone: true, selector: "igx-grid-toolbar-hiding", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnHidingDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "@if (grid.rendered$ | async) {\n    <button\n        [title]=\"grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\"\n        #btn\n        igxButton=\"outlined\"\n        type=\"button\"\n        name=\"btnColumnHiding\" (click)=\"toggle(btn, ref, actions)\">\n        <igx-icon\n            family=\"default\"\n            [name]=\"!grid.hiddenColumnsCount ? 'show' : 'hide'\">\n        </igx-icon>\n        <span>{{ grid.hiddenColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnHiding igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n}\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }, { kind: "directive", type: IgxColumnHidingDirective, selector: "[igxColumnHiding]" }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarHidingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridToolbarHidingComponent, isStandalone: true, selector: "igx-grid-toolbar-hiding", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnHidingDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "@if (grid.rendered$ | async) {\n    <button\n        [title]=\"grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\"\n        #btn\n        igxButton=\"outlined\"\n        type=\"button\"\n        name=\"btnColumnHiding\" (click)=\"toggle(btn, ref, actions)\">\n        <igx-icon\n            family=\"default\"\n            [name]=\"!grid.hiddenColumnsCount ? 'show' : 'hide'\">\n        </igx-icon>\n        <span>{{ grid.hiddenColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnHiding igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n}\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }, { kind: "directive", type: IgxColumnHidingDirective, selector: "[igxColumnHiding]" }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarHidingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarHidingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-toolbar-hiding', imports: [IgxButtonDirective, IgxIconComponent, IgxColumnActionsComponent, IgxColumnHidingDirective, IgxToggleDirective, AsyncPipe], template: "@if (grid.rendered$ | async) {\n    <button\n        [title]=\"grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\"\n        #btn\n        igxButton=\"outlined\"\n        type=\"button\"\n        name=\"btnColumnHiding\" (click)=\"toggle(btn, ref, actions)\">\n        <igx-icon\n            family=\"default\"\n            [name]=\"!grid.hiddenColumnsCount ? 'show' : 'hide'\">\n        </igx-icon>\n        <span>{{ grid.hiddenColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnHiding igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n}\n" }]
         }], propDecorators: { content: [{
@@ -20676,10 +20756,10 @@ class IgxGridToolbarPinningComponent extends BaseToolbarColumnActionsDirective {
     set content(content) {
         this.columnActionsUI = content;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarPinningComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridToolbarPinningComponent, isStandalone: true, selector: "igx-grid-toolbar-pinning", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnPinningDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "@if (grid.rendered$ | async) {\n    <button\n        [title]=\"grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\"\n        #btn\n        igxButton=\"outlined\"\n        type=\"button\"\n        name=\"btnColumnPinning\" (click)=\"toggle(btn, ref, actions)\">\n        <igx-icon\n            family=\"default\"\n            [name]=\"!grid.pinnedColumnsCount ? 'unpin' : 'pin'\">\n        </igx-icon>\n        <span>{{ grid.pinnedColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnPinning igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n}\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }, { kind: "directive", type: IgxColumnPinningDirective, selector: "[igxColumnPinning]" }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarPinningComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridToolbarPinningComponent, isStandalone: true, selector: "igx-grid-toolbar-pinning", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnPinningDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "@if (grid.rendered$ | async) {\n    <button\n        [title]=\"grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\"\n        #btn\n        igxButton=\"outlined\"\n        type=\"button\"\n        name=\"btnColumnPinning\" (click)=\"toggle(btn, ref, actions)\">\n        <igx-icon\n            family=\"default\"\n            [name]=\"!grid.pinnedColumnsCount ? 'unpin' : 'pin'\">\n        </igx-icon>\n        <span>{{ grid.pinnedColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnPinning igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n}\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }, { kind: "directive", type: IgxColumnPinningDirective, selector: "[igxColumnPinning]" }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridToolbarPinningComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridToolbarPinningComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-toolbar-pinning', imports: [IgxButtonDirective, IgxIconComponent, IgxColumnActionsComponent, IgxColumnPinningDirective, IgxToggleDirective, AsyncPipe], template: "@if (grid.rendered$ | async) {\n    <button\n        [title]=\"grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\"\n        #btn\n        igxButton=\"outlined\"\n        type=\"button\"\n        name=\"btnColumnPinning\" (click)=\"toggle(btn, ref, actions)\">\n        <igx-icon\n            family=\"default\"\n            [name]=\"!grid.pinnedColumnsCount ? 'unpin' : 'pin'\">\n        </igx-icon>\n        <span>{{ grid.pinnedColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnPinning igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n}\n" }]
         }], propDecorators: { content: [{
@@ -20712,10 +20792,10 @@ class IgxRowEditTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowEditTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxRowEditTemplateDirective, isStandalone: true, selector: "[igxRowEdit]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowEditTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxRowEditTemplateDirective, isStandalone: true, selector: "[igxRowEdit]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowEditTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowEditTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowEdit]',
@@ -20727,10 +20807,10 @@ class IgxRowEditTextDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowEditTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxRowEditTextDirective, isStandalone: true, selector: "[igxRowEditText]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowEditTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxRowEditTextDirective, isStandalone: true, selector: "[igxRowEditText]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowEditTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowEditTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowEditText]',
@@ -20742,10 +20822,10 @@ class IgxRowAddTextDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowAddTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxRowAddTextDirective, isStandalone: true, selector: "[igxRowAddText]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowAddTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxRowAddTextDirective, isStandalone: true, selector: "[igxRowAddText]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowAddTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowAddTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowAddText]',
@@ -20757,10 +20837,10 @@ class IgxRowEditActionsDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowEditActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxRowEditActionsDirective, isStandalone: true, selector: "[igxRowEditActions]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowEditActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxRowEditActionsDirective, isStandalone: true, selector: "[igxRowEditActions]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowEditActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowEditActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowEditActions]',
@@ -20804,10 +20884,10 @@ class IgxRowEditTabStopDirective {
             this.grid.cdr.detectChanges();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowEditTabStopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxRowEditTabStopDirective, isStandalone: true, selector: "[igxRowEditTabStop]", host: { listeners: { "keydown.tab": "handleTab($event)", "keydown.shift.tab": "handleTab($event)", "keydown.escape": "handleEscape($event)", "keydown.enter": "handleEnter($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowEditTabStopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxRowEditTabStopDirective, isStandalone: true, selector: "[igxRowEditTabStop]", host: { listeners: { "keydown.tab": "handleTab($event)", "keydown.shift.tab": "handleTab($event)", "keydown.escape": "handleEscape($event)", "keydown.enter": "handleEnter($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxRowEditTabStopDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowEditTabStopDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[igxRowEditTabStop]`,
@@ -21207,10 +21287,10 @@ class IgxGridSummaryService {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridSummaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridSummaryService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridSummaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridSummaryService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridSummaryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridSummaryService, decorators: [{
             type: Injectable
         }] });
 
@@ -21309,10 +21389,10 @@ class IgxSummaryCellComponent {
         }
         return summary.summaryResult;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxSummaryCellComponent, isStandalone: true, selector: "igx-grid-summary-cell", inputs: { summaryResults: "summaryResults", column: "column", firstCellIndentation: "firstCellIndentation", hasSummary: ["hasSummary", "hasSummary", booleanAttribute], summaryFormatter: "summaryFormatter", summaryTemplate: "summaryTemplate", active: "active", rowIndex: "rowIndex" }, host: { listeners: { "pointerdown": "activate()" }, properties: { "class.igx-grid-summary--active": "this.active", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID" } }, ngImport: i0, template: "@if (hasSummary) {\n    <ng-container *ngTemplateOutlet=\"summaryTemplate ? summaryTemplate : defaultSummary; context: { $implicit: summaryResults }\">\n    </ng-container>\n}\n<ng-template #defaultSummary>\n    @for (summary of summaryResults; track trackSummaryResult(summary)) {\n        <div class=\"igx-grid-summary__item\" [style.height.px]=\"itemHeight\">\n            <span class=\"igx-grid-summary__label\" [title]=\"summary.label\">{{ translateSummary(summary) }}</span>\n            <span class=\"igx-grid-summary__result\" [title]=\"formatSummaryResult(summary)\">\n                {{ formatSummaryResult(summary) }}\n            </span>\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSummaryCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxSummaryCellComponent, isStandalone: true, selector: "igx-grid-summary-cell", inputs: { summaryResults: "summaryResults", column: "column", firstCellIndentation: "firstCellIndentation", hasSummary: ["hasSummary", "hasSummary", booleanAttribute], summaryFormatter: "summaryFormatter", summaryTemplate: "summaryTemplate", active: "active", rowIndex: "rowIndex" }, host: { listeners: { "pointerdown": "activate()" }, properties: { "class.igx-grid-summary--active": "this.active", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID" } }, ngImport: i0, template: "@if (hasSummary) {\n    <ng-container *ngTemplateOutlet=\"summaryTemplate ? summaryTemplate : defaultSummary; context: { $implicit: summaryResults }\">\n    </ng-container>\n}\n<ng-template #defaultSummary>\n    @for (summary of summaryResults; track trackSummaryResult(summary)) {\n        <div class=\"igx-grid-summary__item\" [style.height.px]=\"itemHeight\">\n            <span class=\"igx-grid-summary__label\" [title]=\"summary.label\">{{ translateSummary(summary) }}</span>\n            <span class=\"igx-grid-summary__result\" [title]=\"formatSummaryResult(summary)\">\n                {{ formatSummaryResult(summary) }}\n            </span>\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSummaryCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-cell', imports: [NgTemplateOutlet], template: "@if (hasSummary) {\n    <ng-container *ngTemplateOutlet=\"summaryTemplate ? summaryTemplate : defaultSummary; context: { $implicit: summaryResults }\">\n    </ng-container>\n}\n<ng-template #defaultSummary>\n    @for (summary of summaryResults; track trackSummaryResult(summary)) {\n        <div class=\"igx-grid-summary__item\" [style.height.px]=\"itemHeight\">\n            <span class=\"igx-grid-summary__label\" [title]=\"summary.label\">{{ translateSummary(summary) }}</span>\n            <span class=\"igx-grid-summary__result\" [title]=\"formatSummaryResult(summary)\">\n                {{ formatSummaryResult(summary) }}\n            </span>\n        </div>\n    }\n</ng-template>\n" }]
         }], propDecorators: { summaryResults: [{
@@ -21424,10 +21504,10 @@ class IgxSummaryRowComponent {
             columns: cols
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxSummaryRowComponent, isStandalone: true, selector: "igx-grid-summary-row", inputs: { summaries: "summaries", gridID: "gridID", index: "index", firstCellIndentation: "firstCellIndentation" }, host: { properties: { "attr.data-rowIndex": "this.dataRowIndex" } }, providers: [IgxForOfSyncService], viewQueries: [{ propertyName: "virtDirRow", first: true, predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_summaryCells", predicate: IgxSummaryCellComponent, descendants: true, read: IgxSummaryCellComponent }], ngImport: i0, template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedStartColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedStartColumns)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedEndColumns)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col let-columns=\"columns\">\n    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxSummaryCellComponent, selector: "igx-grid-summary-cell", inputs: ["summaryResults", "column", "firstCellIndentation", "hasSummary", "summaryFormatter", "summaryTemplate", "active", "rowIndex"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSummaryRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxSummaryRowComponent, isStandalone: true, selector: "igx-grid-summary-row", inputs: { summaries: "summaries", gridID: "gridID", index: "index", firstCellIndentation: "firstCellIndentation" }, host: { properties: { "attr.data-rowIndex": "this.dataRowIndex" } }, providers: [IgxForOfSyncService], viewQueries: [{ propertyName: "virtDirRow", first: true, predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_summaryCells", predicate: IgxSummaryCellComponent, descendants: true, read: IgxSummaryCellComponent }], ngImport: i0, template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedStartColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedStartColumns)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedEndColumns)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col let-columns=\"columns\">\n    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxSummaryCellComponent, selector: "igx-grid-summary-cell", inputs: ["summaryResults", "column", "firstCellIndentation", "hasSummary", "summaryFormatter", "summaryTemplate", "active", "rowIndex"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSummaryRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-row', providers: [IgxForOfSyncService], imports: [NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, IgxGridNotGroupedPipe], template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedStartColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedStartColumns)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedEndColumns)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col let-columns=\"columns\">\n    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n" }]
         }], propDecorators: { summaries: [{
@@ -21458,10 +21538,10 @@ class IgxSummaryDataPipe {
         const summaryService = this.grid.summaryService;
         return summaryService.calculateSummaries(summaryService.rootSummaryID, this.grid.gridAPI.get_summary_data());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryDataPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryDataPipe, isStandalone: true, name: "igxGridSummaryDataPipe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSummaryDataPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxSummaryDataPipe, isStandalone: true, name: "igxGridSummaryDataPipe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryDataPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxSummaryDataPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGridSummaryDataPipe',
@@ -21546,10 +21626,10 @@ class IgxColumnResizerDirective {
         event.preventDefault();
         this.resize.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnResizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxColumnResizerDirective, isStandalone: true, selector: "[igxResizer]", inputs: { restrictHResizeMin: "restrictHResizeMin", restrictHResizeMax: "restrictHResizeMax", restrictResizerTop: "restrictResizerTop" }, outputs: { resizeEnd: "resizeEnd", resizeStart: "resizeStart", resize: "resize" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnResizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxColumnResizerDirective, isStandalone: true, selector: "[igxResizer]", inputs: { restrictHResizeMin: "restrictHResizeMin", restrictHResizeMax: "restrictHResizeMax", restrictResizerTop: "restrictResizerTop" }, outputs: { resizeEnd: "resizeEnd", resizeStart: "resizeStart", resize: "resize" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxColumnResizerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxColumnResizerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxResizer]',
@@ -21573,10 +21653,10 @@ class IgxGridColumnResizerComponent {
     constructor() {
         this.colResizingService = inject(IgxColumnResizingService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridColumnResizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxGridColumnResizerComponent, isStandalone: true, selector: "igx-grid-column-resizer", inputs: { restrictResizerTop: "restrictResizerTop" }, viewQueries: [{ propertyName: "resizer", first: true, predicate: IgxColumnResizerDirective, descendants: true, static: true }], ngImport: i0, template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n", dependencies: [{ kind: "directive", type: IgxColumnResizerDirective, selector: "[igxResizer]", inputs: ["restrictHResizeMin", "restrictHResizeMax", "restrictResizerTop"], outputs: ["resizeEnd", "resizeStart", "resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridColumnResizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IgxGridColumnResizerComponent, isStandalone: true, selector: "igx-grid-column-resizer", inputs: { restrictResizerTop: "restrictResizerTop" }, viewQueries: [{ propertyName: "resizer", first: true, predicate: IgxColumnResizerDirective, descendants: true, static: true }], ngImport: i0, template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n", dependencies: [{ kind: "directive", type: IgxColumnResizerDirective, selector: "[igxResizer]", inputs: ["restrictHResizeMin", "restrictHResizeMax", "restrictResizerTop"], outputs: ["resizeEnd", "resizeStart", "resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridColumnResizerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridColumnResizerComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-column-resizer', imports: [IgxColumnResizerDirective], template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n" }]
         }], propDecorators: { restrictResizerTop: [{
@@ -21617,10 +21697,10 @@ class IgxPivotColumnResizingService extends IgxColumnResizingService {
         this.rowHeaderGroup.grid.resizeRowDimensionPixels(rowDim, newWidth);
     }
     _handlePercentageResize() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPivotColumnResizingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPivotColumnResizingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPivotColumnResizingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPivotColumnResizingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPivotColumnResizingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPivotColumnResizingService, decorators: [{
             type: Injectable
         }] });
 
@@ -21657,10 +21737,10 @@ class IgxPivotResizeHandleDirective extends IgxResizeHandleDirective {
         super.initResizeService(event);
         this.colResizingService.rowHeaderGroup = this.rowHeaderGroup;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPivotResizeHandleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxPivotResizeHandleDirective, isStandalone: true, selector: "[igxPivotResizeHandle]", inputs: { pivotColumn: ["igxPivotResizeHandle", "pivotColumn"], rowHeaderGroup: ["igxPivotResizeHandleHeader", "rowHeaderGroup"] }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPivotResizeHandleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxPivotResizeHandleDirective, isStandalone: true, selector: "[igxPivotResizeHandle]", inputs: { pivotColumn: ["igxPivotResizeHandle", "pivotColumn"], rowHeaderGroup: ["igxPivotResizeHandleHeader", "rowHeaderGroup"] }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPivotResizeHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPivotResizeHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxPivotResizeHandle]',
@@ -21679,10 +21759,10 @@ class IgxPivotGridColumnResizerComponent extends IgxGridColumnResizerComponent {
         super(...arguments);
         this.colResizingService = inject(IgxPivotColumnResizingService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPivotGridColumnResizerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxPivotGridColumnResizerComponent, isStandalone: true, selector: "igx-pivot-grid-column-resizer", usesInheritance: true, ngImport: i0, template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n", dependencies: [{ kind: "directive", type: IgxColumnResizerDirective, selector: "[igxResizer]", inputs: ["restrictHResizeMin", "restrictHResizeMax", "restrictResizerTop"], outputs: ["resizeEnd", "resizeStart", "resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPivotGridColumnResizerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IgxPivotGridColumnResizerComponent, isStandalone: true, selector: "igx-pivot-grid-column-resizer", usesInheritance: true, ngImport: i0, template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n", dependencies: [{ kind: "directive", type: IgxColumnResizerDirective, selector: "[igxResizer]", inputs: ["restrictHResizeMin", "restrictHResizeMax", "restrictResizerTop"], outputs: ["resizeEnd", "resizeStart", "resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPivotGridColumnResizerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPivotGridColumnResizerComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-grid-column-resizer', imports: [IgxColumnResizerDirective], template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n" }]
         }] });
@@ -22434,10 +22514,10 @@ class IgxGridNavigationService {
     isAddKey(key) {
         return ROW_ADD_KEYS.has(key);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridNavigationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridNavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridNavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -22640,18 +22720,18 @@ class IgxGridValidationService {
         }
         this.updateStatus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridValidationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridValidationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridValidationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridValidationService, decorators: [{
             type: Injectable
         }] });
 
 class IgxGridBodyDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxGridBodyDirective, isStandalone: true, selector: "[igxGridBody]", providers: [IgxForOfSyncService], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxGridBodyDirective, isStandalone: true, selector: "[igxGridBody]", providers: [IgxForOfSyncService], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridBodyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridBodyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridBody]',
@@ -23609,10 +23689,10 @@ class IgxGridCellComponent {
         const rowID = useRow ? this.grid.createRow(this.intRow.index, this.intRow.data) : this.intRow.index;
         return new IgxGridCell(this.grid, rowID, this.column);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridCellComponent, isStandalone: true, selector: "igx-grid-cell", inputs: { column: "column", isPlaceholder: "isPlaceholder", isMerged: "isMerged", intRow: "intRow", row: "row", rowData: "rowData", columnData: "columnData", cellTemplate: "cellTemplate", cellValidationErrorTemplate: "cellValidationErrorTemplate", pinnedIndicator: "pinnedIndicator", value: "value", formatter: "formatter", visibleColumnIndex: "visibleColumnIndex", cellSelectionMode: "cellSelectionMode", lastSearchInfo: "lastSearchInfo", lastPinned: "lastPinned", firstPinned: "firstPinned", editMode: ["editMode", "editMode", booleanAttribute], width: "width", active: "active", displayPinnedChip: "displayPinnedChip" }, host: { listeners: { "dblclick": "onDoubleClick($event)", "click": "onClick($event)" }, properties: { "class.igx-grid__td--new": "this.isEmptyAddRowCell", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID", "attr.title": "this.title", "class.igx-grid__td--bool-true": "this.booleanClass", "class.igx-grid__td--pinned-last": "this.lastPinned", "class.igx-grid__td--pinned-first": "this.firstPinned", "class.igx-grid__td--editing": "this.editMode", "attr.role": "this.role", "attr.aria-readonly": "this.readonly", "attr.aria-describedby": "this.ariaDescribeBy", "class.igx-grid__td--invalid": "this.isInvalid", "attr.aria-invalid": "this.isInvalid", "class.igx-grid__td--valid": "this.isValidAfterEdit", "class.igx-grid__td--active": "this.active", "attr.aria-selected": "this.ariaSelected", "class.igx-grid__td--selected": "this.selected", "class.igx-grid__td--column-selected": "this.columnSelected", "class.igx-grid__td--row-pinned-first": "this.displayPinnedChip", "style.min-height.px": "this.minHeight", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-colindex": "this.ariaColIndex" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "errorIcon", first: true, predicate: ["errorIcon"], descendants: true, read: IgxIconComponent }, { propertyName: "defaultErrorTemplate", first: true, predicate: ["defaultError"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCellTemplate", first: true, predicate: ["defaultCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyCellTemplate", first: true, predicate: ["emptyCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPinnedIndicator", first: true, predicate: ["defaultPinnedIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineEditorTemplate", first: true, predicate: ["inlineEditor"], descendants: true, read: TemplateRef, static: true }, { propertyName: "addRowCellTemplate", first: true, predicate: ["addRowCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "highlight", first: true, predicate: IgxTextHighlightDirective, descendants: true, read: IgxTextHighlightDirective }, { propertyName: "errorTooltip", predicate: ["error"], descendants: true, read: IgxTooltipDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                    ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                    : column.dataType === 'currency'\n                    ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                    : column.dataType === 'percent'\n                    ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                    : value\n            \"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridCellComponent, isStandalone: true, selector: "igx-grid-cell", inputs: { column: "column", isPlaceholder: "isPlaceholder", isMerged: "isMerged", intRow: "intRow", row: "row", rowData: "rowData", columnData: "columnData", cellTemplate: "cellTemplate", cellValidationErrorTemplate: "cellValidationErrorTemplate", pinnedIndicator: "pinnedIndicator", value: "value", formatter: "formatter", visibleColumnIndex: "visibleColumnIndex", cellSelectionMode: "cellSelectionMode", lastSearchInfo: "lastSearchInfo", lastPinned: "lastPinned", firstPinned: "firstPinned", editMode: ["editMode", "editMode", booleanAttribute], width: "width", active: "active", displayPinnedChip: "displayPinnedChip" }, host: { listeners: { "dblclick": "onDoubleClick($event)", "click": "onClick($event)" }, properties: { "class.igx-grid__td--new": "this.isEmptyAddRowCell", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID", "attr.title": "this.title", "class.igx-grid__td--bool-true": "this.booleanClass", "class.igx-grid__td--pinned-last": "this.lastPinned", "class.igx-grid__td--pinned-first": "this.firstPinned", "class.igx-grid__td--editing": "this.editMode", "attr.role": "this.role", "attr.aria-readonly": "this.readonly", "attr.aria-describedby": "this.ariaDescribeBy", "class.igx-grid__td--invalid": "this.isInvalid", "attr.aria-invalid": "this.isInvalid", "class.igx-grid__td--valid": "this.isValidAfterEdit", "class.igx-grid__td--active": "this.active", "attr.aria-selected": "this.ariaSelected", "class.igx-grid__td--selected": "this.selected", "class.igx-grid__td--column-selected": "this.columnSelected", "class.igx-grid__td--row-pinned-first": "this.displayPinnedChip", "style.min-height.px": "this.minHeight", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-colindex": "this.ariaColIndex" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "errorIcon", first: true, predicate: ["errorIcon"], descendants: true, read: IgxIconComponent }, { propertyName: "defaultErrorTemplate", first: true, predicate: ["defaultError"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCellTemplate", first: true, predicate: ["defaultCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyCellTemplate", first: true, predicate: ["emptyCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPinnedIndicator", first: true, predicate: ["defaultPinnedIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineEditorTemplate", first: true, predicate: ["inlineEditor"], descendants: true, read: TemplateRef, static: true }, { propertyName: "addRowCellTemplate", first: true, predicate: ["addRowCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "highlight", first: true, predicate: IgxTextHighlightDirective, descendants: true, read: IgxTextHighlightDirective }, { propertyName: "errorTooltip", predicate: ["error"], descendants: true, read: IgxTooltipDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                    ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                    : column.dataType === 'currency'\n                    ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                    : column.dataType === 'percent'\n                    ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                    : value\n            \"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-cell', providers: [HammerGesturesManager], imports: [
                         NgClass,
@@ -23817,10 +23897,10 @@ class IgxGridGroupByAreaComponent extends IgxGroupByAreaDirective {
     clearGrouping(name) {
         this.grid.clearGrouping(name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridGroupByAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridGroupByAreaComponent, isStandalone: true, selector: "igx-grid-group-by-area", inputs: { sortingExpressions: "sortingExpressions", grid: "grid" }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    @for (expression of chipExpressions; track expression.fieldName; let last = $last) {\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    }\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridGroupByAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxGridGroupByAreaComponent, isStandalone: true, selector: "igx-grid-group-by-area", inputs: { sortingExpressions: "sortingExpressions", grid: "grid" }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    @for (expression of chipExpressions; track expression.fieldName; let last = $last) {\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    }\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridGroupByAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridGroupByAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-group-by-area', providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe], template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    @for (expression of chipExpressions; track expression.fieldName; let last = $last) {\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    }\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n" }]
         }], propDecorators: { sortingExpressions: [{
@@ -24149,10 +24229,10 @@ class IgxGridMRLNavigationService extends IgxGridNavigationService {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridMRLNavigationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridMRLNavigationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridMRLNavigationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridMRLNavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridMRLNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridMRLNavigationService, decorators: [{
             type: Injectable
         }] });
 
@@ -24702,10 +24782,10 @@ class GridBaseAPIService {
         return this.get_column_by_name(fieldName) ?
             this.get_column_by_name(fieldName).sortStrategy : undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: GridBaseAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: GridBaseAPIService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: GridBaseAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: GridBaseAPIService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: GridBaseAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: GridBaseAPIService, decorators: [{
             type: Injectable
         }] });