igniteui-angular 20.0.17 → 20.0.18

package/fesm2022/igniteui-angular.mjs

@@ -44347,12 +44347,6 @@ class IgxColumnComponent {
         return !this.grid.isPinningToStart && pinnedCols[0] === this;
     }
     /** @hidden @internal **/
-    get rightPinnedOffset() {
-        return this.pinned && !this.grid.isPinningToStart ?
-            -this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' :
-            null;
-    }
-    /** @hidden @internal **/
     get gridRowSpan() {
         return this.rowEnd && this.rowStart ? this.rowEnd - this.rowStart : 1;
     }
@@ -58999,10 +58993,10 @@ class IgxFilteringService {
     registerSVGIcons() {
         const editorIcons = editor;
         editorIcons.forEach(icon => {
-            this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
+            this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons', true);
         });
-        this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons');
-        this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons');
+        this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons', true);
+        this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons', true);
     }
     /**
      * Returns the ExpressionUI array for a given column.
@@ -62051,11 +62045,11 @@ class IgxGridHeaderRowComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", hasMRL: ["hasMRL", "hasMRL", booleanAttribute], width: "width" }, host: { properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [attr.aria-rowindex]=\"1\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && 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        }\n        @if (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        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [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            }\n        }\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [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        @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [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            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (grid.filteringService.isFilterRowVisible) {\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", hasMRL: ["hasMRL", "hasMRL", booleanAttribute], width: "width" }, host: { properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [attr.aria-rowindex]=\"1\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && 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        }\n        @if (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        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [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            }\n        }\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [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        @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [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            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (grid.filteringService.isFilterRowVisible) {\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, 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\" [attr.aria-rowindex]=\"1\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (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        }\n        @if (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        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [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            }\n        }\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [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        @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [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            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (grid.filteringService.isFilterRowVisible) {\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, 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\" [attr.aria-rowindex]=\"1\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (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        }\n        @if (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        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [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            }\n        }\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [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        @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [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            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (grid.filteringService.isFilterRowVisible) {\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { grid: [{
                 type: Input
             }], pinnedColumnCollection: [{
@@ -62727,11 +62721,11 @@ class IgxSummaryRowComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxSummaryRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxSummaryRowComponent, isStandalone: true, selector: "igx-grid-summary-row", inputs: { summaries: "summaries", gridID: "gridID", index: "index", firstCellIndentation: "firstCellIndentation" }, host: { properties: { "attr.data-rowIndex": "this.dataRowIndex" } }, providers: [IgxForOfSyncService], viewQueries: [{ propertyName: "virtDirRow", first: true, predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_summaryCells", predicate: IgxSummaryCellComponent, descendants: true, read: IgxSummaryCellComponent }], ngImport: i0, template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col>\n    @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\"\n            [style.left]=\"col.rightPinnedOffset\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxSummaryCellComponent, selector: "igx-grid-summary-cell", inputs: ["summaryResults", "column", "firstCellIndentation", "hasSummary", "summaryFormatter", "summaryTemplate", "active", "rowIndex"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxSummaryRowComponent, isStandalone: true, selector: "igx-grid-summary-row", inputs: { summaries: "summaries", gridID: "gridID", index: "index", firstCellIndentation: "firstCellIndentation" }, host: { properties: { "attr.data-rowIndex": "this.dataRowIndex" } }, providers: [IgxForOfSyncService], viewQueries: [{ propertyName: "virtDirRow", first: true, predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_summaryCells", predicate: IgxSummaryCellComponent, descendants: true, read: IgxSummaryCellComponent }], ngImport: i0, template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col>\n    @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxSummaryCellComponent, selector: "igx-grid-summary-cell", inputs: ["summaryResults", "column", "firstCellIndentation", "hasSummary", "summaryFormatter", "summaryTemplate", "active", "rowIndex"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxSummaryRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-row', providers: [IgxForOfSyncService], imports: [NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, IgxGridNotGroupedPipe], template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col>\n    @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\"\n            [style.left]=\"col.rightPinnedOffset\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-row', providers: [IgxForOfSyncService], imports: [NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, IgxGridNotGroupedPipe], template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col>\n    @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -74282,11 +74276,6 @@ class IgxGridRowComponent extends IgxRowDirective {
             row
         };
     }
-    get mrlRightPinnedOffset() {
-        return !this.grid.isPinningToStart ?
-            -this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' :
-            null;
-    }
     getContextMRL(pinnedCols, row) {
         return {
             $implicit: pinnedCols,
@@ -74294,11 +74283,11 @@ class IgxGridRowComponent extends IgxRowDirective {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxGridRowComponent, isStandalone: true, selector: "igx-grid-row", providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"></ng-container>\n\n<ng-template #addTemp>\n    <div class=\"igx-grid__tr--inner\" [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\" (animationend)=\"animationEndHandler()\">\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n    @if (this.showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" (click)=\"onRowSelectorClick($event)\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n            </ng-template>\n        </div>\n    }\n    @if (grid.groupingExpressions.length > 0) {\n        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}\" (pointerdown)=\"$event.preventDefault()\" (click)=\"$event.stopPropagation()\"></div>\n    }\n\n\n    @if (!grid.hasColumnLayouts) {\n        @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n            @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            }\n        }\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n            <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n        @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n            @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            }\n        }\n    }\n\n    @if (grid.hasColumnLayouts) {\n        @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        }\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxTopLevel\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n            <div class=\"igx-grid__mrl-block\" [ngStyle]=\"{\n                'grid-template-rows':col.getGridTemplate(true),\n                'grid-template-columns':col.getGridTemplate(false)\n            }\">\n                @for (col of col.children; track trackPinnedColumn(col)) {\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n                }\n            </div>\n        </ng-template>\n        @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        }\n    }\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n    @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) {\n        <div class=\"igx-grid__mrl-block\"\n            [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n            [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n            [style.left]=\"mrlRightPinnedOffset\"\n            [ngStyle]=\"{\n                'grid-template-rows':col.getGridTemplate(true),\n                'grid-template-columns':col.getGridTemplate(false),\n                'z-index': col.pinned ? 1 : null\n            }\"\n        >\n            @for (col of col.children; track col) {\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n            }\n        </div>\n    }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [checked]=\"selected\"\n            [readonly]=\"true\"\n            [disabled]=\"deleted\"\n            [disableRipple]=\"true\"\n            [disableTransitions]=\"grid.disableTransitions\"\n            [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #cellTemplate let-col>\n    <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [class.igx-grid__td--image]=\"col.dataType === 'image'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.resolvedWidth\"\n        [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\"\n        [style.left]=\"col.rightPinnedOffset\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.resolvedWidth\"\n        [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n    <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxGridExpandableCellComponent, selector: "igx-expandable-grid-cell", inputs: ["expanded"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxGridRowComponent, isStandalone: true, selector: "igx-grid-row", providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"></ng-container>\n\n<ng-template #addTemp>\n    <div class=\"igx-grid__tr--inner\" [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\" (animationend)=\"animationEndHandler()\">\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n    @if (this.showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" (click)=\"onRowSelectorClick($event)\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n            </ng-template>\n        </div>\n    }\n    @if (grid.groupingExpressions.length > 0) {\n        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}\" (pointerdown)=\"$event.preventDefault()\" (click)=\"$event.stopPropagation()\"></div>\n    }\n\n\n    @if (!grid.hasColumnLayouts) {\n        @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n            @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            }\n        }\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n            <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n        @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n            @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            }\n        }\n    }\n\n    @if (grid.hasColumnLayouts) {\n        @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        }\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxTopLevel\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n            <div class=\"igx-grid__mrl-block\" [ngStyle]=\"{\n                'grid-template-rows':col.getGridTemplate(true),\n                'grid-template-columns':col.getGridTemplate(false)\n            }\">\n                @for (col of col.children; track trackPinnedColumn(col)) {\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n                }\n            </div>\n        </ng-template>\n        @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        }\n    }\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n    @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) {\n        <div class=\"igx-grid__mrl-block\"\n            [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n            [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n            [ngStyle]=\"{\n                'grid-template-rows':col.getGridTemplate(true),\n                'grid-template-columns':col.getGridTemplate(false),\n                'z-index': col.pinned ? 1 : null\n            }\"\n        >\n            @for (col of col.children; track col) {\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n            }\n        </div>\n    }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [checked]=\"selected\"\n            [readonly]=\"true\"\n            [disabled]=\"deleted\"\n            [disableRipple]=\"true\"\n            [disableTransitions]=\"grid.disableTransitions\"\n            [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #cellTemplate let-col>\n    <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [class.igx-grid__td--image]=\"col.dataType === 'image'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.resolvedWidth\"\n        [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.resolvedWidth\"\n        [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n    <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxGridExpandableCellComponent, selector: "igx-expandable-grid-cell", inputs: ["expanded"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxGridRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, NgStyle, IgxCheckboxComponent, IgxGridCellComponent, NgClass, IgxGridExpandableCellComponent, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"></ng-container>\n\n<ng-template #addTemp>\n    <div class=\"igx-grid__tr--inner\" [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\" (animationend)=\"animationEndHandler()\">\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n    @if (this.showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" (click)=\"onRowSelectorClick($event)\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n            </ng-template>\n        </div>\n    }\n    @if (grid.groupingExpressions.length > 0) {\n        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}\" (pointerdown)=\"$event.preventDefault()\" (click)=\"$event.stopPropagation()\"></div>\n    }\n\n\n    @if (!grid.hasColumnLayouts) {\n        @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n            @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            }\n        }\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n            <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n        @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n            @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            }\n        }\n    }\n\n    @if (grid.hasColumnLayouts) {\n        @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        }\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxTopLevel\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n            <div class=\"igx-grid__mrl-block\" [ngStyle]=\"{\n                'grid-template-rows':col.getGridTemplate(true),\n                'grid-template-columns':col.getGridTemplate(false)\n            }\">\n                @for (col of col.children; track trackPinnedColumn(col)) {\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n                }\n            </div>\n        </ng-template>\n        @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        }\n    }\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n    @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) {\n        <div class=\"igx-grid__mrl-block\"\n            [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n            [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n            [style.left]=\"mrlRightPinnedOffset\"\n            [ngStyle]=\"{\n                'grid-template-rows':col.getGridTemplate(true),\n                'grid-template-columns':col.getGridTemplate(false),\n                'z-index': col.pinned ? 1 : null\n            }\"\n        >\n            @for (col of col.children; track col) {\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n            }\n        </div>\n    }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [checked]=\"selected\"\n            [readonly]=\"true\"\n            [disabled]=\"deleted\"\n            [disableRipple]=\"true\"\n            [disableTransitions]=\"grid.disableTransitions\"\n            [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #cellTemplate let-col>\n    <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [class.igx-grid__td--image]=\"col.dataType === 'image'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.resolvedWidth\"\n        [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\"\n        [style.left]=\"col.rightPinnedOffset\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.resolvedWidth\"\n        [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n    <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, NgStyle, IgxCheckboxComponent, IgxGridCellComponent, NgClass, IgxGridExpandableCellComponent, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"></ng-container>\n\n<ng-template #addTemp>\n    <div class=\"igx-grid__tr--inner\" [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\" (animationend)=\"animationEndHandler()\">\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n    @if (this.showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" (click)=\"onRowSelectorClick($event)\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n            </ng-template>\n        </div>\n    }\n    @if (grid.groupingExpressions.length > 0) {\n        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}\" (pointerdown)=\"$event.preventDefault()\" (click)=\"$event.stopPropagation()\"></div>\n    }\n\n\n    @if (!grid.hasColumnLayouts) {\n        @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n            @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            }\n        }\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n            <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n        @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n            @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            }\n        }\n    }\n\n    @if (grid.hasColumnLayouts) {\n        @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        }\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxTopLevel\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]=\"grid.trackColumnChanges\" #igxDirRef>\n            <div class=\"igx-grid__mrl-block\" [ngStyle]=\"{\n                'grid-template-rows':col.getGridTemplate(true),\n                'grid-template-columns':col.getGridTemplate(false)\n            }\">\n                @for (col of col.children; track trackPinnedColumn(col)) {\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n                }\n            </div>\n        </ng-template>\n        @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        }\n    }\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n    @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) {\n        <div class=\"igx-grid__mrl-block\"\n            [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n            [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n            [ngStyle]=\"{\n                'grid-template-rows':col.getGridTemplate(true),\n                'grid-template-columns':col.getGridTemplate(false),\n                'z-index': col.pinned ? 1 : null\n            }\"\n        >\n            @for (col of col.children; track col) {\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n            }\n        </div>\n    }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [checked]=\"selected\"\n            [readonly]=\"true\"\n            [disabled]=\"deleted\"\n            [disableRipple]=\"true\"\n            [disableTransitions]=\"grid.disableTransitions\"\n            [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #cellTemplate let-col>\n    <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [class.igx-grid__td--image]=\"col.dataType === 'image'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.resolvedWidth\"\n        [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.resolvedWidth\"\n        [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n    <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n" }]
         }] });
 
 var DragScrollDirection;
@@ -76394,7 +76383,7 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         return this.grid.dimensionDataColumns ? this.grid.dimensionDataColumns.find((col) => col.field === dim.memberName) : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxPivotHeaderRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", host: { properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, viewQueries: [{ propertyName: "esf", first: true, predicate: ["esf"], descendants: true }, { propertyName: "filterArea", first: true, predicate: ["filterAreaHidden"], descendants: true }, { propertyName: "filtersButton", first: true, predicate: ["filterIcon"], descendants: true }, { propertyName: "dropdownChips", first: true, predicate: ["dropdownChips"], descendants: true }, { propertyName: "pivotFilterContainer", first: true, predicate: ["pivotFilterContainer"], descendants: true }, { propertyName: "pivotRowContainer", first: true, predicate: ["pivotRowContainer"], descendants: true }, { propertyName: "notificationChips", predicate: ["notifyChip"], descendants: true }, { propertyName: "headerContainers", predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "rowDimensionHeaders", predicate: ["rowDimensionHeaders"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotFilterContainer\n                         class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                         [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                         igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                        <!-- Filter area -->\n                        <igx-chips-area #filterArea droppable='true'>\n                            @if (grid.filterDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                                  class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                            }\n                            @for (filter of this.filterAreaDimensions; track filter; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                                <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, filter)'>\n                                    </igx-icon>\n                                    {{filter.displayName || filter.memberName}}\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(filterArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                        @if (isFiltersButton && grid.filterDimensions.length !== 0) {\n                            <div class=\"igx-grid__pivot-filter-toggle\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    #filterIcon\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFiltersAreaDropdownClick($event)'>\n                                </igx-icon>\n                                <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                            </div>\n                        }\n                    </div>\n                }\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    @if (grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders) {\n                        <div #pivotRowContainer [style.width.px]=\"grid.pivotRowWidths - 1\"\n                            class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                            (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                            (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                                }\n                                @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        @if (row.sortDirection) {\n                                            <igx-icon\n                                                family=\"default\"\n                                                [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                                igxSuffix>\n                                            </igx-icon>\n                                        }\n                                    </igx-chip>\n                                    @if (last) {\n                                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    }\n                                }\n                                <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                    {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                                </igx-chip>\n                            </igx-chips-area>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotColumnContainer class=\"igx-grid__tr-pivot\"\n                         (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                                    class='igx-grid__pivot-empty-chip-area'>\n                                {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                            }\n                            @for (col of grid.columnDimensions; track col.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"view_column\"\n                                        igxPrefix>\n                                    </igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, col)'>\n                                    </igx-icon>\n                                    {{col.displayName || col.memberName}}\n                                    @if (col.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(colArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotValueContainer class=\"igx-grid__tr-pivot\"\n                         (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                            }\n                            @for (value of grid.values; track value.member; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                                <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                    <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                         (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                         (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                        <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                        <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                    </div>\n                                    <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(valueArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [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            @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        @if (grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0) {\n                            @if (grid.rowDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            }\n                            @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                        [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                        (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort($event, row)\">\n                                    <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, row)'>\n                                    </igx-icon>\n                                    {{ row.displayName || row.memberName}}\n                                    @if (row.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        }\n                    </igx-chips-area>\n                </div>\n            }\n\n            @if (grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0) {\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {\n                        @if (getRowDimensionColumn(dim); as dimCol) {\n                            <igx-pivot-row-header-group #rowDimensionHeaders\n                                [ngClass]=\"dimCol.headerGroupClasses\"\n                                [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                                [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [column]=\"dimCol\"\n                                [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                                [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [rowIndex]=\"-1\" >\n                            </igx-pivot-row-header-group>\n                        }\n                    }\n                </div>\n            }\n\n            <!-- Pinned columns collection from the start -->\n            @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]=\"maxContainerHeight\" (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {\n                    <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]=\"totalDepth > 1 ? grid.rowHeight : undefined\" [style.width.px]=\"grid.unpinnedWidth\">\n                        <ng-template igxGridFor #headerVirtualContainer let-column\n                            [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache]=\"true\" [igxForScrollContainer]=\"grid.parentVirtDir\"\n                            [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                            [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                            <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                [style.height.px]=\"totalDepth > 1 ? calcHeight(column, i) : undefined\"\n                                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [class.igx-grid__tr-pivot--columnDimensionLeaf]=\"isDuplicateOfExistingParent(column, i)\"\n                                [class.igx-grid__tr-pivot--columnMultiRowSpan]=\"isMultiRow(column, i)\"\n                            >\n                            </igx-grid-header-group>\n                        </ng-template>\n                    </div>\n                }\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [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\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n\n        <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    @for (item of aggregateList; track item.key) {\n        <igx-drop-down-item [selected]='isSelected(item)' [value]='item'>\n            {{ item.label }}\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                @for (filter of this.filterDropdownDimensions; track filter) {\n                    <igx-chip [id]=\"filter.memberName\"\n                        [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                        (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                        {{filter.displayName || filter.memberName}}\n                    </igx-chip>\n                }\n            </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        @for (filter of grid.filterDimensions; track filter) {\n            <igx-chip\n                [id]=\"filter.memberName\"\n                [draggable]=\"true\"\n                [removable]=\"true\"\n                (remove)=\"filterRemoved($event)\">\n                <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        }\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "component", type: IgxPivotRowHeaderGroupComponent, selector: "igx-pivot-row-header-group", inputs: ["rowIndex", "dimWidth", "rootDimension"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", host: { properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, viewQueries: [{ propertyName: "esf", first: true, predicate: ["esf"], descendants: true }, { propertyName: "filterArea", first: true, predicate: ["filterAreaHidden"], descendants: true }, { propertyName: "filtersButton", first: true, predicate: ["filterIcon"], descendants: true }, { propertyName: "dropdownChips", first: true, predicate: ["dropdownChips"], descendants: true }, { propertyName: "pivotFilterContainer", first: true, predicate: ["pivotFilterContainer"], descendants: true }, { propertyName: "pivotRowContainer", first: true, predicate: ["pivotRowContainer"], descendants: true }, { propertyName: "notificationChips", predicate: ["notifyChip"], descendants: true }, { propertyName: "headerContainers", predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "rowDimensionHeaders", predicate: ["rowDimensionHeaders"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotFilterContainer\n                         class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                         [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                         igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                        <!-- Filter area -->\n                        <igx-chips-area #filterArea droppable='true'>\n                            @if (grid.filterDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                                  class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                            }\n                            @for (filter of this.filterAreaDimensions; track filter; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                                <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, filter)'>\n                                    </igx-icon>\n                                    {{filter.displayName || filter.memberName}}\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(filterArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                        @if (isFiltersButton && grid.filterDimensions.length !== 0) {\n                            <div class=\"igx-grid__pivot-filter-toggle\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    #filterIcon\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFiltersAreaDropdownClick($event)'>\n                                </igx-icon>\n                                <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                            </div>\n                        }\n                    </div>\n                }\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    @if (grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders) {\n                        <div #pivotRowContainer [style.width.px]=\"grid.pivotRowWidths - 1\"\n                            class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                            (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                            (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                                }\n                                @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        @if (row.sortDirection) {\n                                            <igx-icon\n                                                family=\"default\"\n                                                [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                                igxSuffix>\n                                            </igx-icon>\n                                        }\n                                    </igx-chip>\n                                    @if (last) {\n                                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    }\n                                }\n                                <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                    {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                                </igx-chip>\n                            </igx-chips-area>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotColumnContainer class=\"igx-grid__tr-pivot\"\n                         (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                                    class='igx-grid__pivot-empty-chip-area'>\n                                {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                            }\n                            @for (col of grid.columnDimensions; track col.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"view_column\"\n                                        igxPrefix>\n                                    </igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, col)'>\n                                    </igx-icon>\n                                    {{col.displayName || col.memberName}}\n                                    @if (col.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(colArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotValueContainer class=\"igx-grid__tr-pivot\"\n                         (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                            }\n                            @for (value of grid.values; track value.member; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                                <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                    <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                         (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                         (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                        <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                        <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                    </div>\n                                    <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(valueArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [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            @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        @if (grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0) {\n                            @if (grid.rowDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            }\n                            @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                        [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                        (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort($event, row)\">\n                                    <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, row)'>\n                                    </igx-icon>\n                                    {{ row.displayName || row.memberName}}\n                                    @if (row.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        }\n                    </igx-chips-area>\n                </div>\n            }\n\n            @if (grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0) {\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {\n                        @if (getRowDimensionColumn(dim); as dimCol) {\n                            <igx-pivot-row-header-group #rowDimensionHeaders\n                                [ngClass]=\"dimCol.headerGroupClasses\"\n                                [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                                [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [column]=\"dimCol\"\n                                [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                                [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [rowIndex]=\"-1\" >\n                            </igx-pivot-row-header-group>\n                        }\n                    }\n                </div>\n            }\n\n            <!-- Pinned columns collection from the start -->\n            @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]=\"maxContainerHeight\" (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {\n                    <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]=\"totalDepth > 1 ? grid.rowHeight : undefined\" [style.width.px]=\"grid.unpinnedWidth\">\n                        <ng-template igxGridFor #headerVirtualContainer let-column\n                            [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache]=\"true\" [igxForScrollContainer]=\"grid.parentVirtDir\"\n                            [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                            [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                            <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                [style.height.px]=\"totalDepth > 1 ? calcHeight(column, i) : undefined\"\n                                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [class.igx-grid__tr-pivot--columnDimensionLeaf]=\"isDuplicateOfExistingParent(column, i)\"\n                                [class.igx-grid__tr-pivot--columnMultiRowSpan]=\"isMultiRow(column, i)\"\n                            >\n                            </igx-grid-header-group>\n                        </ng-template>\n                    </div>\n                }\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n\n        <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    @for (item of aggregateList; track item.key) {\n        <igx-drop-down-item [selected]='isSelected(item)' [value]='item'>\n            {{ item.label }}\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                @for (filter of this.filterDropdownDimensions; track filter) {\n                    <igx-chip [id]=\"filter.memberName\"\n                        [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                        (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                        {{filter.displayName || filter.memberName}}\n                    </igx-chip>\n                }\n            </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        @for (filter of grid.filterDimensions; track filter) {\n            <igx-chip\n                [id]=\"filter.memberName\"\n                [draggable]=\"true\"\n                [removable]=\"true\"\n                (remove)=\"filterRemoved($event)\">\n                <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        }\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "component", type: IgxPivotRowHeaderGroupComponent, selector: "igx-pivot-row-header-group", inputs: ["rowIndex", "dimWidth", "rootDimension"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxPivotHeaderRowComponent, decorators: [{
             type: Component,
@@ -76404,7 +76393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         IgxDropDownComponent, IgxDropDownItemComponent, IgxGridExcelStyleFilteringComponent,
                         IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective,
                         IgxExcelStyleSearchComponent, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe, IgxGridTopLevelColumns,
-                        IgxPivotRowHeaderGroupComponent], template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotFilterContainer\n                         class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                         [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                         igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                        <!-- Filter area -->\n                        <igx-chips-area #filterArea droppable='true'>\n                            @if (grid.filterDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                                  class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                            }\n                            @for (filter of this.filterAreaDimensions; track filter; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                                <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, filter)'>\n                                    </igx-icon>\n                                    {{filter.displayName || filter.memberName}}\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(filterArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                        @if (isFiltersButton && grid.filterDimensions.length !== 0) {\n                            <div class=\"igx-grid__pivot-filter-toggle\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    #filterIcon\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFiltersAreaDropdownClick($event)'>\n                                </igx-icon>\n                                <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                            </div>\n                        }\n                    </div>\n                }\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    @if (grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders) {\n                        <div #pivotRowContainer [style.width.px]=\"grid.pivotRowWidths - 1\"\n                            class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                            (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                            (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                                }\n                                @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        @if (row.sortDirection) {\n                                            <igx-icon\n                                                family=\"default\"\n                                                [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                                igxSuffix>\n                                            </igx-icon>\n                                        }\n                                    </igx-chip>\n                                    @if (last) {\n                                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    }\n                                }\n                                <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                    {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                                </igx-chip>\n                            </igx-chips-area>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotColumnContainer class=\"igx-grid__tr-pivot\"\n                         (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                                    class='igx-grid__pivot-empty-chip-area'>\n                                {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                            }\n                            @for (col of grid.columnDimensions; track col.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"view_column\"\n                                        igxPrefix>\n                                    </igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, col)'>\n                                    </igx-icon>\n                                    {{col.displayName || col.memberName}}\n                                    @if (col.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(colArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotValueContainer class=\"igx-grid__tr-pivot\"\n                         (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                            }\n                            @for (value of grid.values; track value.member; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                                <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                    <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                         (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                         (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                        <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                        <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                    </div>\n                                    <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(valueArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [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            @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        @if (grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0) {\n                            @if (grid.rowDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            }\n                            @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                        [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                        (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort($event, row)\">\n                                    <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, row)'>\n                                    </igx-icon>\n                                    {{ row.displayName || row.memberName}}\n                                    @if (row.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        }\n                    </igx-chips-area>\n                </div>\n            }\n\n            @if (grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0) {\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {\n                        @if (getRowDimensionColumn(dim); as dimCol) {\n                            <igx-pivot-row-header-group #rowDimensionHeaders\n                                [ngClass]=\"dimCol.headerGroupClasses\"\n                                [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                                [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [column]=\"dimCol\"\n                                [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                                [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [rowIndex]=\"-1\" >\n                            </igx-pivot-row-header-group>\n                        }\n                    }\n                </div>\n            }\n\n            <!-- Pinned columns collection from the start -->\n            @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]=\"maxContainerHeight\" (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {\n                    <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]=\"totalDepth > 1 ? grid.rowHeight : undefined\" [style.width.px]=\"grid.unpinnedWidth\">\n                        <ng-template igxGridFor #headerVirtualContainer let-column\n                            [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache]=\"true\" [igxForScrollContainer]=\"grid.parentVirtDir\"\n                            [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                            [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                            <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                [style.height.px]=\"totalDepth > 1 ? calcHeight(column, i) : undefined\"\n                                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [class.igx-grid__tr-pivot--columnDimensionLeaf]=\"isDuplicateOfExistingParent(column, i)\"\n                                [class.igx-grid__tr-pivot--columnMultiRowSpan]=\"isMultiRow(column, i)\"\n                            >\n                            </igx-grid-header-group>\n                        </ng-template>\n                    </div>\n                }\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [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\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n\n        <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    @for (item of aggregateList; track item.key) {\n        <igx-drop-down-item [selected]='isSelected(item)' [value]='item'>\n            {{ item.label }}\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                @for (filter of this.filterDropdownDimensions; track filter) {\n                    <igx-chip [id]=\"filter.memberName\"\n                        [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                        (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                        {{filter.displayName || filter.memberName}}\n                    </igx-chip>\n                }\n            </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        @for (filter of grid.filterDimensions; track filter) {\n            <igx-chip\n                [id]=\"filter.memberName\"\n                [draggable]=\"true\"\n                [removable]=\"true\"\n                (remove)=\"filterRemoved($event)\">\n                <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        }\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n" }]
+                        IgxPivotRowHeaderGroupComponent], template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotFilterContainer\n                         class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                         [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                         igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                        <!-- Filter area -->\n                        <igx-chips-area #filterArea droppable='true'>\n                            @if (grid.filterDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                                  class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                            }\n                            @for (filter of this.filterAreaDimensions; track filter; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                                <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, filter)'>\n                                    </igx-icon>\n                                    {{filter.displayName || filter.memberName}}\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(filterArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                        @if (isFiltersButton && grid.filterDimensions.length !== 0) {\n                            <div class=\"igx-grid__pivot-filter-toggle\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    #filterIcon\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFiltersAreaDropdownClick($event)'>\n                                </igx-icon>\n                                <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                            </div>\n                        }\n                    </div>\n                }\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    @if (grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders) {\n                        <div #pivotRowContainer [style.width.px]=\"grid.pivotRowWidths - 1\"\n                            class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                            (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                            (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                                }\n                                @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        @if (row.sortDirection) {\n                                            <igx-icon\n                                                family=\"default\"\n                                                [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                                igxSuffix>\n                                            </igx-icon>\n                                        }\n                                    </igx-chip>\n                                    @if (last) {\n                                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    }\n                                }\n                                <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                    {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                                </igx-chip>\n                            </igx-chips-area>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotColumnContainer class=\"igx-grid__tr-pivot\"\n                         (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                                    class='igx-grid__pivot-empty-chip-area'>\n                                {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                            }\n                            @for (col of grid.columnDimensions; track col.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"view_column\"\n                                        igxPrefix>\n                                    </igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, col)'>\n                                    </igx-icon>\n                                    {{col.displayName || col.memberName}}\n                                    @if (col.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(colArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotValueContainer class=\"igx-grid__tr-pivot\"\n                         (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                            }\n                            @for (value of grid.values; track value.member; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                                <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                    <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                         (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                         (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                        <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                        <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                    </div>\n                                    <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(valueArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [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            @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        @if (grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0) {\n                            @if (grid.rowDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            }\n                            @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                        [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                        (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort($event, row)\">\n                                    <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, row)'>\n                                    </igx-icon>\n                                    {{ row.displayName || row.memberName}}\n                                    @if (row.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        }\n                    </igx-chips-area>\n                </div>\n            }\n\n            @if (grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0) {\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {\n                        @if (getRowDimensionColumn(dim); as dimCol) {\n                            <igx-pivot-row-header-group #rowDimensionHeaders\n                                [ngClass]=\"dimCol.headerGroupClasses\"\n                                [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                                [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [column]=\"dimCol\"\n                                [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                                [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [rowIndex]=\"-1\" >\n                            </igx-pivot-row-header-group>\n                        }\n                    }\n                </div>\n            }\n\n            <!-- Pinned columns collection from the start -->\n            @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]=\"maxContainerHeight\" (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {\n                    <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]=\"totalDepth > 1 ? grid.rowHeight : undefined\" [style.width.px]=\"grid.unpinnedWidth\">\n                        <ng-template igxGridFor #headerVirtualContainer let-column\n                            [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache]=\"true\" [igxForScrollContainer]=\"grid.parentVirtDir\"\n                            [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                            [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                            <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                [style.height.px]=\"totalDepth > 1 ? calcHeight(column, i) : undefined\"\n                                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [class.igx-grid__tr-pivot--columnDimensionLeaf]=\"isDuplicateOfExistingParent(column, i)\"\n                                [class.igx-grid__tr-pivot--columnMultiRowSpan]=\"isMultiRow(column, i)\"\n                            >\n                            </igx-grid-header-group>\n                        </ng-template>\n                    </div>\n                }\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n\n        <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    @for (item of aggregateList; track item.key) {\n        <igx-drop-down-item [selected]='isSelected(item)' [value]='item'>\n            {{ item.label }}\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                @for (filter of this.filterDropdownDimensions; track filter) {\n                    <igx-chip [id]=\"filter.memberName\"\n                        [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                        (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                        {{filter.displayName || filter.memberName}}\n                    </igx-chip>\n                }\n            </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        @for (filter of grid.filterDimensions; track filter) {\n            <igx-chip\n                [id]=\"filter.memberName\"\n                [draggable]=\"true\"\n                [removable]=\"true\"\n                (remove)=\"filterRemoved($event)\">\n                <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        }\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -81482,8 +81471,8 @@ class IgxGridToolbarComponent {
          * @internal
          */
         this.defaultStyle = true;
-        this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons');
-        this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons');
+        this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons', true);
+        this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons', true);
     }
     /** @hidden @internal */
     ngOnDestroy() {
@@ -84435,11 +84424,11 @@ class IgxTreeGridRowComponent extends IgxRowDirective {
         this.grid.crudService.enterAddRowMode(this, true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxTreeGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxTreeGridRowComponent, isStandalone: true, selector: "igx-tree-grid-row", inputs: { treeRow: "treeRow" }, host: { properties: { "attr.aria-expanded": "this.expanded" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], viewQueries: [{ propertyName: "_cells", predicate: ["treeCell"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (click)=\"onRowSelectorClick($event)\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n            </ng-template>\n        </div>\n    }\n    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n        <ng-template #cellTemplate>\n            <igx-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-grid-cell>\n        </ng-template>\n        <ng-template #treeCellTemplate>\n            <igx-tree-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [level]=\"treeRow.level\"\n                [expanded]=\"expanded\"\n                [showIndicator]=\"showIndicator\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [isLoading]=\"isLoading\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-tree-grid-cell>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 ? treeCellTemplate : cellTemplate\"></ng-container>\n    </ng-template>\n    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"selected\"\n            [indeterminate]=\"indeterminate\"\n            [disabled]=\"deleted\"\n            [disableRipple]=\"true\"\n            [disableTransitions]=\"grid.disableTransitions\"\n            [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #pinnedCellsTemplate let-col>\n    @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <ng-template #cellTemplate>\n            <igx-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [firstPinned]=\"col.isFirstPinned\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [style.left]=\"col.rightPinnedOffset\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-grid-cell>\n        </ng-template>\n        <ng-template #treeCellTemplate>\n            <igx-tree-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [level]=\"treeRow.level\"\n                [expanded]=\"expanded\"\n                [showIndicator]=\"showIndicator\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [style.left]=\"col.rightPinnedOffset\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [isLoading]=\"isLoading\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-tree-grid-cell>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 ? treeCellTemplate : cellTemplate\"></ng-container>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxTreeGridCellComponent, selector: "igx-tree-grid-cell", inputs: ["level", "showIndicator", "isLoading", "row"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxTreeGridRowComponent, isStandalone: true, selector: "igx-tree-grid-row", inputs: { treeRow: "treeRow" }, host: { properties: { "attr.aria-expanded": "this.expanded" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], viewQueries: [{ propertyName: "_cells", predicate: ["treeCell"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (click)=\"onRowSelectorClick($event)\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n            </ng-template>\n        </div>\n    }\n    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n        <ng-template #cellTemplate>\n            <igx-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-grid-cell>\n        </ng-template>\n        <ng-template #treeCellTemplate>\n            <igx-tree-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [level]=\"treeRow.level\"\n                [expanded]=\"expanded\"\n                [showIndicator]=\"showIndicator\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [isLoading]=\"isLoading\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-tree-grid-cell>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 ? treeCellTemplate : cellTemplate\"></ng-container>\n    </ng-template>\n    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"selected\"\n            [indeterminate]=\"indeterminate\"\n            [disabled]=\"deleted\"\n            [disableRipple]=\"true\"\n            [disableTransitions]=\"grid.disableTransitions\"\n            [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #pinnedCellsTemplate let-col>\n    @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <ng-template #cellTemplate>\n            <igx-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [firstPinned]=\"col.isFirstPinned\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-grid-cell>\n        </ng-template>\n        <ng-template #treeCellTemplate>\n            <igx-tree-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [level]=\"treeRow.level\"\n                [expanded]=\"expanded\"\n                [showIndicator]=\"showIndicator\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [isLoading]=\"isLoading\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-tree-grid-cell>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 ? treeCellTemplate : cellTemplate\"></ng-container>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxTreeGridCellComponent, selector: "igx-tree-grid-cell", inputs: ["level", "showIndicator", "isLoading", "row"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxTreeGridRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxTreeGridCellComponent, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (click)=\"onRowSelectorClick($event)\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n            </ng-template>\n        </div>\n    }\n    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n        <ng-template #cellTemplate>\n            <igx-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-grid-cell>\n        </ng-template>\n        <ng-template #treeCellTemplate>\n            <igx-tree-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [level]=\"treeRow.level\"\n                [expanded]=\"expanded\"\n                [showIndicator]=\"showIndicator\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [isLoading]=\"isLoading\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-tree-grid-cell>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 ? treeCellTemplate : cellTemplate\"></ng-container>\n    </ng-template>\n    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"selected\"\n            [indeterminate]=\"indeterminate\"\n            [disabled]=\"deleted\"\n            [disableRipple]=\"true\"\n            [disableTransitions]=\"grid.disableTransitions\"\n            [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #pinnedCellsTemplate let-col>\n    @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <ng-template #cellTemplate>\n            <igx-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [firstPinned]=\"col.isFirstPinned\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [style.left]=\"col.rightPinnedOffset\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-grid-cell>\n        </ng-template>\n        <ng-template #treeCellTemplate>\n            <igx-tree-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [level]=\"treeRow.level\"\n                [expanded]=\"expanded\"\n                [showIndicator]=\"showIndicator\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [style.left]=\"col.rightPinnedOffset\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [isLoading]=\"isLoading\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-tree-grid-cell>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 ? treeCellTemplate : cellTemplate\"></ng-container>\n    }\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxTreeGridCellComponent, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (click)=\"onRowSelectorClick($event)\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n            </ng-template>\n        </div>\n    }\n    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]=\"'calcPixelWidth'\" [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n        <ng-template #cellTemplate>\n            <igx-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-grid-cell>\n        </ng-template>\n        <ng-template #treeCellTemplate>\n            <igx-tree-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [level]=\"treeRow.level\"\n                [expanded]=\"expanded\"\n                [showIndicator]=\"showIndicator\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [isLoading]=\"isLoading\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-tree-grid-cell>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 ? treeCellTemplate : cellTemplate\"></ng-container>\n    </ng-template>\n    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n        <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"selected\"\n            [indeterminate]=\"indeterminate\"\n            [disabled]=\"deleted\"\n            [disableRipple]=\"true\"\n            [disableTransitions]=\"grid.disableTransitions\"\n            [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #pinnedCellsTemplate let-col>\n    @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <ng-template #cellTemplate>\n            <igx-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [firstPinned]=\"col.isFirstPinned\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-grid-cell>\n        </ng-template>\n        <ng-template #treeCellTemplate>\n            <igx-tree-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [level]=\"treeRow.level\"\n                [expanded]=\"expanded\"\n                [showIndicator]=\"showIndicator\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [isLoading]=\"isLoading\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n                #treeCell>\n            </igx-tree-grid-cell>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 ? treeCellTemplate : cellTemplate\"></ng-container>\n    }\n</ng-template>\n" }]
         }], propDecorators: { _cells: [{
                 type: ViewChildren,
                 args: ['treeCell']
@@ -87108,11 +87097,11 @@ class IgxHierarchicalRowComponent extends IgxRowDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxHierarchicalRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxHierarchicalRowComponent, isStandalone: true, selector: "igx-hierarchical-grid-row", host: { properties: { "class.igx-grid__tr--expanded": "this.expandedClass", "class.igx-grid__tr--highlighted": "this.highlighted" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }], viewQueries: [{ propertyName: "expander", first: true, predicate: ["expander"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultEmptyTemplate", first: true, predicate: ["defaultEmptyTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_cells", predicate: i0.forwardRef(() => IgxHierarchicalGridCellComponent), descendants: true, read: IgxHierarchicalGridCellComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n<ng-template #defaultExpandedTemplate>\n    <igx-icon family=\"default\" name=\"tree_collapse\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"tree_expand\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\n    <!-- Empty icon used as spacer for size matching-->\n    <igx-icon></igx-icon>\n</ng-template>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    <!-- Drag indicator -->\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n\n    <!-- Select Row -->\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (click)=\"onRowSelectorClick($event)\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: {\n                                index: viewIndex,\n                                rowID: key,\n                                key,\n                                selected: selected,\n                                select: select,\n                                deselect: deselect }}\">\n            </ng-template>\n        </div>\n    }\n\n    <!-- Row Expander -->\n    @if (hasChildren) {\n        <div  (click)=\"expanderClick($event)\" (mousedown)='$event.preventDefault()' [ngClass]=\"expanderClassResolved\" #expander>\n            <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n            </ng-container>\n        </div>\n    }\n\n    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    }\n\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"' [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n        <igx-hierarchical-grid-cell\n            class=\"igx-grid__td igx-grid__td--fw\"\n            [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n            [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n            [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n            [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n            [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n            [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n            [column]=\"col\"\n            [formatter]=\"col.formatter\"\n            [intRow]=\"this\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [rowData]=\"data\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\"\n            [width]=\"col.getCellWidth()\"\n            [visibleColumnIndex]=\"col.visibleIndex\"\n            [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n            [cellTemplate]=\"col.bodyTemplate\"\n            [cellValidationErrorTemplate]=\"col.errorTemplate\"\n            [lastSearchInfo]=\"grid.lastSearchInfo\"\n            [cellSelectionMode]=\"grid.cellSelection\"\n            [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\">\n        </igx-hierarchical-grid-cell>\n    </ng-template>\n\n    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    }\n\n    <ng-template #rowSelectorBaseTemplate>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox\n                [tabindex]=\"-1\"\n                [readonly]=\"true\"\n                [checked]=\"selected\"\n                [disableRipple]=\"true\"\n                [disabled]=\"deleted\"\n                [disableTransitions]=\"grid.disableTransitions\"\n                [aria-label]=\"rowCheckboxAriaLabel\">\n            </igx-checkbox>\n        </div>\n    </ng-template>\n\n    <ng-template #pinnedCellsTemplate let-col>\n        @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n            <igx-hierarchical-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [firstPinned]=\"col.isFirstPinned\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [style.left]=\"col.rightPinnedOffset\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\">\n            </igx-hierarchical-grid-cell>\n        }\n    </ng-template>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxHierarchicalGridCellComponent, selector: "igx-hierarchical-grid-cell" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxHierarchicalRowComponent, isStandalone: true, selector: "igx-hierarchical-grid-row", host: { properties: { "class.igx-grid__tr--expanded": "this.expandedClass", "class.igx-grid__tr--highlighted": "this.highlighted" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }], viewQueries: [{ propertyName: "expander", first: true, predicate: ["expander"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultEmptyTemplate", first: true, predicate: ["defaultEmptyTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_cells", predicate: i0.forwardRef(() => IgxHierarchicalGridCellComponent), descendants: true, read: IgxHierarchicalGridCellComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n<ng-template #defaultExpandedTemplate>\n    <igx-icon family=\"default\" name=\"tree_collapse\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"tree_expand\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\n    <!-- Empty icon used as spacer for size matching-->\n    <igx-icon></igx-icon>\n</ng-template>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    <!-- Drag indicator -->\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n\n    <!-- Select Row -->\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (click)=\"onRowSelectorClick($event)\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: {\n                                index: viewIndex,\n                                rowID: key,\n                                key,\n                                selected: selected,\n                                select: select,\n                                deselect: deselect }}\">\n            </ng-template>\n        </div>\n    }\n\n    <!-- Row Expander -->\n    @if (hasChildren) {\n        <div  (click)=\"expanderClick($event)\" (mousedown)='$event.preventDefault()' [ngClass]=\"expanderClassResolved\" #expander>\n            <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n            </ng-container>\n        </div>\n    }\n\n    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    }\n\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"' [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n        <igx-hierarchical-grid-cell\n            class=\"igx-grid__td igx-grid__td--fw\"\n            [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n            [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n            [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n            [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n            [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n            [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n            [column]=\"col\"\n            [formatter]=\"col.formatter\"\n            [intRow]=\"this\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [rowData]=\"data\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\"\n            [width]=\"col.getCellWidth()\"\n            [visibleColumnIndex]=\"col.visibleIndex\"\n            [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n            [cellTemplate]=\"col.bodyTemplate\"\n            [cellValidationErrorTemplate]=\"col.errorTemplate\"\n            [lastSearchInfo]=\"grid.lastSearchInfo\"\n            [cellSelectionMode]=\"grid.cellSelection\"\n            [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\">\n        </igx-hierarchical-grid-cell>\n    </ng-template>\n\n    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    }\n\n    <ng-template #rowSelectorBaseTemplate>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox\n                [tabindex]=\"-1\"\n                [readonly]=\"true\"\n                [checked]=\"selected\"\n                [disableRipple]=\"true\"\n                [disabled]=\"deleted\"\n                [disableTransitions]=\"grid.disableTransitions\"\n                [aria-label]=\"rowCheckboxAriaLabel\">\n            </igx-checkbox>\n        </div>\n    </ng-template>\n\n    <ng-template #pinnedCellsTemplate let-col>\n        @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n            <igx-hierarchical-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [firstPinned]=\"col.isFirstPinned\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\">\n            </igx-hierarchical-grid-cell>\n        }\n    </ng-template>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxHierarchicalGridCellComponent, selector: "igx-hierarchical-grid-cell" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxHierarchicalRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }], imports: [NgTemplateOutlet, IgxIconComponent, IgxRowDragDirective, NgClass, IgxGridForOfDirective, IgxHierarchicalGridCellComponent, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n<ng-template #defaultExpandedTemplate>\n    <igx-icon family=\"default\" name=\"tree_collapse\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"tree_expand\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\n    <!-- Empty icon used as spacer for size matching-->\n    <igx-icon></igx-icon>\n</ng-template>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    <!-- Drag indicator -->\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n\n    <!-- Select Row -->\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (click)=\"onRowSelectorClick($event)\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: {\n                                index: viewIndex,\n                                rowID: key,\n                                key,\n                                selected: selected,\n                                select: select,\n                                deselect: deselect }}\">\n            </ng-template>\n        </div>\n    }\n\n    <!-- Row Expander -->\n    @if (hasChildren) {\n        <div  (click)=\"expanderClick($event)\" (mousedown)='$event.preventDefault()' [ngClass]=\"expanderClassResolved\" #expander>\n            <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n            </ng-container>\n        </div>\n    }\n\n    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    }\n\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"' [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n        <igx-hierarchical-grid-cell\n            class=\"igx-grid__td igx-grid__td--fw\"\n            [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n            [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n            [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n            [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n            [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n            [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n            [column]=\"col\"\n            [formatter]=\"col.formatter\"\n            [intRow]=\"this\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [rowData]=\"data\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\"\n            [width]=\"col.getCellWidth()\"\n            [visibleColumnIndex]=\"col.visibleIndex\"\n            [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n            [cellTemplate]=\"col.bodyTemplate\"\n            [cellValidationErrorTemplate]=\"col.errorTemplate\"\n            [lastSearchInfo]=\"grid.lastSearchInfo\"\n            [cellSelectionMode]=\"grid.cellSelection\"\n            [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\">\n        </igx-hierarchical-grid-cell>\n    </ng-template>\n\n    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    }\n\n    <ng-template #rowSelectorBaseTemplate>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox\n                [tabindex]=\"-1\"\n                [readonly]=\"true\"\n                [checked]=\"selected\"\n                [disableRipple]=\"true\"\n                [disabled]=\"deleted\"\n                [disableTransitions]=\"grid.disableTransitions\"\n                [aria-label]=\"rowCheckboxAriaLabel\">\n            </igx-checkbox>\n        </div>\n    </ng-template>\n\n    <ng-template #pinnedCellsTemplate let-col>\n        @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n            <igx-hierarchical-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [firstPinned]=\"col.isFirstPinned\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [style.left]=\"col.rightPinnedOffset\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\">\n            </igx-hierarchical-grid-cell>\n        }\n    </ng-template>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }], imports: [NgTemplateOutlet, IgxIconComponent, IgxRowDragDirective, NgClass, IgxGridForOfDirective, IgxHierarchicalGridCellComponent, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n<ng-template #defaultExpandedTemplate>\n    <igx-icon family=\"default\" name=\"tree_collapse\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"tree_expand\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\n    <!-- Empty icon used as spacer for size matching-->\n    <igx-icon></igx-icon>\n</ng-template>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    <!-- Drag indicator -->\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n\n    <!-- Select Row -->\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (click)=\"onRowSelectorClick($event)\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: {\n                                index: viewIndex,\n                                rowID: key,\n                                key,\n                                selected: selected,\n                                select: select,\n                                deselect: deselect }}\">\n            </ng-template>\n        </div>\n    }\n\n    <!-- Row Expander -->\n    @if (hasChildren) {\n        <div  (click)=\"expanderClick($event)\" (mousedown)='$event.preventDefault()' [ngClass]=\"expanderClassResolved\" #expander>\n            <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n            </ng-container>\n        </div>\n    }\n\n    @if (pinnedColumns.length > 0 && grid.isPinningToStart) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    }\n\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"' [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n        <igx-hierarchical-grid-cell\n            class=\"igx-grid__td igx-grid__td--fw\"\n            [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n            [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n            [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n            [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n            [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n            [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n            [column]=\"col\"\n            [formatter]=\"col.formatter\"\n            [intRow]=\"this\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [rowData]=\"data\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\"\n            [width]=\"col.getCellWidth()\"\n            [visibleColumnIndex]=\"col.visibleIndex\"\n            [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n            [cellTemplate]=\"col.bodyTemplate\"\n            [cellValidationErrorTemplate]=\"col.errorTemplate\"\n            [lastSearchInfo]=\"grid.lastSearchInfo\"\n            [cellSelectionMode]=\"grid.cellSelection\"\n            [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\">\n        </igx-hierarchical-grid-cell>\n    </ng-template>\n\n    @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    }\n\n    <ng-template #rowSelectorBaseTemplate>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox\n                [tabindex]=\"-1\"\n                [readonly]=\"true\"\n                [checked]=\"selected\"\n                [disableRipple]=\"true\"\n                [disabled]=\"deleted\"\n                [disableTransitions]=\"grid.disableTransitions\"\n                [aria-label]=\"rowCheckboxAriaLabel\">\n            </igx-checkbox>\n        </div>\n    </ng-template>\n\n    <ng-template #pinnedCellsTemplate let-col>\n        @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {\n            <igx-hierarchical-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [firstPinned]=\"col.isFirstPinned\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\">\n            </igx-hierarchical-grid-cell>\n        }\n    </ng-template>\n</ng-template>\n" }]
         }], propDecorators: { expander: [{
                 type: ViewChild,
                 args: ['expander', { read: ElementRef }]
@@ -88079,8 +88068,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
                     fields: filterableFields.map(f => ({
                         field: f.field,
                         dataType: f.dataType,
-                        //  label: f.label,
-                        //  header: f.header,
+                        header: f.header,
                         editorOptions: f.editorOptions,
                         filters: f.filters,
                         pipeArgs: f.pipeArgs,