igniteui-angular 22.2.0-rc.1 → 22.2.0-rc.2

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

@@ -397,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxColumnActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -457,10 +457,10 @@ class IgxColumnActionEnabledPipe {
         this.columnActions.actionableColumns = copy;
         return copy;
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnActionEnabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnActionEnabledPipe, isStandalone: true, name: "columnActionEnabled" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnActionEnabledPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnActionEnabledPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'columnActionEnabled',
@@ -491,10 +491,10 @@ class IgxFilterActionColumnsPipe {
         this.columnActions.filteredColumns = copy;
         return copy;
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxFilterActionColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxFilterActionColumnsPipe, isStandalone: true, name: "filterActionColumns" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterActionColumnsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxFilterActionColumnsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filterActionColumns',
@@ -508,10 +508,10 @@ class IgxSortActionColumnsPipe {
         }
         return collection;
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSortActionColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxSortActionColumnsPipe, isStandalone: true, name: "sortActionColumns" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSortActionColumnsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSortActionColumnsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sortActionColumns',
@@ -520,10 +520,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }] });
 
 class IgxColumnActionsBaseDirective {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnActionsBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxColumnActionsBaseDirective, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnActionsBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnActionsBaseDirective, decorators: [{
             type: Directive
         }] });
 
@@ -580,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnHidingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxColumnHidingDirective, isStandalone: true, selector: "[igxColumnHiding]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnHidingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnHidingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxColumnHiding]',
@@ -644,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnPinningDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxColumnPinningDirective, isStandalone: true, selector: "[igxColumnPinning]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnPinningDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnPinningDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxColumnPinning]',
@@ -667,14 +667,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 
 /* eslint-disable @angular-eslint/directive-selector */
 class IgxColumnRequiredValidatorDirective extends RequiredValidator {
-    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: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnRequiredValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxColumnRequiredValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnRequiredValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[required]',
@@ -687,14 +687,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 class IgxColumnMinValidatorDirective extends MinValidator {
-    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: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMinValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxColumnMinValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMinValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[min]',
@@ -707,14 +707,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 class IgxColumnMaxValidatorDirective extends MaxValidator {
-    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: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMaxValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxColumnMaxValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMaxValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[max]',
@@ -727,14 +727,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 class IgxColumnEmailValidatorDirective extends EmailValidator {
-    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: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnEmailValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxColumnEmailValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnEmailValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[email]',
@@ -747,14 +747,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 class IgxColumnMinLengthValidatorDirective extends MinLengthValidator {
-    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: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMinLengthValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[minlength]',
@@ -767,14 +767,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 class IgxColumnMaxLengthValidatorDirective extends MaxLengthValidator {
-    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: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMaxLengthValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[maxlength]',
@@ -787,14 +787,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 class IgxColumnPatternValidatorDirective extends PatternValidator {
-    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: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnPatternValidatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxColumnPatternValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnPatternValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-column[pattern]',
@@ -2365,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridSelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridSelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3030,10 +3030,10 @@ class IgxGridCRUDService extends IgxRowAddCrudState {
         }
         return false;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCRUDService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCRUDService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCRUDService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCRUDService, decorators: [{
             type: Injectable
         }] });
 
@@ -3604,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxRowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowBaseComponent]',
@@ -3677,10 +3677,10 @@ class IgxFilterCellTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxFilterCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxFilterCellTemplateDirective, isStandalone: true, selector: "[igxFilterCellTemplate]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterCellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxFilterCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxFilterCellTemplate]',
@@ -3695,10 +3695,10 @@ class IgxCellTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCellTemplateDirective, isStandalone: true, selector: "[igxCell]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCell]',
@@ -3713,10 +3713,10 @@ class IgxCellValidationErrorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCellValidationErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCellValidationErrorDirective, isStandalone: true, selector: "[igxCellValidationError]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellValidationErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCellValidationErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCellValidationError]',
@@ -3731,10 +3731,10 @@ class IgxCellHeaderTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCellHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCellHeaderTemplateDirective, isStandalone: true, selector: "[igxHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCellHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeader]',
@@ -3748,10 +3748,10 @@ class IgxCellFooterTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCellFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCellFooterTemplateDirective, isStandalone: true, selector: "[igxFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellFooterTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCellFooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxFooter]',
@@ -3766,10 +3766,10 @@ class IgxCellEditorTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCellEditorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCellEditorTemplateDirective, isStandalone: true, selector: "[igxCellEditor]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCellEditorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCellEditorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCellEditor]',
@@ -3784,10 +3784,10 @@ class IgxCollapsibleIndicatorTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCollapsibleIndicatorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCollapsibleIndicatorTemplateDirective, isStandalone: true, selector: "[igxCollapsibleIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCollapsibleIndicatorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCollapsibleIndicatorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCollapsibleIndicator]',
@@ -3802,10 +3802,10 @@ class IgxSummaryTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSummaryTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxSummaryTemplateDirective, isStandalone: true, selector: "[igxSummary]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSummaryTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSummary]',
@@ -3828,10 +3828,10 @@ var DropPosition;
  * @internal
  */
 class IgxColumnMovingService {
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMovingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMovingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMovingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMovingService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -6267,8 +6267,8 @@ class IgxColumnComponent {
             this._applySelectableClass = value;
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.2.0", 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(),
@@ -6418,7 +6418,7 @@ __decorate([
     notifyChanges(),
     WatchColumnChanges()
 ], IgxColumnComponent.prototype, "editorOptions", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-column', template: ``, standalone: true, styles: [":host{display:none}\n"] }]
         }], propDecorators: { field: [{
@@ -6954,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.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) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxColumnGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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>
@@ -7125,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.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) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxColumnLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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>
@@ -7370,10 +7370,10 @@ class IgxAdvancedFilteringDialogComponent {
             this.queryBuilderResourceStrings = queryBuilderRS;
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -7392,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: BaseFilteringComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: BaseFilteringComponent, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseFilteringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: BaseFilteringComponent, decorators: [{
             type: Directive
         }] });
 
@@ -7439,10 +7439,10 @@ class IgxExcelStyleClearFiltersComponent {
         });
         this.esf.detectChanges();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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" }]
         }] });
@@ -7637,10 +7637,10 @@ class IgxExcelStyleDefaultExpressionComponent {
     onOutletPointerDown(event) {
         event.preventDefault();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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", "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.7", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -7695,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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", "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.7", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -7885,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -8090,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -8108,10 +8108,10 @@ class IgxExcelStyleHeaderComponent {
     constructor() {
         this.esf = inject(BaseFilteringComponent);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -8132,10 +8132,10 @@ class IgxExcelStyleHidingComponent {
     constructor() {
         this.esf = inject(BaseFilteringComponent);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleHidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxExcelStyleHidingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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" }]
         }] });
@@ -8232,10 +8232,10 @@ class IgxExcelStyleMovingComponent {
             }
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleMovingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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", "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.7", ngImport: i0, type: IgxExcelStyleMovingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -8250,10 +8250,10 @@ class IgxExcelStylePinningComponent {
     constructor() {
         this.esf = inject(BaseFilteringComponent);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStylePinningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxExcelStylePinningComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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" }]
         }] });
@@ -8266,10 +8266,10 @@ class IgxExcelStyleLoadingValuesTemplateDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxExcelStyleLoadingValuesTemplateDirective, isStandalone: true, selector: "[igxExcelStyleLoading]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleLoading]',
@@ -9022,13 +9022,17 @@ class IgxExcelStyleSearchComponent {
         return Number(wrappers[0].dataset['index']);
     }
     /**
-     * Clears the focused option when no displayed item remains, so the listbox stops
-     * naming a row that the empty render took away.
+     * Clears the focused option and scrolls back to the top when no displayed item remains, so the
+     * listbox stops naming a row that the empty render took away and the next list does not open
+     * at the old offset.
      */
     reconcileEmptyList() {
         if (this.displayedListData.length) {
             return;
         }
+        // The empty viewport is hidden, and a hidden host keeps its offset. Reset it now, while it is
+        // still laid out: scrollToIndex applies its first jump before it returns.
+        void this.virtualScroll?.scrollToIndex(0);
         this.focusedItem = null;
         this.refreshActiveDescendant();
     }
@@ -9055,12 +9059,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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    <!-- Hidden while empty, so the list can center its loading or empty template. -->\n    <igx-virtual-scroll\n      #virtualScroll\n      role=\"presentation\"\n      [style.display]=\"displayedListData?.length ? null : 'none'\"\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", "keyFunction"], 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.7", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
             type: Component,
-            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" }]
+            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    <!-- Hidden while empty, so the list can center its loading or empty template. -->\n    <igx-virtual-scroll\n      #virtualScroll\n      role=\"presentation\"\n      [style.display]=\"displayedListData?.length ? null : 'none'\"\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']
@@ -9105,10 +9109,10 @@ class IgxExcelStyleSelectingComponent {
     constructor() {
         this.esf = inject(BaseFilteringComponent);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleSelectingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxExcelStyleSelectingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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" }]
         }] });
@@ -9164,10 +9168,10 @@ class IgxExcelStyleSortingComponent {
             this.sortButtonGroup.selectButton(sortDirection - 1);
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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", "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.7", ngImport: i0, type: IgxExcelStyleSortingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -9179,10 +9183,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             }] } });
 
 class IgxExcelStyleColumnOperationsTemplateDirective {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxExcelStyleColumnOperationsTemplateDirective, isStandalone: true, selector: "[igxExcelStyleColumnOperations],igx-excel-style-column-operations", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleColumnOperations],igx-excel-style-column-operations',
@@ -9190,10 +9194,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 class IgxExcelStyleFilterOperationsTemplateDirective {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxExcelStyleFilterOperationsTemplateDirective, isStandalone: true, selector: "[igxExcelStyleFilterOperations],igx-excel-style-filter-operations", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleFilterOperations],igx-excel-style-filter-operations',
@@ -9771,10 +9775,10 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
         }
         return value;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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__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: [{
@@ -9893,10 +9897,10 @@ class IgxGridActionButtonComponent {
             event.preventDefault();
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridActionButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -9995,10 +9999,10 @@ class IgxGridActionsBaseDirective {
     isRow(context) {
         return context && context instanceof IgxRowDirective;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridActionsBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridActionsBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridActionsBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridActionsBase]',
@@ -10159,10 +10163,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridEditingActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridEditingActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -10297,11 +10301,7 @@ class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective {
         }
     }
     registerSVGIcons() {
-        if (!this.isRow(this.strip.context)) {
-            return;
-        }
-        const context = this.strip.context;
-        const grid = context.grid;
+        const grid = this.strip.context.grid;
         if (grid) {
             this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons', true);
             this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons', true);
@@ -10309,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridPinningActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridPinningActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -10321,10 +10321,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             }] } });
 
 class IgxGridFooterComponent {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-grid-footer',
@@ -10440,10 +10440,10 @@ class IgxColumnMovingDragDirective extends IgxDragDirective {
             this.subscription$ = null;
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMovingDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxColumnMovingDragDirective, isStandalone: true, selector: "[igxColumnMovingDrag]", inputs: { column: ["igxColumnMovingDrag", "column"] }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMovingDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMovingDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxColumnMovingDrag]',
@@ -10554,10 +10554,10 @@ class IgxGroupByAreaDirective {
     }
     expressionsChanged() {
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGroupByAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGroupByAreaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGroupByAreaDirective, decorators: [{
             type: Directive
         }], propDecorators: { dropAreaTemplate: [{
                 type: Input
@@ -10591,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGroupByMetaPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGroupByMetaPipe, isStandalone: true, name: "igxGroupByMeta" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupByMetaPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGroupByMetaPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGroupByMeta',
@@ -10613,10 +10613,10 @@ class IgxGroupByRowTemplateDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGroupByRowTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxGroupByRowTemplateDirective, isStandalone: true, selector: "[igxGroupByRow]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupByRowTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGroupByRowTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGroupByRow]',
@@ -10631,10 +10631,10 @@ class IgxGridDetailTemplateDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxGridDetailTemplateDirective, isStandalone: true, selector: "[igxGridDetail]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridDetailTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridDetailTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridDetail]',
@@ -10649,10 +10649,10 @@ class IgxRowExpandedIndicatorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxRowExpandedIndicatorDirective, isStandalone: true, selector: "[igxRowExpandedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowExpandedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowExpandedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowExpandedIndicator]',
@@ -10667,10 +10667,10 @@ class IgxRowCollapsedIndicatorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxRowCollapsedIndicatorDirective, isStandalone: true, selector: "[igxRowCollapsedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowCollapsedIndicator]',
@@ -10685,10 +10685,10 @@ class IgxHeaderExpandedIndicatorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHeaderExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxHeaderExpandedIndicatorDirective, isStandalone: true, selector: "[igxHeaderExpandedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHeaderExpandedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHeaderExpandedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeaderExpandedIndicator]',
@@ -10703,10 +10703,10 @@ class IgxHeaderCollapsedIndicatorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHeaderCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxHeaderCollapsedIndicatorDirective, isStandalone: true, selector: "[igxHeaderCollapsedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHeaderCollapsedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHeaderCollapsedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeaderCollapsedIndicator]',
@@ -10721,10 +10721,10 @@ class IgxExcelStyleHeaderIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxExcelStyleHeaderIconDirective, isStandalone: true, selector: "[igxExcelStyleHeaderIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleHeaderIcon]',
@@ -10739,10 +10739,10 @@ class IgxSortHeaderIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSortHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxSortHeaderIconDirective, isStandalone: true, selector: "[igxSortHeaderIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSortHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSortHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSortHeaderIcon]',
@@ -10757,10 +10757,10 @@ class IgxSortAscendingHeaderIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxSortAscendingHeaderIconDirective, isStandalone: true, selector: "[igxSortAscendingHeaderIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSortAscendingHeaderIcon]',
@@ -10775,10 +10775,10 @@ class IgxSortDescendingHeaderIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxSortDescendingHeaderIconDirective, isStandalone: true, selector: "[igxSortDescendingHeaderIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSortDescendingHeaderIcon]',
@@ -10791,10 +10791,10 @@ class IgxGridLoadingTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxGridLoadingTemplateDirective, isStandalone: true, selector: "[igxGridLoading]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridLoadingTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridLoadingTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridLoading]',
@@ -10807,10 +10807,10 @@ class IgxGridEmptyTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridEmptyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxGridEmptyTemplateDirective, isStandalone: true, selector: "[igxGridEmpty]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridEmptyTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridEmptyTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridEmpty]',
@@ -10872,10 +10872,10 @@ class IgxGroupAreaDropDirective extends IgxDropDirective {
             return true;
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGroupAreaDropDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGroupAreaDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGroupAreaDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGroupAreaDrop]',
@@ -11081,10 +11081,10 @@ class 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnResizingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnResizingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnResizingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnResizingService, decorators: [{
             type: Injectable
         }] });
 
@@ -11093,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SortingIndexPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: SortingIndexPipe, isStandalone: true, name: "sortingIndex" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SortingIndexPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SortingIndexPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sortingIndex',
@@ -11115,10 +11115,10 @@ class IgxHeaderGroupStylePipe {
         }
         return css;
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHeaderGroupStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxHeaderGroupStylePipe, isStandalone: true, name: "igxHeaderGroupStyle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHeaderGroupStylePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHeaderGroupStylePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxHeaderGroupStyle',
@@ -11371,10 +11371,10 @@ class IgxGridHeaderComponent {
             strategy: this.column.sortStrategy
         });
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -11953,10 +11953,10 @@ class IgxFilteringService {
         }
         return count;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxFilteringService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxFilteringService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilteringService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxFilteringService, decorators: [{
             type: Injectable
         }] });
 
@@ -12134,10 +12134,10 @@ class IgxGridFilteringCellComponent {
             this.cdr.detectChanges();
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridFilteringCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridFilteringCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridFilteringCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-filtering-cell', imports: [
                         IgxChipsAreaComponent,
@@ -12268,10 +12268,10 @@ class IgxResizeHandleDirective {
             this.colResizingService.startResizePos = event.clientX;
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxResizeHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxResizeHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxResizeHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxResizeHandle]',
@@ -12415,10 +12415,10 @@ class IgxColumnMovingDropDirective extends IgxDropDirective {
             this.column.grid.cdr.detectChanges();
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMovingDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxColumnMovingDropDirective, isStandalone: true, selector: "[igxColumnMovingDrop]", inputs: { data: ["igxColumnMovingDrop", "data"] }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnMovingDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnMovingDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxColumnMovingDrop]',
@@ -12675,10 +12675,10 @@ class IgxGridHeaderGroupComponent {
             } : null
         };
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridHeaderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridHeaderGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -13431,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-filtering-row', imports: [
                         IgxDropDownComponent,
@@ -14216,10 +14216,10 @@ class IgxGridCellStyleClassesPipe {
         }
         return result.join(' ');
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCellStyleClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCellStyleClassesPipe, isStandalone: true, name: "igxCellStyleClasses" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellStyleClassesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCellStyleClassesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxCellStyleClasses',
@@ -14243,10 +14243,10 @@ class IgxGridCellStylesPipe {
         }
         return css;
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCellStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCellStylesPipe, isStandalone: true, name: "igxCellStyles" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellStylesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCellStylesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxCellStyles',
@@ -14266,10 +14266,10 @@ class IgxGridCellImageAltPipe {
         }
         return value;
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCellImageAltPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCellImageAltPipe, isStandalone: true, name: "igxCellImageAlt" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridCellImageAltPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCellImageAltPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxCellImageAlt',
@@ -14314,10 +14314,10 @@ class IgxGridRowClassesPipe {
         }
         return result;
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridRowClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridRowClassesPipe, isStandalone: true, name: "igxGridRowClasses" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridRowClassesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridRowClassesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGridRowClasses',
@@ -14345,10 +14345,10 @@ class IgxGridRowStylesPipe {
         }
         return css;
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridRowStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridRowStylesPipe, isStandalone: true, name: "igxGridRowStyles" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridRowStylesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridRowStylesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGridRowStyles',
@@ -14363,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridNotGroupedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridNotGroupedPipe, isStandalone: true, name: "igxNotGrouped" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridNotGroupedPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridNotGroupedPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxNotGrouped',
@@ -14381,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridTopLevelColumns, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridTopLevelColumns, isStandalone: true, name: "igxTopLevel" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridTopLevelColumns, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridTopLevelColumns, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxTopLevel',
@@ -14399,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridFilterConditionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridFilterConditionPipe, isStandalone: true, name: "filterCondition" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridFilterConditionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridFilterConditionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filterCondition',
@@ -14428,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridTransactionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridTransactionPipe, isStandalone: true, name: "gridTransaction" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridTransactionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridTransactionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridTransaction',
@@ -14446,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridPaginatorOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridPaginatorOptionsPipe, isStandalone: true, name: "paginatorOptions" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridPaginatorOptionsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridPaginatorOptionsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'paginatorOptions',
@@ -14467,10 +14467,10 @@ class IgxHasVisibleColumnsPipe {
         }
         return hasVisibleColumns ? values : [];
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHasVisibleColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxHasVisibleColumnsPipe, isStandalone: true, name: "visibleColumns" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHasVisibleColumnsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHasVisibleColumnsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'visibleColumns',
@@ -14510,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridRowPinningPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridRowPinningPipe, isStandalone: true, name: "gridRowPinning" }); }
 }
 __decorate([
     buildDataView()
 ], IgxGridRowPinningPipe.prototype, "transform", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridRowPinningPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridRowPinningPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridRowPinning',
@@ -14527,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridDataMapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridDataMapperPipe, isStandalone: true, name: "dataMapper" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridDataMapperPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridDataMapperPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dataMapper',
@@ -14541,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxStringReplacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxStringReplacePipe, isStandalone: true, name: "igxStringReplace" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxStringReplacePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxStringReplacePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxStringReplace',
@@ -14566,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridTransactionStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridTransactionStatePipe, isStandalone: true, name: "transactionState" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridTransactionStatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridTransactionStatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'transactionState',
@@ -14580,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnFormatterPipe, isStandalone: true, name: "columnFormatter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxColumnFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'columnFormatter',
@@ -14594,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSummaryFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxSummaryFormatterPipe, isStandalone: true, name: "summaryFormatter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSummaryFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'summaryFormatter',
@@ -14618,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridAddRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGridAddRowPipe, isStandalone: true, name: "gridAddRow" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridAddRowPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridAddRowPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridAddRow',
@@ -14758,10 +14758,10 @@ class IgxGridHeaderRowComponent {
             this.grid.selectionService.selectAllRows(event);
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -14952,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowDragDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxRowDragDirective, isStandalone: true, selector: "[igxRowDrag]", inputs: { data: ["igxRowDrag", "data"] }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowDrag]',
@@ -14973,10 +14973,10 @@ class IgxDragIndicatorIconDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDragIndicatorIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxDragIndicatorIconDirective, isStandalone: true, selector: "[igxDragIndicatorIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDragIndicatorIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDragIndicatorIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDragIndicatorIcon]',
@@ -14994,10 +14994,10 @@ class IgxRowDragGhostDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowDragGhostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxRowDragGhostDirective, isStandalone: true, selector: "[igxRowDragGhost]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowDragGhostDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowDragGhostDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowDragGhost]',
@@ -15017,10 +15017,10 @@ class IgxRowSelectorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxRowSelectorDirective, isStandalone: true, selector: "[igxRowSelector]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowSelectorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowSelectorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowSelector]',
@@ -15039,10 +15039,10 @@ class IgxGroupByRowSelectorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGroupByRowSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxGroupByRowSelectorDirective, isStandalone: true, selector: "[igxGroupByRowSelector]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGroupByRowSelectorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGroupByRowSelectorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGroupByRowSelector]',
@@ -15061,10 +15061,10 @@ class IgxHeadSelectorDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHeadSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxHeadSelectorDirective, isStandalone: true, selector: "[igxHeadSelector]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxHeadSelectorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHeadSelectorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeadSelector]',
@@ -15203,10 +15203,10 @@ class IgxGridDragSelectDirective {
             this._sub.unsubscribe();
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridDragSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridDragSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridDragSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridDragSelect]',
@@ -15990,10 +15990,10 @@ class IgxGridStateBaseDirective {
         const feature = this.FEATURES[key];
         return feature;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridStateBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxGridStateBaseDirective, isStandalone: true, inputs: { options: "options" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridStateBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridStateBaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { options: [{
                 type: Input
@@ -16065,10 +16065,10 @@ class IgxGridStateDirective extends IgxGridStateBaseDirective {
         }
         return super.setStateInternal(state, features);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridState]',
@@ -16082,10 +16082,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             }] } });
 
 class IgxExcelTextDirective {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxExcelTextDirective, isStandalone: true, selector: "[excelText],excel-text", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelTextDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -16094,10 +16094,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 class IgxCSVTextDirective {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCSVTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCSVTextDirective, isStandalone: true, selector: "[csvText],csv-text", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCSVTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCSVTextDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -16106,10 +16106,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 class IgxPdfTextDirective {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPdfTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxPdfTextDirective, isStandalone: true, selector: "[pdfText],pdf-text", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPdfTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPdfTextDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -16143,10 +16143,10 @@ class IgxGridToolbarTitleComponent {
          */
         this.cssClass = 'igx-grid-toolbar__title';
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridToolbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridToolbarTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridToolbarTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-grid-toolbar-title', template: '<ng-content></ng-content>',
@@ -16186,10 +16186,10 @@ class IgxGridToolbarActionsComponent {
          */
         this.cssClass = 'igx-grid-toolbar__actions';
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridToolbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridToolbarActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridToolbarActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-grid-toolbar-actions', template: '<ng-content></ng-content>',
@@ -16208,10 +16208,10 @@ class IgxGridToolbarDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxGridToolbarDirective, isStandalone: true, selector: "[igxGridToolbar]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridToolbarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridToolbarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridToolbar]',
@@ -16278,10 +16278,10 @@ class IgxGridToolbarAdvancedFilteringComponent {
         });
         return [...new Set(columnNames)];
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -16358,10 +16358,10 @@ class IgxGridToolbarComponent {
     ngOnDestroy() {
         this.sub?.unsubscribe();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -16487,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: BaseToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: BaseToolbarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: BaseToolbarDirective, decorators: [{
             type: Directive
         }], propDecorators: { columnListHeight: [{
                 type: Input
@@ -16532,10 +16532,10 @@ class BaseToolbarColumnActionsDirective extends BaseToolbarDirective {
     uncheckAll() {
         this.columnActionsUI.uncheckAllColumns();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: BaseToolbarColumnActionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.2.0", 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.7", ngImport: i0, type: BaseToolbarColumnActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: BaseToolbarColumnActionsDirective, decorators: [{
             type: Directive
         }], propDecorators: { hideFilter: [{
                 type: Input,
@@ -19485,10 +19485,10 @@ class IgxExcelExporterService extends IgxBaseExporter {
         });
         ExportUtilities.saveBlobToFile(blob, fileName);
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelExporterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxExcelExporterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxExcelExporterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -19710,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.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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCsvExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCsvExporterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCsvExporterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCsvExporterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -19755,8 +19755,6 @@ class IgxPdfExporterService extends IgxBaseExporter {
          * @memberof IgxPdfExporterService
          */
         this.exportEnded = new EventEmitter();
-        this._currentFontName = 'helvetica';
-        this._currentBoldFontName = 'helvetica';
     }
     exportDataImplementation(data, options, done) {
         const firstDataElement = data[0];
@@ -19895,8 +19893,10 @@ class IgxPdfExporterService extends IgxBaseExporter {
         const hasMultiColumnHeaders = maxLevel > 0 && allColumns.some(col => col.headerType === ExportHeaderType.MultiColumnHeader);
         const hasMultiRowHeaders = maxRowLevel > 0 && rowDimensionFields.length > 0;
         if (leafColumns.length === 0 && data.length > 0 && firstDataElement) {
-            // If no columns are defined, use the keys from the first data record
-            const keys = Object.keys(firstDataElement.data);
+            // If no columns are defined, use the keys from the first data record. GRID_LEVEL_COL
+            // is added to both the owner and the record data when summaries are exported, so it
+            // can be among those keys - and it is an internal field, not one to put in the table.
+            const keys = Object.keys(firstDataElement.data).filter(key => key !== GRID_LEVEL_COL);
             keys.forEach((key) => {
                 leafColumns.push({
                     header: key,
@@ -19917,36 +19917,43 @@ class IgxPdfExporterService extends IgxBaseExporter {
                 format: options.pageSize
             });
             const font = options.customFont;
+            const fontNames = { normal: 'helvetica', bold: 'helvetica' };
             // Add custom Unicode font if provided
             if (typeof font?.name === 'string' && font.name.trim() && typeof font?.data === 'string' && font.data.trim()) {
                 try {
                     const fontFileName = `${font.name}.ttf`;
                     pdf.addFileToVFS(fontFileName, font.data);
                     pdf.addFont(fontFileName, font.name, 'normal');
-                    this._currentFontName = font.name;
+                    fontNames.normal = font.name;
                     // Register bold font if provided
                     if (typeof font.bold?.name === 'string' && font.bold.name.trim() && typeof font.bold?.data === 'string' && font.bold.data.trim()) {
                         const boldFontFileName = `${font.bold.name}.ttf`;
                         pdf.addFileToVFS(boldFontFileName, font.bold.data);
                         pdf.addFont(boldFontFileName, font.bold.name, 'bold');
-                        this._currentBoldFontName = font.bold.name;
+                        fontNames.bold = font.bold.name;
                     }
                     else {
                         // If no bold variant provided, use the normal font for bold as well
                         pdf.addFont(fontFileName, font.name, 'bold');
-                        this._currentBoldFontName = font.name;
+                        fontNames.bold = font.name;
                     }
+                    // jsPDF takes a font file it cannot read without complaint: it reports the
+                    // problem on its own event bus instead of throwing, and only fails once the
+                    // font is first used. Put both styles to work here, where falling back is
+                    // still possible, rather than let the failure land part way through drawing
+                    // the table and take the whole export down with it.
+                    this.verifyFont(pdf, fontNames.normal, 'normal');
+                    this.verifyFont(pdf, fontNames.bold, 'bold');
                 }
                 catch (error) {
                     console.warn(`Failed to load custom font '${font.name}', falling back to helvetica:`, error);
-                    this._currentFontName = 'helvetica';
-                    this._currentBoldFontName = 'helvetica';
+                    fontNames.normal = 'helvetica';
+                    fontNames.bold = 'helvetica';
+                    pdf.setFont(fontNames.normal, 'normal');
                 }
             }
             else if (options.customFont) {
                 console.warn('Custom font configuration is incomplete (missing name or data), falling back to helvetica');
-                this._currentFontName = 'helvetica';
-                this._currentBoldFontName = 'helvetica';
             }
             const pageWidth = pdf.internal.pageSize.getWidth();
             const pageHeight = pdf.internal.pageSize.getHeight();
@@ -19969,37 +19976,25 @@ class IgxPdfExporterService extends IgxBaseExporter {
             // Draw multi-level headers if present
             // For pivot grids, always draw row dimension headers if they exist, even if there are no multi-column headers
             if (hasMultiColumnHeaders || (isPivotGrid && rowDimensionHeaders.length > 0)) {
-                yPosition = this.drawMultiLevelHeaders(pdf, allColumns, rowDimensionHeaders, maxLevel, maxRowLevel, margin, yPosition, columnWidth, headerHeight, usableWidth, options, allColumns);
+                yPosition = this.drawMultiLevelHeaders(pdf, allColumns, rowDimensionHeaders, maxLevel, maxRowLevel, margin, yPosition, columnWidth, headerHeight, usableWidth, options, fontNames);
             }
             else {
                 // Draw simple single-level headers
-                this.drawTableHeaders(pdf, leafColumns, rowDimensionHeaders, margin, yPosition, columnWidth, headerHeight, usableWidth, options);
+                this.drawTableHeaders(pdf, leafColumns, rowDimensionHeaders, margin, yPosition, columnWidth, headerHeight, usableWidth, options, fontNames);
                 yPosition += headerHeight;
             }
             // Draw data rows
-            pdf.setFont(this._currentFontName, 'normal');
+            pdf.setFont(fontNames.normal, 'normal');
             // Check if this is a tree grid export (tree grids can have both TreeGridRecord and DataRecord types for nested children)
             const isTreeGridExport = data.some(record => record.type === ExportRecordType.TreeGridRecord);
-            // For pivot grids, get row dimension columns to help with value lookup
-            const rowDimensionColumnsByLevel = new Map();
-            if (isPivotGrid && defaultOwner) {
-                const allRowDimCols = allColumns.filter(col => (col.headerType === ExportHeaderType.RowHeader ||
-                    col.headerType === ExportHeaderType.MultiRowHeader ||
-                    col.headerType === ExportHeaderType.PivotMergedHeader) &&
-                    !col.skip);
-                // Group by level
-                allRowDimCols.forEach(col => {
-                    const level = col.level ?? 0;
-                    if (!rowDimensionColumnsByLevel.has(level)) {
-                        rowDimensionColumnsByLevel.set(level, []);
-                    }
-                    rowDimensionColumnsByLevel.get(level).push(col);
-                });
-                // Sort each level by startIndex
-                rowDimensionColumnsByLevel.forEach((cols, _level) => {
-                    cols.sort((a, b) => (a.startIndex ?? 0) - (b.startIndex ?? 0));
-                });
-            }
+            // A row dimension value that repeats down consecutive records is drawn once, over
+            // all of them, the way the grid merges its own row headers - so the cells have to be
+            // measured against the records below before the first of them can be drawn.
+            const rowDimensionValues = this.resolveRowDimensionValues(data, rowDimensionColumnCount, rowDimensionFields, allColumns, isPivotGrid);
+            const rowDimensionRuns = this.measureRowDimensionRuns(data, rowDimensionValues, rowDimensionColumnCount);
+            // How many more records the cell opened above still covers, per dimension. A page
+            // break closes them all: the next page opens its own under the headers it redraws.
+            const openRowDimensionCells = new Array(rowDimensionColumnCount).fill(0);
             let i = 0;
             while (i < data.length) {
                 const record = data[i];
@@ -20012,12 +20007,13 @@ class IgxPdfExporterService extends IgxBaseExporter {
                 if (yPosition + rowHeight > pageHeight - margin) {
                     pdf.addPage();
                     yPosition = margin;
+                    openRowDimensionCells.fill(0);
                     // Redraw headers on new page
                     if (hasMultiColumnHeaders || hasMultiRowHeaders) {
-                        yPosition = this.drawMultiLevelHeaders(pdf, allColumns, rowDimensionHeaders, maxLevel, maxRowLevel, margin, yPosition, columnWidth, headerHeight, usableWidth, options, allColumns);
+                        yPosition = this.drawMultiLevelHeaders(pdf, allColumns, rowDimensionHeaders, maxLevel, maxRowLevel, margin, yPosition, columnWidth, headerHeight, usableWidth, options, fontNames);
                     }
                     else {
-                        this.drawTableHeaders(pdf, leafColumns, rowDimensionHeaders, margin, yPosition, columnWidth, headerHeight, usableWidth, options);
+                        this.drawTableHeaders(pdf, leafColumns, rowDimensionHeaders, margin, yPosition, columnWidth, headerHeight, usableWidth, options, fontNames);
                         yPosition += headerHeight;
                     }
                 }
@@ -20032,8 +20028,9 @@ class IgxPdfExporterService extends IgxBaseExporter {
                 // If this is a tree grid export and the record has a level property, use it for indentation
                 const indentLevel = (isTreeGridExport && record.level !== undefined) ? (record.level || 0) : 0;
                 const indent = indentLevel * indentSize;
+                const rowDimensionCells = this.takeRowDimensionCells(rowDimensionValues[i], rowDimensionRuns[i], openRowDimensionCells, Math.floor((pageHeight - margin - yPosition) / rowHeight));
                 // Draw parent row
-                this.drawDataRow(pdf, record, leafColumns, rowDimensionFields, margin, yPosition, columnWidth, rowHeight, indent, options, allColumns, isPivotGrid, rowDimensionColumnsByLevel, i, rowDimensionHeaders);
+                this.drawDataRow(pdf, record, leafColumns, rowDimensionCells, margin, yPosition, columnWidth, rowHeight, indent, options);
                 yPosition += rowHeight;
                 // For hierarchical grids, check if this record has child records
                 if (recordIsHierarchicalGrid) {
@@ -20060,7 +20057,7 @@ class IgxPdfExporterService extends IgxBaseExporter {
                         for (const [owner, directChildren] of directDescendantsByOwner) {
                             yPosition = this.drawHierarchicalChildren(pdf, data, allDescendants, // descendants WITH __index
                             directChildren, // direct children WITH __index
-                            owner, yPosition, margin, childTableIndent, usableWidth, pageHeight, headerHeight, rowHeight, options);
+                            owner, yPosition, margin, childTableIndent, usableWidth, pageHeight, headerHeight, rowHeight, options, fontNames);
                         }
                         i = j - 1;
                     }
@@ -20073,14 +20070,14 @@ class IgxPdfExporterService extends IgxBaseExporter {
             done();
         });
     }
-    drawMultiLevelHeaders(pdf, columns, rowDimensionHeaders, maxLevel, _maxRowLevel, xStart, yStart, baseColumnWidth, headerHeight, _tableWidth, options, allColumns) {
+    drawMultiLevelHeaders(pdf, columns, rowDimensionHeaders, maxLevel, _maxRowLevel, xStart, yStart, baseColumnWidth, headerHeight, _tableWidth, options, fontNames) {
         let yPosition = yStart;
-        pdf.setFont(this._currentBoldFontName, 'bold');
+        pdf.setFont(fontNames.bold, 'bold');
         // First, draw row dimension header labels (for pivot grids) if present
         // Draw headers if we have any row dimension headers, regardless of maxRowLevel
-        if (rowDimensionHeaders.length > 0 && allColumns) {
+        if (rowDimensionHeaders.length > 0) {
             // Get PivotRowHeader columns - these are the dimension header names
-            const pivotRowHeaderCols = allColumns.filter(col => col.headerType === ExportHeaderType.PivotRowHeader &&
+            const pivotRowHeaderCols = columns.filter(col => col.headerType === ExportHeaderType.PivotRowHeader &&
                 !col.skip).sort((a, b) => (a.startIndex ?? 0) - (b.startIndex ?? 0));
             // Calculate how many header rows the data columns have (cities + number/value = 2 rows)
             // The row dimension headers should span across all data column header rows
@@ -20092,15 +20089,13 @@ class IgxPdfExporterService extends IgxBaseExporter {
                 const headerText = pivotCol.header || pivotCol.field || rowDimensionHeaders[index] || '';
                 const width = baseColumnWidth;
                 const height = headerHeight * rowDimensionHeaderRowSpan;
-                // Skip if this is a merged/empty header that shouldn't be drawn
-                // PivotMergedHeader columns are typically placeholders and shouldn't be drawn separately
-                // Also skip if header text is empty and it's not a valid header
-                if ((pivotCol.headerType === ExportHeaderType.PivotMergedHeader && !headerText) ||
-                    (!headerText && !pivotCol.header && !pivotCol.field)) {
+                // Skip a placeholder header - one with no caption, no field and no dimension name
+                // to borrow, which is what leaves the text above empty
+                if (!headerText) {
                     return;
                 }
                 // Set fill color to light gray for header background (explicitly set before each cell)
-                pdf.setFillColor(240, 240, 240);
+                this.setShadedFill(pdf);
                 // Set stroke color to black for borders
                 pdf.setDrawColor(0, 0, 0);
                 if (options.showTableBorders) {
@@ -20133,32 +20128,6 @@ class IgxPdfExporterService extends IgxBaseExporter {
             // Don't move yPosition yet - data column headers will be drawn at the same yPosition
             // We'll move yPosition after drawing all header rows
         }
-        else if (rowDimensionHeaders.length > 0) {
-            // Fallback: draw simple headers without merging
-            rowDimensionHeaders.forEach((headerText, index) => {
-                const width = baseColumnWidth;
-                const height = headerHeight;
-                const xPosition = xStart + (index * baseColumnWidth);
-                if (options.showTableBorders) {
-                    pdf.rect(xPosition, yPosition, width, height, 'F');
-                    pdf.rect(xPosition, yPosition, width, height);
-                }
-                // Center text in cell
-                let displayText = headerText || '';
-                const maxTextWidth = width - 10;
-                if (pdf.getTextWidth(displayText) > maxTextWidth) {
-                    while (pdf.getTextWidth(displayText + '...') > maxTextWidth && displayText.length > 0) {
-                        displayText = displayText.substring(0, displayText.length - 1);
-                    }
-                    displayText += '...';
-                }
-                const textWidth = pdf.getTextWidth(displayText);
-                const textX = xPosition + (width - textWidth) / 2;
-                const textY = yPosition + height / 2 + options.fontSize / 3;
-                pdf.text(displayText, textX, textY);
-            });
-            yPosition += headerHeight;
-        }
         // Filter out row header types and GRID_LEVEL_COL from column rendering
         const columnHeaders = columns.filter(col => col.headerType !== ExportHeaderType.PivotRowHeader &&
             col.headerType !== ExportHeaderType.RowHeader &&
@@ -20173,13 +20142,25 @@ class IgxPdfExporterService extends IgxBaseExporter {
             .filter(col => col.headerType === ExportHeaderType.ColumnHeader && col.columnSpan > 0)
             .sort((a, b) => (a.startIndex ?? 0) - (b.startIndex ?? 0));
         leafHeaders.forEach((col, idx) => headerLayoutMap.set(col, idx));
+        // A column group owns its children through its `columnGroup` key, so a group without one
+        // has no children to look up - matching on it anyway would pair every column that has no
+        // parent with it, the group itself included. `resolving` catches the same cycle when it
+        // spans more than one group, so that a malformed column list costs a misplaced header
+        // rather than a stack overflow that takes the whole export down with it.
+        const resolving = new Set();
         const resolveLayoutStartIndex = (col) => {
             if (headerLayoutMap.has(col)) {
                 return headerLayoutMap.get(col);
             }
-            if (col.headerType === ExportHeaderType.MultiColumnHeader) {
-                const childColumns = columnHeaders.filter(child => child.columnGroupParent === col.columnGroup && child.columnSpan > 0);
+            const groupKey = col.columnGroup;
+            const ownsChildren = col.headerType === ExportHeaderType.MultiColumnHeader &&
+                groupKey !== undefined && groupKey !== null &&
+                !resolving.has(col);
+            if (ownsChildren) {
+                resolving.add(col);
+                const childColumns = columnHeaders.filter(child => child !== col && child.columnGroupParent === groupKey && child.columnSpan > 0);
                 const childIndices = childColumns.map(child => resolveLayoutStartIndex(child));
+                resolving.delete(col);
                 if (childIndices.length > 0) {
                     const minIndex = Math.min(...childIndices);
                     headerLayoutMap.set(col, minIndex);
@@ -20213,7 +20194,7 @@ class IgxPdfExporterService extends IgxBaseExporter {
                     1;
                 const height = headerHeight * rowSpan;
                 if (options.showTableBorders) {
-                    pdf.setFillColor(240, 240, 240);
+                    this.setShadedFill(pdf);
                     pdf.setDrawColor(0, 0, 0);
                     pdf.rect(xPosition, yPosition, width, height, 'F');
                     pdf.rect(xPosition, yPosition, width, height);
@@ -20237,19 +20218,19 @@ class IgxPdfExporterService extends IgxBaseExporter {
         }
         // After drawing all headers, move yPosition down by the total header height
         // For pivot grids with row dimension headers, this should be the max of row dimension header height and data column header height
-        if (rowDimensionHeaders.length > 0 && allColumns) {
+        if (rowDimensionHeaders.length > 0) {
             const dataColumnHeaderRows = maxLevel + 1;
             const rowDimensionHeaderRowSpan = Math.max(dataColumnHeaderRows, 1);
             const totalHeaderHeight = headerHeight * rowDimensionHeaderRowSpan;
             yPosition = yStart + totalHeaderHeight;
         }
-        pdf.setFont(this._currentFontName, 'normal');
+        pdf.setFont(fontNames.normal, 'normal');
         return yPosition;
     }
     drawHierarchicalChildren(pdf, allData, allDescendants, // All descendants to search for grandchildren
     childRecords, // Direct children to render at this level
     childOwner, // Owner is the island object, not a string
-    yPosition, margin, indentPerLevel, usableWidth, pageHeight, headerHeight, rowHeight, options) {
+    yPosition, margin, indentPerLevel, usableWidth, pageHeight, headerHeight, rowHeight, options, fontNames) {
         // Get columns for this child owner
         const childOwnerObj = this._ownersMap.get(childOwner);
         const allChildColumns = childOwnerObj?.columns.filter(col => col.field !== GRID_LEVEL_COL && !col.skip) || [];
@@ -20299,10 +20280,10 @@ class IgxPdfExporterService extends IgxBaseExporter {
         if (hasMultiColumnHeaders) {
             yPosition = this.drawMultiLevelHeaders(pdf, allChildColumns, [], // rowDimensionHeaders, if any
             maxLevel, 0, // maxRowLevel
-            childTableX, yPosition, childColumnWidth, headerHeight, actualChildTableWidth, options);
+            childTableX, yPosition, childColumnWidth, headerHeight, actualChildTableWidth, options, fontNames);
         }
         else {
-            this.drawTableHeaders(pdf, childColumns, [], childTableX, yPosition, childColumnWidth, headerHeight, actualChildTableWidth, options);
+            this.drawTableHeaders(pdf, childColumns, [], childTableX, yPosition, childColumnWidth, headerHeight, actualChildTableWidth, options, fontNames);
             yPosition += headerHeight;
         }
         // Find the minimum level in these records (direct children of parent)
@@ -20316,10 +20297,10 @@ class IgxPdfExporterService extends IgxBaseExporter {
                 yPosition = margin;
                 // Redraw headers on new page
                 if (hasMultiColumnHeaders) {
-                    yPosition = this.drawMultiLevelHeaders(pdf, allChildColumns, [], maxLevel, 0, childTableX, yPosition, childColumnWidth, headerHeight, actualChildTableWidth, options);
+                    yPosition = this.drawMultiLevelHeaders(pdf, allChildColumns, [], maxLevel, 0, childTableX, yPosition, childColumnWidth, headerHeight, actualChildTableWidth, options, fontNames);
                 }
                 else {
-                    this.drawTableHeaders(pdf, childColumns, [], childTableX, yPosition, childColumnWidth, headerHeight, actualChildTableWidth, options);
+                    this.drawTableHeaders(pdf, childColumns, [], childTableX, yPosition, childColumnWidth, headerHeight, actualChildTableWidth, options, fontNames);
                     yPosition += headerHeight;
                 }
             }
@@ -20358,7 +20339,7 @@ class IgxPdfExporterService extends IgxBaseExporter {
                             }
                             for (const [gcOwner, directGrandchildren] of grandchildrenByOwner) {
                                 yPosition = this.drawHierarchicalChildren(pdf, allData, subtree, // only this child's subtree for deeper levels
-                                directGrandchildren, gcOwner, yPosition, margin, indentPerLevel + 20, usableWidth, pageHeight, headerHeight, rowHeight, options);
+                                directGrandchildren, gcOwner, yPosition, margin, indentPerLevel + 20, usableWidth, pageHeight, headerHeight, rowHeight, options, fontNames);
                             }
                         }
                     }
@@ -20369,9 +20350,9 @@ class IgxPdfExporterService extends IgxBaseExporter {
         yPosition += 5;
         return yPosition;
     }
-    drawTableHeaders(pdf, columns, rowDimensionHeaders, xStart, yPosition, columnWidth, headerHeight, tableWidth, options) {
-        pdf.setFont(this._currentBoldFontName, 'bold');
-        pdf.setFillColor(240, 240, 240);
+    drawTableHeaders(pdf, columns, rowDimensionHeaders, xStart, yPosition, columnWidth, headerHeight, tableWidth, options, fontNames) {
+        pdf.setFont(fontNames.bold, 'bold');
+        this.setShadedFill(pdf);
         if (options.showTableBorders) {
             pdf.rect(xStart, yPosition, tableWidth, headerHeight, 'F');
         }
@@ -20397,12 +20378,8 @@ class IgxPdfExporterService extends IgxBaseExporter {
             pdf.text(displayText, textX, textY);
         });
         const rowDimensionOffset = rowDimensionHeaders.length * columnWidth;
-        // Draw data column headers
+        // Draw data column headers - GRID_LEVEL_COL is already out of the list by now
         columns.forEach((col, index) => {
-            // Skip GRID_LEVEL_COL - it shouldn't be rendered
-            if (col.field === GRID_LEVEL_COL) {
-                return;
-            }
             const xPosition = xStart + rowDimensionOffset + (index * columnWidth);
             let headerText = col.header || col.field;
             if (options.showTableBorders) {
@@ -20422,152 +20399,41 @@ class IgxPdfExporterService extends IgxBaseExporter {
             const textY = yPosition + headerHeight / 2 + options.fontSize / 3;
             pdf.text(headerText, textX, textY);
         });
-        pdf.setFont(this._currentFontName, 'normal');
+        pdf.setFont(fontNames.normal, 'normal');
     }
-    drawDataRow(pdf, record, columns, rowDimensionFields, xStart, yPosition, columnWidth, rowHeight, indent, options, allColumns, isPivotGrid, _rowDimensionColumnsByLevel, recordIndex, rowDimensionHeaders) {
+    drawDataRow(pdf, record, columns, rowDimensionCells, xStart, yPosition, columnWidth, rowHeight, indent, options) {
         const isSummaryRecord = record.type === 'SummaryRecord';
-        // Draw row dimension cells first (for pivot grids)
-        // For pivot grids, the row dimension columns have 'header' property that contains the actual dimension values
-        // Use the maximum of fields and headers to ensure we draw all columns
-        const maxRowDimCols = Math.max(rowDimensionFields.length, rowDimensionHeaders?.length || 0);
-        for (let index = 0; index < maxRowDimCols; index++) {
-            const xPosition = xStart + (index * columnWidth);
-            let cellValue = null;
-            // Primary approach: Get the value from row dimension columns' header property
-            // The row dimension columns are created with header = actual dimension value to display
-            if (isPivotGrid && allColumns) {
-                // Get all row dimension columns sorted by level and startIndex
-                const allRowDimCols = allColumns.filter(col => (col.headerType === ExportHeaderType.RowHeader ||
-                    col.headerType === ExportHeaderType.MultiRowHeader ||
-                    col.headerType === ExportHeaderType.PivotMergedHeader) &&
-                    !col.skip).sort((a, b) => {
-                    const levelDiff = (a.level ?? 0) - (b.level ?? 0);
-                    if (levelDiff !== 0)
-                        return levelDiff;
-                    return (a.startIndex ?? 0) - (b.startIndex ?? 0);
-                });
-                // For hierarchical dimensions, match columns by level
-                // The index corresponds to the dimension level (0 = first dimension, 1 = second, etc.)
-                const colsForLevel = allRowDimCols.filter(col => (col.level ?? 0) === index);
-                // The row dimension columns are created in the same order as records appear
-                // We can use the record index to find the corresponding column
-                // However, for hierarchical dimensions, we need to account for row spans
-                if (colsForLevel.length > 0) {
-                    // Try to find the column that matches this record
-                    // First, try matching by checking if column field/header matches record data
-                    let matchedCol = null;
-                    if (record.data) {
-                        for (const col of colsForLevel) {
-                            const colField = typeof col.field === 'string' ? col.field : null;
-                            const colHeader = typeof col.header === 'string' ? col.header : null;
-                            // Check if column field exists as a key in record data
-                            if (colField && record.data[colField] !== undefined) {
-                                matchedCol = col;
-                                break;
-                            }
-                            // Check if column header matches a value in record data
-                            if (colHeader) {
-                                const recordValues = Object.values(record.data).map(v => String(v));
-                                if (recordValues.includes(colHeader)) {
-                                    matchedCol = col;
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                    // If no match found, try to use record index to select column
-                    // This works because columns are created in the same order as records
-                    if (!matchedCol && recordIndex !== undefined) {
-                        // For hierarchical dimensions with row spans, we need to account for that
-                        // For now, use a simple index-based approach
-                        const colIndex = Math.min(recordIndex, colsForLevel.length - 1);
-                        matchedCol = colsForLevel[colIndex];
-                    }
-                    // If still no match, use the first column at this level
-                    if (!matchedCol && colsForLevel.length > 0) {
-                        matchedCol = colsForLevel[0];
-                    }
-                    // Use the header property - it contains the actual dimension value to display
-                    if (matchedCol) {
-                        if (matchedCol.header && typeof matchedCol.header === 'string') {
-                            cellValue = matchedCol.header;
-                        }
-                        else if (matchedCol.field && typeof matchedCol.field === 'string') {
-                            cellValue = matchedCol.field;
-                        }
-                    }
-                }
-            }
-            // Fallback: Try to get value using dimensionKeys (member names as keys in record.data)
-            if ((cellValue === null || cellValue === undefined) && record.data) {
-                const fieldName = rowDimensionFields[index];
-                if (fieldName) {
-                    cellValue = record.data[fieldName];
-                }
-            }
-            // Last resort: Try to find it by checking all keys in record data
-            if ((cellValue === null || cellValue === undefined) && record.data) {
-                const recordKeys = Object.keys(record.data);
-                const fieldName = rowDimensionFields[index];
-                // If we have a fieldName, try exact and fuzzy matching
-                if (fieldName) {
-                    const matchingKey = recordKeys.find(key => key.toLowerCase() === fieldName.toLowerCase() ||
-                        key === fieldName ||
-                        fieldName.toLowerCase().includes(key.toLowerCase()) ||
-                        key.toLowerCase().includes(fieldName.toLowerCase()));
-                    if (matchingKey) {
-                        cellValue = record.data[matchingKey];
-                    }
-                }
-                // For hierarchical dimensions, try using dimension keys by index
-                if ((cellValue === null || cellValue === undefined) && isPivotGrid && recordKeys.length > 0) {
-                    const possibleDimKeys = recordKeys.filter(key => {
-                        return !key.includes('-') && !key.includes('_') &&
-                            key === key.trim() &&
-                            key.length < 50;
-                    });
-                    if (possibleDimKeys.length > index) {
-                        cellValue = record.data[possibleDimKeys[index]];
-                    }
-                    else if (possibleDimKeys.length > 0) {
-                        cellValue = record.data[possibleDimKeys[0]];
-                    }
-                }
-            }
-            // Convert value to string
-            if (cellValue === null || cellValue === undefined) {
-                cellValue = '';
-            }
-            else if (cellValue instanceof Date) {
-                cellValue = cellValue.toLocaleDateString();
-            }
-            else {
-                cellValue = String(cellValue);
+        // Draw the row dimension cells first (for pivot grids). Which of them this record
+        // opens, and how far down the page each one reaches, is worked out by the caller.
+        rowDimensionCells.forEach((cell, index) => {
+            if (cell.rowSpan < 1) {
+                // The cell of a record above covers this one.
+                return;
             }
+            const xPosition = xStart + (index * columnWidth);
+            const height = rowHeight * cell.rowSpan;
             if (options.showTableBorders) {
-                pdf.setFillColor(255, 255, 255);
-                pdf.setDrawColor(0, 0, 0);
-                pdf.rect(xPosition, yPosition, columnWidth, rowHeight);
+                // A row dimension cell heads its record the way the column headers head the
+                // columns, so it is shaded rather than left to read as one of the values.
+                this.drawBodyCell(pdf, xPosition, yPosition, columnWidth, height, true);
             }
             // Truncate text if it's too long
             const maxTextWidth = columnWidth - 10;
-            let displayText = cellValue;
+            let displayText = cell.text;
             if (pdf.getTextWidth(displayText) > maxTextWidth) {
                 while (pdf.getTextWidth(displayText + '...') > maxTextWidth && displayText.length > 0) {
                     displayText = displayText.substring(0, displayText.length - 1);
                 }
                 displayText += '...';
             }
-            const textY = yPosition + rowHeight / 2 + options.fontSize / 3;
+            // A merged cell carries its value down the middle of the records it covers, the
+            // way the grid centres a row header over the rows it spans.
+            const textY = yPosition + (height / 2) + options.fontSize / 3;
             pdf.text(displayText, xPosition + 5, textY);
-        }
-        const rowDimensionOffset = maxRowDimCols * columnWidth;
-        // Draw data columns
+        });
+        const rowDimensionOffset = rowDimensionCells.length * columnWidth;
+        // Draw data columns - GRID_LEVEL_COL is already out of the list by now
         columns.forEach((col, index) => {
-            // Skip GRID_LEVEL_COL - it's an internal column
-            if (col.field === GRID_LEVEL_COL) {
-                return;
-            }
             const xPosition = xStart + rowDimensionOffset + (index * columnWidth);
             let cellValue = record.data[col.field];
             // Handle summary records - cellValue is an IgxSummaryResult object
@@ -20605,9 +20471,7 @@ class IgxPdfExporterService extends IgxBaseExporter {
                 cellValue = String(cellValue);
             }
             if (options.showTableBorders) {
-                pdf.setFillColor(255, 255, 255);
-                pdf.setDrawColor(0, 0, 0);
-                pdf.rect(xPosition, yPosition, columnWidth, rowHeight);
+                this.drawBodyCell(pdf, xPosition, yPosition, columnWidth, rowHeight, isSummaryRecord);
             }
             // Apply indentation to the first column for hierarchical data
             const textIndent = (index === 0) ? indent : 0;
@@ -20624,14 +20488,226 @@ class IgxPdfExporterService extends IgxBaseExporter {
             pdf.text(displayText, xPosition + 5 + textIndent, textY);
         });
     }
+    /**
+     * The value every record holds for each of its row dimensions, worked out once up front so
+     * that the merging below can look down the page without searching the columns again for
+     * every row it passes.
+     */
+    resolveRowDimensionValues(data, columnCount, rowDimensionFields, allColumns, isPivotGrid) {
+        return data.map((record, index) => Array.from({ length: columnCount }, (_, level) => this.resolveRowDimensionValue(record, level, rowDimensionFields, allColumns, isPivotGrid, index)));
+    }
+    /**
+     * How many records from each one on carry the same row dimension value, level by level -
+     * the run the grid shows as a single, merged row header cell. A value only continues a run
+     * when the dimensions above it match too, so a date that repeats under two different cities
+     * stays two cells. A blank value is left on its own: it is what the export falls back to
+     * when it cannot work a dimension out, and merging blanks would take the row lines of the
+     * dimension column with them.
+     */
+    measureRowDimensionRuns(data, values, columnCount) {
+        const runs = data.map(() => new Array(columnCount).fill(1));
+        let next = -1;
+        for (let index = data.length - 1; index >= 0; index--) {
+            if (data[index].hidden) {
+                continue;
+            }
+            for (let level = 0; level < columnCount; level++) {
+                const continued = next !== -1 && values[index][level] !== '' &&
+                    values[index].slice(0, level + 1).every((value, above) => value === values[next][above]);
+                runs[index][level] = continued ? runs[next][level] + 1 : 1;
+            }
+            next = index;
+        }
+        return runs;
+    }
+    /**
+     * Opens the row dimension cells of a record. One that a record above already covers comes
+     * back with no span at all, and one that would reach past the bottom of the page is cut off
+     * there - the next page opens it again, under its own redrawn headers.
+     */
+    takeRowDimensionCells(values, runs, openCells, rowsLeftOnPage) {
+        return values.map((text, level) => {
+            if (openCells[level] > 0) {
+                openCells[level]--;
+                return { text, rowSpan: 0 };
+            }
+            const rowSpan = Math.max(1, Math.min(runs[level], rowsLeftOnPage));
+            openCells[level] = rowSpan - 1;
+            return { text, rowSpan };
+        });
+    }
+    /**
+     * The value a pivot record holds for one of its row dimensions: read off the record where it
+     * carries the dimension itself, and worked out from the row header columns by position where
+     * it does not.
+     */
+    resolveRowDimensionValue(record, level, rowDimensionFields, allColumns, isPivotGrid, recordIndex) {
+        let cellValue = null;
+        // Primary source: the record as it was before the base exporter reduced it to the
+        // owner's data columns. It is kept whenever the owner has row headers - that is,
+        // for every pivot grid - and holds each dimension's value under the dimension's own
+        // name, which is what the CSV exporter reads as well. Everything below it has to
+        // work the value out from the columns instead, and can only do so by position.
+        const dimensionKey = rowDimensionFields[level];
+        if (isPivotGrid && dimensionKey && record.rawData?.[dimensionKey] !== undefined) {
+            cellValue = record.rawData[dimensionKey];
+        }
+        // Otherwise: get the value from row dimension columns' header property
+        // The row dimension columns are created with header = actual dimension value to display
+        if (cellValue === null && isPivotGrid && allColumns) {
+            // Get all row dimension columns sorted by level and startIndex
+            const allRowDimCols = allColumns.filter(col => (col.headerType === ExportHeaderType.RowHeader ||
+                col.headerType === ExportHeaderType.MultiRowHeader ||
+                col.headerType === ExportHeaderType.PivotMergedHeader) &&
+                !col.skip).sort((a, b) => {
+                const levelDiff = (a.level ?? 0) - (b.level ?? 0);
+                if (levelDiff !== 0)
+                    return levelDiff;
+                return (a.startIndex ?? 0) - (b.startIndex ?? 0);
+            });
+            // For hierarchical dimensions, match columns by level
+            // The level is the dimension level (0 = first dimension, 1 = second, etc.)
+            const colsForLevel = allRowDimCols.filter(col => (col.level ?? 0) === level);
+            // The row dimension columns are created in the same order as records appear
+            // We can use the record index to find the corresponding column
+            // However, for hierarchical dimensions, we need to account for row spans
+            if (colsForLevel.length > 0) {
+                // Try to find the column that matches this record
+                // First, try matching by checking if column field/header matches record data
+                let matchedCol = null;
+                if (record.data) {
+                    for (const col of colsForLevel) {
+                        const colField = typeof col.field === 'string' ? col.field : null;
+                        const colHeader = typeof col.header === 'string' ? col.header : null;
+                        // The record carries the dimension under the field the column names, so
+                        // its own value is the one to draw. Taking the column's caption instead
+                        // would label every record with the caption of the first column of the
+                        // level: they all name the same field, so the first of them matches every
+                        // record that has it, and three products would come out as three of the
+                        // first one.
+                        if (colField && record.data[colField] !== undefined) {
+                            cellValue = record.data[colField];
+                            break;
+                        }
+                        // Check if column header matches a value in record data
+                        if (colHeader) {
+                            const recordValues = Object.values(record.data).map(v => String(v));
+                            if (recordValues.includes(colHeader)) {
+                                matchedCol = col;
+                                break;
+                            }
+                        }
+                    }
+                }
+                // If no match found, fall back on the record index to select a column. This
+                // works because columns are created in the same order as records, and always
+                // lands on one, so nothing below has to cope with there still being no match.
+                if (cellValue === null && !matchedCol && recordIndex !== undefined) {
+                    // For hierarchical dimensions with row spans, we need to account for that
+                    // For now, use a simple index-based approach
+                    const colIndex = Math.min(recordIndex, colsForLevel.length - 1);
+                    matchedCol = colsForLevel[colIndex];
+                }
+                // Use the header property - it contains the actual dimension value to display
+                if (matchedCol) {
+                    if (matchedCol.header && typeof matchedCol.header === 'string') {
+                        cellValue = matchedCol.header;
+                    }
+                    else if (matchedCol.field && typeof matchedCol.field === 'string') {
+                        cellValue = matchedCol.field;
+                    }
+                }
+            }
+        }
+        // Fallback: Try to get value using dimensionKeys (member names as keys in record.data)
+        if ((cellValue === null || cellValue === undefined) && record.data) {
+            const fieldName = rowDimensionFields[level];
+            if (fieldName) {
+                cellValue = record.data[fieldName];
+            }
+        }
+        // Last resort: Try to find it by checking all keys in record data
+        if ((cellValue === null || cellValue === undefined) && record.data) {
+            const recordKeys = Object.keys(record.data);
+            const fieldName = rowDimensionFields[level];
+            // If we have a fieldName, try exact and fuzzy matching
+            if (fieldName) {
+                const matchingKey = recordKeys.find(key => key.toLowerCase() === fieldName.toLowerCase() ||
+                    key === fieldName ||
+                    fieldName.toLowerCase().includes(key.toLowerCase()) ||
+                    key.toLowerCase().includes(fieldName.toLowerCase()));
+                if (matchingKey) {
+                    cellValue = record.data[matchingKey];
+                }
+            }
+            // For hierarchical dimensions, try using dimension keys by level
+            if ((cellValue === null || cellValue === undefined) && isPivotGrid && recordKeys.length > 0) {
+                const possibleDimKeys = recordKeys.filter(key => {
+                    return !key.includes('-') && !key.includes('_') &&
+                        key === key.trim() &&
+                        key.length < 50;
+                });
+                if (possibleDimKeys.length > level) {
+                    cellValue = record.data[possibleDimKeys[level]];
+                }
+                else if (possibleDimKeys.length > 0) {
+                    cellValue = record.data[possibleDimKeys[0]];
+                }
+            }
+        }
+        // Convert value to string
+        if (cellValue === null || cellValue === undefined) {
+            cellValue = '';
+        }
+        else if (cellValue instanceof Date) {
+            cellValue = cellValue.toLocaleDateString();
+        }
+        else {
+            cellValue = String(cellValue);
+        }
+        return cellValue;
+    }
+    /**
+     * Selects the shade a header cell is filled with. Every cell that heads rather than holds
+     * data takes the same one: a summary row, which closes the rows above it the way the header
+     * opens them, and a pivot grid's row dimension cells, which head the record they sit on.
+     */
+    setShadedFill(pdf) {
+        pdf.setFillColor(240, 240, 240);
+    }
+    /**
+     * Draws the border of a cell below the header row, together with the shaded background that
+     * goes with it when the cell heads its row rather than holding one of its values.
+     */
+    drawBodyCell(pdf, x, y, width, height, shaded) {
+        pdf.setDrawColor(0, 0, 0);
+        if (shaded) {
+            this.setShadedFill(pdf);
+            pdf.rect(x, y, width, height, 'F');
+        }
+        else {
+            pdf.setFillColor(255, 255, 255);
+        }
+        pdf.rect(x, y, width, height);
+    }
+    /**
+     * Selects a font and measures a character with it, so that a font file jsPDF could not read
+     * throws here instead of part way through drawing the table. Both steps are needed: selecting
+     * a font is enough for a name that was never registered, and measuring is what reaches the
+     * glyph data an unreadable file leaves missing.
+     */
+    verifyFont(pdf, fontName, fontStyle) {
+        pdf.setFont(fontName, fontStyle);
+        pdf.getTextWidth('0');
+    }
     saveFile(pdf, fileName) {
         const blob = pdf.output('blob');
         ExportUtilities.saveBlobToFile(blob, fileName);
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPdfExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPdfExporterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPdfExporterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPdfExporterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -20730,10 +20806,10 @@ class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
         });
         exporter.export(this.grid, options);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridToolbarExporterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridToolbarExporterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -20774,10 +20850,10 @@ class IgxGridToolbarHidingComponent extends BaseToolbarColumnActionsDirective {
     set content(content) {
         this.columnActionsUI = content;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridToolbarHidingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridToolbarHidingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -20806,10 +20882,10 @@ class IgxGridToolbarPinningComponent extends BaseToolbarColumnActionsDirective {
     set content(content) {
         this.columnActionsUI = content;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridToolbarPinningComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridToolbarPinningComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -20843,10 +20919,10 @@ class IgxRowEditTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowEditTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxRowEditTemplateDirective, isStandalone: true, selector: "[igxRowEdit]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowEditTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowEditTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowEdit]',
@@ -20859,10 +20935,10 @@ class IgxRowEditTextDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowEditTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxRowEditTextDirective, isStandalone: true, selector: "[igxRowEditText]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowEditTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowEditTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowEditText]',
@@ -20875,10 +20951,10 @@ class IgxRowAddTextDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowAddTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxRowAddTextDirective, isStandalone: true, selector: "[igxRowAddText]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowAddTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowAddTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowAddText]',
@@ -20891,10 +20967,10 @@ class IgxRowEditActionsDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowEditActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxRowEditActionsDirective, isStandalone: true, selector: "[igxRowEditActions]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRowEditActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowEditActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowEditActions]',
@@ -20940,10 +21016,10 @@ class IgxRowEditTabStopDirective {
             });
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowEditTabStopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxRowEditTabStopDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRowEditTabStopDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[igxRowEditTabStop]`,
@@ -21340,10 +21416,10 @@ class 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridSummaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridSummaryService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridSummaryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridSummaryService, decorators: [{
             type: Injectable
         }] });
 
@@ -21440,10 +21516,10 @@ class IgxSummaryCellComponent {
         }
         return summary.summaryResult;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSummaryCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxSummaryCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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(--_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: [{
@@ -21559,10 +21635,10 @@ class IgxSummaryRowComponent {
             columns: cols
         };
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSummaryRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxSummaryRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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(--_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: [{
@@ -21593,10 +21669,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSummaryDataPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxSummaryDataPipe, isStandalone: true, name: "igxGridSummaryDataPipe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxSummaryDataPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxSummaryDataPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGridSummaryDataPipe',
@@ -21681,10 +21757,10 @@ class IgxColumnResizerDirective {
         event.preventDefault();
         this.resize.next(event);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnResizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxColumnResizerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxColumnResizerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxResizer]',
@@ -21708,10 +21784,10 @@ class IgxGridColumnResizerComponent {
     constructor() {
         this.colResizingService = inject(IgxColumnResizingService);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridColumnResizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridColumnResizerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -21752,10 +21828,10 @@ class IgxPivotColumnResizingService extends IgxColumnResizingService {
         this.rowHeaderGroup.grid.resizeRowDimensionPixels(rowDim, newWidth);
     }
     _handlePercentageResize() { }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPivotColumnResizingService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPivotColumnResizingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPivotColumnResizingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPivotColumnResizingService, decorators: [{
             type: Injectable
         }] });
 
@@ -21792,10 +21868,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPivotResizeHandleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxPivotResizeHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPivotResizeHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxPivotResizeHandle]',
@@ -21814,10 +21890,10 @@ class IgxPivotGridColumnResizerComponent extends IgxGridColumnResizerComponent {
         super(...arguments);
         this.colResizingService = inject(IgxPivotColumnResizingService);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPivotGridColumnResizerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxPivotGridColumnResizerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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" }]
         }] });
@@ -22625,10 +22701,10 @@ class IgxGridNavigationService {
     isAddKey(key) {
         return ROW_ADD_KEYS.has(key);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridNavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridNavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -22831,18 +22907,18 @@ class IgxGridValidationService {
         }
         this.updateStatus();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridValidationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridValidationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridValidationService, decorators: [{
             type: Injectable
         }] });
 
 class IgxGridBodyDirective {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxGridBodyDirective, isStandalone: true, selector: "[igxGridBody]", providers: [IgxForOfSyncService], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridBodyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridBodyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridBody]',
@@ -23855,10 +23931,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxGridCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-cell', imports: [
                         NgClass,
@@ -24358,10 +24434,10 @@ class IgxGridMRLNavigationService extends IgxGridNavigationService {
         }
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridMRLNavigationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridMRLNavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridMRLNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGridMRLNavigationService, decorators: [{
             type: Injectable
         }] });
 
@@ -24918,10 +24994,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: GridBaseAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: GridBaseAPIService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridBaseAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: GridBaseAPIService, decorators: [{
             type: Injectable
         }] });