igniteui-angular 17.0.5-beta.0 → 17.0.6

package/esm2022/lib/grids/grid.rowEdit.directive.mjs

@@ -6,10 +6,10 @@ export class IgxRowEditTemplateDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxRowEditTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: IgxRowEditTemplateDirective, isStandalone: true, selector: "[igxRowEdit]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxRowEditTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxRowEditTemplateDirective, isStandalone: true, selector: "[igxRowEdit]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxRowEditTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxRowEditTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowEdit]',
@@ -21,10 +21,10 @@ export class IgxRowEditTextDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxRowEditTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: IgxRowEditTextDirective, isStandalone: true, selector: "[igxRowEditText]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxRowEditTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxRowEditTextDirective, isStandalone: true, selector: "[igxRowEditText]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxRowEditTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxRowEditTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowEditText]',
@@ -36,10 +36,10 @@ export class IgxRowAddTextDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxRowAddTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: IgxRowAddTextDirective, isStandalone: true, selector: "[igxRowAddText]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxRowAddTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxRowAddTextDirective, isStandalone: true, selector: "[igxRowAddText]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxRowAddTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxRowAddTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowAddText]',
@@ -51,10 +51,10 @@ export class IgxRowEditActionsDirective {
     static ngTemplateContextGuard(_directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxRowEditActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: IgxRowEditActionsDirective, isStandalone: true, selector: "[igxRowEditActions]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxRowEditActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxRowEditActionsDirective, isStandalone: true, selector: "[igxRowEditActions]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxRowEditActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxRowEditActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowEditActions]',
@@ -98,10 +98,10 @@ export class IgxRowEditTabStopDirective {
             this.grid.cdr.detectChanges();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxRowEditTabStopDirective, deps: [{ token: IGX_GRID_BASE }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", 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: "17.0.5", ngImport: i0, type: IgxRowEditTabStopDirective, deps: [{ token: IGX_GRID_BASE }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", 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: "17.0.3", ngImport: i0, type: IgxRowEditTabStopDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxRowEditTabStopDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[igxRowEditTabStop]`,

package/esm2022/lib/grids/grouping/grid-group-by-area.component.mjs

@@ -38,10 +38,10 @@ export class IgxGridGroupByAreaComponent extends IgxGroupByAreaDirective {
     clearGrouping(name) {
         this.grid.clearGrouping(name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxGridGroupByAreaComponent, deps: [{ token: i0.ElementRef }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: IgxGridGroupByAreaComponent, isStandalone: true, selector: "igx-grid-group-by-area", inputs: { sortingExpressions: "sortingExpressions", grid: "grid" }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid).title\"\n            [displayDensity]=\"grid.displayDensity\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>\n            <igx-icon igxSuffix>{{ expression.dir === 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon [hidden]=\"(last && !dropAreaVisible)\">arrow_forward</igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon class=\"igx-drop-area__icon\">group_work</igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGridGroupByAreaComponent, deps: [{ token: i0.ElementRef }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxGridGroupByAreaComponent, isStandalone: true, selector: "igx-grid-group-by-area", inputs: { sortingExpressions: "sortingExpressions", grid: "grid" }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid).title\"\n            [displayDensity]=\"grid.displayDensity\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>\n            <igx-icon igxSuffix>{{ expression.dir === 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon [hidden]=\"(last && !dropAreaVisible)\">arrow_forward</igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon class=\"igx-drop-area__icon\">group_work</igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxGridGroupByAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGridGroupByAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-group-by-area', providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], standalone: true, imports: [IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe], template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid).title\"\n            [displayDensity]=\"grid.displayDensity\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>\n            <igx-icon igxSuffix>{{ expression.dir === 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon [hidden]=\"(last && !dropAreaVisible)\">arrow_forward</igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon class=\"igx-drop-area__icon\">group_work</igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.PlatformUtil }], propDecorators: { sortingExpressions: [{

package/esm2022/lib/grids/grouping/group-by-area.directive.mjs

@@ -102,10 +102,10 @@ export class IgxGroupByAreaDirective {
     }
     expressionsChanged() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxGroupByAreaDirective, deps: [{ token: i0.ElementRef }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: IgxGroupByAreaDirective, inputs: { dropAreaTemplate: "dropAreaTemplate", density: "density", grid: "grid", expressions: "expressions", dropAreaMessage: "dropAreaMessage" }, outputs: { expressionsChange: "expressionsChange" }, host: { properties: { "class.igx-grid-grouparea": "this.defaultClass" } }, viewQueries: [{ propertyName: "chips", predicate: IgxChipComponent, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGroupByAreaDirective, deps: [{ token: i0.ElementRef }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxGroupByAreaDirective, inputs: { dropAreaTemplate: "dropAreaTemplate", density: "density", grid: "grid", expressions: "expressions", dropAreaMessage: "dropAreaMessage" }, outputs: { expressionsChange: "expressionsChange" }, host: { properties: { "class.igx-grid-grouparea": "this.defaultClass" } }, viewQueries: [{ propertyName: "chips", predicate: IgxChipComponent, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxGroupByAreaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGroupByAreaDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.PlatformUtil }], propDecorators: { dropAreaTemplate: [{
                 type: Input
@@ -138,10 +138,10 @@ export 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: "17.0.3", ngImport: i0, type: IgxGroupByMetaPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: IgxGroupByMetaPipe, isStandalone: true, name: "igxGroupByMeta" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGroupByMetaPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: IgxGroupByMetaPipe, isStandalone: true, name: "igxGroupByMeta" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxGroupByMetaPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGroupByMetaPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxGroupByMeta',

package/esm2022/lib/grids/grouping/tree-grid-group-by-area.component.mjs

@@ -106,10 +106,10 @@ export class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxTreeGridGroupByAreaComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ElementRef }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.3", type: IgxTreeGridGroupByAreaComponent, isStandalone: true, selector: "igx-tree-grid-group-by-area", inputs: { hideGroupedColumns: ["hideGroupedColumns", "hideGroupedColumns", booleanAttribute] }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxTreeGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid).title\"\n            [displayDensity]=\"grid.displayDensity\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>\n            <igx-icon igxSuffix>{{ expression.dir === 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon [hidden]=\"(last && !dropAreaVisible)\">arrow_forward</igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon class=\"igx-drop-area__icon\">group_work</igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxTreeGridGroupByAreaComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ElementRef }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.5", type: IgxTreeGridGroupByAreaComponent, isStandalone: true, selector: "igx-tree-grid-group-by-area", inputs: { hideGroupedColumns: ["hideGroupedColumns", "hideGroupedColumns", booleanAttribute] }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxTreeGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid).title\"\n            [displayDensity]=\"grid.displayDensity\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>\n            <igx-icon igxSuffix>{{ expression.dir === 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon [hidden]=\"(last && !dropAreaVisible)\">arrow_forward</igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon class=\"igx-drop-area__icon\">group_work</igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxTreeGridGroupByAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxTreeGridGroupByAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-tree-grid-group-by-area', providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxTreeGridGroupByAreaComponent }], standalone: true, imports: [IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe], template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid).title\"\n            [displayDensity]=\"grid.displayDensity\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>\n            <igx-icon igxSuffix>{{ expression.dir === 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon [hidden]=\"(last && !dropAreaVisible)\">arrow_forward</igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon class=\"igx-drop-area__icon\">group_work</igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.IterableDiffers }, { type: i0.ElementRef }, { type: i1.PlatformUtil }], propDecorators: { hideGroupedColumns: [{

package/esm2022/lib/grids/headers/grid-header-group.component.mjs

@@ -256,10 +256,10 @@ export class IgxGridHeaderGroupComponent {
             } : null
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxGridHeaderGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: i1.IgxColumnResizingService }, { token: i2.IgxFilteringService }, { token: i3.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", 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", "attr.id": "this.headerID", "class.igx-grid-th--active": "this.active", "class.igx-grid-thead__item": "this.defaultCss", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS", "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: "<ng-container *ngIf=\"grid.hasColumnLayouts && column.columnGroup\">\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\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        <ng-container *ngFor=\"let child of column.children\" >\n            <igx-grid-header-group *ngIf=\"!child.hidden\" class=\"igx-grid-thead__subgroup\"\n                [ngClass]=\"child.headerGroupClasses\"\n                [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                [column]=\"child\"\n                [igxColumnMovingDrag]=\"child\"\n                [ghostHost]=\"grid.outlet.nativeElement\"\n                [attr.droppable]=\"true\"\n                [igxColumnMovingDrop]=\"child\">\n            </igx-grid-header-group>\n        </ng-container>\n    </div>\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\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>{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>\n</ng-template>\n\n<ng-container *ngIf=\"!grid.hasColumnLayouts && column.columnGroup\">\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n    <div class=\"igx-grid-thead__title\"\n        role=\"columnheader\"\n        [attr.aria-label]=\"column.header || column.field\"\n        [attr.aria-expanded]=\"column.expanded\"\n        [attr.aria-selected]=\"column.selected\"\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        >\n        <ng-container *ngIf=\"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        </ng-container>\n        <ng-container *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n        </ng-container>\n    </div>\n    <div class=\"igx-grid-thead__group\" *ngIf='!grid.isPivot'>\n        <ng-container *ngFor=\"let child of column.children\">\n            <igx-grid-header-group *ngIf=\"!child.hidden\" class=\"igx-grid-thead__subgroup\"\n                [ngClass]=\"child.headerGroupClasses\"\n                [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                [column]=\"child\"\n                [style.min-width]=\"child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\"\n                [style.flex-basis]=\"child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\">\n            </igx-grid-header-group>\n        </ng-container>\n    </div>\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n\n<ng-container *ngIf=\"!column.columnGroup\">\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n    <igx-grid-header\n        role=\"columnheader\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"grid.id + '_' + column.field\"\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        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        [density]=\"grid.displayDensity\"\n    >\n    </igx-grid-header>\n    <igx-grid-filtering-cell *ngIf=\"grid.allowFiltering && grid.filterMode === 'quickFilter'\" [column]=\"column\" [attr.draggable]=\"false\"></igx-grid-filtering-cell>\n    <span *ngIf=\"!column.columnGroup && column.resizable\" class=\"igx-grid-th__resize-handle\"\n        [igxResizeHandle]=\"column\"\n        [attr.draggable]=\"false\"\n        [style.cursor]=\"colResizingService.resizeCursor\">\n    </span>\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n", dependencies: [{ kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxColumnMovingDragDirective, selector: "[igxColumnMovingDrag]", inputs: ["igxColumnMovingDrag"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderComponent, selector: "igx-grid-header", inputs: ["column", "density"] }, { kind: "component", type: IgxGridFilteringCellComponent, selector: "igx-grid-filtering-cell", inputs: ["column"] }, { kind: "directive", type: IgxResizeHandleDirective, selector: "[igxResizeHandle]", inputs: ["igxResizeHandle"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGridHeaderGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: i1.IgxColumnResizingService }, { token: i2.IgxFilteringService }, { token: i3.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", 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", "attr.id": "this.headerID", "class.igx-grid-th--active": "this.active", "class.igx-grid-thead__item": "this.defaultCss", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS", "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: "<ng-container *ngIf=\"grid.hasColumnLayouts && column.columnGroup\">\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\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        <ng-container *ngFor=\"let child of column.children\" >\n            <igx-grid-header-group *ngIf=\"!child.hidden\" class=\"igx-grid-thead__subgroup\"\n                [ngClass]=\"child.headerGroupClasses\"\n                [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                [column]=\"child\"\n                [igxColumnMovingDrag]=\"child\"\n                [ghostHost]=\"grid.outlet.nativeElement\"\n                [attr.droppable]=\"true\"\n                [igxColumnMovingDrop]=\"child\">\n            </igx-grid-header-group>\n        </ng-container>\n    </div>\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\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>{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>\n</ng-template>\n\n<ng-container *ngIf=\"!grid.hasColumnLayouts && column.columnGroup\">\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n    <div class=\"igx-grid-thead__title\"\n        role=\"columnheader\"\n        [attr.aria-label]=\"column.header || column.field\"\n        [attr.aria-expanded]=\"column.expanded\"\n        [attr.aria-selected]=\"column.selected\"\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        >\n        <ng-container *ngIf=\"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        </ng-container>\n        <ng-container *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n        </ng-container>\n    </div>\n    <div class=\"igx-grid-thead__group\" *ngIf='!grid.isPivot'>\n        <ng-container *ngFor=\"let child of column.children\">\n            <igx-grid-header-group *ngIf=\"!child.hidden\" class=\"igx-grid-thead__subgroup\"\n                [ngClass]=\"child.headerGroupClasses\"\n                [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                [column]=\"child\"\n                [style.min-width]=\"child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\"\n                [style.flex-basis]=\"child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\">\n            </igx-grid-header-group>\n        </ng-container>\n    </div>\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n\n<ng-container *ngIf=\"!column.columnGroup\">\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n    <igx-grid-header\n        role=\"columnheader\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"grid.id + '_' + column.field\"\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        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        [density]=\"grid.displayDensity\"\n    >\n    </igx-grid-header>\n    <igx-grid-filtering-cell *ngIf=\"grid.allowFiltering && grid.filterMode === 'quickFilter'\" [column]=\"column\" [attr.draggable]=\"false\"></igx-grid-filtering-cell>\n    <span *ngIf=\"!column.columnGroup && column.resizable\" class=\"igx-grid-th__resize-handle\"\n        [igxResizeHandle]=\"column\"\n        [attr.draggable]=\"false\"\n        [style.cursor]=\"colResizingService.resizeCursor\">\n    </span>\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n", dependencies: [{ kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxColumnMovingDragDirective, selector: "[igxColumnMovingDrag]", inputs: ["igxColumnMovingDrag"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderComponent, selector: "igx-grid-header", inputs: ["column", "density"] }, { kind: "component", type: IgxGridFilteringCellComponent, selector: "igx-grid-filtering-cell", inputs: ["column"] }, { kind: "directive", type: IgxResizeHandleDirective, selector: "[igxResizeHandle]", inputs: ["igxResizeHandle"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxGridHeaderGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGridHeaderGroupComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-group', standalone: true, imports: [NgIf, NgClass, NgStyle, NgFor, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe], template: "<ng-container *ngIf=\"grid.hasColumnLayouts && column.columnGroup\">\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\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        <ng-container *ngFor=\"let child of column.children\" >\n            <igx-grid-header-group *ngIf=\"!child.hidden\" class=\"igx-grid-thead__subgroup\"\n                [ngClass]=\"child.headerGroupClasses\"\n                [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                [column]=\"child\"\n                [igxColumnMovingDrag]=\"child\"\n                [ghostHost]=\"grid.outlet.nativeElement\"\n                [attr.droppable]=\"true\"\n                [igxColumnMovingDrop]=\"child\">\n            </igx-grid-header-group>\n        </ng-container>\n    </div>\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\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>{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>\n</ng-template>\n\n<ng-container *ngIf=\"!grid.hasColumnLayouts && column.columnGroup\">\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n    <div class=\"igx-grid-thead__title\"\n        role=\"columnheader\"\n        [attr.aria-label]=\"column.header || column.field\"\n        [attr.aria-expanded]=\"column.expanded\"\n        [attr.aria-selected]=\"column.selected\"\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        >\n        <ng-container *ngIf=\"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        </ng-container>\n        <ng-container *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n        </ng-container>\n    </div>\n    <div class=\"igx-grid-thead__group\" *ngIf='!grid.isPivot'>\n        <ng-container *ngFor=\"let child of column.children\">\n            <igx-grid-header-group *ngIf=\"!child.hidden\" class=\"igx-grid-thead__subgroup\"\n                [ngClass]=\"child.headerGroupClasses\"\n                [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                [column]=\"child\"\n                [style.min-width]=\"child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\"\n                [style.flex-basis]=\"child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\">\n            </igx-grid-header-group>\n        </ng-container>\n    </div>\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n\n<ng-container *ngIf=\"!column.columnGroup\">\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-left\"></span>\n    <igx-grid-header\n        role=\"columnheader\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"grid.id + '_' + column.field\"\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        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        [density]=\"grid.displayDensity\"\n    >\n    </igx-grid-header>\n    <igx-grid-filtering-cell *ngIf=\"grid.allowFiltering && grid.filterMode === 'quickFilter'\" [column]=\"column\" [attr.draggable]=\"false\"></igx-grid-filtering-cell>\n    <span *ngIf=\"!column.columnGroup && column.resizable\" class=\"igx-grid-th__resize-handle\"\n        [igxResizeHandle]=\"column\"\n        [attr.draggable]=\"false\"\n        [style.cursor]=\"colResizingService.resizeCursor\">\n    </span>\n    <span *ngIf=\"grid.moving\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{

package/esm2022/lib/grids/headers/grid-header-row.component.mjs

@@ -118,10 +118,10 @@ export class IgxGridHeaderRowComponent {
             this.grid.selectionService.selectAllRows(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.3", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: ["hasMRL", "hasMRL", booleanAttribute], width: "width", density: "density" }, host: { properties: { "class.igx-grid-thead--cosy": "this.cosyStyle", "class.igx-grid-thead--compact": "this.compactStyle" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\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                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"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    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.5", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: ["hasMRL", "hasMRL", booleanAttribute], width: "width", density: "density" }, host: { properties: { "class.igx-grid-thead--cosy": "this.cosyStyle", "class.igx-grid-thead--compact": "this.compactStyle" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\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                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"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    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', standalone: true, imports: [NgIf, IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, NgFor, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe], template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\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                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"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    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\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" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { grid: [{

package/esm2022/lib/grids/headers/grid-header.component.mjs

@@ -218,10 +218,10 @@ export class IgxGridHeaderComponent {
             strategy: this.column.sortStrategy
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxGridHeaderComponent, deps: [{ token: IGX_GRID_BASE }, { token: i1.IgxColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: IgxGridHeaderComponent, isStandalone: true, selector: "igx-grid-header", inputs: { column: "column", density: "density" }, host: { listeners: { "click": "onClick($event)", "pointerenter": "onPinterEnter()", "pointerleave": "onPointerLeave()" }, properties: { "attr.aria-selected": "this.ariaSelected", "class.igx-grid-th": "this.columnGroupStyle", "class.igx-grid-th--cosy": "this.cosyStyle", "class.igx-grid-th--compact": "this.compactStyle", "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", "style.height.rem": "this.height" } }, 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 }], 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>more_vert</igx-icon>\n</ng-template>\n\n<ng-template #defaultSortHeaderIconTemplate>\n    <igx-icon>{{ sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</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<ng-container *ngIf=\"!column.columnGroup\">\n    <div class=\"igx-grid-th__icons\">\n        <ng-container *ngIf=\"column.sortable && !disabled\">\n            <div 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        </ng-container>\n        <ng-container *ngIf=\"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        </ng-container>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "17.0.5", ngImport: i0, type: IgxGridHeaderComponent, deps: [{ token: IGX_GRID_BASE }, { token: i1.IgxColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxGridHeaderComponent, isStandalone: true, selector: "igx-grid-header", inputs: { column: "column", density: "density" }, host: { listeners: { "click": "onClick($event)", "pointerenter": "onPinterEnter()", "pointerleave": "onPointerLeave()" }, properties: { "attr.aria-selected": "this.ariaSelected", "class.igx-grid-th": "this.columnGroupStyle", "class.igx-grid-th--cosy": "this.cosyStyle", "class.igx-grid-th--compact": "this.compactStyle", "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", "style.height.rem": "this.height" } }, 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 }], 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>more_vert</igx-icon>\n</ng-template>\n\n<ng-template #defaultSortHeaderIconTemplate>\n    <igx-icon>{{ sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</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<ng-container *ngIf=\"!column.columnGroup\">\n    <div class=\"igx-grid-th__icons\">\n        <ng-container *ngIf=\"column.sortable && !disabled\">\n            <div 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        </ng-container>\n        <ng-container *ngIf=\"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        </ng-container>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "17.0.3", ngImport: i0, type: IgxGridHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGridHeaderComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header', standalone: true, imports: [IgxIconComponent, NgTemplateOutlet, NgIf, 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>more_vert</igx-icon>\n</ng-template>\n\n<ng-template #defaultSortHeaderIconTemplate>\n    <igx-icon>{{ sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</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<ng-container *ngIf=\"!column.columnGroup\">\n    <div class=\"igx-grid-th__icons\">\n        <ng-container *ngIf=\"column.sortable && !disabled\">\n            <div 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        </ng-container>\n        <ng-container *ngIf=\"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        </ng-container>\n    </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{

package/esm2022/lib/grids/headers/pipes.mjs

@@ -5,10 +5,10 @@ export 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: "17.0.3", ngImport: i0, type: SortingIndexPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: SortingIndexPipe, isStandalone: true, name: "sortingIndex" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: SortingIndexPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: SortingIndexPipe, isStandalone: true, name: "sortingIndex" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: SortingIndexPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: SortingIndexPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sortingIndex',
@@ -20,10 +20,10 @@ export class IgxHeaderGroupWidthPipe {
         const isFitContent = width === 'fit-content';
         return hasLayout ? '' : isFitContent ? width : `${Math.max(parseInt(width), minWidth)}px`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxHeaderGroupWidthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: IgxHeaderGroupWidthPipe, isStandalone: true, name: "igxHeaderGroupWidth" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxHeaderGroupWidthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: IgxHeaderGroupWidthPipe, isStandalone: true, name: "igxHeaderGroupWidth" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxHeaderGroupWidthPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxHeaderGroupWidthPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxHeaderGroupWidth',
@@ -42,10 +42,10 @@ export class IgxHeaderGroupStylePipe {
         }
         return css;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxHeaderGroupStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: IgxHeaderGroupStylePipe, isStandalone: true, name: "igxHeaderGroupStyle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxHeaderGroupStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.5", ngImport: i0, type: IgxHeaderGroupStylePipe, isStandalone: true, name: "igxHeaderGroupStyle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: IgxHeaderGroupStylePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxHeaderGroupStylePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxHeaderGroupStyle',