igniteui-angular 22.1.3 → 22.2.0-rc.0

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

@@ -5,7 +5,7 @@ import { FormsModule, RequiredValidator, NG_VALIDATORS, MinValidator, MaxValidat
 import { IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
 import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
 import * as i1$1 from 'igniteui-angular/directives';
-import { IgxButtonDirective, IgxRippleDirective, IgxGridForOfDirective, IgxDragDirective, IgxDragHandleDirective, IgxIconButtonDirective, IgxDateTimeEditorDirective, IgxForOfDirective, IgxDropDirective, IgxNoTypographyDirective, IgxToggleDirective, IgxForOfSyncService, IgxTextHighlightDirective, IgxFocusDirective, IgxTextSelectionDirective, IgxTooltipTargetDirective, IgxTooltipDirective } from 'igniteui-angular/directives';
+import { IgxButtonDirective, IgxRippleDirective, IgxGridForOfDirective, IgxDragDirective, IgxDragHandleDirective, IgxIconButtonDirective, IgxDateTimeEditorDirective, IgxDropDirective, IgxNoTypographyDirective, IgxToggleDirective, IgxForOfSyncService, IgxTextHighlightDirective, IgxFocusDirective, IgxTextSelectionDirective, IgxTooltipTargetDirective, IgxTooltipDirective } from 'igniteui-angular/directives';
 import { __decorate } from 'tslib';
 import { Subject, fromEvent, interval, animationFrameScheduler } from 'rxjs';
 import { isEqual as isEqual$1 } from 'lodash-es';
@@ -19,8 +19,9 @@ import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/sel
 import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
 import { IgxDatePickerComponent } from 'igniteui-angular/date-picker';
 import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
-import { IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, Navigate } from 'igniteui-angular/drop-down';
+import { IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down';
 import { IgxListComponent, IgxListItemComponent, IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective } from 'igniteui-angular/list';
+import { IgxVirtualScrollComponent, IgxVirtualItemDirective } from 'igniteui-angular/virtual-scroll';
 import { IgxTreeComponent, IgxTreeNodeComponent } from 'igniteui-angular/tree';
 import { IgxCircularProgressBarComponent, IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar';
 import { addRow, addChild, pinLeft, unpinLeft, jumpDown, jumpUp, editor } from '@igniteui/material-icons-extended';
@@ -396,10 +397,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: "22.1.1", ngImport: i0, type: IgxColumnActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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\" data-no-typography>\n      {{ title }}\n    </h4>\n  }\n\n  @if (!hideFilter) {\n    <igx-input-group class=\"igx-column-actions__header-input\">\n      <input\n        igxInput\n        type=\"text\"\n        [attr.aria-describedby]=\"titleID\"\n        [(ngModel)]=\"filterCriteria\"\n        [placeholder]=\"filterColumnsPrompt\"\n        autocomplete=\"off\"\n      />\n    </igx-input-group>\n  }\n</div>\n\n<div\n  class=\"igx-column-actions__columns\"\n  tabindex=\"0\"\n  [style.max-height]=\"columnsAreaMaxHeight\"\n>\n  @for (\n    column of $safeNavigationMigration($any(grid)?._columns)\n      | columnActionEnabled\n        : actionsDirective.actionEnabledColumnsFilter\n        : pipeTrigger\n      | filterActionColumns: filterCriteria : pipeTrigger\n      | sortActionColumns: columnDisplayOrder : pipeTrigger;\n    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    >\n      {{ column.header || column.field }}\n    </igx-checkbox>\n  }\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n  <button\n    type=\"button\"\n    igxButton\n    igxRipple\n    (click)=\"uncheckAllColumns()\"\n    [disabled]=\"uncheckAllDisabled\"\n  >\n    {{ uncheckAllText }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRipple\n    (click)=\"checkAllColumns()\"\n    [disabled]=\"checkAllDisabled\"\n  >\n    {{ checkAllText }}\n  </button>\n</div>\n", styles: ["@layer ig.base{.igx-column-actions{display:flex;flex-flow:column nowrap;background:var(--background);box-shadow:var(--ig-elevation-8);width:100%;flex:1 1 auto;min-width:11.25rem}.igx-column-actions__header-title{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);color:var(--title-color);margin:0;padding:1rem 1rem .5rem}.igx-column-actions__header-input{font-size:1rem;margin:0!important;padding:.5rem 1rem}.igx-column-actions__columns{display:flex;flex-flow:column nowrap;overflow-y:auto;outline-style:none}.igx-column-actions__columns-item{padding:.25rem 1rem;min-height:2rem}.igx-column-actions__buttons{display:flex;justify-content:flex-end;padding:.5rem 1rem}}@layer ig.material{@container style(--ig-theme: material){.igx-column-actions .igx-checkbox__composite-wrapper{padding:0}.igx-column-actions .igx-checkbox__label{margin-inline-start:.75rem}.igx-column-actions .igx-checkbox__label--before{margin-inline-end:.75rem}.igx-column-actions .igx-checkbox__label:empty,.igx-column-actions .igx-checkbox__label--before:empty{margin:0}}}\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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\" data-no-typography>\n      {{ title }}\n    </h4>\n  }\n\n  @if (!hideFilter) {\n    <igx-input-group class=\"igx-column-actions__header-input\">\n      <input\n        igxInput\n        type=\"text\"\n        [attr.aria-describedby]=\"titleID\"\n        [(ngModel)]=\"filterCriteria\"\n        [placeholder]=\"filterColumnsPrompt\"\n        autocomplete=\"off\"\n      />\n    </igx-input-group>\n  }\n</div>\n\n<div\n  class=\"igx-column-actions__columns\"\n  tabindex=\"0\"\n  [style.max-height]=\"columnsAreaMaxHeight\"\n>\n  @for (\n    column of $safeNavigationMigration($any(grid)?._columns)\n      | columnActionEnabled\n        : actionsDirective.actionEnabledColumnsFilter\n        : pipeTrigger\n      | filterActionColumns: filterCriteria : pipeTrigger\n      | sortActionColumns: columnDisplayOrder : pipeTrigger;\n    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    >\n      {{ column.header || column.field }}\n    </igx-checkbox>\n  }\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n  <button\n    type=\"button\"\n    igxButton\n    igxRipple\n    (click)=\"uncheckAllColumns()\"\n    [disabled]=\"uncheckAllDisabled\"\n  >\n    {{ uncheckAllText }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRipple\n    (click)=\"checkAllColumns()\"\n    [disabled]=\"checkAllDisabled\"\n  >\n    {{ checkAllText }}\n  </button>\n</div>\n", styles: ["@layer ig.base{.igx-column-actions{display:flex;flex-flow:column nowrap;background:var(--background);box-shadow:var(--ig-elevation-8);width:100%;flex:1 1 auto;min-width:11.25rem}.igx-column-actions__header-title{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);color:var(--title-color);margin:0;padding:1rem 1rem .5rem}.igx-column-actions__header-input{font-size:1rem;margin:0!important;padding:.5rem 1rem}.igx-column-actions__columns{display:flex;flex-flow:column nowrap;overflow-y:auto;outline-style:none}.igx-column-actions__columns-item{padding:.25rem 1rem;min-height:2rem}.igx-column-actions__buttons{display:flex;justify-content:flex-end;padding:.5rem 1rem}}@layer ig.material{@container style(--ig-theme: material){.igx-column-actions .igx-checkbox__composite-wrapper{padding:0}.igx-column-actions .igx-checkbox__label{margin-inline-start:.75rem}.igx-column-actions .igx-checkbox__label--before{margin-inline-end:.75rem}.igx-column-actions .igx-checkbox__label:empty,.igx-column-actions .igx-checkbox__label--before:empty{margin:0}}}\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-column-actions', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, 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\" data-no-typography>\n      {{ title }}\n    </h4>\n  }\n\n  @if (!hideFilter) {\n    <igx-input-group class=\"igx-column-actions__header-input\">\n      <input\n        igxInput\n        type=\"text\"\n        [attr.aria-describedby]=\"titleID\"\n        [(ngModel)]=\"filterCriteria\"\n        [placeholder]=\"filterColumnsPrompt\"\n        autocomplete=\"off\"\n      />\n    </igx-input-group>\n  }\n</div>\n\n<div\n  class=\"igx-column-actions__columns\"\n  tabindex=\"0\"\n  [style.max-height]=\"columnsAreaMaxHeight\"\n>\n  @for (\n    column of $safeNavigationMigration($any(grid)?._columns)\n      | columnActionEnabled\n        : actionsDirective.actionEnabledColumnsFilter\n        : pipeTrigger\n      | filterActionColumns: filterCriteria : pipeTrigger\n      | sortActionColumns: columnDisplayOrder : pipeTrigger;\n    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    >\n      {{ column.header || column.field }}\n    </igx-checkbox>\n  }\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n  <button\n    type=\"button\"\n    igxButton\n    igxRipple\n    (click)=\"uncheckAllColumns()\"\n    [disabled]=\"uncheckAllDisabled\"\n  >\n    {{ uncheckAllText }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRipple\n    (click)=\"checkAllColumns()\"\n    [disabled]=\"checkAllDisabled\"\n  >\n    {{ checkAllText }}\n  </button>\n</div>\n", styles: ["@layer ig.base{.igx-column-actions{display:flex;flex-flow:column nowrap;background:var(--background);box-shadow:var(--ig-elevation-8);width:100%;flex:1 1 auto;min-width:11.25rem}.igx-column-actions__header-title{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);color:var(--title-color);margin:0;padding:1rem 1rem .5rem}.igx-column-actions__header-input{font-size:1rem;margin:0!important;padding:.5rem 1rem}.igx-column-actions__columns{display:flex;flex-flow:column nowrap;overflow-y:auto;outline-style:none}.igx-column-actions__columns-item{padding:.25rem 1rem;min-height:2rem}.igx-column-actions__buttons{display:flex;justify-content:flex-end;padding:.5rem 1rem}}@layer ig.material{@container style(--ig-theme: material){.igx-column-actions .igx-checkbox__composite-wrapper{padding:0}.igx-column-actions .igx-checkbox__label{margin-inline-start:.75rem}.igx-column-actions .igx-checkbox__label--before{margin-inline-end:.75rem}.igx-column-actions .igx-checkbox__label:empty,.igx-column-actions .igx-checkbox__label--before:empty{margin:0}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { grid: [{
@@ -456,10 +457,10 @@ class IgxColumnActionEnabledPipe {
         this.columnActions.actionableColumns = copy;
         return copy;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnActionEnabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnActionEnabledPipe, isStandalone: true, name: "columnActionEnabled" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnActionEnabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnActionEnabledPipe, isStandalone: true, name: "columnActionEnabled" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnActionEnabledPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnActionEnabledPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'columnActionEnabled',
@@ -490,10 +491,10 @@ class IgxFilterActionColumnsPipe {
         this.columnActions.filteredColumns = copy;
         return copy;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterActionColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterActionColumnsPipe, isStandalone: true, name: "filterActionColumns" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterActionColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterActionColumnsPipe, isStandalone: true, name: "filterActionColumns" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterActionColumnsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterActionColumnsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filterActionColumns',
@@ -507,10 +508,10 @@ class IgxSortActionColumnsPipe {
         }
         return collection;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSortActionColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxSortActionColumnsPipe, isStandalone: true, name: "sortActionColumns" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSortActionColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxSortActionColumnsPipe, isStandalone: true, name: "sortActionColumns" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSortActionColumnsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSortActionColumnsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sortActionColumns',
@@ -519,10 +520,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
         }] });
 
 class IgxColumnActionsBaseDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnActionsBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxColumnActionsBaseDirective, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnActionsBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxColumnActionsBaseDirective, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnActionsBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnActionsBaseDirective, decorators: [{
             type: Directive
         }] });
 
@@ -579,10 +580,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: "22.1.1", ngImport: i0, type: IgxColumnHidingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxColumnHidingDirective, isStandalone: true, selector: "[igxColumnHiding]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnHidingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxColumnHidingDirective, isStandalone: true, selector: "[igxColumnHiding]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnHidingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnHidingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxColumnHiding]',
@@ -643,10 +644,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: "22.1.1", ngImport: i0, type: IgxColumnPinningDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxColumnPinningDirective, isStandalone: true, selector: "[igxColumnPinning]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnPinningDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxColumnPinningDirective, isStandalone: true, selector: "[igxColumnPinning]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnPinningDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnPinningDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxColumnPinning]',
@@ -666,14 +667,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
 
 /* eslint-disable @angular-eslint/directive-selector */
 class IgxColumnRequiredValidatorDirective extends RequiredValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnRequiredValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxColumnRequiredValidatorDirective, isStandalone: true, selector: "igx-column[required]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnRequiredValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxColumnRequiredValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnRequiredValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[required]',
@@ -686,14 +687,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }] });
 class IgxColumnMinValidatorDirective extends MinValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnMinValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxColumnMinValidatorDirective, isStandalone: true, selector: "igx-column[min]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMinValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxColumnMinValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMinValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[min]',
@@ -706,14 +707,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }] });
 class IgxColumnMaxValidatorDirective extends MaxValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnMaxValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxColumnMaxValidatorDirective, isStandalone: true, selector: "igx-column[max]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMaxValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxColumnMaxValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMaxValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[max]',
@@ -726,14 +727,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }] });
 class IgxColumnEmailValidatorDirective extends EmailValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnEmailValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxColumnEmailValidatorDirective, isStandalone: true, selector: "igx-column[email]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnEmailValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxColumnEmailValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnEmailValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[email]',
@@ -746,14 +747,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }] });
 class IgxColumnMinLengthValidatorDirective extends MinLengthValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxColumnMinLengthValidatorDirective, isStandalone: true, selector: "igx-column[minlength]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[minlength]',
@@ -766,14 +767,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }] });
 class IgxColumnMaxLengthValidatorDirective extends MaxLengthValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxColumnMaxLengthValidatorDirective, isStandalone: true, selector: "igx-column[maxlength]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[maxlength]',
@@ -786,14 +787,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }] });
 class IgxColumnPatternValidatorDirective extends PatternValidator {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnPatternValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxColumnPatternValidatorDirective, isStandalone: true, selector: "igx-column[pattern]", providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnPatternValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxColumnPatternValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnPatternValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[pattern]',
@@ -2364,10 +2365,10 @@ class IgxGridSelectionService {
     isRowDeleted(rowID) {
         return this.grid.gridAPI.row_deleted_transaction(rowID);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridSelectionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridSelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridSelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3029,10 +3030,10 @@ class IgxGridCRUDService extends IgxRowAddCrudState {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCRUDService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCRUDService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCRUDService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCRUDService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCRUDService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCRUDService, decorators: [{
             type: Injectable
         }] });
 
@@ -3603,10 +3604,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: "22.1.1", ngImport: i0, type: IgxRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxRowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowBaseComponent]',
@@ -3676,10 +3677,10 @@ class IgxFilterCellTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxFilterCellTemplateDirective, isStandalone: true, selector: "[igxFilterCellTemplate]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxFilterCellTemplateDirective, isStandalone: true, selector: "[igxFilterCellTemplate]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterCellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxFilterCellTemplate]',
@@ -3694,10 +3695,10 @@ class IgxCellTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxCellTemplateDirective, isStandalone: true, selector: "[igxCell]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCellTemplateDirective, isStandalone: true, selector: "[igxCell]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCell]',
@@ -3712,10 +3713,10 @@ class IgxCellValidationErrorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCellValidationErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxCellValidationErrorDirective, isStandalone: true, selector: "[igxCellValidationError]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellValidationErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCellValidationErrorDirective, isStandalone: true, selector: "[igxCellValidationError]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCellValidationErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellValidationErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCellValidationError]',
@@ -3730,10 +3731,10 @@ class IgxCellHeaderTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCellHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxCellHeaderTemplateDirective, isStandalone: true, selector: "[igxHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCellHeaderTemplateDirective, isStandalone: true, selector: "[igxHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCellHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeader]',
@@ -3747,10 +3748,10 @@ class IgxCellFooterTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCellFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxCellFooterTemplateDirective, isStandalone: true, selector: "[igxFooter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCellFooterTemplateDirective, isStandalone: true, selector: "[igxFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCellFooterTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellFooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxFooter]',
@@ -3765,10 +3766,10 @@ class IgxCellEditorTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCellEditorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxCellEditorTemplateDirective, isStandalone: true, selector: "[igxCellEditor]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellEditorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCellEditorTemplateDirective, isStandalone: true, selector: "[igxCellEditor]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCellEditorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellEditorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCellEditor]',
@@ -3783,10 +3784,10 @@ class IgxCollapsibleIndicatorTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCollapsibleIndicatorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxCollapsibleIndicatorTemplateDirective, isStandalone: true, selector: "[igxCollapsibleIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCollapsibleIndicatorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCollapsibleIndicatorTemplateDirective, isStandalone: true, selector: "[igxCollapsibleIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCollapsibleIndicatorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCollapsibleIndicatorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCollapsibleIndicator]',
@@ -3801,10 +3802,10 @@ class IgxSummaryTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxSummaryTemplateDirective, isStandalone: true, selector: "[igxSummary]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxSummaryTemplateDirective, isStandalone: true, selector: "[igxSummary]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSummary]',
@@ -3827,10 +3828,10 @@ var DropPosition;
  * @internal
  */
 class IgxColumnMovingService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnMovingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnMovingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMovingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMovingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnMovingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMovingService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -6266,8 +6267,8 @@ class IgxColumnComponent {
             this._applySelectableClass = value;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.7", 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(),
@@ -6417,7 +6418,7 @@ __decorate([
     notifyChanges(),
     WatchColumnChanges()
 ], IgxColumnComponent.prototype, "editorOptions", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-column', template: ``, standalone: true, styles: [":host{display:none}\n"] }]
         }], propDecorators: { field: [{
@@ -6953,12 +6954,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: "22.1.1", ngImport: i0, type: IgxColumnGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxColumnGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxColumnGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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>
@@ -7124,12 +7125,12 @@ class IgxColumnLayoutComponent extends IgxColumnGroupComponent {
             this.childrenVisibleIndexes.push({ column: child, index: vIndex });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxColumnLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxColumnLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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>
@@ -7369,10 +7370,10 @@ class IgxAdvancedFilteringDialogComponent {
             this.queryBuilderResourceStrings = queryBuilderRS;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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            [resourceStrings]=\"queryBuilderResourceStrings\"\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", "ghostClasses", "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", "searchValueTemplate", "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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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            [resourceStrings]=\"queryBuilderResourceStrings\"\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", "ghostClasses", "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", "searchValueTemplate", "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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-advanced-filtering-dialog', changeDetection: ChangeDetectionStrategy.Eager, 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            [resourceStrings]=\"queryBuilderResourceStrings\"\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" }]
         }], ctorParameters: () => [], propDecorators: { queryBuilder: [{
@@ -7391,10 +7392,10 @@ class BaseFilteringComponent {
         this.element = inject((ElementRef));
         this.platform = inject(PlatformUtil);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseFilteringComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: BaseFilteringComponent, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseFilteringComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: BaseFilteringComponent, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseFilteringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseFilteringComponent, decorators: [{
             type: Directive
         }] });
 
@@ -7438,10 +7439,10 @@ class IgxExcelStyleClearFiltersComponent {
         });
         this.esf.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-clear-filters', changeDetection: ChangeDetectionStrategy.Eager, 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" }]
         }] });
@@ -7636,10 +7637,10 @@ class IgxExcelStyleDefaultExpressionComponent {
     onOutletPointerDown(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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    @if (column.dataType === 'percent' && (expressionUI.expression.searchVal || expressionUI.expression.searchVal === 0)) {\n        <igx-suffix>\n            <span class=\"igx-grid__filtering-row-percent-hint\">{{ expressionUI.expression.searchVal | percent:column.pipeArgs.digitsInfo:grid.locale }}</span>\n        </igx-suffix>\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "[igxPrefix],[igxStart],igx-prefix" }, { 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: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { 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"] }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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    @if (column.dataType === 'percent' && (expressionUI.expression.searchVal || expressionUI.expression.searchVal === 0)) {\n        <igx-suffix>\n            <span class=\"igx-grid__filtering-row-percent-hint\">{{ expressionUI.expression.searchVal | percent:column.pipeArgs.digitsInfo:grid.locale }}</span>\n        </igx-suffix>\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "[igxPrefix],[igxStart],igx-prefix" }, { 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: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { 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"] }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-default-expression', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective, IgxPercentFormatterPipe], 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    @if (column.dataType === 'percent' && (expressionUI.expression.searchVal || expressionUI.expression.searchVal === 0)) {\n        <igx-suffix>\n            <span class=\"igx-grid__filtering-row-percent-hint\">{{ expressionUI.expression.searchVal | percent:column.pipeArgs.digitsInfo:grid.locale }}</span>\n        </igx-suffix>\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: [{
@@ -7694,10 +7695,10 @@ class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressio
     get weekStart() {
         return this.i18nFormatter.getLocaleFirstDayOfWeek(this.grid.locale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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\n  #dropdownConditions\n  type=\"box\"\n  [placeholder]=\"conditionsPlaceholder\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n  [overlaySettings]=\"dropDownOverlaySettings\"\n>\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\n      [value]=\"condition\"\n      [text]=\"getConditionFriendlyName(condition)\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"getCondition(condition).iconName\"\n      ></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\n    #picker\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [formatter]=\"column.formatter!\"\n    [disabled]=\"!!(\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    )\"\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\n    #picker\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n    [formatter]=\"column.formatter!\"\n    [disabled]=\"!!(\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    )\"\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\n      #input\n      igxInput\n      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]=\"!!(\n        expressionUI.expression.condition &&\n        expressionUI.expression.condition.isUnary\n      )\"\n    />\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\n      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    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n    <span\n      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    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n  </igx-buttongroup>\n}\n\n<div\n  #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: "[igxPrefix],[igxStart],igx-prefix" }, { 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", "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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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\n  #dropdownConditions\n  type=\"box\"\n  [placeholder]=\"conditionsPlaceholder\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n  [overlaySettings]=\"dropDownOverlaySettings\"\n>\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\n      [value]=\"condition\"\n      [text]=\"getConditionFriendlyName(condition)\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"getCondition(condition).iconName\"\n      ></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\n    #picker\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [formatter]=\"column.formatter!\"\n    [disabled]=\"!!(\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    )\"\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\n    #picker\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n    [formatter]=\"column.formatter!\"\n    [disabled]=\"!!(\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    )\"\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\n      #input\n      igxInput\n      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]=\"!!(\n        expressionUI.expression.condition &&\n        expressionUI.expression.condition.isUnary\n      )\"\n    />\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\n      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    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n    <span\n      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    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n  </igx-buttongroup>\n}\n\n<div\n  #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: "[igxPrefix],[igxStart],igx-prefix" }, { 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", "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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-date-expression', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective], template: "<igx-select\n  #dropdownConditions\n  type=\"box\"\n  [placeholder]=\"conditionsPlaceholder\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n  [overlaySettings]=\"dropDownOverlaySettings\"\n>\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\n      [value]=\"condition\"\n      [text]=\"getConditionFriendlyName(condition)\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"getCondition(condition).iconName\"\n      ></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\n    #picker\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [formatter]=\"column.formatter!\"\n    [disabled]=\"!!(\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    )\"\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\n    #picker\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n    [formatter]=\"column.formatter!\"\n    [disabled]=\"!!(\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    )\"\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\n      #input\n      igxInput\n      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]=\"!!(\n        expressionUI.expression.condition &&\n        expressionUI.expression.condition.isUnary\n      )\"\n    />\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\n      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    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n    <span\n      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    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n  </igx-buttongroup>\n}\n\n<div\n  #overlayOutlet\n  igxOverlayOutlet\n  (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n" }]
         }], propDecorators: { input: [{
@@ -7884,10 +7885,10 @@ class IgxExcelStyleCustomDialogComponent {
             this.expressionsContainer.nativeElement.scrollTop = this.expressionsContainer.nativeElement.scrollHeight;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxExcelStyleCustomDialogComponent, isStandalone: true, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId" }, viewQueries: [{ 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\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    <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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxExcelStyleCustomDialogComponent, isStandalone: true, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId" }, viewQueries: [{ 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\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    <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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-custom-dialog', changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent], template: "<article\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    <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" }]
         }], ctorParameters: () => [], propDecorators: { expressionsList: [{
@@ -8089,10 +8090,10 @@ class IgxExcelStyleConditionalFilterComponent {
     get conditions() {
         return this.esf.column.filters.conditionList();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxExcelStyleConditionalFilterComponent, isStandalone: true, selector: "igx-excel-style-conditional-filter", viewQueries: [{ 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", 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxExcelStyleConditionalFilterComponent, isStandalone: true, selector: "igx-excel-style-conditional-filter", viewQueries: [{ 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", 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-conditional-filter', changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent], 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" }]
         }], ctorParameters: () => [], propDecorators: { subMenu: [{
@@ -8107,10 +8108,10 @@ class IgxExcelStyleHeaderComponent {
     constructor() {
         this.esf = inject(BaseFilteringComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 data-no-typography>{{ 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($event)\"\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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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 data-no-typography>{{ 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($event)\"\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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-header', changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, IgxIconComponent, IgxIconButtonDirective], template: "@if (esf.column) {\n    <header class=\"igx-excel-filter__menu-header\">\n        <h4 data-no-typography>{{ 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($event)\"\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: [{
@@ -8131,10 +8132,10 @@ class IgxExcelStyleHidingComponent {
     constructor() {
         this.esf = inject(BaseFilteringComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleHidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleHidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleHidingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleHidingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-hiding', changeDetection: ChangeDetectionStrategy.Eager, 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" }]
         }] });
@@ -8231,10 +8232,10 @@ class IgxExcelStyleMovingComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleMovingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleMovingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleMovingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleMovingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-moving', changeDetection: ChangeDetectionStrategy.Eager, 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: [{
@@ -8249,10 +8250,10 @@ class IgxExcelStylePinningComponent {
     constructor() {
         this.esf = inject(BaseFilteringComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStylePinningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStylePinningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStylePinningComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStylePinningComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-pinning', changeDetection: ChangeDetectionStrategy.Eager, 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" }]
         }] });
@@ -8265,10 +8266,10 @@ class IgxExcelStyleLoadingValuesTemplateDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxExcelStyleLoadingValuesTemplateDirective, isStandalone: true, selector: "[igxExcelStyleLoading]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxExcelStyleLoadingValuesTemplateDirective, isStandalone: true, selector: "[igxExcelStyleLoading]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleLoading]',
@@ -8276,6 +8277,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }] });
 let NEXT_ID = 0;
+/** Rows the search list is laid out to show at once. */
+const ITEMS_IN_VIEW = 10;
 const TREE_GRID_GROUPING_HIDDEN_FIELD = '_Igx_Hidden_Data_';
 /**
  * A component used for presenting Excel style search UI.
@@ -8363,30 +8366,21 @@ class IgxExcelStyleSearchComponent {
         this.activeDescendant = '';
         this._id = `igx-excel-style-search-${NEXT_ID++}`;
         this._isLoading = true;
-        this._containerSize = 0;
         this._focusedItem = null;
         this.destroy$ = new Subject();
         /**
          * @hidden @internal
          */
         this.refreshSize = () => {
-            if (this.virtDir) {
-                this.updateContainerSize();
-                const firstItem = this.list?.children.first;
-                const itemSize = firstItem?.element.getBoundingClientRect().height;
-                if (itemSize) {
-                    // Excel filter rows are uniform; use the outer size to keep the scrollbar range stable.
-                    this._measuredItemSize = itemSize;
-                }
-                this.virtDir.igxForContainerSize = this.containerSize;
-                this.virtDir.igxForItemSize = this.itemSize;
-                this.virtDir.recalcUpdateSizes();
+            // Only flushes the bindings the surrounding menu changed; the list measures itself.
+            if (this.virtualScroll && !this.cdr.destroyed) {
                 this.cdr.detectChanges();
             }
         };
         const esf = this.esf;
         esf.loadingStart.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.displayedListData = [];
+            this.reconcileEmptyList();
             this.isLoading = true;
         });
         esf.loadingEnd.pipe(takeUntil(this.destroy$)).subscribe(() => {
@@ -8400,10 +8394,7 @@ class IgxExcelStyleSearchComponent {
             });
         });
         esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            this.virtDir?.resetScrollPosition();
-            if (this.virtDir) {
-                this.virtDir.state.startIndex = 0;
-            }
+            void this.virtualScroll?.scrollToIndex(0);
         });
         esf.listDataLoaded.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this._selectAllItem = this.esf.listData[0];
@@ -8511,43 +8502,31 @@ class IgxExcelStyleSearchComponent {
     }
     /**
      * @hidden @internal
+     * The height the list is given. The menu it sits in is closed until the pass that opens
+     * it, so the list has no size to measure in that pass and needs one to start from.
+     */
+    get viewportSize() {
+        return this.itemSize * ITEMS_IN_VIEW;
+    }
+    /**
+     * @hidden @internal
+     * The estimated height, in pixels, of a single list item for the current size. The
+     * virtual scroll replaces it with the real size once the items are measured in the DOM.
      */
     get itemSize() {
-        let itemSize = '40px';
-        if (this._measuredItemSize) {
-            return `${this._measuredItemSize}px`;
-        }
         const esf = this.esf;
         switch (esf.size) {
-            case _Size.Medium:
-                itemSize = '32px';
-                break;
-            case _Size.Small:
-                itemSize = '28px';
-                break;
-            default: break;
+            case _Size.Medium: return 32;
+            case _Size.Small: return 28;
+            default: return 40;
         }
-        return itemSize;
     }
     /**
      * @hidden @internal
+     * Scrolling recycles rows, so it can take the focused row's element away.
      */
-    get containerSize() {
-        return this._containerSize;
-    }
-    /**
-     * @hidden @internal
-     * Measures the rendered list height and caches it. Reading `offsetHeight` directly in
-     * the template binding throws ExpressionChangedAfterItHasBeenChecked when the list height
-     * settles during the same change-detection pass, so the measurement is taken here (from
-     * `refreshSize`, outside CD) and the getter returns the cached value.
-     */
-    updateContainerSize() {
-        // GE Nov 1st, 2021 #10355 Keep a numeric value so the chunk size is calculated properly.
-        // A 0 (instead of undefined) makes _calculateChunkSize() off the ForOfDirective behave.
-        this._containerSize = this.esf.listData.length
-            ? (this.list?.element.nativeElement.clientHeight ?? 0)
-            : 0;
+    onVirtualStateChange() {
+        this.refreshActiveDescendant();
     }
     get id() {
         return this._id;
@@ -8558,9 +8537,6 @@ class IgxExcelStyleSearchComponent {
     getItemId(index) {
         return `${this.id}-item-${index}`;
     }
-    setActiveDescendant() {
-        this.activeDescendant = this.focusedItem?.id || '';
-    }
     get focusedItem() {
         return this._focusedItem;
     }
@@ -8602,6 +8578,7 @@ class IgxExcelStyleSearchComponent {
         }
         if (!this.esf.listData || !this.esf.listData.length) {
             this.displayedListData = [];
+            this.reconcileEmptyList();
             return;
         }
         let selectAllBtn;
@@ -8673,6 +8650,7 @@ class IgxExcelStyleSearchComponent {
                 this.displayedListData = [];
             }
         }
+        this.reconcileEmptyList();
         if (this.displayedListData.length > 2) {
             this.matchesCount = this.displayedListData.length - 2;
         }
@@ -8851,19 +8829,19 @@ class IgxExcelStyleSearchComponent {
         }
     }
     onFocus() {
-        const firstIndexInView = this.virtDir.state.startIndex;
-        if (this.virtDir.igxForOf.length > 0) {
+        const firstIndexInView = this.firstVisibleIndex();
+        if (firstIndexInView < this.displayedListData.length) {
             this.focusedItem = {
                 id: this.getItemId(firstIndexInView),
                 index: firstIndexInView,
-                checked: this.virtDir.igxForOf[firstIndexInView].isSelected
+                checked: this.displayedListData[firstIndexInView].isSelected
             };
         }
-        this.setActiveDescendant();
+        this.refreshActiveDescendant();
     }
     onFocusOut() {
         this.focusedItem = null;
-        this.setActiveDescendant();
+        this.refreshActiveDescendant();
     }
     /**
      * @hidden @internal
@@ -8972,17 +8950,16 @@ class IgxExcelStyleSearchComponent {
         return numericValue.toString().toLowerCase().indexOf(searchVal) > -1;
     }
     onArrowUpKeyDown() {
-        if (this.focusedItem && this.focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
+        if (this.focusedItem && this.focusedItem.index === 0) {
             // on ArrowUp the focus stays on the same element if it is the first focused
             return;
         }
         else {
             this.navigateItem(this.focusedItem ? this.focusedItem.index - 1 : 0);
         }
-        this.setActiveDescendant();
     }
     onArrowDownKeyDown() {
-        const lastIndex = this.virtDir.igxForOf.length - 1;
+        const lastIndex = this.displayedListData.length - 1;
         if (this.focusedItem && this.focusedItem.index === lastIndex) {
             // on ArrowDown the focus stays on the same element if it is the last focused
             return;
@@ -8990,15 +8967,12 @@ class IgxExcelStyleSearchComponent {
         else {
             this.navigateItem(this.focusedItem ? this.focusedItem.index + 1 : 0);
         }
-        this.setActiveDescendant();
     }
     onHomeKeyDown() {
         this.navigateItem(0);
-        this.setActiveDescendant();
     }
     onEndKeyDown() {
-        this.navigateItem(this.virtDir.igxForOf.length - 1);
-        this.setActiveDescendant();
+        this.navigateItem(this.displayedListData.length - 1);
     }
     onActionKeyDown() {
         const dataItem = this.displayedListData[this.focusedItem.index];
@@ -9011,28 +8985,64 @@ class IgxExcelStyleSearchComponent {
         this.onCheckboxChange(args);
     }
     navigateItem(index) {
-        if (index === -1 || index >= this.virtDir.igxForOf.length) {
+        if (index === -1 || index >= this.displayedListData.length) {
             return;
         }
-        const direction = index > (this.focusedItem ? this.focusedItem.index : -1) ? Navigate.Down : Navigate.Up;
-        const scrollRequired = this.isIndexOutOfBounds(index, direction);
         this.focusedItem = {
             id: this.getItemId(index),
-            index: index,
-            checked: this.virtDir.igxForOf[index].isSelected
+            index,
+            checked: this.displayedListData[index].isSelected
         };
-        if (scrollRequired) {
-            this.virtDir.scrollTo(index);
+        // Names it now if it is rendered, nothing while the scroll is bringing it in.
+        this.refreshActiveDescendant();
+        // 'nearest' leaves the scroll position untouched when the item is already in view.
+        void this.virtualScroll?.scrollToIndex(index, { block: 'nearest' })
+            .then(() => this.refreshActiveDescendant());
+    }
+    /**
+     * The first row the viewport shows. The window reaches above it by the over-scan
+     * buffer, so its start index would focus a row that is off screen.
+     */
+    firstVisibleIndex() {
+        const host = this.virtualScrollRef?.nativeElement;
+        if (!host) {
+            return 0;
         }
+        const wrappers = Array.from(host.querySelectorAll('[data-index]'));
+        if (!wrappers.length) {
+            return 0;
+        }
+        const viewportTop = host.getBoundingClientRect().top;
+        for (const wrapper of wrappers) {
+            if (wrapper.getBoundingClientRect().bottom > viewportTop + 1) {
+                return Number(wrapper.dataset['index']);
+            }
+        }
+        // Every rendered row sits above the viewport; the window starts at the first of them.
+        return Number(wrappers[0].dataset['index']);
     }
-    isIndexOutOfBounds(index, direction) {
-        const virtState = this.virtDir.state;
-        const currentPosition = this.virtDir.getScroll().scrollTop;
-        const itemPosition = this.virtDir.getScrollForIndex(index, direction === Navigate.Down);
-        const indexOutOfChunk = index < virtState.startIndex || index > virtState.chunkSize + virtState.startIndex;
-        const scrollNeeded = direction === Navigate.Down ? currentPosition < itemPosition : currentPosition > itemPosition;
-        const subRequired = indexOutOfChunk || scrollNeeded;
-        return subRequired;
+    /**
+     * Clears the focused option when no displayed item remains, so the listbox stops
+     * naming a row that the empty render took away.
+     */
+    reconcileEmptyList() {
+        if (this.displayedListData.length) {
+            return;
+        }
+        this.focusedItem = null;
+        this.refreshActiveDescendant();
+    }
+    /** Names the focused row's element while it is rendered, and nothing while it is not. */
+    refreshActiveDescendant() {
+        const index = this._focusedItem?.index;
+        const id = index !== undefined ? this.getItemId(index) : '';
+        // The rendered rows are the authority: a cached range would need every render,
+        // and an unchanged window is not reported twice.
+        const next = id && this.list?.children?.some(item => item.element.id === id) ? id : '';
+        if (this.activeDescendant !== next) {
+            this.activeDescendant = next;
+            this.cdr.markForCheck();
+        }
     }
     isTreeGridWithGroupBy() {
         if (this.esf.grid.type !== 'tree') {
@@ -9045,12 +9055,12 @@ class IgxExcelStyleSearchComponent {
     isRemote() {
         return this.esf.grid.verticalScrollContainer.isRemote || this.esf.grid.pagingMode === GridPagingMode.Remote;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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]=\"\n      esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\n    \"\n    autocomplete=\"off\"\n  />\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      >\n      </igx-icon>\n    </igx-suffix>\n  }\n</igx-input-group>\n\n@if (!isHierarchical()) {\n  <igx-list\n    #list\n    role=\"listbox\"\n    [isLoading]=\"isLoading\"\n    (keydown)=\"handleKeyDown($event)\"\n    tabindex=\"0\"\n    [attr.aria-activedescendant]=\"this.activeDescendant\"\n    (focus)=\"onFocus()\"\n    (focusout)=\"onFocusOut()\"\n  >\n    <div style=\"overflow: hidden; position: relative\">\n      <igx-list-item\n        [class.igx-list__item-base--active]=\"\n          focusedItem?.id === this.getItemId(i)\n        \"\n        [attr.id]=\"getItemId(i)\"\n        role=\"option\"\n        *igxFor=\"\n          let item of displayedListData;\n          index as i;\n          scrollOrientation: 'vertical';\n          containerSize: containerSize;\n          itemSize: itemSize\n        \"\n      >\n        <igx-checkbox\n          [value]=\"item\"\n          [tabindex]=\"-1\"\n          [checked]=\"$safeNavigationMigration(item?.isSelected)\"\n          [disableRipple]=\"true\"\n          [indeterminate]=\"$safeNavigationMigration(item?.indeterminate)\"\n          [disableTransitions]=\"true\"\n          (change)=\"onCheckboxChange($event)\"\n        >\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\"> </ng-container>\n      </div>\n    </ng-template>\n    <ng-template igxEmptyList>\n      <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n    <div\n      class=\"igx-excel-filter__filter-results\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      {{\n        esf.grid?.resourceStrings.igx_grid_excel_matches_count ? \n        esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace(\n          '{0}',\n          matchesCount.toString()\n        ) : ''\n      }}\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\n            #selectAllCheckbox\n            [value]=\"selectAllItem\"\n            [checked]=\"selectAllItem?.isSelected\"\n            [disableRipple]=\"true\"\n            [indeterminate]=\"selectAllItem?.indeterminate\"\n            [disableTransitions]=\"true\"\n            (change)=\"onSelectAllCheckboxChange($event)\"\n          >\n            {{ selectAllItem.label }}\n          </igx-checkbox>\n        </div>\n        @if (searchValue) {\n          <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox\n              #addToCurrentFilterCheckbox\n              [value]=\"addToCurrentFilterItem\"\n              [checked]=\"addToCurrentFilterItem.isSelected\"\n              [disableRipple]=\"true\"\n              [disableTransitions]=\"true\"\n            >\n              {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n          </div>\n        }\n      </div>\n    }\n    <igx-tree\n      #tree\n      selection=\"Cascading\"\n      (nodeSelection)=\"onNodeSelectionChange($event)\"\n    >\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\n              [data]=\"childLevel1\"\n              [selected]=\"childLevel1.isSelected\"\n            >\n              <div>{{ childLevel1.label }}</div>\n              @for (\n                childLevel2 of childLevel1.children;\n                track childLevel2.value\n              ) {\n                <igx-tree-node\n                  [data]=\"childLevel2\"\n                  [selected]=\"childLevel2.isSelected\"\n                >\n                  <div>{{ childLevel2.label }}</div>\n                  @for (\n                    childLevel3 of childLevel2.children;\n                    track childLevel3.value\n                  ) {\n                    <igx-tree-node\n                      [data]=\"childLevel3\"\n                      [selected]=\"childLevel3.isSelected\"\n                    >\n                      <div>{{ childLevel3.label }}</div>\n                      @for (\n                        childLevel4 of childLevel3.children;\n                        track childLevel4.value\n                      ) {\n                        <igx-tree-node\n                          [data]=\"childLevel4\"\n                          [selected]=\"childLevel4.isSelected\"\n                        >\n                          <div>{{ childLevel4.label }}</div>\n                          @for (\n                            childLevel5 of childLevel4.children;\n                            track childLevel5.value\n                          ) {\n                            <igx-tree-node\n                              [data]=\"childLevel5\"\n                              [selected]=\"childLevel5.isSelected\"\n                            >\n                              <div>{{ childLevel5.label }}</div>\n                              @for (\n                                childLevel6 of childLevel5.children;\n                                track childLevel6.value\n                              ) {\n                                <igx-tree-node\n                                  [data]=\"childLevel6\"\n                                  [selected]=\"childLevel6.isSelected\"\n                                >\n                                  <div>{{ childLevel6.label }}</div>\n                                  @for (\n                                    childLevel7 of childLevel6.children;\n                                    track childLevel7.value\n                                  ) {\n                                    <igx-tree-node\n                                      [data]=\"childLevel7\"\n                                      [selected]=\"childLevel7.isSelected\"\n                                    >\n                                      <div>{{ childLevel7.label }}</div>\n                                      @for (\n                                        childLevel8 of childLevel7.children;\n                                        track childLevel8.value\n                                      ) {\n                                        <igx-tree-node\n                                          [data]=\"childLevel8\"\n                                          [selected]=\"childLevel8.isSelected\"\n                                        >\n                                          <div>{{ childLevel8.label }}</div>\n                                          @for (\n                                            childLevel9 of childLevel8.children;\n                                            track childLevel9.value\n                                          ) {\n                                            <igx-tree-node\n                                              [data]=\"childLevel9\"\n                                              [selected]=\"\n                                                childLevel9.isSelected\n                                              \"\n                                            >\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\"> </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\"> </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 igxButton=\"flat\" (click)=\"esf.cancel()\">\n      {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n    </button>\n  </div>\n  <div class=\"igx-excel-filter__apply\">\n    <button\n      type=\"button\"\n      igxButton=\"contained\"\n      [disabled]=\"applyButtonDisabled\"\n      (click)=\"applyFilter()\"\n    >\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: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "[igxSuffix],[igxEnd],igx-suffix" }, { 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", "chunkSizeChange", "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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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: "virtualScroll", first: true, predicate: ["virtualScroll"], descendants: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScroll"], descendants: true, read: ElementRef }, { 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]=\"\n      esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\n    \"\n    autocomplete=\"off\"\n  />\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      >\n      </igx-icon>\n    </igx-suffix>\n  }\n</igx-input-group>\n\n@if (!isHierarchical()) {\n  <igx-list\n    #list\n    role=\"listbox\"\n    [isLoading]=\"isLoading\"\n    (keydown)=\"handleKeyDown($event)\"\n    tabindex=\"0\"\n    [attr.aria-activedescendant]=\"this.activeDescendant\"\n    (focus)=\"onFocus()\"\n    (focusout)=\"onFocusOut()\"\n  >\n    <igx-virtual-scroll\n      #virtualScroll\n      role=\"presentation\"\n      [data]=\"displayedListData\"\n      [estimatedItemSize]=\"itemSize\"\n      [initialViewportSize]=\"viewportSize\"\n      (stateChange)=\"onVirtualStateChange()\"\n    >\n      <ng-template igxVirtualItem let-item let-i=\"index\">\n        <igx-list-item\n          [class.igx-list__item-base--active]=\"focusedItem?.id === this.getItemId(i)\"\n          [attr.id]=\"getItemId(i)\"\n          role=\"option\"\n        >\n          <igx-checkbox\n            [value]=\"item\"\n            [tabindex]=\"-1\"\n            [checked]=\"$safeNavigationMigration(item?.isSelected)\"\n            [disableRipple]=\"true\"\n            [indeterminate]=\"$safeNavigationMigration(item?.indeterminate)\"\n            [disableTransitions]=\"true\"\n            (change)=\"onCheckboxChange($event)\"\n          >\n            {{ item.label }}\n          </igx-checkbox>\n        </igx-list-item>\n      </ng-template>\n    </igx-virtual-scroll>\n    <ng-template igxDataLoading>\n      <div class=\"igx-excel-filter__loading\">\n        <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\"> </ng-container>\n      </div>\n    </ng-template>\n    <ng-template igxEmptyList>\n      <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n    <div\n      class=\"igx-excel-filter__filter-results\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      {{\n        esf.grid?.resourceStrings.igx_grid_excel_matches_count ?\n        esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace(\n          '{0}',\n          matchesCount.toString()\n        ) : ''\n      }}\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\n            #selectAllCheckbox\n            [value]=\"selectAllItem\"\n            [checked]=\"selectAllItem?.isSelected\"\n            [disableRipple]=\"true\"\n            [indeterminate]=\"selectAllItem?.indeterminate\"\n            [disableTransitions]=\"true\"\n            (change)=\"onSelectAllCheckboxChange($event)\"\n          >\n            {{ selectAllItem.label }}\n          </igx-checkbox>\n        </div>\n        @if (searchValue) {\n          <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox\n              #addToCurrentFilterCheckbox\n              [value]=\"addToCurrentFilterItem\"\n              [checked]=\"addToCurrentFilterItem.isSelected\"\n              [disableRipple]=\"true\"\n              [disableTransitions]=\"true\"\n            >\n              {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n          </div>\n        }\n      </div>\n    }\n    <igx-tree\n      #tree\n      selection=\"Cascading\"\n      (nodeSelection)=\"onNodeSelectionChange($event)\"\n    >\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\n              [data]=\"childLevel1\"\n              [selected]=\"childLevel1.isSelected\"\n            >\n              <div>{{ childLevel1.label }}</div>\n              @for (\n                childLevel2 of childLevel1.children;\n                track childLevel2.value\n              ) {\n                <igx-tree-node\n                  [data]=\"childLevel2\"\n                  [selected]=\"childLevel2.isSelected\"\n                >\n                  <div>{{ childLevel2.label }}</div>\n                  @for (\n                    childLevel3 of childLevel2.children;\n                    track childLevel3.value\n                  ) {\n                    <igx-tree-node\n                      [data]=\"childLevel3\"\n                      [selected]=\"childLevel3.isSelected\"\n                    >\n                      <div>{{ childLevel3.label }}</div>\n                      @for (\n                        childLevel4 of childLevel3.children;\n                        track childLevel4.value\n                      ) {\n                        <igx-tree-node\n                          [data]=\"childLevel4\"\n                          [selected]=\"childLevel4.isSelected\"\n                        >\n                          <div>{{ childLevel4.label }}</div>\n                          @for (\n                            childLevel5 of childLevel4.children;\n                            track childLevel5.value\n                          ) {\n                            <igx-tree-node\n                              [data]=\"childLevel5\"\n                              [selected]=\"childLevel5.isSelected\"\n                            >\n                              <div>{{ childLevel5.label }}</div>\n                              @for (\n                                childLevel6 of childLevel5.children;\n                                track childLevel6.value\n                              ) {\n                                <igx-tree-node\n                                  [data]=\"childLevel6\"\n                                  [selected]=\"childLevel6.isSelected\"\n                                >\n                                  <div>{{ childLevel6.label }}</div>\n                                  @for (\n                                    childLevel7 of childLevel6.children;\n                                    track childLevel7.value\n                                  ) {\n                                    <igx-tree-node\n                                      [data]=\"childLevel7\"\n                                      [selected]=\"childLevel7.isSelected\"\n                                    >\n                                      <div>{{ childLevel7.label }}</div>\n                                      @for (\n                                        childLevel8 of childLevel7.children;\n                                        track childLevel8.value\n                                      ) {\n                                        <igx-tree-node\n                                          [data]=\"childLevel8\"\n                                          [selected]=\"childLevel8.isSelected\"\n                                        >\n                                          <div>{{ childLevel8.label }}</div>\n                                          @for (\n                                            childLevel9 of childLevel8.children;\n                                            track childLevel9.value\n                                          ) {\n                                            <igx-tree-node\n                                              [data]=\"childLevel9\"\n                                              [selected]=\"\n                                                childLevel9.isSelected\n                                              \"\n                                            >\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\"> </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\"> </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 igxButton=\"flat\" (click)=\"esf.cancel()\">\n      {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n    </button>\n  </div>\n  <div class=\"igx-excel-filter__apply\">\n    <button\n      type=\"button\"\n      igxButton=\"contained\"\n      [disabled]=\"applyButtonDisabled\"\n      (click)=\"applyFilter()\"\n    >\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: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "component", type: IgxVirtualScrollComponent, selector: "igx-virtual-scroll", inputs: ["data", "orientation", "overScan", "estimatedItemSize", "dataWindow", "initialViewportSize", "itemTemplate"], outputs: ["stateChange", "dataRequest"] }, { kind: "directive", type: IgxVirtualItemDirective, selector: "ng-template[igxVirtualItem]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-search', changeDetection: ChangeDetectionStrategy.Eager, 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]=\"\n      esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\n    \"\n    autocomplete=\"off\"\n  />\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      >\n      </igx-icon>\n    </igx-suffix>\n  }\n</igx-input-group>\n\n@if (!isHierarchical()) {\n  <igx-list\n    #list\n    role=\"listbox\"\n    [isLoading]=\"isLoading\"\n    (keydown)=\"handleKeyDown($event)\"\n    tabindex=\"0\"\n    [attr.aria-activedescendant]=\"this.activeDescendant\"\n    (focus)=\"onFocus()\"\n    (focusout)=\"onFocusOut()\"\n  >\n    <div style=\"overflow: hidden; position: relative\">\n      <igx-list-item\n        [class.igx-list__item-base--active]=\"\n          focusedItem?.id === this.getItemId(i)\n        \"\n        [attr.id]=\"getItemId(i)\"\n        role=\"option\"\n        *igxFor=\"\n          let item of displayedListData;\n          index as i;\n          scrollOrientation: 'vertical';\n          containerSize: containerSize;\n          itemSize: itemSize\n        \"\n      >\n        <igx-checkbox\n          [value]=\"item\"\n          [tabindex]=\"-1\"\n          [checked]=\"$safeNavigationMigration(item?.isSelected)\"\n          [disableRipple]=\"true\"\n          [indeterminate]=\"$safeNavigationMigration(item?.indeterminate)\"\n          [disableTransitions]=\"true\"\n          (change)=\"onCheckboxChange($event)\"\n        >\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\"> </ng-container>\n      </div>\n    </ng-template>\n    <ng-template igxEmptyList>\n      <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n    <div\n      class=\"igx-excel-filter__filter-results\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      {{\n        esf.grid?.resourceStrings.igx_grid_excel_matches_count ? \n        esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace(\n          '{0}',\n          matchesCount.toString()\n        ) : ''\n      }}\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\n            #selectAllCheckbox\n            [value]=\"selectAllItem\"\n            [checked]=\"selectAllItem?.isSelected\"\n            [disableRipple]=\"true\"\n            [indeterminate]=\"selectAllItem?.indeterminate\"\n            [disableTransitions]=\"true\"\n            (change)=\"onSelectAllCheckboxChange($event)\"\n          >\n            {{ selectAllItem.label }}\n          </igx-checkbox>\n        </div>\n        @if (searchValue) {\n          <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox\n              #addToCurrentFilterCheckbox\n              [value]=\"addToCurrentFilterItem\"\n              [checked]=\"addToCurrentFilterItem.isSelected\"\n              [disableRipple]=\"true\"\n              [disableTransitions]=\"true\"\n            >\n              {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n          </div>\n        }\n      </div>\n    }\n    <igx-tree\n      #tree\n      selection=\"Cascading\"\n      (nodeSelection)=\"onNodeSelectionChange($event)\"\n    >\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\n              [data]=\"childLevel1\"\n              [selected]=\"childLevel1.isSelected\"\n            >\n              <div>{{ childLevel1.label }}</div>\n              @for (\n                childLevel2 of childLevel1.children;\n                track childLevel2.value\n              ) {\n                <igx-tree-node\n                  [data]=\"childLevel2\"\n                  [selected]=\"childLevel2.isSelected\"\n                >\n                  <div>{{ childLevel2.label }}</div>\n                  @for (\n                    childLevel3 of childLevel2.children;\n                    track childLevel3.value\n                  ) {\n                    <igx-tree-node\n                      [data]=\"childLevel3\"\n                      [selected]=\"childLevel3.isSelected\"\n                    >\n                      <div>{{ childLevel3.label }}</div>\n                      @for (\n                        childLevel4 of childLevel3.children;\n                        track childLevel4.value\n                      ) {\n                        <igx-tree-node\n                          [data]=\"childLevel4\"\n                          [selected]=\"childLevel4.isSelected\"\n                        >\n                          <div>{{ childLevel4.label }}</div>\n                          @for (\n                            childLevel5 of childLevel4.children;\n                            track childLevel5.value\n                          ) {\n                            <igx-tree-node\n                              [data]=\"childLevel5\"\n                              [selected]=\"childLevel5.isSelected\"\n                            >\n                              <div>{{ childLevel5.label }}</div>\n                              @for (\n                                childLevel6 of childLevel5.children;\n                                track childLevel6.value\n                              ) {\n                                <igx-tree-node\n                                  [data]=\"childLevel6\"\n                                  [selected]=\"childLevel6.isSelected\"\n                                >\n                                  <div>{{ childLevel6.label }}</div>\n                                  @for (\n                                    childLevel7 of childLevel6.children;\n                                    track childLevel7.value\n                                  ) {\n                                    <igx-tree-node\n                                      [data]=\"childLevel7\"\n                                      [selected]=\"childLevel7.isSelected\"\n                                    >\n                                      <div>{{ childLevel7.label }}</div>\n                                      @for (\n                                        childLevel8 of childLevel7.children;\n                                        track childLevel8.value\n                                      ) {\n                                        <igx-tree-node\n                                          [data]=\"childLevel8\"\n                                          [selected]=\"childLevel8.isSelected\"\n                                        >\n                                          <div>{{ childLevel8.label }}</div>\n                                          @for (\n                                            childLevel9 of childLevel8.children;\n                                            track childLevel9.value\n                                          ) {\n                                            <igx-tree-node\n                                              [data]=\"childLevel9\"\n                                              [selected]=\"\n                                                childLevel9.isSelected\n                                              \"\n                                            >\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\"> </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\"> </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 igxButton=\"flat\" (click)=\"esf.cancel()\">\n      {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n    </button>\n  </div>\n  <div class=\"igx-excel-filter__apply\">\n    <button\n      type=\"button\"\n      igxButton=\"contained\"\n      [disabled]=\"applyButtonDisabled\"\n      (click)=\"applyFilter()\"\n    >\n      {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n    </button>\n  </div>\n</footer>\n" }]
+            args: [{ selector: 'igx-excel-style-search', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxVirtualScrollComponent, IgxVirtualItemDirective, 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]=\"\n      esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\n    \"\n    autocomplete=\"off\"\n  />\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      >\n      </igx-icon>\n    </igx-suffix>\n  }\n</igx-input-group>\n\n@if (!isHierarchical()) {\n  <igx-list\n    #list\n    role=\"listbox\"\n    [isLoading]=\"isLoading\"\n    (keydown)=\"handleKeyDown($event)\"\n    tabindex=\"0\"\n    [attr.aria-activedescendant]=\"this.activeDescendant\"\n    (focus)=\"onFocus()\"\n    (focusout)=\"onFocusOut()\"\n  >\n    <igx-virtual-scroll\n      #virtualScroll\n      role=\"presentation\"\n      [data]=\"displayedListData\"\n      [estimatedItemSize]=\"itemSize\"\n      [initialViewportSize]=\"viewportSize\"\n      (stateChange)=\"onVirtualStateChange()\"\n    >\n      <ng-template igxVirtualItem let-item let-i=\"index\">\n        <igx-list-item\n          [class.igx-list__item-base--active]=\"focusedItem?.id === this.getItemId(i)\"\n          [attr.id]=\"getItemId(i)\"\n          role=\"option\"\n        >\n          <igx-checkbox\n            [value]=\"item\"\n            [tabindex]=\"-1\"\n            [checked]=\"$safeNavigationMigration(item?.isSelected)\"\n            [disableRipple]=\"true\"\n            [indeterminate]=\"$safeNavigationMigration(item?.indeterminate)\"\n            [disableTransitions]=\"true\"\n            (change)=\"onCheckboxChange($event)\"\n          >\n            {{ item.label }}\n          </igx-checkbox>\n        </igx-list-item>\n      </ng-template>\n    </igx-virtual-scroll>\n    <ng-template igxDataLoading>\n      <div class=\"igx-excel-filter__loading\">\n        <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\"> </ng-container>\n      </div>\n    </ng-template>\n    <ng-template igxEmptyList>\n      <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n    <div\n      class=\"igx-excel-filter__filter-results\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      {{\n        esf.grid?.resourceStrings.igx_grid_excel_matches_count ?\n        esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace(\n          '{0}',\n          matchesCount.toString()\n        ) : ''\n      }}\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\n            #selectAllCheckbox\n            [value]=\"selectAllItem\"\n            [checked]=\"selectAllItem?.isSelected\"\n            [disableRipple]=\"true\"\n            [indeterminate]=\"selectAllItem?.indeterminate\"\n            [disableTransitions]=\"true\"\n            (change)=\"onSelectAllCheckboxChange($event)\"\n          >\n            {{ selectAllItem.label }}\n          </igx-checkbox>\n        </div>\n        @if (searchValue) {\n          <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox\n              #addToCurrentFilterCheckbox\n              [value]=\"addToCurrentFilterItem\"\n              [checked]=\"addToCurrentFilterItem.isSelected\"\n              [disableRipple]=\"true\"\n              [disableTransitions]=\"true\"\n            >\n              {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n          </div>\n        }\n      </div>\n    }\n    <igx-tree\n      #tree\n      selection=\"Cascading\"\n      (nodeSelection)=\"onNodeSelectionChange($event)\"\n    >\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\n              [data]=\"childLevel1\"\n              [selected]=\"childLevel1.isSelected\"\n            >\n              <div>{{ childLevel1.label }}</div>\n              @for (\n                childLevel2 of childLevel1.children;\n                track childLevel2.value\n              ) {\n                <igx-tree-node\n                  [data]=\"childLevel2\"\n                  [selected]=\"childLevel2.isSelected\"\n                >\n                  <div>{{ childLevel2.label }}</div>\n                  @for (\n                    childLevel3 of childLevel2.children;\n                    track childLevel3.value\n                  ) {\n                    <igx-tree-node\n                      [data]=\"childLevel3\"\n                      [selected]=\"childLevel3.isSelected\"\n                    >\n                      <div>{{ childLevel3.label }}</div>\n                      @for (\n                        childLevel4 of childLevel3.children;\n                        track childLevel4.value\n                      ) {\n                        <igx-tree-node\n                          [data]=\"childLevel4\"\n                          [selected]=\"childLevel4.isSelected\"\n                        >\n                          <div>{{ childLevel4.label }}</div>\n                          @for (\n                            childLevel5 of childLevel4.children;\n                            track childLevel5.value\n                          ) {\n                            <igx-tree-node\n                              [data]=\"childLevel5\"\n                              [selected]=\"childLevel5.isSelected\"\n                            >\n                              <div>{{ childLevel5.label }}</div>\n                              @for (\n                                childLevel6 of childLevel5.children;\n                                track childLevel6.value\n                              ) {\n                                <igx-tree-node\n                                  [data]=\"childLevel6\"\n                                  [selected]=\"childLevel6.isSelected\"\n                                >\n                                  <div>{{ childLevel6.label }}</div>\n                                  @for (\n                                    childLevel7 of childLevel6.children;\n                                    track childLevel7.value\n                                  ) {\n                                    <igx-tree-node\n                                      [data]=\"childLevel7\"\n                                      [selected]=\"childLevel7.isSelected\"\n                                    >\n                                      <div>{{ childLevel7.label }}</div>\n                                      @for (\n                                        childLevel8 of childLevel7.children;\n                                        track childLevel8.value\n                                      ) {\n                                        <igx-tree-node\n                                          [data]=\"childLevel8\"\n                                          [selected]=\"childLevel8.isSelected\"\n                                        >\n                                          <div>{{ childLevel8.label }}</div>\n                                          @for (\n                                            childLevel9 of childLevel8.children;\n                                            track childLevel9.value\n                                          ) {\n                                            <igx-tree-node\n                                              [data]=\"childLevel9\"\n                                              [selected]=\"\n                                                childLevel9.isSelected\n                                              \"\n                                            >\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\"> </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\"> </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 igxButton=\"flat\" (click)=\"esf.cancel()\">\n      {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n    </button>\n  </div>\n  <div class=\"igx-excel-filter__apply\">\n    <button\n      type=\"button\"\n      igxButton=\"contained\"\n      [disabled]=\"applyButtonDisabled\"\n      (click)=\"applyFilter()\"\n    >\n      {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n    </button>\n  </div>\n</footer>\n" }]
         }], ctorParameters: () => [], propDecorators: { defaultClass: [{
                 type: HostBinding,
                 args: ['class.igx-excel-filter__menu-main']
@@ -9072,9 +9082,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
             }], tree: [{
                 type: ViewChild,
                 args: ['tree', { read: IgxTreeComponent, static: false }]
-            }], virtDir: [{
+            }], virtualScroll: [{
                 type: ViewChild,
-                args: [IgxForOfDirective]
+                args: ['virtualScroll']
+            }], virtualScrollRef: [{
+                type: ViewChild,
+                args: ['virtualScroll', { read: ElementRef }]
             }], defaultExcelStyleLoadingValuesTemplate: [{
                 type: ViewChild,
                 args: ['defaultExcelStyleLoadingValuesTemplate', { read: TemplateRef }]
@@ -9092,10 +9105,10 @@ class IgxExcelStyleSelectingComponent {
     constructor() {
         this.esf = inject(BaseFilteringComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleSelectingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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($event)\"\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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleSelectingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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($event)\"\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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleSelectingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleSelectingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-selecting', changeDetection: ChangeDetectionStrategy.Eager, 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($event)\"\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" }]
         }] });
@@ -9151,10 +9164,10 @@ class IgxExcelStyleSortingComponent {
             this.sortButtonGroup.selectButton(sortDirection - 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleSortingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleSortingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-sorting', changeDetection: ChangeDetectionStrategy.Eager, 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: [{
@@ -9166,10 +9179,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
             }] } });
 
 class IgxExcelStyleColumnOperationsTemplateDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxExcelStyleColumnOperationsTemplateDirective, isStandalone: true, selector: "[igxExcelStyleColumnOperations],igx-excel-style-column-operations", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxExcelStyleColumnOperationsTemplateDirective, isStandalone: true, selector: "[igxExcelStyleColumnOperations],igx-excel-style-column-operations", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleColumnOperations],igx-excel-style-column-operations',
@@ -9177,10 +9190,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }] });
 class IgxExcelStyleFilterOperationsTemplateDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxExcelStyleFilterOperationsTemplateDirective, isStandalone: true, selector: "[igxExcelStyleFilterOperations],igx-excel-style-filter-operations", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxExcelStyleFilterOperationsTemplateDirective, isStandalone: true, selector: "[igxExcelStyleFilterOperations],igx-excel-style-filter-operations", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleFilterOperations],igx-excel-style-filter-operations',
@@ -9758,12 +9771,12 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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", styles: ["@layer ig.base{.igx-excel-filter__actions-clear--disabled,.igx-excel-filter__actions-clear,.igx-excel-filter__actions-filter--active,.igx-excel-filter__actions-filter,.igx-excel-filter__actions-selected,.igx-excel-filter__actions-select,.igx-excel-filter__actions-hide,.igx-excel-filter__actions-unpin,.igx-excel-filter__actions-pin--disabled,.igx-excel-filter__actions-pin{display:flex;align-items:center;justify-content:space-between;padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));cursor:pointer;color:var(--actions-foreground);outline-style:none}.igx-excel-filter__actions-clear--disabled igx-icon,.igx-excel-filter__actions-clear igx-icon,.igx-excel-filter__actions-filter--active igx-icon,.igx-excel-filter__actions-filter igx-icon,.igx-excel-filter__actions-selected igx-icon,.igx-excel-filter__actions-select igx-icon,.igx-excel-filter__actions-hide igx-icon,.igx-excel-filter__actions-unpin igx-icon,.igx-excel-filter__actions-pin--disabled igx-icon,.igx-excel-filter__actions-pin igx-icon{color:var(--actions-icon-color)}.igx-excel-filter__actions-clear--disabled:hover,.igx-excel-filter__actions-clear:hover,.igx-excel-filter__actions-filter--active:hover,.igx-excel-filter__actions-filter:hover,.igx-excel-filter__actions-selected:hover,.igx-excel-filter__actions-select:hover,.igx-excel-filter__actions-hide:hover,.igx-excel-filter__actions-unpin:hover,.igx-excel-filter__actions-pin--disabled:hover,.igx-excel-filter__actions-pin:hover,.igx-excel-filter__actions-clear--disabled:focus,.igx-excel-filter__actions-clear:focus,.igx-excel-filter__actions-filter--active:focus,.igx-excel-filter__actions-filter:focus,.igx-excel-filter__actions-selected:focus,.igx-excel-filter__actions-select:focus,.igx-excel-filter__actions-hide:focus,.igx-excel-filter__actions-unpin:focus,.igx-excel-filter__actions-pin--disabled:focus,.igx-excel-filter__actions-pin:focus{color:var(--actions-hover-foreground);background:var(--actions-hover-background)}.igx-excel-filter__actions-clear--disabled:hover igx-icon,.igx-excel-filter__actions-clear:hover igx-icon,.igx-excel-filter__actions-filter--active:hover igx-icon,.igx-excel-filter__actions-filter:hover igx-icon,.igx-excel-filter__actions-selected:hover igx-icon,.igx-excel-filter__actions-select:hover igx-icon,.igx-excel-filter__actions-hide:hover igx-icon,.igx-excel-filter__actions-unpin:hover igx-icon,.igx-excel-filter__actions-pin--disabled:hover igx-icon,.igx-excel-filter__actions-pin:hover igx-icon,.igx-excel-filter__actions-clear--disabled:focus igx-icon,.igx-excel-filter__actions-clear:focus igx-icon,.igx-excel-filter__actions-filter--active:focus igx-icon,.igx-excel-filter__actions-filter:focus igx-icon,.igx-excel-filter__actions-selected:focus igx-icon,.igx-excel-filter__actions-select:focus igx-icon,.igx-excel-filter__actions-hide:focus igx-icon,.igx-excel-filter__actions-unpin:focus igx-icon,.igx-excel-filter__actions-pin--disabled:focus igx-icon,.igx-excel-filter__actions-pin:focus igx-icon{color:var(--actions-hover-icon-color)}[dir=rtl] .igx-excel-filter__actions-clear--disabled igx-icon,[dir=rtl] .igx-excel-filter__actions-clear igx-icon,[dir=rtl] .igx-excel-filter__actions-filter--active igx-icon,[dir=rtl] .igx-excel-filter__actions-filter igx-icon,[dir=rtl] .igx-excel-filter__actions-selected igx-icon,[dir=rtl] .igx-excel-filter__actions-select igx-icon,[dir=rtl] .igx-excel-filter__actions-hide igx-icon,[dir=rtl] .igx-excel-filter__actions-unpin igx-icon,[dir=rtl] .igx-excel-filter__actions-pin--disabled igx-icon,[dir=rtl] .igx-excel-filter__actions-pin igx-icon{transform:scaleX(-1)}.igx-excel-filter__menu--compact .igx-excel-filter__move,.igx-excel-filter__menu--compact .igx-excel-filter__sort{display:flex;align-items:center;justify-content:space-between}.igx-excel-filter__menu--compact .igx-excel-filter__move header,.igx-excel-filter__menu--compact .igx-excel-filter__sort header{margin-inline-end:auto}.igx-excel-filter__move,.igx-excel-filter__sort{--ig-icon-size: var(--size);display:block;padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter__move header,.igx-excel-filter__sort header{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);color:var(--subheader-foreground);margin-block-end:.25rem}.igx-excel-filter__move igx-icon,.igx-excel-filter__sort igx-icon{--component-size: 1;display:initial}.igx-excel-filter{--component-size: var(--ig-size, var(--ig-size-large));display:block;overflow:auto;width:20rem;min-width:20rem;height:100%;flex-grow:1;box-shadow:var(--ig-elevation-12);background:var(--background)}.igx-excel-filter__sizing{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);min-height:max(var(--is-large, 1)*max(40.3125rem,-1 * 40.3125rem),var(--is-medium, 1)*max(29.0625rem,-1 * 29.0625rem),var(--is-small, 1)*max(20.625rem,-1 * 20.625rem));max-height:max(var(--is-large, 1)*max(48.4375rem,-1 * 48.4375rem),var(--is-medium, 1)*max(35.3125rem,-1 * 35.3125rem),var(--is-small, 1)*max(25.3125rem,-1 * 25.3125rem))}.igx-excel-filter__menu{--component-size: var(--ig-size, var(--ig-size-large));display:flex;flex-direction:column;height:100%;border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .25rem),.25rem);background:var(--background)}.igx-excel-filter__menu igx-excel-style-filter-operations,.igx-excel-filter__menu [igxExcelStyleFilterOperations]{display:flex;flex-direction:column;flex-grow:1;min-height:0}.igx-excel-filter__menu .igx-tree-node__wrapper{padding:0}.igx-excel-filter__menu igx-chips-area{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-block-end:0;gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.25rem,-1 * .25rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-excel-filter__menu-header{display:flex;align-items:center;padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-excel-filter__menu-header>h4{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}.igx-excel-filter__menu-header{color:var(--header-foreground)}.igx-excel-filter__menu-main{display:flex;flex-direction:column;flex-grow:1;overflow:hidden;padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));gap:max(var(--is-large, 1)*max(1rem,-1 * 1rem),var(--is-medium, 1)*max(.5rem,-1 * .5rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-excel-filter__menu-main igx-list{flex-grow:1;overflow:hidden;margin-inline:calc(max(var(--is-large, 1) * max(-1rem,-1 * -1rem),var(--is-medium, 1) * max(-.5rem,-1 * -.5rem),var(--is-small, 1) * max(-.25rem,-1 * -.25rem))*-1);border:0;border-top:.0625rem dashed var(--border-color);border-bottom:.0625rem dashed var(--border-color)}.igx-excel-filter__tree{--ig-icon-size: 1.25rem;background:var(--secondary-background);overflow-y:auto;margin-inline:calc(max(var(--is-large, 1) * max(-1rem,-1 * -1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1) * max(-.5rem,-1 * -.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1) * max(-.25rem,-1 * -.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))*-1);margin-block:0;flex:1;border-top:.0625rem dashed var(--border-color);border-bottom:.0625rem dashed var(--border-color)}.igx-excel-filter__tree>igx-checkbox,.igx-excel-filter__tree .igx-tree-node__wrapper{height:max(var(--is-large, 1) * max(2.5rem,-1 * 2.5rem),var(--is-medium, 1) * max(2rem,-1 * 2rem),var(--is-small, 1) * max(1.5rem,-1 * 1.5rem));min-height:max(var(--is-large, 1) * max(2.5rem,-1 * 2.5rem),var(--is-medium, 1) * max(2rem,-1 * 2rem),var(--is-small, 1) * max(1.5rem,-1 * 1.5rem))}.igx-excel-filter__tree .igx-tree-node__toggle-button{min-width:1.25rem;margin-inline-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-inline-end:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter__tree .igx-tree{overflow-y:hidden}.igx-excel-filter__tree-alike{background:var(--secondary-background);display:flex;flex-direction:column;z-index:1}.igx-excel-filter__tree-alike-item{display:flex;align-items:center;height:max(var(--is-large, 1)*max(2.5rem,-1 * 2.5rem),var(--is-medium, 1)*max(2rem,-1 * 2rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));background:var(--secondary-background)}.igx-excel-filter__tree-alike-item:hover,.igx-excel-filter__tree-alike-item:focus{background:color-mix(in srgb,var(--_excel-filtering-foreground) 12%,var(--background))}.igx-excel-filter__tree-alike-item>igx-checkbox{margin-inline-start:max(var(--is-large, 1)*max(2.75rem,-1 * 2.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(2.25rem,-1 * 2.25rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.75rem,-1 * 1.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[dir=rtl] .igx-excel-filter__sort .igx-button-group{flex-direction:row-reverse}[dir=rtl] .igx-excel-filter__sort .igx-button-group igx-icon,[dir=rtl] .igx-excel-filter__sort .igx-button-group [igxButton]{direction:ltr}.igx-excel-filter__actions-pin--disabled{color:var(--actions-disabled-foreground);pointer-events:none}.igx-excel-filter__actions-selected igx-icon{color:var(--actions-selected-icon-color)}.igx-excel-filter__actions-filter--active{background:color-mix(in srgb,var(--_excel-filtering-accent-color) 8%,var(--background));color:var(--actions-hover-foreground)}.igx-excel-filter__actions-clear--disabled{color:var(--actions-disabled-foreground);pointer-events:none}.igx-excel-filter__menu-header-actions{display:flex;margin-inline-start:auto;gap:.25rem}.igx-excel-filter__secondary-header{display:flex;align-items:center;padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));color:var(--header-foreground);border-block-end:.0625rem solid var(--border-color)}.igx-excel-filter__secondary-header>h4{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}.igx-excel-filter__filter-results{position:absolute;width:.0625rem;height:.0625rem;overflow:hidden}.igx-excel-filter__menu-footer{display:flex;justify-content:space-between}.igx-excel-filter__apply{flex-grow:1}.igx-excel-filter__apply [igxButton]{width:100%}.igx-excel-filter__cancel{flex-grow:1}.igx-excel-filter__cancel [igxButton]{width:100%}.igx-excel-filter--inline{box-shadow:none;width:100%}.igx-excel-filter__menu--compact .igx-excel-filter__actions-select,.igx-excel-filter__menu--compact .igx-excel-filter__actions-selected{justify-content:center}.igx-excel-filter__menu--compact .igx-excel-filter__sort igx-buttongroup{width:13rem}.igx-excel-filter__menu--compact .igx-excel-filter__sort header{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);text-transform:capitalize}.igx-excel-filter__menu--compact .igx-excel-filter__move igx-buttongroup{width:13rem}.igx-excel-filter__menu--compact .igx-excel-filter__move header{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);text-transform:capitalize}.igx-excel-filter__menu--compact .igx-excel-filter__menu-header>h4{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom)}.igx-excel-filter__menu--compact .igx-excel-filter__menu-header-actions span{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}.igx-excel-filter__menu--cosy .igx-excel-filter__actions-select,.igx-excel-filter__menu--cosy .igx-excel-filter__actions-selected{justify-content:center}.igx-excel-filter__clear{flex-grow:1}.igx-excel-filter__empty{color:hsl(from hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1) h s 60%)}.igx-excel-filter__secondary{--component-size: var(--ig-size, var(--ig-size-large));width:32.5rem;min-width:32.5rem;background:var(--background);box-shadow:var(--ig-elevation-12);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .25rem),.25rem);display:flex;flex-direction:column}.igx-excel-filter__secondary-main{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:1rem;height:14.5rem;overflow:auto}.igx-excel-filter__secondary-footer{--ig-size: 2;display:flex;justify-content:space-between;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block-end:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-excel-filter__secondary-footer .igx-excel-filter__clear{flex-grow:1}.igx-excel-filter__secondary-footer .igx-excel-filter__apply,.igx-excel-filter__secondary-footer .igx-excel-filter__cancel{flex-grow:0}.igx-excel-filter__cancel+.igx-excel-filter__apply{margin-inline-start:1rem}.igx-excel-filter__condition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center}.igx-excel-filter__condition igx-select~igx-input-group,.igx-excel-filter__condition igx-select~igx-date-picker,.igx-excel-filter__condition igx-select~igx-time-picker{margin-inline-start:1rem}.igx-excel-filter__condition igx-buttongroup{grid-column:1/-1;justify-self:start;min-width:30%;margin-block:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-excel-filter__condition [igxIconButton]{--component-size: var(--ig-size, var(--ig-size-large));margin-inline-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter__add-filter{--ig-icon-size: 1.125rem}.igx-excel-filter__add-filter:is(.igx-button){margin-block-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-excel-filter__secondary-header{border-block-end:.0625rem solid var(--border-color)}.igx-excel-filter__secondary-footer{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));border-top:.0625rem solid var(--border-color)}.igx-excel-filter__menu-main igx-list{--_border-color: color-mix(in srgb, var(--ig-excel-filtering-accent-color) 16%, var(--ig-excel-filtering-background));border-block:.0625rem dashed var(--_border-color, var(--ig-gray-100))}.igx-excel-filter__menu-header>h4{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-excel-filter .igx-list__item-base:last-of-type{border-bottom:var(--border-width) solid rgba(0,0,0,0)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-excel-filter{box-shadow:var(--ig-elevation-3),0 0 0 .0625rem var(--border-color);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .25rem),.25rem)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled,.igx-excel-filter .igx-excel-filter__actions-clear,.igx-excel-filter .igx-excel-filter__actions-filter--active,.igx-excel-filter .igx-excel-filter__actions-filter,.igx-excel-filter .igx-excel-filter__actions-selected,.igx-excel-filter .igx-excel-filter__actions-select,.igx-excel-filter .igx-excel-filter__actions-hide,.igx-excel-filter .igx-excel-filter__actions-unpin,.igx-excel-filter .igx-excel-filter__actions-pin--disabled,.igx-excel-filter .igx-excel-filter__actions-pin{padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-inline:.5rem;margin-block-end:.25rem;border-radius:.25rem}.igx-excel-filter .igx-excel-filter__actions-clear--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected igx-icon,.igx-excel-filter .igx-excel-filter__actions-select igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin igx-icon{--component-size: 2;color:var(--actions-icon-color)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled:hover,.igx-excel-filter .igx-excel-filter__actions-clear:hover,.igx-excel-filter .igx-excel-filter__actions-filter--active:hover,.igx-excel-filter .igx-excel-filter__actions-filter:hover,.igx-excel-filter .igx-excel-filter__actions-selected:hover,.igx-excel-filter .igx-excel-filter__actions-select:hover,.igx-excel-filter .igx-excel-filter__actions-hide:hover,.igx-excel-filter .igx-excel-filter__actions-unpin:hover,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:hover,.igx-excel-filter .igx-excel-filter__actions-pin:hover,.igx-excel-filter .igx-excel-filter__actions-clear--disabled:focus,.igx-excel-filter .igx-excel-filter__actions-clear:focus,.igx-excel-filter .igx-excel-filter__actions-filter--active:focus,.igx-excel-filter .igx-excel-filter__actions-filter:focus,.igx-excel-filter .igx-excel-filter__actions-selected:focus,.igx-excel-filter .igx-excel-filter__actions-select:focus,.igx-excel-filter .igx-excel-filter__actions-hide:focus,.igx-excel-filter .igx-excel-filter__actions-unpin:focus,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:focus,.igx-excel-filter .igx-excel-filter__actions-pin:focus{background:var(--actions-hover-background)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-select:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear--disabled:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-select:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin:focus igx-icon{color:var(--actions-hover-icon-color)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected igx-icon,.igx-excel-filter .igx-excel-filter__actions-select igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin igx-icon{--component-size: 2}.igx-excel-filter .igx-excel-filter__move,.igx-excel-filter .igx-excel-filter__sort{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter .igx-excel-filter__move header,.igx-excel-filter .igx-excel-filter__sort header{margin-block-end:max(var(--is-large, 1)*max(.25rem,-1 * .25rem),var(--is-medium, 1)*max(.25rem,-1 * .25rem),var(--is-small, 1)*max(0rem,-1 * 0rem))!important;text-transform:capitalize!important}.igx-excel-filter .igx-excel-filter__move igx-icon,.igx-excel-filter .igx-excel-filter__sort igx-icon{--component-size: 2}.igx-excel-filter__menu{background:var(--background)}.igx-excel-filter__menu .igx-button-group__item:not(:nth-child(1)){margin:0}.igx-excel-filter__menu-header{padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))) max(var(--is-large, 1)*max(max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)),-1 * max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)))*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)),-1 * max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)))*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)),-1 * max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)))*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-excel-filter__menu-main{padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));gap:max(var(--is-large, 1)*max(1rem,-1 * 1rem),var(--is-medium, 1)*max(1rem,-1 * 1rem),var(--is-small, 1)*max(1rem,-1 * 1rem))}.igx-excel-filter__menu-main igx-list{--background: var(--secondary-background);--_border-color: color-mix(in srgb, var(--ig-excel-filtering-accent-color) 16%, var(--ig-excel-filtering-background));border-block:.0625rem dashed var(--_border-color, var(--ig-gray-100));margin-inline:calc(max(var(--is-large, 1) * max(-1rem,-1 * -1rem),var(--is-medium, 1) * max(-1rem,-1 * -1rem),var(--is-small, 1) * max(-1rem,-1 * -1rem))*-1)}.igx-excel-filter__menu-main igx-list igx-display-container{padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-excel-filter__menu-main igx-list .igx-list__item-base{padding-block-end:.25rem}.igx-excel-filter__actions-filter{margin-block-end:0}.igx-excel-filter__actions-pin--disabled igx-icon{color:var(--actions-disabled-foreground)}.igx-excel-filter__actions-clear--disabled igx-icon{color:var(--actions-disabled-foreground)}.igx-excel-filter__sort{padding-block-end:0}.igx-excel-filter__move{margin-block-end:max(var(--is-large, 1)*max(1rem,-1 * 1rem),var(--is-medium, 1)*max(1rem,-1 * 1rem),var(--is-small, 1)*max(.75rem,-1 * .75rem))}.igx-excel-filter .igx-excel-filter__sort+igx-excel-filter__move{margin-block-start:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.5rem,-1 * .5rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-excel-filter .ig-typography .igx-excel-filter__menu--compact .igx-excel-filter__menu-header>h4{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}}}\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, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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", styles: ["@layer ig.base{.igx-excel-filter__actions-clear--disabled,.igx-excel-filter__actions-clear,.igx-excel-filter__actions-filter--active,.igx-excel-filter__actions-filter,.igx-excel-filter__actions-selected,.igx-excel-filter__actions-select,.igx-excel-filter__actions-hide,.igx-excel-filter__actions-unpin,.igx-excel-filter__actions-pin--disabled,.igx-excel-filter__actions-pin{display:flex;align-items:center;justify-content:space-between;padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));cursor:pointer;color:var(--actions-foreground);outline-style:none}.igx-excel-filter__actions-clear--disabled igx-icon,.igx-excel-filter__actions-clear igx-icon,.igx-excel-filter__actions-filter--active igx-icon,.igx-excel-filter__actions-filter igx-icon,.igx-excel-filter__actions-selected igx-icon,.igx-excel-filter__actions-select igx-icon,.igx-excel-filter__actions-hide igx-icon,.igx-excel-filter__actions-unpin igx-icon,.igx-excel-filter__actions-pin--disabled igx-icon,.igx-excel-filter__actions-pin igx-icon{color:var(--actions-icon-color)}.igx-excel-filter__actions-clear--disabled:hover,.igx-excel-filter__actions-clear:hover,.igx-excel-filter__actions-filter--active:hover,.igx-excel-filter__actions-filter:hover,.igx-excel-filter__actions-selected:hover,.igx-excel-filter__actions-select:hover,.igx-excel-filter__actions-hide:hover,.igx-excel-filter__actions-unpin:hover,.igx-excel-filter__actions-pin--disabled:hover,.igx-excel-filter__actions-pin:hover,.igx-excel-filter__actions-clear--disabled:focus,.igx-excel-filter__actions-clear:focus,.igx-excel-filter__actions-filter--active:focus,.igx-excel-filter__actions-filter:focus,.igx-excel-filter__actions-selected:focus,.igx-excel-filter__actions-select:focus,.igx-excel-filter__actions-hide:focus,.igx-excel-filter__actions-unpin:focus,.igx-excel-filter__actions-pin--disabled:focus,.igx-excel-filter__actions-pin:focus{color:var(--actions-hover-foreground);background:var(--actions-hover-background)}.igx-excel-filter__actions-clear--disabled:hover igx-icon,.igx-excel-filter__actions-clear:hover igx-icon,.igx-excel-filter__actions-filter--active:hover igx-icon,.igx-excel-filter__actions-filter:hover igx-icon,.igx-excel-filter__actions-selected:hover igx-icon,.igx-excel-filter__actions-select:hover igx-icon,.igx-excel-filter__actions-hide:hover igx-icon,.igx-excel-filter__actions-unpin:hover igx-icon,.igx-excel-filter__actions-pin--disabled:hover igx-icon,.igx-excel-filter__actions-pin:hover igx-icon,.igx-excel-filter__actions-clear--disabled:focus igx-icon,.igx-excel-filter__actions-clear:focus igx-icon,.igx-excel-filter__actions-filter--active:focus igx-icon,.igx-excel-filter__actions-filter:focus igx-icon,.igx-excel-filter__actions-selected:focus igx-icon,.igx-excel-filter__actions-select:focus igx-icon,.igx-excel-filter__actions-hide:focus igx-icon,.igx-excel-filter__actions-unpin:focus igx-icon,.igx-excel-filter__actions-pin--disabled:focus igx-icon,.igx-excel-filter__actions-pin:focus igx-icon{color:var(--actions-hover-icon-color)}[dir=rtl] .igx-excel-filter__actions-clear--disabled igx-icon,[dir=rtl] .igx-excel-filter__actions-clear igx-icon,[dir=rtl] .igx-excel-filter__actions-filter--active igx-icon,[dir=rtl] .igx-excel-filter__actions-filter igx-icon,[dir=rtl] .igx-excel-filter__actions-selected igx-icon,[dir=rtl] .igx-excel-filter__actions-select igx-icon,[dir=rtl] .igx-excel-filter__actions-hide igx-icon,[dir=rtl] .igx-excel-filter__actions-unpin igx-icon,[dir=rtl] .igx-excel-filter__actions-pin--disabled igx-icon,[dir=rtl] .igx-excel-filter__actions-pin igx-icon{transform:scaleX(-1)}.igx-excel-filter__menu--compact .igx-excel-filter__move,.igx-excel-filter__menu--compact .igx-excel-filter__sort{display:flex;align-items:center;justify-content:space-between}.igx-excel-filter__menu--compact .igx-excel-filter__move header,.igx-excel-filter__menu--compact .igx-excel-filter__sort header{margin-inline-end:auto}.igx-excel-filter__move,.igx-excel-filter__sort{--ig-icon-size: var(--size);display:block;padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter__move header,.igx-excel-filter__sort header{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);color:var(--subheader-foreground);margin-block-end:.25rem}.igx-excel-filter__move igx-icon,.igx-excel-filter__sort igx-icon{--component-size: 1;display:initial}.igx-excel-filter{--component-size: var(--ig-size, var(--ig-size-large));display:block;overflow:auto;width:20rem;min-width:20rem;height:100%;flex-grow:1;box-shadow:var(--ig-elevation-12);background:var(--background)}.igx-excel-filter__sizing{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);min-height:max(var(--is-large, 1)*max(40.3125rem,-1 * 40.3125rem),var(--is-medium, 1)*max(29.0625rem,-1 * 29.0625rem),var(--is-small, 1)*max(20.625rem,-1 * 20.625rem));max-height:max(var(--is-large, 1)*max(48.4375rem,-1 * 48.4375rem),var(--is-medium, 1)*max(35.3125rem,-1 * 35.3125rem),var(--is-small, 1)*max(25.3125rem,-1 * 25.3125rem))}.igx-excel-filter__menu{--component-size: var(--ig-size, var(--ig-size-large));display:flex;flex-direction:column;height:100%;border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .25rem),.25rem);background:var(--background)}.igx-excel-filter__menu igx-excel-style-filter-operations,.igx-excel-filter__menu [igxExcelStyleFilterOperations]{display:flex;flex-direction:column;flex-grow:1;min-height:0}.igx-excel-filter__menu .igx-tree-node__wrapper{padding:0}.igx-excel-filter__menu igx-chips-area{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-block-end:0;gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.25rem,-1 * .25rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-excel-filter__menu-header{display:flex;align-items:center;padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-excel-filter__menu-header>h4{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}.igx-excel-filter__menu-header{color:var(--header-foreground)}.igx-excel-filter__menu-main{display:flex;flex-direction:column;flex-grow:1;overflow:hidden;padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));gap:max(var(--is-large, 1)*max(1rem,-1 * 1rem),var(--is-medium, 1)*max(.5rem,-1 * .5rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-excel-filter__menu-main igx-list{flex-grow:1;overflow:hidden;margin-inline:calc(max(var(--is-large, 1) * max(-1rem,-1 * -1rem),var(--is-medium, 1) * max(-.5rem,-1 * -.5rem),var(--is-small, 1) * max(-.25rem,-1 * -.25rem))*-1);border:0;border-top:.0625rem dashed var(--border-color);border-bottom:.0625rem dashed var(--border-color)}.igx-excel-filter__menu-main igx-list igx-virtual-scroll{flex:1 1 auto;min-height:0}.igx-excel-filter__tree{--ig-icon-size: 1.25rem;background:var(--secondary-background);overflow-y:auto;margin-inline:calc(max(var(--is-large, 1) * max(-1rem,-1 * -1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1) * max(-.5rem,-1 * -.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1) * max(-.25rem,-1 * -.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))*-1);margin-block:0;flex:1;border-top:.0625rem dashed var(--border-color);border-bottom:.0625rem dashed var(--border-color)}.igx-excel-filter__tree>igx-checkbox,.igx-excel-filter__tree .igx-tree-node__wrapper{height:max(var(--is-large, 1) * max(2.5rem,-1 * 2.5rem),var(--is-medium, 1) * max(2rem,-1 * 2rem),var(--is-small, 1) * max(1.5rem,-1 * 1.5rem));min-height:max(var(--is-large, 1) * max(2.5rem,-1 * 2.5rem),var(--is-medium, 1) * max(2rem,-1 * 2rem),var(--is-small, 1) * max(1.5rem,-1 * 1.5rem))}.igx-excel-filter__tree .igx-tree-node__toggle-button{min-width:1.25rem;margin-inline-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-inline-end:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter__tree .igx-tree{overflow-y:hidden}.igx-excel-filter__tree-alike{background:var(--secondary-background);display:flex;flex-direction:column;z-index:1}.igx-excel-filter__tree-alike-item{display:flex;align-items:center;height:max(var(--is-large, 1)*max(2.5rem,-1 * 2.5rem),var(--is-medium, 1)*max(2rem,-1 * 2rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));background:var(--secondary-background)}.igx-excel-filter__tree-alike-item:hover,.igx-excel-filter__tree-alike-item:focus{background:color-mix(in srgb,var(--_excel-filtering-foreground) 12%,var(--background))}.igx-excel-filter__tree-alike-item>igx-checkbox{margin-inline-start:max(var(--is-large, 1)*max(2.75rem,-1 * 2.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(2.25rem,-1 * 2.25rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.75rem,-1 * 1.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[dir=rtl] .igx-excel-filter__sort .igx-button-group{flex-direction:row-reverse}[dir=rtl] .igx-excel-filter__sort .igx-button-group igx-icon,[dir=rtl] .igx-excel-filter__sort .igx-button-group [igxButton]{direction:ltr}.igx-excel-filter__actions-pin--disabled{color:var(--actions-disabled-foreground);pointer-events:none}.igx-excel-filter__actions-selected igx-icon{color:var(--actions-selected-icon-color)}.igx-excel-filter__actions-filter--active{background:color-mix(in srgb,var(--_excel-filtering-accent-color) 8%,var(--background));color:var(--actions-hover-foreground)}.igx-excel-filter__actions-clear--disabled{color:var(--actions-disabled-foreground);pointer-events:none}.igx-excel-filter__menu-header-actions{display:flex;margin-inline-start:auto;gap:.25rem}.igx-excel-filter__secondary-header{display:flex;align-items:center;padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));color:var(--header-foreground);border-block-end:.0625rem solid var(--border-color)}.igx-excel-filter__secondary-header>h4{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}.igx-excel-filter__filter-results{position:absolute;width:.0625rem;height:.0625rem;overflow:hidden}.igx-excel-filter__menu-footer{display:flex;justify-content:space-between}.igx-excel-filter__apply{flex-grow:1}.igx-excel-filter__apply [igxButton]{width:100%}.igx-excel-filter__cancel{flex-grow:1}.igx-excel-filter__cancel [igxButton]{width:100%}.igx-excel-filter--inline{box-shadow:none;width:100%}.igx-excel-filter__menu--compact .igx-excel-filter__actions-select,.igx-excel-filter__menu--compact .igx-excel-filter__actions-selected{justify-content:center}.igx-excel-filter__menu--compact .igx-excel-filter__sort igx-buttongroup{width:13rem}.igx-excel-filter__menu--compact .igx-excel-filter__sort header{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);text-transform:capitalize}.igx-excel-filter__menu--compact .igx-excel-filter__move igx-buttongroup{width:13rem}.igx-excel-filter__menu--compact .igx-excel-filter__move header{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);text-transform:capitalize}.igx-excel-filter__menu--compact .igx-excel-filter__menu-header>h4{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom)}.igx-excel-filter__menu--compact .igx-excel-filter__menu-header-actions span{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}.igx-excel-filter__menu--cosy .igx-excel-filter__actions-select,.igx-excel-filter__menu--cosy .igx-excel-filter__actions-selected{justify-content:center}.igx-excel-filter__clear{flex-grow:1}.igx-excel-filter__empty{color:hsl(from hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1) h s 60%)}.igx-excel-filter__secondary{--component-size: var(--ig-size, var(--ig-size-large));width:32.5rem;min-width:32.5rem;background:var(--background);box-shadow:var(--ig-elevation-12);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .25rem),.25rem);display:flex;flex-direction:column}.igx-excel-filter__secondary-main{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:1rem;height:14.5rem;overflow:auto}.igx-excel-filter__secondary-footer{--ig-size: 2;display:flex;justify-content:space-between;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block-end:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-excel-filter__secondary-footer .igx-excel-filter__clear{flex-grow:1}.igx-excel-filter__secondary-footer .igx-excel-filter__apply,.igx-excel-filter__secondary-footer .igx-excel-filter__cancel{flex-grow:0}.igx-excel-filter__cancel+.igx-excel-filter__apply{margin-inline-start:1rem}.igx-excel-filter__condition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center}.igx-excel-filter__condition igx-select~igx-input-group,.igx-excel-filter__condition igx-select~igx-date-picker,.igx-excel-filter__condition igx-select~igx-time-picker{margin-inline-start:1rem}.igx-excel-filter__condition igx-buttongroup{grid-column:1/-1;justify-self:start;min-width:30%;margin-block:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-excel-filter__condition [igxIconButton]{--component-size: var(--ig-size, var(--ig-size-large));margin-inline-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter__add-filter{--ig-icon-size: 1.125rem}.igx-excel-filter__add-filter:is(.igx-button){margin-block-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-excel-filter__secondary-header{border-block-end:.0625rem solid var(--border-color)}.igx-excel-filter__secondary-footer{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));border-top:.0625rem solid var(--border-color)}.igx-excel-filter__menu-main igx-list{--_border-color: color-mix(in srgb, var(--ig-excel-filtering-accent-color) 16%, var(--ig-excel-filtering-background));border-block:.0625rem dashed var(--_border-color, var(--ig-gray-100))}.igx-excel-filter__menu-header>h4{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-excel-filter .igx-list__item-base:last-of-type{border-bottom:var(--border-width) solid rgba(0,0,0,0)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-excel-filter{box-shadow:var(--ig-elevation-3),0 0 0 .0625rem var(--border-color);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .25rem),.25rem)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled,.igx-excel-filter .igx-excel-filter__actions-clear,.igx-excel-filter .igx-excel-filter__actions-filter--active,.igx-excel-filter .igx-excel-filter__actions-filter,.igx-excel-filter .igx-excel-filter__actions-selected,.igx-excel-filter .igx-excel-filter__actions-select,.igx-excel-filter .igx-excel-filter__actions-hide,.igx-excel-filter .igx-excel-filter__actions-unpin,.igx-excel-filter .igx-excel-filter__actions-pin--disabled,.igx-excel-filter .igx-excel-filter__actions-pin{padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-inline:.5rem;margin-block-end:.25rem;border-radius:.25rem}.igx-excel-filter .igx-excel-filter__actions-clear--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected igx-icon,.igx-excel-filter .igx-excel-filter__actions-select igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin igx-icon{--component-size: 2;color:var(--actions-icon-color)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled:hover,.igx-excel-filter .igx-excel-filter__actions-clear:hover,.igx-excel-filter .igx-excel-filter__actions-filter--active:hover,.igx-excel-filter .igx-excel-filter__actions-filter:hover,.igx-excel-filter .igx-excel-filter__actions-selected:hover,.igx-excel-filter .igx-excel-filter__actions-select:hover,.igx-excel-filter .igx-excel-filter__actions-hide:hover,.igx-excel-filter .igx-excel-filter__actions-unpin:hover,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:hover,.igx-excel-filter .igx-excel-filter__actions-pin:hover,.igx-excel-filter .igx-excel-filter__actions-clear--disabled:focus,.igx-excel-filter .igx-excel-filter__actions-clear:focus,.igx-excel-filter .igx-excel-filter__actions-filter--active:focus,.igx-excel-filter .igx-excel-filter__actions-filter:focus,.igx-excel-filter .igx-excel-filter__actions-selected:focus,.igx-excel-filter .igx-excel-filter__actions-select:focus,.igx-excel-filter .igx-excel-filter__actions-hide:focus,.igx-excel-filter .igx-excel-filter__actions-unpin:focus,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:focus,.igx-excel-filter .igx-excel-filter__actions-pin:focus{background:var(--actions-hover-background)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-select:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear--disabled:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-select:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin:focus igx-icon{color:var(--actions-hover-icon-color)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected igx-icon,.igx-excel-filter .igx-excel-filter__actions-select igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin igx-icon{--component-size: 2}.igx-excel-filter .igx-excel-filter__move,.igx-excel-filter .igx-excel-filter__sort{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter .igx-excel-filter__move header,.igx-excel-filter .igx-excel-filter__sort header{margin-block-end:max(var(--is-large, 1)*max(.25rem,-1 * .25rem),var(--is-medium, 1)*max(.25rem,-1 * .25rem),var(--is-small, 1)*max(0rem,-1 * 0rem))!important;text-transform:capitalize!important}.igx-excel-filter .igx-excel-filter__move igx-icon,.igx-excel-filter .igx-excel-filter__sort igx-icon{--component-size: 2}.igx-excel-filter__menu{background:var(--background)}.igx-excel-filter__menu .igx-button-group__item:not(:nth-child(1)){margin:0}.igx-excel-filter__menu-header{padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))) max(var(--is-large, 1)*max(max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)),-1 * max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)))*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)),-1 * max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)))*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)),-1 * max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)))*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-excel-filter__menu-main{padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));gap:max(var(--is-large, 1)*max(1rem,-1 * 1rem),var(--is-medium, 1)*max(1rem,-1 * 1rem),var(--is-small, 1)*max(1rem,-1 * 1rem))}.igx-excel-filter__menu-main igx-list{--background: var(--secondary-background);--_border-color: color-mix(in srgb, var(--ig-excel-filtering-accent-color) 16%, var(--ig-excel-filtering-background));border-block:.0625rem dashed var(--_border-color, var(--ig-gray-100));margin-inline:calc(max(var(--is-large, 1) * max(-1rem,-1 * -1rem),var(--is-medium, 1) * max(-1rem,-1 * -1rem),var(--is-small, 1) * max(-1rem,-1 * -1rem))*-1)}.igx-excel-filter__menu-main igx-list igx-virtual-scroll{padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-excel-filter__menu-main igx-list .igx-virtual-item{padding-block:calc(max(var(--is-large, 1) * max(.5rem,-1 * .5rem) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1) * max(.5rem,-1 * .5rem) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1) * max(.5rem,-1 * .5rem) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))/2)}.igx-excel-filter__actions-filter{margin-block-end:0}.igx-excel-filter__actions-pin--disabled igx-icon{color:var(--actions-disabled-foreground)}.igx-excel-filter__actions-clear--disabled igx-icon{color:var(--actions-disabled-foreground)}.igx-excel-filter__sort{padding-block-end:0}.igx-excel-filter__move{margin-block-end:max(var(--is-large, 1)*max(1rem,-1 * 1rem),var(--is-medium, 1)*max(1rem,-1 * 1rem),var(--is-small, 1)*max(.75rem,-1 * .75rem))}.igx-excel-filter .igx-excel-filter__sort+igx-excel-filter__move{margin-block-start:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.5rem,-1 * .5rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-excel-filter .ig-typography .igx-excel-filter__menu--compact .igx-excel-filter__menu-header>h4{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}}}\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, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], selector: 'igx-grid-excel-style-filtering', encapsulation: ViewEncapsulation.None, 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", styles: ["@layer ig.base{.igx-excel-filter__actions-clear--disabled,.igx-excel-filter__actions-clear,.igx-excel-filter__actions-filter--active,.igx-excel-filter__actions-filter,.igx-excel-filter__actions-selected,.igx-excel-filter__actions-select,.igx-excel-filter__actions-hide,.igx-excel-filter__actions-unpin,.igx-excel-filter__actions-pin--disabled,.igx-excel-filter__actions-pin{display:flex;align-items:center;justify-content:space-between;padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));cursor:pointer;color:var(--actions-foreground);outline-style:none}.igx-excel-filter__actions-clear--disabled igx-icon,.igx-excel-filter__actions-clear igx-icon,.igx-excel-filter__actions-filter--active igx-icon,.igx-excel-filter__actions-filter igx-icon,.igx-excel-filter__actions-selected igx-icon,.igx-excel-filter__actions-select igx-icon,.igx-excel-filter__actions-hide igx-icon,.igx-excel-filter__actions-unpin igx-icon,.igx-excel-filter__actions-pin--disabled igx-icon,.igx-excel-filter__actions-pin igx-icon{color:var(--actions-icon-color)}.igx-excel-filter__actions-clear--disabled:hover,.igx-excel-filter__actions-clear:hover,.igx-excel-filter__actions-filter--active:hover,.igx-excel-filter__actions-filter:hover,.igx-excel-filter__actions-selected:hover,.igx-excel-filter__actions-select:hover,.igx-excel-filter__actions-hide:hover,.igx-excel-filter__actions-unpin:hover,.igx-excel-filter__actions-pin--disabled:hover,.igx-excel-filter__actions-pin:hover,.igx-excel-filter__actions-clear--disabled:focus,.igx-excel-filter__actions-clear:focus,.igx-excel-filter__actions-filter--active:focus,.igx-excel-filter__actions-filter:focus,.igx-excel-filter__actions-selected:focus,.igx-excel-filter__actions-select:focus,.igx-excel-filter__actions-hide:focus,.igx-excel-filter__actions-unpin:focus,.igx-excel-filter__actions-pin--disabled:focus,.igx-excel-filter__actions-pin:focus{color:var(--actions-hover-foreground);background:var(--actions-hover-background)}.igx-excel-filter__actions-clear--disabled:hover igx-icon,.igx-excel-filter__actions-clear:hover igx-icon,.igx-excel-filter__actions-filter--active:hover igx-icon,.igx-excel-filter__actions-filter:hover igx-icon,.igx-excel-filter__actions-selected:hover igx-icon,.igx-excel-filter__actions-select:hover igx-icon,.igx-excel-filter__actions-hide:hover igx-icon,.igx-excel-filter__actions-unpin:hover igx-icon,.igx-excel-filter__actions-pin--disabled:hover igx-icon,.igx-excel-filter__actions-pin:hover igx-icon,.igx-excel-filter__actions-clear--disabled:focus igx-icon,.igx-excel-filter__actions-clear:focus igx-icon,.igx-excel-filter__actions-filter--active:focus igx-icon,.igx-excel-filter__actions-filter:focus igx-icon,.igx-excel-filter__actions-selected:focus igx-icon,.igx-excel-filter__actions-select:focus igx-icon,.igx-excel-filter__actions-hide:focus igx-icon,.igx-excel-filter__actions-unpin:focus igx-icon,.igx-excel-filter__actions-pin--disabled:focus igx-icon,.igx-excel-filter__actions-pin:focus igx-icon{color:var(--actions-hover-icon-color)}[dir=rtl] .igx-excel-filter__actions-clear--disabled igx-icon,[dir=rtl] .igx-excel-filter__actions-clear igx-icon,[dir=rtl] .igx-excel-filter__actions-filter--active igx-icon,[dir=rtl] .igx-excel-filter__actions-filter igx-icon,[dir=rtl] .igx-excel-filter__actions-selected igx-icon,[dir=rtl] .igx-excel-filter__actions-select igx-icon,[dir=rtl] .igx-excel-filter__actions-hide igx-icon,[dir=rtl] .igx-excel-filter__actions-unpin igx-icon,[dir=rtl] .igx-excel-filter__actions-pin--disabled igx-icon,[dir=rtl] .igx-excel-filter__actions-pin igx-icon{transform:scaleX(-1)}.igx-excel-filter__menu--compact .igx-excel-filter__move,.igx-excel-filter__menu--compact .igx-excel-filter__sort{display:flex;align-items:center;justify-content:space-between}.igx-excel-filter__menu--compact .igx-excel-filter__move header,.igx-excel-filter__menu--compact .igx-excel-filter__sort header{margin-inline-end:auto}.igx-excel-filter__move,.igx-excel-filter__sort{--ig-icon-size: var(--size);display:block;padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter__move header,.igx-excel-filter__sort header{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);color:var(--subheader-foreground);margin-block-end:.25rem}.igx-excel-filter__move igx-icon,.igx-excel-filter__sort igx-icon{--component-size: 1;display:initial}.igx-excel-filter{--component-size: var(--ig-size, var(--ig-size-large));display:block;overflow:auto;width:20rem;min-width:20rem;height:100%;flex-grow:1;box-shadow:var(--ig-elevation-12);background:var(--background)}.igx-excel-filter__sizing{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);min-height:max(var(--is-large, 1)*max(40.3125rem,-1 * 40.3125rem),var(--is-medium, 1)*max(29.0625rem,-1 * 29.0625rem),var(--is-small, 1)*max(20.625rem,-1 * 20.625rem));max-height:max(var(--is-large, 1)*max(48.4375rem,-1 * 48.4375rem),var(--is-medium, 1)*max(35.3125rem,-1 * 35.3125rem),var(--is-small, 1)*max(25.3125rem,-1 * 25.3125rem))}.igx-excel-filter__menu{--component-size: var(--ig-size, var(--ig-size-large));display:flex;flex-direction:column;height:100%;border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .25rem),.25rem);background:var(--background)}.igx-excel-filter__menu igx-excel-style-filter-operations,.igx-excel-filter__menu [igxExcelStyleFilterOperations]{display:flex;flex-direction:column;flex-grow:1;min-height:0}.igx-excel-filter__menu .igx-tree-node__wrapper{padding:0}.igx-excel-filter__menu igx-chips-area{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-block-end:0;gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.25rem,-1 * .25rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-excel-filter__menu-header{display:flex;align-items:center;padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-excel-filter__menu-header>h4{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}.igx-excel-filter__menu-header{color:var(--header-foreground)}.igx-excel-filter__menu-main{display:flex;flex-direction:column;flex-grow:1;overflow:hidden;padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));gap:max(var(--is-large, 1)*max(1rem,-1 * 1rem),var(--is-medium, 1)*max(.5rem,-1 * .5rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-excel-filter__menu-main igx-list{flex-grow:1;overflow:hidden;margin-inline:calc(max(var(--is-large, 1) * max(-1rem,-1 * -1rem),var(--is-medium, 1) * max(-.5rem,-1 * -.5rem),var(--is-small, 1) * max(-.25rem,-1 * -.25rem))*-1);border:0;border-top:.0625rem dashed var(--border-color);border-bottom:.0625rem dashed var(--border-color)}.igx-excel-filter__tree{--ig-icon-size: 1.25rem;background:var(--secondary-background);overflow-y:auto;margin-inline:calc(max(var(--is-large, 1) * max(-1rem,-1 * -1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1) * max(-.5rem,-1 * -.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1) * max(-.25rem,-1 * -.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))*-1);margin-block:0;flex:1;border-top:.0625rem dashed var(--border-color);border-bottom:.0625rem dashed var(--border-color)}.igx-excel-filter__tree>igx-checkbox,.igx-excel-filter__tree .igx-tree-node__wrapper{height:max(var(--is-large, 1) * max(2.5rem,-1 * 2.5rem),var(--is-medium, 1) * max(2rem,-1 * 2rem),var(--is-small, 1) * max(1.5rem,-1 * 1.5rem));min-height:max(var(--is-large, 1) * max(2.5rem,-1 * 2.5rem),var(--is-medium, 1) * max(2rem,-1 * 2rem),var(--is-small, 1) * max(1.5rem,-1 * 1.5rem))}.igx-excel-filter__tree .igx-tree-node__toggle-button{min-width:1.25rem;margin-inline-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-inline-end:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter__tree .igx-tree{overflow-y:hidden}.igx-excel-filter__tree-alike{background:var(--secondary-background);display:flex;flex-direction:column;z-index:1}.igx-excel-filter__tree-alike-item{display:flex;align-items:center;height:max(var(--is-large, 1)*max(2.5rem,-1 * 2.5rem),var(--is-medium, 1)*max(2rem,-1 * 2rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));background:var(--secondary-background)}.igx-excel-filter__tree-alike-item:hover,.igx-excel-filter__tree-alike-item:focus{background:color-mix(in srgb,var(--_excel-filtering-foreground) 12%,var(--background))}.igx-excel-filter__tree-alike-item>igx-checkbox{margin-inline-start:max(var(--is-large, 1)*max(2.75rem,-1 * 2.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(2.25rem,-1 * 2.25rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.75rem,-1 * 1.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[dir=rtl] .igx-excel-filter__sort .igx-button-group{flex-direction:row-reverse}[dir=rtl] .igx-excel-filter__sort .igx-button-group igx-icon,[dir=rtl] .igx-excel-filter__sort .igx-button-group [igxButton]{direction:ltr}.igx-excel-filter__actions-pin--disabled{color:var(--actions-disabled-foreground);pointer-events:none}.igx-excel-filter__actions-selected igx-icon{color:var(--actions-selected-icon-color)}.igx-excel-filter__actions-filter--active{background:color-mix(in srgb,var(--_excel-filtering-accent-color) 8%,var(--background));color:var(--actions-hover-foreground)}.igx-excel-filter__actions-clear--disabled{color:var(--actions-disabled-foreground);pointer-events:none}.igx-excel-filter__menu-header-actions{display:flex;margin-inline-start:auto;gap:.25rem}.igx-excel-filter__secondary-header{display:flex;align-items:center;padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));color:var(--header-foreground);border-block-end:.0625rem solid var(--border-color)}.igx-excel-filter__secondary-header>h4{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}.igx-excel-filter__filter-results{position:absolute;width:.0625rem;height:.0625rem;overflow:hidden}.igx-excel-filter__menu-footer{display:flex;justify-content:space-between}.igx-excel-filter__apply{flex-grow:1}.igx-excel-filter__apply [igxButton]{width:100%}.igx-excel-filter__cancel{flex-grow:1}.igx-excel-filter__cancel [igxButton]{width:100%}.igx-excel-filter--inline{box-shadow:none;width:100%}.igx-excel-filter__menu--compact .igx-excel-filter__actions-select,.igx-excel-filter__menu--compact .igx-excel-filter__actions-selected{justify-content:center}.igx-excel-filter__menu--compact .igx-excel-filter__sort igx-buttongroup{width:13rem}.igx-excel-filter__menu--compact .igx-excel-filter__sort header{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);text-transform:capitalize}.igx-excel-filter__menu--compact .igx-excel-filter__move igx-buttongroup{width:13rem}.igx-excel-filter__menu--compact .igx-excel-filter__move header{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);text-transform:capitalize}.igx-excel-filter__menu--compact .igx-excel-filter__menu-header>h4{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom)}.igx-excel-filter__menu--compact .igx-excel-filter__menu-header-actions span{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}.igx-excel-filter__menu--cosy .igx-excel-filter__actions-select,.igx-excel-filter__menu--cosy .igx-excel-filter__actions-selected{justify-content:center}.igx-excel-filter__clear{flex-grow:1}.igx-excel-filter__empty{color:hsl(from hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1) h s 60%)}.igx-excel-filter__secondary{--component-size: var(--ig-size, var(--ig-size-large));width:32.5rem;min-width:32.5rem;background:var(--background);box-shadow:var(--ig-elevation-12);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .25rem),.25rem);display:flex;flex-direction:column}.igx-excel-filter__secondary-main{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:1rem;height:14.5rem;overflow:auto}.igx-excel-filter__secondary-footer{--ig-size: 2;display:flex;justify-content:space-between;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block-end:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-excel-filter__secondary-footer .igx-excel-filter__clear{flex-grow:1}.igx-excel-filter__secondary-footer .igx-excel-filter__apply,.igx-excel-filter__secondary-footer .igx-excel-filter__cancel{flex-grow:0}.igx-excel-filter__cancel+.igx-excel-filter__apply{margin-inline-start:1rem}.igx-excel-filter__condition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center}.igx-excel-filter__condition igx-select~igx-input-group,.igx-excel-filter__condition igx-select~igx-date-picker,.igx-excel-filter__condition igx-select~igx-time-picker{margin-inline-start:1rem}.igx-excel-filter__condition igx-buttongroup{grid-column:1/-1;justify-self:start;min-width:30%;margin-block:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-excel-filter__condition [igxIconButton]{--component-size: var(--ig-size, var(--ig-size-large));margin-inline-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter__add-filter{--ig-icon-size: 1.125rem}.igx-excel-filter__add-filter:is(.igx-button){margin-block-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-excel-filter__secondary-header{border-block-end:.0625rem solid var(--border-color)}.igx-excel-filter__secondary-footer{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));border-top:.0625rem solid var(--border-color)}.igx-excel-filter__menu-main igx-list{--_border-color: color-mix(in srgb, var(--ig-excel-filtering-accent-color) 16%, var(--ig-excel-filtering-background));border-block:.0625rem dashed var(--_border-color, var(--ig-gray-100))}.igx-excel-filter__menu-header>h4{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-excel-filter .igx-list__item-base:last-of-type{border-bottom:var(--border-width) solid rgba(0,0,0,0)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-excel-filter{box-shadow:var(--ig-elevation-3),0 0 0 .0625rem var(--border-color);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .25rem),.25rem)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled,.igx-excel-filter .igx-excel-filter__actions-clear,.igx-excel-filter .igx-excel-filter__actions-filter--active,.igx-excel-filter .igx-excel-filter__actions-filter,.igx-excel-filter .igx-excel-filter__actions-selected,.igx-excel-filter .igx-excel-filter__actions-select,.igx-excel-filter .igx-excel-filter__actions-hide,.igx-excel-filter .igx-excel-filter__actions-unpin,.igx-excel-filter .igx-excel-filter__actions-pin--disabled,.igx-excel-filter .igx-excel-filter__actions-pin{padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-inline:.5rem;margin-block-end:.25rem;border-radius:.25rem}.igx-excel-filter .igx-excel-filter__actions-clear--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected igx-icon,.igx-excel-filter .igx-excel-filter__actions-select igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin igx-icon{--component-size: 2;color:var(--actions-icon-color)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled:hover,.igx-excel-filter .igx-excel-filter__actions-clear:hover,.igx-excel-filter .igx-excel-filter__actions-filter--active:hover,.igx-excel-filter .igx-excel-filter__actions-filter:hover,.igx-excel-filter .igx-excel-filter__actions-selected:hover,.igx-excel-filter .igx-excel-filter__actions-select:hover,.igx-excel-filter .igx-excel-filter__actions-hide:hover,.igx-excel-filter .igx-excel-filter__actions-unpin:hover,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:hover,.igx-excel-filter .igx-excel-filter__actions-pin:hover,.igx-excel-filter .igx-excel-filter__actions-clear--disabled:focus,.igx-excel-filter .igx-excel-filter__actions-clear:focus,.igx-excel-filter .igx-excel-filter__actions-filter--active:focus,.igx-excel-filter .igx-excel-filter__actions-filter:focus,.igx-excel-filter .igx-excel-filter__actions-selected:focus,.igx-excel-filter .igx-excel-filter__actions-select:focus,.igx-excel-filter .igx-excel-filter__actions-hide:focus,.igx-excel-filter .igx-excel-filter__actions-unpin:focus,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:focus,.igx-excel-filter .igx-excel-filter__actions-pin:focus{background:var(--actions-hover-background)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-select:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear--disabled:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-select:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin:focus igx-icon{color:var(--actions-hover-icon-color)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected igx-icon,.igx-excel-filter .igx-excel-filter__actions-select igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin igx-icon{--component-size: 2}.igx-excel-filter .igx-excel-filter__move,.igx-excel-filter .igx-excel-filter__sort{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter .igx-excel-filter__move header,.igx-excel-filter .igx-excel-filter__sort header{margin-block-end:max(var(--is-large, 1)*max(.25rem,-1 * .25rem),var(--is-medium, 1)*max(.25rem,-1 * .25rem),var(--is-small, 1)*max(0rem,-1 * 0rem))!important;text-transform:capitalize!important}.igx-excel-filter .igx-excel-filter__move igx-icon,.igx-excel-filter .igx-excel-filter__sort igx-icon{--component-size: 2}.igx-excel-filter__menu{background:var(--background)}.igx-excel-filter__menu .igx-button-group__item:not(:nth-child(1)){margin:0}.igx-excel-filter__menu-header{padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))) max(var(--is-large, 1)*max(max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)),-1 * max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)))*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)),-1 * max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)))*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)),-1 * max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)))*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-excel-filter__menu-main{padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));gap:max(var(--is-large, 1)*max(1rem,-1 * 1rem),var(--is-medium, 1)*max(1rem,-1 * 1rem),var(--is-small, 1)*max(1rem,-1 * 1rem))}.igx-excel-filter__menu-main igx-list{--background: var(--secondary-background);--_border-color: color-mix(in srgb, var(--ig-excel-filtering-accent-color) 16%, var(--ig-excel-filtering-background));border-block:.0625rem dashed var(--_border-color, var(--ig-gray-100));margin-inline:calc(max(var(--is-large, 1) * max(-1rem,-1 * -1rem),var(--is-medium, 1) * max(-1rem,-1 * -1rem),var(--is-small, 1) * max(-1rem,-1 * -1rem))*-1)}.igx-excel-filter__menu-main igx-list igx-display-container{padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-excel-filter__menu-main igx-list .igx-list__item-base{padding-block-end:.25rem}.igx-excel-filter__actions-filter{margin-block-end:0}.igx-excel-filter__actions-pin--disabled igx-icon{color:var(--actions-disabled-foreground)}.igx-excel-filter__actions-clear--disabled igx-icon{color:var(--actions-disabled-foreground)}.igx-excel-filter__sort{padding-block-end:0}.igx-excel-filter__move{margin-block-end:max(var(--is-large, 1)*max(1rem,-1 * 1rem),var(--is-medium, 1)*max(1rem,-1 * 1rem),var(--is-small, 1)*max(.75rem,-1 * .75rem))}.igx-excel-filter .igx-excel-filter__sort+igx-excel-filter__move{margin-block-start:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.5rem,-1 * .5rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-excel-filter .ig-typography .igx-excel-filter__menu--compact .igx-excel-filter__menu-header>h4{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], selector: 'igx-grid-excel-style-filtering', encapsulation: ViewEncapsulation.None, 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", styles: ["@layer ig.base{.igx-excel-filter__actions-clear--disabled,.igx-excel-filter__actions-clear,.igx-excel-filter__actions-filter--active,.igx-excel-filter__actions-filter,.igx-excel-filter__actions-selected,.igx-excel-filter__actions-select,.igx-excel-filter__actions-hide,.igx-excel-filter__actions-unpin,.igx-excel-filter__actions-pin--disabled,.igx-excel-filter__actions-pin{display:flex;align-items:center;justify-content:space-between;padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));cursor:pointer;color:var(--actions-foreground);outline-style:none}.igx-excel-filter__actions-clear--disabled igx-icon,.igx-excel-filter__actions-clear igx-icon,.igx-excel-filter__actions-filter--active igx-icon,.igx-excel-filter__actions-filter igx-icon,.igx-excel-filter__actions-selected igx-icon,.igx-excel-filter__actions-select igx-icon,.igx-excel-filter__actions-hide igx-icon,.igx-excel-filter__actions-unpin igx-icon,.igx-excel-filter__actions-pin--disabled igx-icon,.igx-excel-filter__actions-pin igx-icon{color:var(--actions-icon-color)}.igx-excel-filter__actions-clear--disabled:hover,.igx-excel-filter__actions-clear:hover,.igx-excel-filter__actions-filter--active:hover,.igx-excel-filter__actions-filter:hover,.igx-excel-filter__actions-selected:hover,.igx-excel-filter__actions-select:hover,.igx-excel-filter__actions-hide:hover,.igx-excel-filter__actions-unpin:hover,.igx-excel-filter__actions-pin--disabled:hover,.igx-excel-filter__actions-pin:hover,.igx-excel-filter__actions-clear--disabled:focus,.igx-excel-filter__actions-clear:focus,.igx-excel-filter__actions-filter--active:focus,.igx-excel-filter__actions-filter:focus,.igx-excel-filter__actions-selected:focus,.igx-excel-filter__actions-select:focus,.igx-excel-filter__actions-hide:focus,.igx-excel-filter__actions-unpin:focus,.igx-excel-filter__actions-pin--disabled:focus,.igx-excel-filter__actions-pin:focus{color:var(--actions-hover-foreground);background:var(--actions-hover-background)}.igx-excel-filter__actions-clear--disabled:hover igx-icon,.igx-excel-filter__actions-clear:hover igx-icon,.igx-excel-filter__actions-filter--active:hover igx-icon,.igx-excel-filter__actions-filter:hover igx-icon,.igx-excel-filter__actions-selected:hover igx-icon,.igx-excel-filter__actions-select:hover igx-icon,.igx-excel-filter__actions-hide:hover igx-icon,.igx-excel-filter__actions-unpin:hover igx-icon,.igx-excel-filter__actions-pin--disabled:hover igx-icon,.igx-excel-filter__actions-pin:hover igx-icon,.igx-excel-filter__actions-clear--disabled:focus igx-icon,.igx-excel-filter__actions-clear:focus igx-icon,.igx-excel-filter__actions-filter--active:focus igx-icon,.igx-excel-filter__actions-filter:focus igx-icon,.igx-excel-filter__actions-selected:focus igx-icon,.igx-excel-filter__actions-select:focus igx-icon,.igx-excel-filter__actions-hide:focus igx-icon,.igx-excel-filter__actions-unpin:focus igx-icon,.igx-excel-filter__actions-pin--disabled:focus igx-icon,.igx-excel-filter__actions-pin:focus igx-icon{color:var(--actions-hover-icon-color)}[dir=rtl] .igx-excel-filter__actions-clear--disabled igx-icon,[dir=rtl] .igx-excel-filter__actions-clear igx-icon,[dir=rtl] .igx-excel-filter__actions-filter--active igx-icon,[dir=rtl] .igx-excel-filter__actions-filter igx-icon,[dir=rtl] .igx-excel-filter__actions-selected igx-icon,[dir=rtl] .igx-excel-filter__actions-select igx-icon,[dir=rtl] .igx-excel-filter__actions-hide igx-icon,[dir=rtl] .igx-excel-filter__actions-unpin igx-icon,[dir=rtl] .igx-excel-filter__actions-pin--disabled igx-icon,[dir=rtl] .igx-excel-filter__actions-pin igx-icon{transform:scaleX(-1)}.igx-excel-filter__menu--compact .igx-excel-filter__move,.igx-excel-filter__menu--compact .igx-excel-filter__sort{display:flex;align-items:center;justify-content:space-between}.igx-excel-filter__menu--compact .igx-excel-filter__move header,.igx-excel-filter__menu--compact .igx-excel-filter__sort header{margin-inline-end:auto}.igx-excel-filter__move,.igx-excel-filter__sort{--ig-icon-size: var(--size);display:block;padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter__move header,.igx-excel-filter__sort header{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);color:var(--subheader-foreground);margin-block-end:.25rem}.igx-excel-filter__move igx-icon,.igx-excel-filter__sort igx-icon{--component-size: 1;display:initial}.igx-excel-filter{--component-size: var(--ig-size, var(--ig-size-large));display:block;overflow:auto;width:20rem;min-width:20rem;height:100%;flex-grow:1;box-shadow:var(--ig-elevation-12);background:var(--background)}.igx-excel-filter__sizing{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);min-height:max(var(--is-large, 1)*max(40.3125rem,-1 * 40.3125rem),var(--is-medium, 1)*max(29.0625rem,-1 * 29.0625rem),var(--is-small, 1)*max(20.625rem,-1 * 20.625rem));max-height:max(var(--is-large, 1)*max(48.4375rem,-1 * 48.4375rem),var(--is-medium, 1)*max(35.3125rem,-1 * 35.3125rem),var(--is-small, 1)*max(25.3125rem,-1 * 25.3125rem))}.igx-excel-filter__menu{--component-size: var(--ig-size, var(--ig-size-large));display:flex;flex-direction:column;height:100%;border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .25rem),.25rem);background:var(--background)}.igx-excel-filter__menu igx-excel-style-filter-operations,.igx-excel-filter__menu [igxExcelStyleFilterOperations]{display:flex;flex-direction:column;flex-grow:1;min-height:0}.igx-excel-filter__menu .igx-tree-node__wrapper{padding:0}.igx-excel-filter__menu igx-chips-area{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-block-end:0;gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.25rem,-1 * .25rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-excel-filter__menu-header{display:flex;align-items:center;padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-excel-filter__menu-header>h4{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}.igx-excel-filter__menu-header{color:var(--header-foreground)}.igx-excel-filter__menu-main{display:flex;flex-direction:column;flex-grow:1;overflow:hidden;padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));gap:max(var(--is-large, 1)*max(1rem,-1 * 1rem),var(--is-medium, 1)*max(.5rem,-1 * .5rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-excel-filter__menu-main igx-list{flex-grow:1;overflow:hidden;margin-inline:calc(max(var(--is-large, 1) * max(-1rem,-1 * -1rem),var(--is-medium, 1) * max(-.5rem,-1 * -.5rem),var(--is-small, 1) * max(-.25rem,-1 * -.25rem))*-1);border:0;border-top:.0625rem dashed var(--border-color);border-bottom:.0625rem dashed var(--border-color)}.igx-excel-filter__menu-main igx-list igx-virtual-scroll{flex:1 1 auto;min-height:0}.igx-excel-filter__tree{--ig-icon-size: 1.25rem;background:var(--secondary-background);overflow-y:auto;margin-inline:calc(max(var(--is-large, 1) * max(-1rem,-1 * -1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1) * max(-.5rem,-1 * -.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1) * max(-.25rem,-1 * -.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))*-1);margin-block:0;flex:1;border-top:.0625rem dashed var(--border-color);border-bottom:.0625rem dashed var(--border-color)}.igx-excel-filter__tree>igx-checkbox,.igx-excel-filter__tree .igx-tree-node__wrapper{height:max(var(--is-large, 1) * max(2.5rem,-1 * 2.5rem),var(--is-medium, 1) * max(2rem,-1 * 2rem),var(--is-small, 1) * max(1.5rem,-1 * 1.5rem));min-height:max(var(--is-large, 1) * max(2.5rem,-1 * 2.5rem),var(--is-medium, 1) * max(2rem,-1 * 2rem),var(--is-small, 1) * max(1.5rem,-1 * 1.5rem))}.igx-excel-filter__tree .igx-tree-node__toggle-button{min-width:1.25rem;margin-inline-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-inline-end:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter__tree .igx-tree{overflow-y:hidden}.igx-excel-filter__tree-alike{background:var(--secondary-background);display:flex;flex-direction:column;z-index:1}.igx-excel-filter__tree-alike-item{display:flex;align-items:center;height:max(var(--is-large, 1)*max(2.5rem,-1 * 2.5rem),var(--is-medium, 1)*max(2rem,-1 * 2rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));background:var(--secondary-background)}.igx-excel-filter__tree-alike-item:hover,.igx-excel-filter__tree-alike-item:focus{background:color-mix(in srgb,var(--_excel-filtering-foreground) 12%,var(--background))}.igx-excel-filter__tree-alike-item>igx-checkbox{margin-inline-start:max(var(--is-large, 1)*max(2.75rem,-1 * 2.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(2.25rem,-1 * 2.25rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.75rem,-1 * 1.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[dir=rtl] .igx-excel-filter__sort .igx-button-group{flex-direction:row-reverse}[dir=rtl] .igx-excel-filter__sort .igx-button-group igx-icon,[dir=rtl] .igx-excel-filter__sort .igx-button-group [igxButton]{direction:ltr}.igx-excel-filter__actions-pin--disabled{color:var(--actions-disabled-foreground);pointer-events:none}.igx-excel-filter__actions-selected igx-icon{color:var(--actions-selected-icon-color)}.igx-excel-filter__actions-filter--active{background:color-mix(in srgb,var(--_excel-filtering-accent-color) 8%,var(--background));color:var(--actions-hover-foreground)}.igx-excel-filter__actions-clear--disabled{color:var(--actions-disabled-foreground);pointer-events:none}.igx-excel-filter__menu-header-actions{display:flex;margin-inline-start:auto;gap:.25rem}.igx-excel-filter__secondary-header{display:flex;align-items:center;padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));color:var(--header-foreground);border-block-end:.0625rem solid var(--border-color)}.igx-excel-filter__secondary-header>h4{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}.igx-excel-filter__filter-results{position:absolute;width:.0625rem;height:.0625rem;overflow:hidden}.igx-excel-filter__menu-footer{display:flex;justify-content:space-between}.igx-excel-filter__apply{flex-grow:1}.igx-excel-filter__apply [igxButton]{width:100%}.igx-excel-filter__cancel{flex-grow:1}.igx-excel-filter__cancel [igxButton]{width:100%}.igx-excel-filter--inline{box-shadow:none;width:100%}.igx-excel-filter__menu--compact .igx-excel-filter__actions-select,.igx-excel-filter__menu--compact .igx-excel-filter__actions-selected{justify-content:center}.igx-excel-filter__menu--compact .igx-excel-filter__sort igx-buttongroup{width:13rem}.igx-excel-filter__menu--compact .igx-excel-filter__sort header{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);text-transform:capitalize}.igx-excel-filter__menu--compact .igx-excel-filter__move igx-buttongroup{width:13rem}.igx-excel-filter__menu--compact .igx-excel-filter__move header{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);text-transform:capitalize}.igx-excel-filter__menu--compact .igx-excel-filter__menu-header>h4{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom)}.igx-excel-filter__menu--compact .igx-excel-filter__menu-header-actions span{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}.igx-excel-filter__menu--cosy .igx-excel-filter__actions-select,.igx-excel-filter__menu--cosy .igx-excel-filter__actions-selected{justify-content:center}.igx-excel-filter__clear{flex-grow:1}.igx-excel-filter__empty{color:hsl(from hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1) h s 60%)}.igx-excel-filter__secondary{--component-size: var(--ig-size, var(--ig-size-large));width:32.5rem;min-width:32.5rem;background:var(--background);box-shadow:var(--ig-elevation-12);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .25rem),.25rem);display:flex;flex-direction:column}.igx-excel-filter__secondary-main{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:1rem;height:14.5rem;overflow:auto}.igx-excel-filter__secondary-footer{--ig-size: 2;display:flex;justify-content:space-between;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block-end:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-excel-filter__secondary-footer .igx-excel-filter__clear{flex-grow:1}.igx-excel-filter__secondary-footer .igx-excel-filter__apply,.igx-excel-filter__secondary-footer .igx-excel-filter__cancel{flex-grow:0}.igx-excel-filter__cancel+.igx-excel-filter__apply{margin-inline-start:1rem}.igx-excel-filter__condition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center}.igx-excel-filter__condition igx-select~igx-input-group,.igx-excel-filter__condition igx-select~igx-date-picker,.igx-excel-filter__condition igx-select~igx-time-picker{margin-inline-start:1rem}.igx-excel-filter__condition igx-buttongroup{grid-column:1/-1;justify-self:start;min-width:30%;margin-block:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-excel-filter__condition [igxIconButton]{--component-size: var(--ig-size, var(--ig-size-large));margin-inline-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter__add-filter{--ig-icon-size: 1.125rem}.igx-excel-filter__add-filter:is(.igx-button){margin-block-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-excel-filter__secondary-header{border-block-end:.0625rem solid var(--border-color)}.igx-excel-filter__secondary-footer{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));border-top:.0625rem solid var(--border-color)}.igx-excel-filter__menu-main igx-list{--_border-color: color-mix(in srgb, var(--ig-excel-filtering-accent-color) 16%, var(--ig-excel-filtering-background));border-block:.0625rem dashed var(--_border-color, var(--ig-gray-100))}.igx-excel-filter__menu-header>h4{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-excel-filter .igx-list__item-base:last-of-type{border-bottom:var(--border-width) solid rgba(0,0,0,0)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-excel-filter{box-shadow:var(--ig-elevation-3),0 0 0 .0625rem var(--border-color);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .25rem),.25rem)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled,.igx-excel-filter .igx-excel-filter__actions-clear,.igx-excel-filter .igx-excel-filter__actions-filter--active,.igx-excel-filter .igx-excel-filter__actions-filter,.igx-excel-filter .igx-excel-filter__actions-selected,.igx-excel-filter .igx-excel-filter__actions-select,.igx-excel-filter .igx-excel-filter__actions-hide,.igx-excel-filter .igx-excel-filter__actions-unpin,.igx-excel-filter .igx-excel-filter__actions-pin--disabled,.igx-excel-filter .igx-excel-filter__actions-pin{padding-block:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-inline:.5rem;margin-block-end:.25rem;border-radius:.25rem}.igx-excel-filter .igx-excel-filter__actions-clear--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected igx-icon,.igx-excel-filter .igx-excel-filter__actions-select igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin igx-icon{--component-size: 2;color:var(--actions-icon-color)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled:hover,.igx-excel-filter .igx-excel-filter__actions-clear:hover,.igx-excel-filter .igx-excel-filter__actions-filter--active:hover,.igx-excel-filter .igx-excel-filter__actions-filter:hover,.igx-excel-filter .igx-excel-filter__actions-selected:hover,.igx-excel-filter .igx-excel-filter__actions-select:hover,.igx-excel-filter .igx-excel-filter__actions-hide:hover,.igx-excel-filter .igx-excel-filter__actions-unpin:hover,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:hover,.igx-excel-filter .igx-excel-filter__actions-pin:hover,.igx-excel-filter .igx-excel-filter__actions-clear--disabled:focus,.igx-excel-filter .igx-excel-filter__actions-clear:focus,.igx-excel-filter .igx-excel-filter__actions-filter--active:focus,.igx-excel-filter .igx-excel-filter__actions-filter:focus,.igx-excel-filter .igx-excel-filter__actions-selected:focus,.igx-excel-filter .igx-excel-filter__actions-select:focus,.igx-excel-filter .igx-excel-filter__actions-hide:focus,.igx-excel-filter .igx-excel-filter__actions-unpin:focus,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:focus,.igx-excel-filter .igx-excel-filter__actions-pin:focus{background:var(--actions-hover-background)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-select:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin:hover igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear--disabled:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-select:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled:focus igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin:focus igx-icon{color:var(--actions-hover-icon-color)}.igx-excel-filter .igx-excel-filter__actions-clear--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-clear igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter--active igx-icon,.igx-excel-filter .igx-excel-filter__actions-filter igx-icon,.igx-excel-filter .igx-excel-filter__actions-selected igx-icon,.igx-excel-filter .igx-excel-filter__actions-select igx-icon,.igx-excel-filter .igx-excel-filter__actions-hide igx-icon,.igx-excel-filter .igx-excel-filter__actions-unpin igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin--disabled igx-icon,.igx-excel-filter .igx-excel-filter__actions-pin igx-icon{--component-size: 2}.igx-excel-filter .igx-excel-filter__move,.igx-excel-filter .igx-excel-filter__sort{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-excel-filter .igx-excel-filter__move header,.igx-excel-filter .igx-excel-filter__sort header{margin-block-end:max(var(--is-large, 1)*max(.25rem,-1 * .25rem),var(--is-medium, 1)*max(.25rem,-1 * .25rem),var(--is-small, 1)*max(0rem,-1 * 0rem))!important;text-transform:capitalize!important}.igx-excel-filter .igx-excel-filter__move igx-icon,.igx-excel-filter .igx-excel-filter__sort igx-icon{--component-size: 2}.igx-excel-filter__menu{background:var(--background)}.igx-excel-filter__menu .igx-button-group__item:not(:nth-child(1)){margin:0}.igx-excel-filter__menu-header{padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))) max(var(--is-large, 1)*max(max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)),-1 * max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)))*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)),-1 * max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)))*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)),-1 * max(var(--is-large, 1) * max(1rem,-1 * 1rem),var(--is-medium, 1) * max(.75rem,-1 * .75rem),var(--is-small, 1) * max(.5rem,-1 * .5rem)))*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-excel-filter__menu-main{padding:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));gap:max(var(--is-large, 1)*max(1rem,-1 * 1rem),var(--is-medium, 1)*max(1rem,-1 * 1rem),var(--is-small, 1)*max(1rem,-1 * 1rem))}.igx-excel-filter__menu-main igx-list{--background: var(--secondary-background);--_border-color: color-mix(in srgb, var(--ig-excel-filtering-accent-color) 16%, var(--ig-excel-filtering-background));border-block:.0625rem dashed var(--_border-color, var(--ig-gray-100));margin-inline:calc(max(var(--is-large, 1) * max(-1rem,-1 * -1rem),var(--is-medium, 1) * max(-1rem,-1 * -1rem),var(--is-small, 1) * max(-1rem,-1 * -1rem))*-1)}.igx-excel-filter__menu-main igx-list igx-virtual-scroll{padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-excel-filter__menu-main igx-list .igx-virtual-item{padding-block:calc(max(var(--is-large, 1) * max(.5rem,-1 * .5rem) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1) * max(.5rem,-1 * .5rem) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1) * max(.5rem,-1 * .5rem) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))/2)}.igx-excel-filter__actions-filter{margin-block-end:0}.igx-excel-filter__actions-pin--disabled igx-icon{color:var(--actions-disabled-foreground)}.igx-excel-filter__actions-clear--disabled igx-icon{color:var(--actions-disabled-foreground)}.igx-excel-filter__sort{padding-block-end:0}.igx-excel-filter__move{margin-block-end:max(var(--is-large, 1)*max(1rem,-1 * 1rem),var(--is-medium, 1)*max(1rem,-1 * 1rem),var(--is-small, 1)*max(.75rem,-1 * .75rem))}.igx-excel-filter .igx-excel-filter__sort+igx-excel-filter__move{margin-block-start:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.5rem,-1 * .5rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-excel-filter .ig-typography .igx-excel-filter__menu--compact .igx-excel-filter__menu-header>h4{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}}}\n"] }]
         }], propDecorators: { defaultClass: [{
                 type: HostBinding,
                 args: ['class.igx-excel-filter']
@@ -9880,10 +9893,10 @@ class IgxGridActionButtonComponent {
             event.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridActionButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridActionButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-action-button', changeDetection: ChangeDetectionStrategy.Eager, 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: [{
@@ -9982,10 +9995,10 @@ class IgxGridActionsBaseDirective {
     isRow(context) {
         return context && context instanceof IgxRowDirective;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridActionsBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxGridActionsBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxGridActionsBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridActionsBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridActionsBase]',
@@ -10146,10 +10159,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: "22.1.1", ngImport: i0, type: IgxGridEditingActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridEditingActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridEditingActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridEditingActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-editing-actions', providers: [{ provide: IgxActionStripActionsToken, useExisting: IgxGridEditingActionsComponent }], changeDetection: ChangeDetectionStrategy.Eager, 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: [{
@@ -10296,10 +10309,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: "22.1.1", ngImport: i0, type: IgxGridPinningActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridPinningActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridPinningActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridPinningActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-pinning-actions', providers: [{ provide: IgxActionStripActionsToken, useExisting: IgxGridPinningActionsComponent }], changeDetection: ChangeDetectionStrategy.Eager, 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: [{
@@ -10308,10 +10321,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
             }] } });
 
 class IgxGridFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxGridFooterComponent, isStandalone: true, selector: "igx-grid-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxGridFooterComponent, isStandalone: true, selector: "igx-grid-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-grid-footer',
@@ -10427,10 +10440,10 @@ class IgxColumnMovingDragDirective extends IgxDragDirective {
             this.subscription$ = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnMovingDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxColumnMovingDragDirective, isStandalone: true, selector: "[igxColumnMovingDrag]", inputs: { column: ["igxColumnMovingDrag", "column"] }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMovingDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxColumnMovingDragDirective, isStandalone: true, selector: "[igxColumnMovingDrag]", inputs: { column: ["igxColumnMovingDrag", "column"] }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnMovingDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMovingDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxColumnMovingDrag]',
@@ -10541,10 +10554,10 @@ class IgxGroupByAreaDirective {
     }
     expressionsChanged() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGroupByAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxGroupByAreaDirective, isStandalone: true, inputs: { dropAreaTemplate: "dropAreaTemplate", grid: "grid", expressions: "expressions", dropAreaMessage: "dropAreaMessage" }, outputs: { expressionsChange: "expressionsChange" }, host: { properties: { "class.igx-grid-grouparea": "this.defaultClass", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "chips", predicate: IgxChipComponent, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupByAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxGroupByAreaDirective, isStandalone: true, inputs: { dropAreaTemplate: "dropAreaTemplate", grid: "grid", expressions: "expressions", dropAreaMessage: "dropAreaMessage" }, outputs: { expressionsChange: "expressionsChange" }, host: { properties: { "class.igx-grid-grouparea": "this.defaultClass", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "chips", predicate: IgxChipComponent, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGroupByAreaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupByAreaDirective, decorators: [{
             type: Directive
         }], propDecorators: { dropAreaTemplate: [{
                 type: Input
@@ -10578,10 +10591,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: "22.1.1", ngImport: i0, type: IgxGroupByMetaPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGroupByMetaPipe, isStandalone: true, name: "igxGroupByMeta" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupByMetaPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupByMetaPipe, isStandalone: true, name: "igxGroupByMeta" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGroupByMetaPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupByMetaPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGroupByMeta',
@@ -10600,10 +10613,10 @@ class IgxGroupByRowTemplateDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGroupByRowTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxGroupByRowTemplateDirective, isStandalone: true, selector: "[igxGroupByRow]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupByRowTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxGroupByRowTemplateDirective, isStandalone: true, selector: "[igxGroupByRow]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGroupByRowTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupByRowTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGroupByRow]',
@@ -10618,10 +10631,10 @@ class IgxGridDetailTemplateDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxGridDetailTemplateDirective, isStandalone: true, selector: "[igxGridDetail]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxGridDetailTemplateDirective, isStandalone: true, selector: "[igxGridDetail]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridDetailTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridDetailTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridDetail]',
@@ -10636,10 +10649,10 @@ class IgxRowExpandedIndicatorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxRowExpandedIndicatorDirective, isStandalone: true, selector: "[igxRowExpandedIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxRowExpandedIndicatorDirective, isStandalone: true, selector: "[igxRowExpandedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowExpandedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowExpandedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowExpandedIndicator]',
@@ -10654,10 +10667,10 @@ class IgxRowCollapsedIndicatorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxRowCollapsedIndicatorDirective, isStandalone: true, selector: "[igxRowCollapsedIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxRowCollapsedIndicatorDirective, isStandalone: true, selector: "[igxRowCollapsedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowCollapsedIndicator]',
@@ -10672,10 +10685,10 @@ class IgxHeaderExpandedIndicatorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxHeaderExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxHeaderExpandedIndicatorDirective, isStandalone: true, selector: "[igxHeaderExpandedIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHeaderExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxHeaderExpandedIndicatorDirective, isStandalone: true, selector: "[igxHeaderExpandedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxHeaderExpandedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHeaderExpandedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeaderExpandedIndicator]',
@@ -10690,10 +10703,10 @@ class IgxHeaderCollapsedIndicatorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxHeaderCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxHeaderCollapsedIndicatorDirective, isStandalone: true, selector: "[igxHeaderCollapsedIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHeaderCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxHeaderCollapsedIndicatorDirective, isStandalone: true, selector: "[igxHeaderCollapsedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxHeaderCollapsedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHeaderCollapsedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeaderCollapsedIndicator]',
@@ -10708,10 +10721,10 @@ class IgxExcelStyleHeaderIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxExcelStyleHeaderIconDirective, isStandalone: true, selector: "[igxExcelStyleHeaderIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxExcelStyleHeaderIconDirective, isStandalone: true, selector: "[igxExcelStyleHeaderIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleHeaderIcon]',
@@ -10726,10 +10739,10 @@ class IgxSortHeaderIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSortHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxSortHeaderIconDirective, isStandalone: true, selector: "[igxSortHeaderIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSortHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxSortHeaderIconDirective, isStandalone: true, selector: "[igxSortHeaderIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSortHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSortHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSortHeaderIcon]',
@@ -10744,10 +10757,10 @@ class IgxSortAscendingHeaderIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxSortAscendingHeaderIconDirective, isStandalone: true, selector: "[igxSortAscendingHeaderIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxSortAscendingHeaderIconDirective, isStandalone: true, selector: "[igxSortAscendingHeaderIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSortAscendingHeaderIcon]',
@@ -10762,10 +10775,10 @@ class IgxSortDescendingHeaderIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxSortDescendingHeaderIconDirective, isStandalone: true, selector: "[igxSortDescendingHeaderIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxSortDescendingHeaderIconDirective, isStandalone: true, selector: "[igxSortDescendingHeaderIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSortDescendingHeaderIcon]',
@@ -10778,10 +10791,10 @@ class IgxGridLoadingTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxGridLoadingTemplateDirective, isStandalone: true, selector: "[igxGridLoading]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxGridLoadingTemplateDirective, isStandalone: true, selector: "[igxGridLoading]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridLoadingTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridLoadingTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridLoading]',
@@ -10794,10 +10807,10 @@ class IgxGridEmptyTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridEmptyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxGridEmptyTemplateDirective, isStandalone: true, selector: "[igxGridEmpty]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridEmptyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxGridEmptyTemplateDirective, isStandalone: true, selector: "[igxGridEmpty]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridEmptyTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridEmptyTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridEmpty]',
@@ -10859,10 +10872,10 @@ class IgxGroupAreaDropDirective extends IgxDropDirective {
             return true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGroupAreaDropDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxGroupAreaDropDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxGroupAreaDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupAreaDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGroupAreaDrop]',
@@ -11068,10 +11081,10 @@ class IgxColumnResizingService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnResizingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnResizingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnResizingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnResizingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnResizingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnResizingService, decorators: [{
             type: Injectable
         }] });
 
@@ -11080,10 +11093,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: "22.1.1", ngImport: i0, type: SortingIndexPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: SortingIndexPipe, isStandalone: true, name: "sortingIndex" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SortingIndexPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: SortingIndexPipe, isStandalone: true, name: "sortingIndex" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SortingIndexPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SortingIndexPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sortingIndex',
@@ -11102,10 +11115,10 @@ class IgxHeaderGroupStylePipe {
         }
         return css;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxHeaderGroupStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxHeaderGroupStylePipe, isStandalone: true, name: "igxHeaderGroupStyle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHeaderGroupStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxHeaderGroupStylePipe, isStandalone: true, name: "igxHeaderGroupStyle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxHeaderGroupStylePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHeaderGroupStylePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxHeaderGroupStyle',
@@ -11358,10 +11371,10 @@ class IgxGridHeaderComponent {
             strategy: this.column.sortStrategy
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxGridHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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: [{
@@ -11940,10 +11953,10 @@ class IgxFilteringService {
         }
         return count;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilteringService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilteringService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilteringService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilteringService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilteringService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilteringService, decorators: [{
             type: Injectable
         }] });
 
@@ -12121,10 +12134,10 @@ class IgxGridFilteringCellComponent {
             this.cdr.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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", "attr.role": "this.role" } }, 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", "outlined", "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: "[igxPrefix],[igxStart],igx-prefix" }, { 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: "22.1.7", ngImport: i0, type: IgxGridFilteringCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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", "attr.role": "this.role" } }, 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", "outlined", "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: "[igxPrefix],[igxStart],igx-prefix" }, { 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: "22.1.1", ngImport: i0, type: IgxGridFilteringCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridFilteringCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-filtering-cell', imports: [
                         IgxChipsAreaComponent,
@@ -12255,10 +12268,10 @@ class IgxResizeHandleDirective {
             this.colResizingService.startResizePos = event.clientX;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxResizeHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxResizeHandleDirective, isStandalone: true, selector: "[igxResizeHandle]", inputs: { column: ["igxResizeHandle", "column"] }, host: { listeners: { "dblclick": "onDoubleClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxResizeHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxResizeHandleDirective, isStandalone: true, selector: "[igxResizeHandle]", inputs: { column: ["igxResizeHandle", "column"] }, host: { listeners: { "dblclick": "onDoubleClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxResizeHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxResizeHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxResizeHandle]',
@@ -12402,10 +12415,10 @@ class IgxColumnMovingDropDirective extends IgxDropDirective {
             this.column.grid.cdr.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnMovingDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxColumnMovingDropDirective, isStandalone: true, selector: "[igxColumnMovingDrop]", inputs: { data: ["igxColumnMovingDrop", "data"] }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMovingDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxColumnMovingDropDirective, isStandalone: true, selector: "[igxColumnMovingDrop]", inputs: { data: ["igxColumnMovingDrop", "data"] }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnMovingDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMovingDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxColumnMovingDrop]',
@@ -12662,10 +12675,10 @@ class IgxGridHeaderGroupComponent {
             } : null
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridHeaderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxGridHeaderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxGridHeaderGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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: [{
@@ -13418,10 +13431,10 @@ class IgxGridFilteringRowComponent {
     get isNarrowWidth() {
         return this.nativeElement.offsetWidth < this.NARROW_WIDTH_THRESHOLD;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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\n  #inputGroupConditions\n  [style.--ig-size]=\"filteringElementsSize\"\n  [height]=\"'200px'\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n>\n  @for (condition of conditions; track condition) {\n    <igx-drop-down-item\n      [value]=\"condition\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <div class=\"igx-grid__filtering-dropdown-items\">\n        <igx-icon\n          family=\"default\"\n          [name]=\"getCondition(condition).iconName\"\n        ></igx-icon>\n        <span class=\"igx-grid__filtering-dropdown-text\">{{\n          translateCondition(condition)\n        }}</span>\n      </div>\n    </igx-drop-down-item>\n  }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n  <igx-input-group\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\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    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        @if (column.dataType === 'percent') {\n          <span class=\"igx-grid__filtering-row-percent-hint\">{{\n            value\n              | percent\n                : column.pipeArgs.digitsInfo\n                : filteringService.grid.locale\n          }}</span>\n        }\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n  <igx-date-picker\n    #picker\n    [(value)]=\"value\"\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  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition!.iconName\"\n      ></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        >\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        >\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\n    #picker\n    [(value)]=\"value\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [locale]=\"filteringService.grid.locale\"\n    [formatter]=\"column.formatter!\"\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  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition!.iconName\"\n      ></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        >\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        >\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\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\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    />\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        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n></ng-container>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-start\"\n    (keydown)=\"onLeftArrowKeyDown($event)\"\n    (click)=\"scrollChipsOnArrowPress('left')\"\n  >\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 (\n        item of expressionsList;\n        track item.expression;\n        let i = $index;\n        let last = $last\n      ) {\n        <ng-container tabindex=\"0\">\n          <igx-chip\n            #chip\n            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          >\n            <igx-icon\n              igxPrefix\n              family=\"default\"\n              [name]=\"item.expression.condition!.iconName\"\n            >\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              >\n                <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n                <span>{{\n                  filteringService.getOperatorAsString(item.afterOperator)\n                }}</span>\n              </button>\n              <igx-drop-down\n                #operators\n                (selectionChanging)=\"onLogicOperatorChanged($event, item)\"\n              >\n                <igx-drop-down-item\n                  [value]=\"0\"\n                  [selected]=\"item.afterOperator === 0\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_and\n                  }}</igx-drop-down-item\n                >\n                <igx-drop-down-item\n                  [value]=\"1\"\n                  [selected]=\"item.afterOperator === 1\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_or\n                  }}</igx-drop-down-item\n                >\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\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-end\"\n    (click)=\"scrollChipsOnArrowPress('right')\"\n  >\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n  </button>\n}\n\n<div\n  #buttonsContainer\n  [ngClass]=\"\n    isNarrowWidth\n      ? 'igx-grid__filtering-row-editing-buttons--small'\n      : 'igx-grid__filtering-row-editing-buttons'\n  \"\n>\n  @if (!isNarrowWidth) {\n    <button\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_reset\n      }}</span>\n    </button>\n    <button\n      #closeButton\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_close\n      }}</span>\n    </button>\n  }\n  @if (isNarrowWidth) {\n    <button\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n    </button>\n    <button\n      #closeButton\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\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", "outlined", "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: "[igxPrefix],[igxStart],igx-prefix" }, { 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: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "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"] }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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\n  #inputGroupConditions\n  [style.--ig-size]=\"filteringElementsSize\"\n  [height]=\"'200px'\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n>\n  @for (condition of conditions; track condition) {\n    <igx-drop-down-item\n      [value]=\"condition\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <div class=\"igx-grid__filtering-dropdown-items\">\n        <igx-icon\n          family=\"default\"\n          [name]=\"getCondition(condition).iconName\"\n        ></igx-icon>\n        <span class=\"igx-grid__filtering-dropdown-text\">{{\n          translateCondition(condition)\n        }}</span>\n      </div>\n    </igx-drop-down-item>\n  }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n  <igx-input-group\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\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    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        @if (column.dataType === 'percent') {\n          <span class=\"igx-grid__filtering-row-percent-hint\">{{\n            value\n              | percent\n                : column.pipeArgs.digitsInfo\n                : filteringService.grid.locale\n          }}</span>\n        }\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n  <igx-date-picker\n    #picker\n    [(value)]=\"value\"\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  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition!.iconName\"\n      ></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        >\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        >\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\n    #picker\n    [(value)]=\"value\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [locale]=\"filteringService.grid.locale\"\n    [formatter]=\"column.formatter!\"\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  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition!.iconName\"\n      ></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        >\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        >\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\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\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    />\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        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n></ng-container>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-start\"\n    (keydown)=\"onLeftArrowKeyDown($event)\"\n    (click)=\"scrollChipsOnArrowPress('left')\"\n  >\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 (\n        item of expressionsList;\n        track item.expression;\n        let i = $index;\n        let last = $last\n      ) {\n        <ng-container tabindex=\"0\">\n          <igx-chip\n            #chip\n            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          >\n            <igx-icon\n              igxPrefix\n              family=\"default\"\n              [name]=\"item.expression.condition!.iconName\"\n            >\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              >\n                <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n                <span>{{\n                  filteringService.getOperatorAsString(item.afterOperator)\n                }}</span>\n              </button>\n              <igx-drop-down\n                #operators\n                (selectionChanging)=\"onLogicOperatorChanged($event, item)\"\n              >\n                <igx-drop-down-item\n                  [value]=\"0\"\n                  [selected]=\"item.afterOperator === 0\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_and\n                  }}</igx-drop-down-item\n                >\n                <igx-drop-down-item\n                  [value]=\"1\"\n                  [selected]=\"item.afterOperator === 1\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_or\n                  }}</igx-drop-down-item\n                >\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\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-end\"\n    (click)=\"scrollChipsOnArrowPress('right')\"\n  >\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n  </button>\n}\n\n<div\n  #buttonsContainer\n  [ngClass]=\"\n    isNarrowWidth\n      ? 'igx-grid__filtering-row-editing-buttons--small'\n      : 'igx-grid__filtering-row-editing-buttons'\n  \"\n>\n  @if (!isNarrowWidth) {\n    <button\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_reset\n      }}</span>\n    </button>\n    <button\n      #closeButton\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_close\n      }}</span>\n    </button>\n  }\n  @if (isNarrowWidth) {\n    <button\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n    </button>\n    <button\n      #closeButton\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\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", "outlined", "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: "[igxPrefix],[igxStart],igx-prefix" }, { 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: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "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"] }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-filtering-row', imports: [
                         IgxDropDownComponent,
@@ -14203,10 +14216,10 @@ class IgxGridCellStyleClassesPipe {
         }
         return result.join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellStyleClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellStyleClassesPipe, isStandalone: true, name: "igxCellStyleClasses" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellStyleClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellStyleClassesPipe, isStandalone: true, name: "igxCellStyleClasses" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellStyleClassesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellStyleClassesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxCellStyleClasses',
@@ -14230,10 +14243,10 @@ class IgxGridCellStylesPipe {
         }
         return css;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellStylesPipe, isStandalone: true, name: "igxCellStyles" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellStylesPipe, isStandalone: true, name: "igxCellStyles" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellStylesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellStylesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxCellStyles',
@@ -14253,10 +14266,10 @@ class IgxGridCellImageAltPipe {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellImageAltPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellImageAltPipe, isStandalone: true, name: "igxCellImageAlt" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellImageAltPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellImageAltPipe, isStandalone: true, name: "igxCellImageAlt" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellImageAltPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellImageAltPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxCellImageAlt',
@@ -14301,10 +14314,10 @@ class IgxGridRowClassesPipe {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridRowClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridRowClassesPipe, isStandalone: true, name: "igxGridRowClasses" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridRowClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridRowClassesPipe, isStandalone: true, name: "igxGridRowClasses" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridRowClassesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridRowClassesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGridRowClasses',
@@ -14332,10 +14345,10 @@ class IgxGridRowStylesPipe {
         }
         return css;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridRowStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridRowStylesPipe, isStandalone: true, name: "igxGridRowStyles" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridRowStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridRowStylesPipe, isStandalone: true, name: "igxGridRowStyles" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridRowStylesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridRowStylesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGridRowStyles',
@@ -14350,10 +14363,10 @@ class IgxGridNotGroupedPipe {
     transform(value) {
         return value.filter(item => !item.columnGroup);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridNotGroupedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridNotGroupedPipe, isStandalone: true, name: "igxNotGrouped" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridNotGroupedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridNotGroupedPipe, isStandalone: true, name: "igxNotGrouped" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridNotGroupedPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridNotGroupedPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxNotGrouped',
@@ -14368,10 +14381,10 @@ class IgxGridTopLevelColumns {
     transform(value) {
         return value.filter(item => item.level === 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridTopLevelColumns, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridTopLevelColumns, isStandalone: true, name: "igxTopLevel" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridTopLevelColumns, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridTopLevelColumns, isStandalone: true, name: "igxTopLevel" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridTopLevelColumns, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridTopLevelColumns, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxTopLevel',
@@ -14386,10 +14399,10 @@ class IgxGridFilterConditionPipe {
     transform(value) {
         return value.split(/(?=[A-Z])/).join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilterConditionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilterConditionPipe, isStandalone: true, name: "filterCondition" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridFilterConditionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridFilterConditionPipe, isStandalone: true, name: "filterCondition" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilterConditionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridFilterConditionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filterCondition',
@@ -14415,10 +14428,10 @@ class IgxGridTransactionPipe {
         // of whether the source array was mutated in place.
         return cloneArray(collection);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridTransactionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridTransactionPipe, isStandalone: true, name: "gridTransaction" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridTransactionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridTransactionPipe, isStandalone: true, name: "gridTransaction" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridTransactionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridTransactionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridTransaction',
@@ -14433,10 +14446,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: "22.1.1", ngImport: i0, type: IgxGridPaginatorOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridPaginatorOptionsPipe, isStandalone: true, name: "paginatorOptions" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridPaginatorOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridPaginatorOptionsPipe, isStandalone: true, name: "paginatorOptions" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridPaginatorOptionsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridPaginatorOptionsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'paginatorOptions',
@@ -14454,10 +14467,10 @@ class IgxHasVisibleColumnsPipe {
         }
         return hasVisibleColumns ? values : [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxHasVisibleColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxHasVisibleColumnsPipe, isStandalone: true, name: "visibleColumns" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHasVisibleColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxHasVisibleColumnsPipe, isStandalone: true, name: "visibleColumns" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxHasVisibleColumnsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHasVisibleColumnsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'visibleColumns',
@@ -14497,13 +14510,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: "22.1.1", ngImport: i0, type: IgxGridRowPinningPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridRowPinningPipe, isStandalone: true, name: "gridRowPinning" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridRowPinningPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridRowPinningPipe, isStandalone: true, name: "gridRowPinning" }); }
 }
 __decorate([
     buildDataView()
 ], IgxGridRowPinningPipe.prototype, "transform", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridRowPinningPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridRowPinningPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridRowPinning',
@@ -14514,10 +14527,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: "22.1.1", ngImport: i0, type: IgxGridDataMapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridDataMapperPipe, isStandalone: true, name: "dataMapper" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridDataMapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridDataMapperPipe, isStandalone: true, name: "dataMapper" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridDataMapperPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridDataMapperPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dataMapper',
@@ -14528,10 +14541,10 @@ class IgxStringReplacePipe {
     transform(value, search, replacement) {
         return value.replace(search, replacement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStringReplacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxStringReplacePipe, isStandalone: true, name: "igxStringReplace" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxStringReplacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxStringReplacePipe, isStandalone: true, name: "igxStringReplace" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStringReplacePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxStringReplacePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxStringReplace',
@@ -14553,10 +14566,10 @@ class IgxGridTransactionStatePipe {
             return transaction?.value && (value || value === 0 || value === false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridTransactionStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridTransactionStatePipe, isStandalone: true, name: "transactionState" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridTransactionStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridTransactionStatePipe, isStandalone: true, name: "transactionState" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridTransactionStatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridTransactionStatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'transactionState',
@@ -14567,10 +14580,10 @@ class IgxColumnFormatterPipe {
     transform(value, formatter, rowData, columnData) {
         return formatter(value, rowData, columnData);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnFormatterPipe, isStandalone: true, name: "columnFormatter" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnFormatterPipe, isStandalone: true, name: "columnFormatter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'columnFormatter',
@@ -14581,10 +14594,10 @@ class IgxSummaryFormatterPipe {
     transform(summaryResult, summaryOperand, summaryFormatter) {
         return summaryFormatter(summaryResult, summaryOperand);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryFormatterPipe, isStandalone: true, name: "summaryFormatter" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryFormatterPipe, isStandalone: true, name: "summaryFormatter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'summaryFormatter',
@@ -14605,10 +14618,10 @@ class IgxGridAddRowPipe {
         copy.splice(this.grid.crudService.row.index, 0, rec);
         return copy;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridAddRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridAddRowPipe, isStandalone: true, name: "gridAddRow" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridAddRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGridAddRowPipe, isStandalone: true, name: "gridAddRow" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridAddRowPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridAddRowPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridAddRow',
@@ -14745,10 +14758,10 @@ class IgxGridHeaderRowComponent {
             this.grid.selectionService.selectAllRows(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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.role": "this.role", "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 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\" role=\"columnheader\" (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\" role=\"columnheader\"\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                role=\"columnheader\"\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                role=\"columnheader\">\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: "22.1.7", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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.role": "this.role", "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 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\" role=\"columnheader\" (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\" role=\"columnheader\"\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                role=\"columnheader\"\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                role=\"columnheader\">\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: "22.1.1", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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 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\" role=\"columnheader\" (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\" role=\"columnheader\"\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                role=\"columnheader\"\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                role=\"columnheader\">\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: [{
@@ -14939,10 +14952,10 @@ class IgxRowDragDirective extends IgxDragDirective {
     get isHierarchicalGrid() {
         return this.row.grid.type === 'hierarchical';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowDragDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxRowDragDirective, isStandalone: true, selector: "[igxRowDrag]", inputs: { data: ["igxRowDrag", "data"] }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowDragDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxRowDragDirective, isStandalone: true, selector: "[igxRowDrag]", inputs: { data: ["igxRowDrag", "data"] }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowDrag]',
@@ -14960,10 +14973,10 @@ class IgxDragIndicatorIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDragIndicatorIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxDragIndicatorIconDirective, isStandalone: true, selector: "[igxDragIndicatorIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDragIndicatorIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxDragIndicatorIconDirective, isStandalone: true, selector: "[igxDragIndicatorIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDragIndicatorIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDragIndicatorIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDragIndicatorIcon]',
@@ -14981,10 +14994,10 @@ class IgxRowDragGhostDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowDragGhostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxRowDragGhostDirective, isStandalone: true, selector: "[igxRowDragGhost]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowDragGhostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxRowDragGhostDirective, isStandalone: true, selector: "[igxRowDragGhost]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowDragGhostDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowDragGhostDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowDragGhost]',
@@ -15004,10 +15017,10 @@ class IgxRowSelectorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxRowSelectorDirective, isStandalone: true, selector: "[igxRowSelector]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxRowSelectorDirective, isStandalone: true, selector: "[igxRowSelector]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowSelectorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowSelectorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowSelector]',
@@ -15026,10 +15039,10 @@ class IgxGroupByRowSelectorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGroupByRowSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxGroupByRowSelectorDirective, isStandalone: true, selector: "[igxGroupByRowSelector]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupByRowSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxGroupByRowSelectorDirective, isStandalone: true, selector: "[igxGroupByRowSelector]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGroupByRowSelectorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupByRowSelectorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGroupByRowSelector]',
@@ -15048,10 +15061,10 @@ class IgxHeadSelectorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxHeadSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxHeadSelectorDirective, isStandalone: true, selector: "[igxHeadSelector]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHeadSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxHeadSelectorDirective, isStandalone: true, selector: "[igxHeadSelector]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxHeadSelectorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHeadSelectorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeadSelector]',
@@ -15107,8 +15120,11 @@ class IgxGridDragSelectDirective {
                 return;
             }
             this.unsubscribe();
-            this._sub = this._interval$.subscribe(() => this.dragScroll.emit(delta));
             this.lastDirection = direction;
+            if (direction === DragScrollDirection.NONE) {
+                return;
+            }
+            this._sub = this._interval$.subscribe(() => this.dragScroll.emit(delta));
         };
         this.stopDragSelection = () => {
             if (!this.activeDrag) {
@@ -15187,10 +15203,10 @@ class IgxGridDragSelectDirective {
             this._sub.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridDragSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxGridDragSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxGridDragSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridDragSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridDragSelect]',
@@ -15251,10 +15267,11 @@ class IgxPivotDateDimension {
      * By default it uses EN resources.
      */
     set resourceStrings(value) {
-        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+        this._resourceStrings = value;
+        this._customResourceStrings = Object.assign({}, getCurrentResourceStrings(GridResourceStringsEN, false), this._resourceStrings);
     }
     get resourceStrings() {
-        return this._resourceStrings || getCurrentResourceStrings(GridResourceStringsEN, false);
+        return this._resourceStrings ? this._customResourceStrings : getCurrentResourceStrings(GridResourceStringsEN, false);
     }
     /**
      * Gets/Sets the base dimension that is used by this class to determine the other dimensions and their values.
@@ -15304,6 +15321,7 @@ class IgxPivotDateDimension {
         /** @hidden @internal */
         this.memberName = 'AllPeriods';
         this._resourceStrings = null;
+        this._customResourceStrings = null;
         this._options = {};
         /** @hidden @internal */
         this.memberFunction = (_data) => this.resourceStrings.igx_grid_pivot_date_dimension_total;
@@ -15319,13 +15337,15 @@ class IgxPivotDateDimension {
         inBaseDimension.dataType = GridColumnDataType.Date;
         this.enabled = inBaseDimension.enabled;
         this.displayName = inBaseDimension.displayName || this.resourceStrings.igx_grid_pivot_date_dimension_total;
-        const baseDimension = options.fullDate ? inBaseDimension : null;
+        const baseDimension = options.fullDate
+            ? this.createLeafDateDimension(inBaseDimension)
+            : null;
         const monthDimensionDef = {
             memberName: 'Months',
             memberFunction: (rec) => {
                 const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec);
-                const dateValue = recordValue ? getDateFormatter().createDateFromValue(recordValue) : null;
-                return recordValue ? getDateFormatter().formatDateTime(dateValue, this.locale, { month: 'long' }) : rec['Months'];
+                const dateValue = (recordValue != null && recordValue !== '') ? getDateFormatter().createDateFromValue(recordValue) : null;
+                return dateValue ? getDateFormatter().formatDateTime(dateValue, this.locale, { month: 'long' }) : rec['Months'];
             },
             enabled: true,
             childLevel: baseDimension
@@ -15335,8 +15355,8 @@ class IgxPivotDateDimension {
             memberName: 'Quarters',
             memberFunction: (rec) => {
                 const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec);
-                const dateValue = recordValue ? getDateFormatter().createDateFromValue(recordValue) : null;
-                return recordValue ? `Q` + Math.ceil((dateValue.getMonth() + 1) / 3) : rec['Quarters'];
+                const dateValue = (recordValue != null && recordValue !== '') ? getDateFormatter().createDateFromValue(recordValue) : null;
+                return dateValue ? `Q` + Math.ceil((dateValue.getMonth() + 1) / 3) : rec['Quarters'];
             },
             enabled: true,
             childLevel: monthDimension
@@ -15346,8 +15366,8 @@ class IgxPivotDateDimension {
             memberName: 'Years',
             memberFunction: (rec) => {
                 const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec);
-                const dateValue = recordValue ? getDateFormatter().createDateFromValue(recordValue) : null;
-                return recordValue ? dateValue.getFullYear().toString() : rec['Years'];
+                const dateValue = (recordValue != null && recordValue !== '') ? getDateFormatter().createDateFromValue(recordValue) : null;
+                return dateValue ? dateValue.getFullYear().toString() : rec['Years'];
             },
             enabled: true,
             childLevel: quarterDimension
@@ -15361,6 +15381,24 @@ class IgxPivotDateDimension {
             this.displayName = yearsDimension.displayName;
         }
     }
+    createLeafDateDimension(inBaseDimension) {
+        if (inBaseDimension.headerFormatter || inBaseDimension.memberFunction) {
+            // User supplied their own formatter/memberFunction — use the dimension as-is.
+            return inBaseDimension;
+        }
+        // No user-supplied formatter: add a locale-aware formatter that shows dates
+        // in short-date format while preserving the original dimension instance.
+        const dateFormatter = getDateFormatter();
+        inBaseDimension.headerFormatter = (value) => {
+            const hasValue = value !== null && value !== undefined && value !== '';
+            const dateValue = hasValue ? dateFormatter.createDateFromValue(value) : null;
+            if (dateValue) {
+                return dateFormatter.formatDateTime(dateValue, this.locale, { dateStyle: 'short' });
+            }
+            return hasValue ? String(value) : '';
+        };
+        return inBaseDimension;
+    }
 }
 
 /* blazorElement */
@@ -15952,10 +15990,10 @@ class IgxGridStateBaseDirective {
         const feature = this.FEATURES[key];
         return feature;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridStateBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxGridStateBaseDirective, isStandalone: true, inputs: { options: "options" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridStateBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxGridStateBaseDirective, isStandalone: true, inputs: { options: "options" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridStateBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridStateBaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { options: [{
                 type: Input
@@ -16027,10 +16065,10 @@ class IgxGridStateDirective extends IgxGridStateBaseDirective {
         }
         return super.setStateInternal(state, features);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxGridStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxGridStateDirective, isStandalone: true, selector: "[igxGridState]", inputs: { options: ["igxGridState", "options"] }, outputs: { stateParsed: "stateParsed" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridState]',
@@ -16044,10 +16082,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
             }] } });
 
 class IgxExcelTextDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxExcelTextDirective, isStandalone: true, selector: "[excelText],excel-text", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxExcelTextDirective, isStandalone: true, selector: "[excelText],excel-text", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelTextDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -16056,10 +16094,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }] });
 class IgxCSVTextDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCSVTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxCSVTextDirective, isStandalone: true, selector: "[csvText],csv-text", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCSVTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCSVTextDirective, isStandalone: true, selector: "[csvText],csv-text", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCSVTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCSVTextDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -16068,10 +16106,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }] });
 class IgxPdfTextDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPdfTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxPdfTextDirective, isStandalone: true, selector: "[pdfText],pdf-text", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPdfTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxPdfTextDirective, isStandalone: true, selector: "[pdfText],pdf-text", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPdfTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPdfTextDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -16105,10 +16143,10 @@ class IgxGridToolbarTitleComponent {
          */
         this.cssClass = 'igx-grid-toolbar__title';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxGridToolbarTitleComponent, isStandalone: true, selector: "igx-grid-toolbar-title", host: { properties: { "class.igx-grid-toolbar__title": "this.cssClass" } }, hostDirectives: [{ directive: i1$1.IgxNoTypographyDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxGridToolbarTitleComponent, isStandalone: true, selector: "igx-grid-toolbar-title", host: { properties: { "class.igx-grid-toolbar__title": "this.cssClass" } }, hostDirectives: [{ directive: i1$1.IgxNoTypographyDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-grid-toolbar-title', template: '<ng-content></ng-content>',
@@ -16148,10 +16186,10 @@ class IgxGridToolbarActionsComponent {
          */
         this.cssClass = 'igx-grid-toolbar__actions';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", 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, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-grid-toolbar-actions', template: '<ng-content></ng-content>',
@@ -16170,10 +16208,10 @@ class IgxGridToolbarDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxGridToolbarDirective, isStandalone: true, selector: "[igxGridToolbar]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxGridToolbarDirective, isStandalone: true, selector: "[igxGridToolbar]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridToolbar]',
@@ -16240,10 +16278,10 @@ class IgxGridToolbarAdvancedFilteringComponent {
         });
         return [...new Set(columnNames)];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridToolbarAdvancedFilteringComponent, isStandalone: true, selector: "igx-grid-toolbar-advanced-filtering", inputs: { overlaySettings: "overlaySettings" }, ngImport: i0, template: "<button\n  igxButton=\"outlined\"\n  type=\"button\"\n  name=\"btnAdvancedFiltering\"\n  igxRipple\n  [title]=\"\n    $safeNavigationMigration(\n      grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\n    )\n  \"\n  (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n  class=\"igx-grid-toolbar__adv-filter\"\n>\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>{{\n      grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label\n    }}</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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxGridToolbarAdvancedFilteringComponent, isStandalone: true, selector: "igx-grid-toolbar-advanced-filtering", inputs: { overlaySettings: "overlaySettings" }, ngImport: i0, template: "<button\n  igxButton=\"outlined\"\n  type=\"button\"\n  name=\"btnAdvancedFiltering\"\n  igxRipple\n  [title]=\"\n    $safeNavigationMigration(\n      grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\n    )\n  \"\n  (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n  class=\"igx-grid-toolbar__adv-filter\"\n>\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>{{\n      grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label\n    }}</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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-toolbar-advanced-filtering', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent], template: "<button\n  igxButton=\"outlined\"\n  type=\"button\"\n  name=\"btnAdvancedFiltering\"\n  igxRipple\n  [title]=\"\n    $safeNavigationMigration(\n      grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\n    )\n  \"\n  (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n  class=\"igx-grid-toolbar__adv-filter\"\n>\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>{{\n      grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label\n    }}</span>\n  }\n  @if (grid?.advancedFilteringExpressionsTree) {\n    <span class=\"igx-adv-filter--column-number\"> ({{ numberOfColumns }}) </span>\n  }\n</button>\n" }]
         }], propDecorators: { overlaySettings: [{
@@ -16320,10 +16358,10 @@ class IgxGridToolbarComponent {
     ngOnDestroy() {
         this.sub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridToolbarComponent, isStandalone: true, selector: "igx-grid-toolbar", inputs: { showProgress: ["showProgress", "showProgress", booleanAttribute], grid: "grid" }, host: { properties: { "class.igx-grid-toolbar": "this.defaultStyle", "attr.role": "this.role" } }, 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", styles: ["@layer ig.base{.igx-grid-toolbar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--ig-size-large));position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;grid-row:1;font-size:1rem;border-bottom:.0625rem solid var(--border-color);background:var(--background);height:auto;min-height:var(--size);padding-block:0;padding-inline-start:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-inline-end:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid-toolbar [igxButton]{margin-inline-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid-toolbar [igxButton]:first-of-type{margin-inline-start:0}.igx-grid-toolbar [igxButton]:last-of-type{margin-inline-end:0}.igx-grid-toolbar[dir=rtl]{text-align:end}.igx-grid-toolbar[dir=rtl] [igxButton]{margin-inline-start:0;margin-inline-end:.5rem}.igx-grid-toolbar[dir=rtl] [igxButton]:last-child{margin-inline-end:0}.igx-grid-toolbar__title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--title-text-color);flex:1 1 auto;max-width:40ch;margin-inline-end:1rem}.igx-grid-toolbar__title:empty{display:none}.igx-grid-toolbar__title:empty+.igx-grid-toolbar__custom-content:empty+igx-grid-toolbar-actions{width:100%;margin-inline-start:0;justify-content:flex-end}.igx-grid-toolbar__custom-content{display:flex;flex-wrap:wrap;flex-grow:1;justify-content:flex-end;margin-inline-end:1rem}.igx-grid-toolbar__custom-content:empty{display:none}.igx-grid-toolbar__actions{display:flex;align-items:center;flex-flow:row wrap;margin-inline-start:auto;gap:1rem}.igx-grid-toolbar__actions>*{display:flex}.igx-grid-toolbar__actions:empty{display:none}.igx-grid-toolbar__progress-bar{position:absolute;width:100%;inset-inline-start:0;inset-inline-end:0;bottom:-.0625rem;height:.125rem;overflow:hidden;background:var(--background)}.igx-grid-toolbar__progress-bar igx-linear-bar>*{border-radius:0}.igx-grid-toolbar__progress-bar igx-linear-bar>*:first-child>div{background:var(--ig-secondary-500)}.igx-grid-toolbar__dropdown{position:relative}.igx-grid-toolbar__dd-list{list-style:none;background:var(--dropdown-background);margin:0;padding:0;box-shadow:var(--ig-elevation-8)}.igx-grid-toolbar__dd-list-items{cursor:pointer;position:relative;padding:.5rem 1rem;color:var(--item-text-color);white-space:nowrap}.igx-grid-toolbar__dd-list-items:hover{background:var(--item-hover-background);color:var(--item-hover-text-color)}.igx-grid-toolbar__dd-list-items:focus{background:var(--item-focus-background);color:var(--item-focus-text-color)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-toolbar{padding-inline-end:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid-toolbar__title{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}}}\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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxGridToolbarComponent, isStandalone: true, selector: "igx-grid-toolbar", inputs: { showProgress: ["showProgress", "showProgress", booleanAttribute], grid: "grid" }, host: { properties: { "class.igx-grid-toolbar": "this.defaultStyle", "attr.role": "this.role" } }, 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", styles: ["@layer ig.base{.igx-grid-toolbar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--ig-size-large));position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;grid-row:1;font-size:1rem;border-bottom:.0625rem solid var(--border-color);background:var(--background);height:auto;min-height:var(--size);padding-block:0;padding-inline-start:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-inline-end:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid-toolbar [igxButton]{margin-inline-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid-toolbar [igxButton]:first-of-type{margin-inline-start:0}.igx-grid-toolbar [igxButton]:last-of-type{margin-inline-end:0}.igx-grid-toolbar[dir=rtl]{text-align:end}.igx-grid-toolbar[dir=rtl] [igxButton]{margin-inline-start:0;margin-inline-end:.5rem}.igx-grid-toolbar[dir=rtl] [igxButton]:last-child{margin-inline-end:0}.igx-grid-toolbar__title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--title-text-color);flex:1 1 auto;max-width:40ch;margin-inline-end:1rem}.igx-grid-toolbar__title:empty{display:none}.igx-grid-toolbar__title:empty+.igx-grid-toolbar__custom-content:empty+igx-grid-toolbar-actions{width:100%;margin-inline-start:0;justify-content:flex-end}.igx-grid-toolbar__custom-content{display:flex;flex-wrap:wrap;flex-grow:1;justify-content:flex-end;margin-inline-end:1rem}.igx-grid-toolbar__custom-content:empty{display:none}.igx-grid-toolbar__actions{display:flex;align-items:center;flex-flow:row wrap;margin-inline-start:auto;gap:1rem}.igx-grid-toolbar__actions>*{display:flex}.igx-grid-toolbar__actions:empty{display:none}.igx-grid-toolbar__progress-bar{position:absolute;width:100%;inset-inline-start:0;inset-inline-end:0;bottom:-.0625rem;height:.125rem;overflow:hidden;background:var(--background)}.igx-grid-toolbar__progress-bar igx-linear-bar>*{border-radius:0}.igx-grid-toolbar__progress-bar igx-linear-bar>*:first-child>div{background:var(--ig-secondary-500)}.igx-grid-toolbar__dropdown{position:relative}.igx-grid-toolbar__dd-list{list-style:none;background:var(--dropdown-background);margin:0;padding:0;box-shadow:var(--ig-elevation-8)}.igx-grid-toolbar__dd-list-items{cursor:pointer;position:relative;padding:.5rem 1rem;color:var(--item-text-color);white-space:nowrap}.igx-grid-toolbar__dd-list-items:hover{background:var(--item-hover-background);color:var(--item-hover-text-color)}.igx-grid-toolbar__dd-list-items:focus{background:var(--item-focus-background);color:var(--item-focus-text-color)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-toolbar{padding-inline-end:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid-toolbar__title{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}}}\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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-toolbar', encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxToolbarToken, useExisting: IgxGridToolbarComponent }], changeDetection: ChangeDetectionStrategy.Eager, 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", styles: ["@layer ig.base{.igx-grid-toolbar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--ig-size-large));position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;grid-row:1;font-size:1rem;border-bottom:.0625rem solid var(--border-color);background:var(--background);height:auto;min-height:var(--size);padding-block:0;padding-inline-start:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-inline-end:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid-toolbar [igxButton]{margin-inline-start:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid-toolbar [igxButton]:first-of-type{margin-inline-start:0}.igx-grid-toolbar [igxButton]:last-of-type{margin-inline-end:0}.igx-grid-toolbar[dir=rtl]{text-align:end}.igx-grid-toolbar[dir=rtl] [igxButton]{margin-inline-start:0;margin-inline-end:.5rem}.igx-grid-toolbar[dir=rtl] [igxButton]:last-child{margin-inline-end:0}.igx-grid-toolbar__title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--title-text-color);flex:1 1 auto;max-width:40ch;margin-inline-end:1rem}.igx-grid-toolbar__title:empty{display:none}.igx-grid-toolbar__title:empty+.igx-grid-toolbar__custom-content:empty+igx-grid-toolbar-actions{width:100%;margin-inline-start:0;justify-content:flex-end}.igx-grid-toolbar__custom-content{display:flex;flex-wrap:wrap;flex-grow:1;justify-content:flex-end;margin-inline-end:1rem}.igx-grid-toolbar__custom-content:empty{display:none}.igx-grid-toolbar__actions{display:flex;align-items:center;flex-flow:row wrap;margin-inline-start:auto;gap:1rem}.igx-grid-toolbar__actions>*{display:flex}.igx-grid-toolbar__actions:empty{display:none}.igx-grid-toolbar__progress-bar{position:absolute;width:100%;inset-inline-start:0;inset-inline-end:0;bottom:-.0625rem;height:.125rem;overflow:hidden;background:var(--background)}.igx-grid-toolbar__progress-bar igx-linear-bar>*{border-radius:0}.igx-grid-toolbar__progress-bar igx-linear-bar>*:first-child>div{background:var(--ig-secondary-500)}.igx-grid-toolbar__dropdown{position:relative}.igx-grid-toolbar__dd-list{list-style:none;background:var(--dropdown-background);margin:0;padding:0;box-shadow:var(--ig-elevation-8)}.igx-grid-toolbar__dd-list-items{cursor:pointer;position:relative;padding:.5rem 1rem;color:var(--item-text-color);white-space:nowrap}.igx-grid-toolbar__dd-list-items:hover{background:var(--item-hover-background);color:var(--item-hover-text-color)}.igx-grid-toolbar__dd-list-items:focus{background:var(--item-focus-background);color:var(--item-focus-text-color)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-toolbar{padding-inline-end:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid-toolbar__title{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showProgress: [{
@@ -16449,10 +16487,10 @@ class BaseToolbarDirective {
             toggleRef.closed.pipe(first(), takeUntil(this.$destroy)).subscribe((event) => this.closed.emit(event));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: BaseToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: BaseToolbarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseToolbarDirective, decorators: [{
             type: Directive
         }], propDecorators: { columnListHeight: [{
                 type: Input
@@ -16494,10 +16532,10 @@ class BaseToolbarColumnActionsDirective extends BaseToolbarDirective {
     uncheckAll() {
         this.columnActionsUI.uncheckAllColumns();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseToolbarColumnActionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: BaseToolbarColumnActionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: BaseToolbarColumnActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseToolbarColumnActionsDirective, decorators: [{
             type: Directive
         }], propDecorators: { hideFilter: [{
                 type: Input,
@@ -19447,10 +19485,10 @@ class IgxExcelExporterService extends IgxBaseExporter {
         });
         ExportUtilities.saveBlobToFile(blob, fileName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelExporterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelExporterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelExporterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelExporterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -19672,10 +19710,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: "22.1.1", ngImport: i0, type: IgxCsvExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCsvExporterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCsvExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCsvExporterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCsvExporterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCsvExporterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -20590,10 +20628,10 @@ class IgxPdfExporterService extends IgxBaseExporter {
         const blob = pdf.output('blob');
         ExportUtilities.saveBlobToFile(blob, fileName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPdfExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPdfExporterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPdfExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPdfExporterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPdfExporterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPdfExporterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -20692,10 +20730,10 @@ class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
         });
         exporter.export(this.grid, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarExporterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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\n  [title]=\"\n    $safeNavigationMigration(\n      grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\n    )\n  \"\n  [disabled]=\"isExporting\"\n  igxButton=\"outlined\"\n  type=\"button\"\n  igxRipple\n  #btn\n  (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\n        #btnExportExcel\n        id=\"btnExportExcel\"\n        class=\"igx-grid-toolbar__dd-list-items\"\n        igxRipple\n        (click)=\"exportClicked('excel', toggleRef)\"\n      >\n        <span #excel>\n          <ng-content select=\"[excelText],excel-text\"></ng-content>\n        </span>\n        @if (!excel.childNodes.length) {\n          <excel-text>\n            {{\n              grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text\n            }}\n          </excel-text>\n        }\n      </li>\n    }\n\n    @if (exportCSV) {\n      <li\n        #btnExportCsv\n        id=\"btnExportCsv\"\n        class=\"igx-grid-toolbar__dd-list-items\"\n        igxRipple\n        (click)=\"exportClicked('csv', toggleRef)\"\n      >\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\n        #btnExportPdf\n        id=\"btnExportPdf\"\n        class=\"igx-grid-toolbar__dd-list-items\"\n        igxRipple\n        (click)=\"exportClicked('pdf', toggleRef)\"\n      >\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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarExporterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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\n  [title]=\"\n    $safeNavigationMigration(\n      grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\n    )\n  \"\n  [disabled]=\"isExporting\"\n  igxButton=\"outlined\"\n  type=\"button\"\n  igxRipple\n  #btn\n  (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\n        #btnExportExcel\n        id=\"btnExportExcel\"\n        class=\"igx-grid-toolbar__dd-list-items\"\n        igxRipple\n        (click)=\"exportClicked('excel', toggleRef)\"\n      >\n        <span #excel>\n          <ng-content select=\"[excelText],excel-text\"></ng-content>\n        </span>\n        @if (!excel.childNodes.length) {\n          <excel-text>\n            {{\n              grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text\n            }}\n          </excel-text>\n        }\n      </li>\n    }\n\n    @if (exportCSV) {\n      <li\n        #btnExportCsv\n        id=\"btnExportCsv\"\n        class=\"igx-grid-toolbar__dd-list-items\"\n        igxRipple\n        (click)=\"exportClicked('csv', toggleRef)\"\n      >\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\n        #btnExportPdf\n        id=\"btnExportPdf\"\n        class=\"igx-grid-toolbar__dd-list-items\"\n        igxRipple\n        (click)=\"exportClicked('pdf', toggleRef)\"\n      >\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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarExporterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarExporterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-toolbar-exporter', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxToggleDirective, IgxExcelTextDirective, IgxCSVTextDirective, IgxPdfTextDirective], template: "<button\n  [title]=\"\n    $safeNavigationMigration(\n      grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\n    )\n  \"\n  [disabled]=\"isExporting\"\n  igxButton=\"outlined\"\n  type=\"button\"\n  igxRipple\n  #btn\n  (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\n        #btnExportExcel\n        id=\"btnExportExcel\"\n        class=\"igx-grid-toolbar__dd-list-items\"\n        igxRipple\n        (click)=\"exportClicked('excel', toggleRef)\"\n      >\n        <span #excel>\n          <ng-content select=\"[excelText],excel-text\"></ng-content>\n        </span>\n        @if (!excel.childNodes.length) {\n          <excel-text>\n            {{\n              grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text\n            }}\n          </excel-text>\n        }\n      </li>\n    }\n\n    @if (exportCSV) {\n      <li\n        #btnExportCsv\n        id=\"btnExportCsv\"\n        class=\"igx-grid-toolbar__dd-list-items\"\n        igxRipple\n        (click)=\"exportClicked('csv', toggleRef)\"\n      >\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\n        #btnExportPdf\n        id=\"btnExportPdf\"\n        class=\"igx-grid-toolbar__dd-list-items\"\n        igxRipple\n        (click)=\"exportClicked('pdf', toggleRef)\"\n      >\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: [{
@@ -20736,10 +20774,10 @@ class IgxGridToolbarHidingComponent extends BaseToolbarColumnActionsDirective {
     set content(content) {
         this.columnActionsUI = content;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarHidingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.hiddenColumnsCount ? 'show' : 'hide'\"\n    >\n    </igx-icon>\n    <span>{{ grid.hiddenColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnHiding\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title!\"\n    [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt!\n\"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarHidingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.hiddenColumnsCount ? 'show' : 'hide'\"\n    >\n    </igx-icon>\n    <span>{{ grid.hiddenColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnHiding\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title!\"\n    [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt!\n\"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarHidingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarHidingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-toolbar-hiding', changeDetection: ChangeDetectionStrategy.Eager, 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\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.hiddenColumnsCount ? 'show' : 'hide'\"\n    >\n    </igx-icon>\n    <span>{{ grid.hiddenColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnHiding\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title!\"\n    [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt!\n\"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\n  </igx-column-actions>\n}\n" }]
         }], propDecorators: { content: [{
@@ -20768,10 +20806,10 @@ class IgxGridToolbarPinningComponent extends BaseToolbarColumnActionsDirective {
     set content(content) {
         this.columnActionsUI = content;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarPinningComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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]=\"\n      $safeNavigationMigration(\n        grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\n      )\n    \"\n    #btn\n    igxButton=\"outlined\"\n    type=\"button\"\n    name=\"btnColumnPinning\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.pinnedColumnsCount ? 'unpin' : 'pin'\"\n    >\n    </igx-icon>\n    <span>{{ grid.pinnedColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnPinning\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title!\"\n    [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt!\"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarPinningComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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]=\"\n      $safeNavigationMigration(\n        grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\n      )\n    \"\n    #btn\n    igxButton=\"outlined\"\n    type=\"button\"\n    name=\"btnColumnPinning\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.pinnedColumnsCount ? 'unpin' : 'pin'\"\n    >\n    </igx-icon>\n    <span>{{ grid.pinnedColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnPinning\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title!\"\n    [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt!\"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarPinningComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarPinningComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-toolbar-pinning', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxIconComponent, IgxColumnActionsComponent, IgxColumnPinningDirective, IgxToggleDirective, AsyncPipe], template: "@if (grid.rendered$ | async) {\n  <button\n    [title]=\"\n      $safeNavigationMigration(\n        grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\n      )\n    \"\n    #btn\n    igxButton=\"outlined\"\n    type=\"button\"\n    name=\"btnColumnPinning\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.pinnedColumnsCount ? 'unpin' : 'pin'\"\n    >\n    </igx-icon>\n    <span>{{ grid.pinnedColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnPinning\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title!\"\n    [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt!\"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\n  </igx-column-actions>\n}\n" }]
         }], propDecorators: { content: [{
@@ -20805,10 +20843,10 @@ class IgxRowEditTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowEditTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxRowEditTemplateDirective, isStandalone: true, selector: "[igxRowEdit]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowEditTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxRowEditTemplateDirective, isStandalone: true, selector: "[igxRowEdit]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowEditTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowEditTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowEdit]',
@@ -20821,10 +20859,10 @@ class IgxRowEditTextDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowEditTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxRowEditTextDirective, isStandalone: true, selector: "[igxRowEditText]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowEditTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxRowEditTextDirective, isStandalone: true, selector: "[igxRowEditText]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowEditTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowEditTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowEditText]',
@@ -20837,10 +20875,10 @@ class IgxRowAddTextDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowAddTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxRowAddTextDirective, isStandalone: true, selector: "[igxRowAddText]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowAddTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxRowAddTextDirective, isStandalone: true, selector: "[igxRowAddText]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowAddTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowAddTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowAddText]',
@@ -20853,10 +20891,10 @@ class IgxRowEditActionsDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowEditActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxRowEditActionsDirective, isStandalone: true, selector: "[igxRowEditActions]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowEditActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxRowEditActionsDirective, isStandalone: true, selector: "[igxRowEditActions]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowEditActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowEditActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowEditActions]',
@@ -20902,10 +20940,10 @@ class IgxRowEditTabStopDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowEditTabStopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxRowEditTabStopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxRowEditTabStopDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowEditTabStopDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[igxRowEditTabStop]`,
@@ -21302,10 +21340,10 @@ class IgxGridSummaryService {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridSummaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridSummaryService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridSummaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridSummaryService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridSummaryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridSummaryService, decorators: [{
             type: Injectable
         }] });
 
@@ -21402,12 +21440,12 @@ class IgxSummaryCellComponent {
         }
         return summary.summaryResult;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxSummaryCellComponent, isStandalone: true, selector: "igx-grid-summary-cell", inputs: { summaryResults: "summaryResults", column: "column", firstCellIndentation: "firstCellIndentation", hasSummary: ["hasSummary", "hasSummary", booleanAttribute], summaryFormatter: "summaryFormatter", summaryTemplate: "summaryTemplate", locale: "locale", gridResourceStrings: "gridResourceStrings", 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", styles: ["@layer ig.base{.igx-grid-summary{position:relative;display:flex;flex-direction:column;flex:1 1 0%;padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));background:var(--background-color, inherit);overflow:hidden;outline-style:none;border-inline-end:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{display:flex;align-items:center;position:relative;padding-block:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0rem,-1 * 0rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));padding-inline:0;font-size:.75rem}.igx-grid-summary__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);min-width:1.875rem;margin-inline-end:.1875rem}.igx-grid-summary__label:hover{color:var(--label-hover-color)}.igx-grid-summary__result{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--result-color);font-weight:600;flex:1 1 auto;text-align:end}.igx-grid-summary--pinned{position:relative;z-index:1}.igx-grid-summary--active.igx-grid-summary--pinned:after{width:calc(100% - .0625rem)}.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(ltr){border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(rtl){border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}@media print{.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-last:after{inset-inline-start:.0625rem}@media print{.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--fw{flex-grow:0}.igx-grid-summary:after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid-summary--active:after{width:100%;height:100%;box-shadow:inset 0 0 0 .0625rem var(--cell-active-border-color);pointer-events:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-summary{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-top:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{min-height:max(var(--is-large, 1)*max(2.25rem,-1 * 2.25rem),var(--is-medium, 1)*max(1.875rem,-1 * 1.875rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));font-size:initial}.igx-grid-summary__label{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-inline-end:initial}.igx-grid-summary__result{font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxSummaryCellComponent, isStandalone: true, selector: "igx-grid-summary-cell", inputs: { summaryResults: "summaryResults", column: "column", firstCellIndentation: "firstCellIndentation", hasSummary: ["hasSummary", "hasSummary", booleanAttribute], summaryFormatter: "summaryFormatter", summaryTemplate: "summaryTemplate", locale: "locale", gridResourceStrings: "gridResourceStrings", 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", styles: ["@layer ig.base{.igx-grid-summary{position:relative;display:flex;flex-direction:column;flex:1 1 0%;padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));background:var(--background-color, inherit);overflow:hidden;outline-style:none;border-inline-end:var(--_summary-column-border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{display:flex;align-items:center;position:relative;padding-block:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0rem,-1 * 0rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));padding-inline:0;font-size:.75rem}.igx-grid-summary__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);min-width:1.875rem;margin-inline-end:.1875rem}.igx-grid-summary__label:hover{color:var(--label-hover-color)}.igx-grid-summary__result{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--result-color);font-weight:600;flex:1 1 auto;text-align:end}.igx-grid-summary--pinned{position:relative;z-index:1}.igx-grid-summary--active.igx-grid-summary--pinned:after{width:calc(100% - .0625rem)}.igx-grid-summary--pinned-first{border-inline-start:var(--_summary-pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}@media print{.igx-grid-summary--pinned-first{border-inline-start:var(--_summary-pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--pinned-last{border-inline-end:var(--_summary-pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-last:after{inset-inline-start:.0625rem}@media print{.igx-grid-summary--pinned-last{border-inline-end:var(--_summary-pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--fw{flex-grow:0}.igx-grid-summary:after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid-summary--active:after{width:100%;height:100%;box-shadow:inset 0 0 0 .0625rem var(--cell-active-border-color);pointer-events:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-summary{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-top:var(--_summary-column-border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{min-height:max(var(--is-large, 1)*max(2.25rem,-1 * 2.25rem),var(--is-medium, 1)*max(1.875rem,-1 * 1.875rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));font-size:initial}.igx-grid-summary__label{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-inline-end:initial}.igx-grid-summary__result{font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryCellComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-cell', encapsulation: ViewEncapsulation.None, 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", styles: ["@layer ig.base{.igx-grid-summary{position:relative;display:flex;flex-direction:column;flex:1 1 0%;padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));background:var(--background-color, inherit);overflow:hidden;outline-style:none;border-inline-end:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{display:flex;align-items:center;position:relative;padding-block:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0rem,-1 * 0rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));padding-inline:0;font-size:.75rem}.igx-grid-summary__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);min-width:1.875rem;margin-inline-end:.1875rem}.igx-grid-summary__label:hover{color:var(--label-hover-color)}.igx-grid-summary__result{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--result-color);font-weight:600;flex:1 1 auto;text-align:end}.igx-grid-summary--pinned{position:relative;z-index:1}.igx-grid-summary--active.igx-grid-summary--pinned:after{width:calc(100% - .0625rem)}.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(ltr){border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(rtl){border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}@media print{.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-last:after{inset-inline-start:.0625rem}@media print{.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--fw{flex-grow:0}.igx-grid-summary:after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid-summary--active:after{width:100%;height:100%;box-shadow:inset 0 0 0 .0625rem var(--cell-active-border-color);pointer-events:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-summary{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-top:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{min-height:max(var(--is-large, 1)*max(2.25rem,-1 * 2.25rem),var(--is-medium, 1)*max(1.875rem,-1 * 1.875rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));font-size:initial}.igx-grid-summary__label{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-inline-end:initial}.igx-grid-summary__result{font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-cell', encapsulation: ViewEncapsulation.None, 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", styles: ["@layer ig.base{.igx-grid-summary{position:relative;display:flex;flex-direction:column;flex:1 1 0%;padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));background:var(--background-color, inherit);overflow:hidden;outline-style:none;border-inline-end:var(--_summary-column-border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{display:flex;align-items:center;position:relative;padding-block:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0rem,-1 * 0rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));padding-inline:0;font-size:.75rem}.igx-grid-summary__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);min-width:1.875rem;margin-inline-end:.1875rem}.igx-grid-summary__label:hover{color:var(--label-hover-color)}.igx-grid-summary__result{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--result-color);font-weight:600;flex:1 1 auto;text-align:end}.igx-grid-summary--pinned{position:relative;z-index:1}.igx-grid-summary--active.igx-grid-summary--pinned:after{width:calc(100% - .0625rem)}.igx-grid-summary--pinned-first{border-inline-start:var(--_summary-pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}@media print{.igx-grid-summary--pinned-first{border-inline-start:var(--_summary-pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--pinned-last{border-inline-end:var(--_summary-pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-last:after{inset-inline-start:.0625rem}@media print{.igx-grid-summary--pinned-last{border-inline-end:var(--_summary-pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--fw{flex-grow:0}.igx-grid-summary:after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid-summary--active:after{width:100%;height:100%;box-shadow:inset 0 0 0 .0625rem var(--cell-active-border-color);pointer-events:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-summary{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-top:var(--_summary-column-border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{min-height:max(var(--is-large, 1)*max(2.25rem,-1 * 2.25rem),var(--is-medium, 1)*max(1.875rem,-1 * 1.875rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));font-size:initial}.igx-grid-summary__label{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-inline-end:initial}.igx-grid-summary__result{font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}}}\n"] }]
         }], propDecorators: { summaryResults: [{
                 type: Input
             }], column: [{
@@ -21521,12 +21559,12 @@ class IgxSummaryRowComponent {
             columns: cols
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\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            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\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", styles: ["@layer ig.base{.igx-grid-summary{position:relative;display:flex;flex-direction:column;flex:1 1 0%;padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));background:var(--background-color, inherit);overflow:hidden;outline-style:none;border-inline-end:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{display:flex;align-items:center;position:relative;padding-block:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0rem,-1 * 0rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));padding-inline:0;font-size:.75rem}.igx-grid-summary__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);min-width:1.875rem;margin-inline-end:.1875rem}.igx-grid-summary__label:hover{color:var(--label-hover-color)}.igx-grid-summary__result{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--result-color);font-weight:600;flex:1 1 auto;text-align:end}.igx-grid-summary--pinned{position:relative;z-index:1}.igx-grid-summary--active.igx-grid-summary--pinned:after{width:calc(100% - .0625rem)}.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(ltr){border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(rtl){border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}@media print{.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-last:after{inset-inline-start:.0625rem}@media print{.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--fw{flex-grow:0}.igx-grid-summary:after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid-summary--active:after{width:100%;height:100%;box-shadow:inset 0 0 0 .0625rem var(--cell-active-border-color);pointer-events:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-summary{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-top:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{min-height:max(var(--is-large, 1)*max(2.25rem,-1 * 2.25rem),var(--is-medium, 1)*max(1.875rem,-1 * 1.875rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));font-size:initial}.igx-grid-summary__label{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-inline-end:initial}.igx-grid-summary__result{font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}}}\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", "locale", "gridResourceStrings", "active", "rowIndex"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\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            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\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", styles: ["@layer ig.base{.igx-grid-summary{position:relative;display:flex;flex-direction:column;flex:1 1 0%;padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));background:var(--background-color, inherit);overflow:hidden;outline-style:none;border-inline-end:var(--_summary-column-border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{display:flex;align-items:center;position:relative;padding-block:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0rem,-1 * 0rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));padding-inline:0;font-size:.75rem}.igx-grid-summary__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);min-width:1.875rem;margin-inline-end:.1875rem}.igx-grid-summary__label:hover{color:var(--label-hover-color)}.igx-grid-summary__result{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--result-color);font-weight:600;flex:1 1 auto;text-align:end}.igx-grid-summary--pinned{position:relative;z-index:1}.igx-grid-summary--active.igx-grid-summary--pinned:after{width:calc(100% - .0625rem)}.igx-grid-summary--pinned-first{border-inline-start:var(--_summary-pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}@media print{.igx-grid-summary--pinned-first{border-inline-start:var(--_summary-pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--pinned-last{border-inline-end:var(--_summary-pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-last:after{inset-inline-start:.0625rem}@media print{.igx-grid-summary--pinned-last{border-inline-end:var(--_summary-pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--fw{flex-grow:0}.igx-grid-summary:after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid-summary--active:after{width:100%;height:100%;box-shadow:inset 0 0 0 .0625rem var(--cell-active-border-color);pointer-events:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-summary{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-top:var(--_summary-column-border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{min-height:max(var(--is-large, 1)*max(2.25rem,-1 * 2.25rem),var(--is-medium, 1)*max(1.875rem,-1 * 1.875rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));font-size:initial}.igx-grid-summary__label{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-inline-end:initial}.igx-grid-summary__result{font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}}}\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", "locale", "gridResourceStrings", "active", "rowIndex"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-row', encapsulation: ViewEncapsulation.None, 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            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\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            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\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", styles: ["@layer ig.base{.igx-grid-summary{position:relative;display:flex;flex-direction:column;flex:1 1 0%;padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));background:var(--background-color, inherit);overflow:hidden;outline-style:none;border-inline-end:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{display:flex;align-items:center;position:relative;padding-block:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0rem,-1 * 0rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));padding-inline:0;font-size:.75rem}.igx-grid-summary__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);min-width:1.875rem;margin-inline-end:.1875rem}.igx-grid-summary__label:hover{color:var(--label-hover-color)}.igx-grid-summary__result{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--result-color);font-weight:600;flex:1 1 auto;text-align:end}.igx-grid-summary--pinned{position:relative;z-index:1}.igx-grid-summary--active.igx-grid-summary--pinned:after{width:calc(100% - .0625rem)}.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(ltr){border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(rtl){border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}@media print{.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-last:after{inset-inline-start:.0625rem}@media print{.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--fw{flex-grow:0}.igx-grid-summary:after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid-summary--active:after{width:100%;height:100%;box-shadow:inset 0 0 0 .0625rem var(--cell-active-border-color);pointer-events:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-summary{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-top:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{min-height:max(var(--is-large, 1)*max(2.25rem,-1 * 2.25rem),var(--is-medium, 1)*max(1.875rem,-1 * 1.875rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));font-size:initial}.igx-grid-summary__label{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-inline-end:initial}.igx-grid-summary__result{font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-row', encapsulation: ViewEncapsulation.None, 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            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\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            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\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", styles: ["@layer ig.base{.igx-grid-summary{position:relative;display:flex;flex-direction:column;flex:1 1 0%;padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));background:var(--background-color, inherit);overflow:hidden;outline-style:none;border-inline-end:var(--_summary-column-border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{display:flex;align-items:center;position:relative;padding-block:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0rem,-1 * 0rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));padding-inline:0;font-size:.75rem}.igx-grid-summary__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);min-width:1.875rem;margin-inline-end:.1875rem}.igx-grid-summary__label:hover{color:var(--label-hover-color)}.igx-grid-summary__result{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--result-color);font-weight:600;flex:1 1 auto;text-align:end}.igx-grid-summary--pinned{position:relative;z-index:1}.igx-grid-summary--active.igx-grid-summary--pinned:after{width:calc(100% - .0625rem)}.igx-grid-summary--pinned-first{border-inline-start:var(--_summary-pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}@media print{.igx-grid-summary--pinned-first{border-inline-start:var(--_summary-pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--pinned-last{border-inline-end:var(--_summary-pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-last:after{inset-inline-start:.0625rem}@media print{.igx-grid-summary--pinned-last{border-inline-end:var(--_summary-pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--fw{flex-grow:0}.igx-grid-summary:after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid-summary--active:after{width:100%;height:100%;box-shadow:inset 0 0 0 .0625rem var(--cell-active-border-color);pointer-events:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-summary{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-top:var(--_summary-column-border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{min-height:max(var(--is-large, 1)*max(2.25rem,-1 * 2.25rem),var(--is-medium, 1)*max(1.875rem,-1 * 1.875rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));font-size:initial}.igx-grid-summary__label{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-inline-end:initial}.igx-grid-summary__result{font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}}}\n"] }]
         }], propDecorators: { summaries: [{
                 type: Input
             }], gridID: [{
@@ -21555,10 +21593,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: "22.1.1", ngImport: i0, type: IgxSummaryDataPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryDataPipe, isStandalone: true, name: "igxGridSummaryDataPipe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryDataPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryDataPipe, isStandalone: true, name: "igxGridSummaryDataPipe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryDataPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryDataPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGridSummaryDataPipe',
@@ -21643,10 +21681,10 @@ class IgxColumnResizerDirective {
         event.preventDefault();
         this.resize.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxColumnResizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxColumnResizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxColumnResizerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnResizerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxResizer]',
@@ -21670,10 +21708,10 @@ class IgxGridColumnResizerComponent {
     constructor() {
         this.colResizingService = inject(IgxColumnResizingService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridColumnResizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxGridColumnResizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxGridColumnResizerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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: [{
@@ -21714,10 +21752,10 @@ class IgxPivotColumnResizingService extends IgxColumnResizingService {
         this.rowHeaderGroup.grid.resizeRowDimensionPixels(rowDim, newWidth);
     }
     _handlePercentageResize() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPivotColumnResizingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPivotColumnResizingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPivotColumnResizingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPivotColumnResizingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPivotColumnResizingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPivotColumnResizingService, decorators: [{
             type: Injectable
         }] });
 
@@ -21754,10 +21792,10 @@ class IgxPivotResizeHandleDirective extends IgxResizeHandleDirective {
         super.initResizeService(event);
         this.colResizingService.rowHeaderGroup = this.rowHeaderGroup;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPivotResizeHandleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxPivotResizeHandleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxPivotResizeHandleDirective, isStandalone: true, selector: "[igxPivotResizeHandle]", inputs: { pivotColumn: ["igxPivotResizeHandle", "pivotColumn"], rowHeaderGroup: ["igxPivotResizeHandleHeader", "rowHeaderGroup"] }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPivotResizeHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPivotResizeHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxPivotResizeHandle]',
@@ -21776,10 +21814,10 @@ class IgxPivotGridColumnResizerComponent extends IgxGridColumnResizerComponent {
         super(...arguments);
         this.colResizingService = inject(IgxPivotColumnResizingService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPivotGridColumnResizerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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: "22.1.7", ngImport: i0, type: IgxPivotGridColumnResizerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.1", ngImport: i0, type: IgxPivotGridColumnResizerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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" }]
         }] });
@@ -22587,10 +22625,10 @@ class IgxGridNavigationService {
     isAddKey(key) {
         return ROW_ADD_KEYS.has(key);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridNavigationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridNavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridNavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -22793,18 +22831,18 @@ class IgxGridValidationService {
         }
         this.updateStatus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridValidationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridValidationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridValidationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridValidationService, decorators: [{
             type: Injectable
         }] });
 
 class IgxGridBodyDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxGridBodyDirective, isStandalone: true, selector: "[igxGridBody]", providers: [IgxForOfSyncService], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxGridBodyDirective, isStandalone: true, selector: "[igxGridBody]", providers: [IgxForOfSyncService], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridBodyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridBodyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridBody]',
@@ -23817,10 +23855,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: "22.1.1", ngImport: i0, type: IgxGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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" } }, 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  }\n</ng-template>\n<ng-template #defaultCell>\n  @if (\n    (column.dataType !== 'boolean' && column.dataType !== 'image') ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\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' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : 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      {{\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      }}\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    >\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 (\n    column.dataType !== 'boolean' ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\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)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : 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      {{ !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        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        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>\n        {{ editValue | percent: column.pipeArgs.digitsInfo : grid.locale }}\n      </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    (mouseover)=\"errorShowing = true\"\n    (mouseout)=\"errorShowing = false\"\n  >\n  </igx-icon>\n  <div [id]=\"ariaErrorMessage\" igxTooltip #error #tooltipRef=\"tooltip\">\n    <div [style.width]=\"'max-content'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellValidationErrorTemplate || defaultError;\n          context: context\n        \"\n      ></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      {{\n        grid.resourceStrings.igx_grid_min_length_validation_error!\n          | igxStringReplace: '{0}' : errors.minlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['maxlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_length_validation_error!\n          | igxStringReplace: '{0}' : errors.maxlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['min']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_validation_error!\n          | igxStringReplace: '{0}' : errors.min.min\n      }}\n    </div>\n  }\n  @if (errors?.['max']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_validation_error!\n          | igxStringReplace: '{0}' : errors.max.max\n      }}\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[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", "outlined", "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", "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: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, 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: "22.1.7", ngImport: i0, type: IgxGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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" } }, 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  }\n</ng-template>\n<ng-template #defaultCell>\n  @if (\n    (column.dataType !== 'boolean' && column.dataType !== 'image') ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\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' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : 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      {{\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      }}\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    >\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 (\n    column.dataType !== 'boolean' ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\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)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : 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      {{ !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        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        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>\n        {{ editValue | percent: column.pipeArgs.digitsInfo : grid.locale }}\n      </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    (mouseover)=\"errorShowing = true\"\n    (mouseout)=\"errorShowing = false\"\n  >\n  </igx-icon>\n  <div [id]=\"ariaErrorMessage\" igxTooltip #error #tooltipRef=\"tooltip\">\n    <div [style.width]=\"'max-content'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellValidationErrorTemplate || defaultError;\n          context: context\n        \"\n      ></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      {{\n        grid.resourceStrings.igx_grid_min_length_validation_error!\n          | igxStringReplace: '{0}' : errors.minlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['maxlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_length_validation_error!\n          | igxStringReplace: '{0}' : errors.maxlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['min']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_validation_error!\n          | igxStringReplace: '{0}' : errors.min.min\n      }}\n    </div>\n  }\n  @if (errors?.['max']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_validation_error!\n          | igxStringReplace: '{0}' : errors.max.max\n      }}\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[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", "outlined", "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", "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: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, 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: "22.1.1", ngImport: i0, type: IgxGridCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-cell', imports: [
                         NgClass,
@@ -24320,10 +24358,10 @@ class IgxGridMRLNavigationService extends IgxGridNavigationService {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridMRLNavigationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridMRLNavigationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridMRLNavigationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridMRLNavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridMRLNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridMRLNavigationService, decorators: [{
             type: Injectable
         }] });
 
@@ -24880,10 +24918,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: "22.1.1", ngImport: i0, type: GridBaseAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: GridBaseAPIService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridBaseAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridBaseAPIService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: GridBaseAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridBaseAPIService, decorators: [{
             type: Injectable
         }] });