igniteui-angular 16.0.25 → 16.0.27

package/fesm2022/igniteui-angular.mjs

@@ -14,7 +14,7 @@ import { HammerGestureConfig, HAMMER_GESTURE_CONFIG, ɵgetDOM } from '@angular/p
 import * as i2 from '@angular/common/http';
 import { addRow, addChild, pinLeft, unpinLeft, jumpDown, jumpUp, caseSensitive, editor } from '@igniteui/material-icons-extended';
 import { __decorate, __param } from 'tslib';
-import 'igniteui-trial-watermark';
+import { IgcTrialWatermark } from 'igniteui-trial-watermark';
 import { v4 } from 'uuid';
 
 var EaseIn;
@@ -42756,6 +42756,14 @@ class IgxColumnComponent {
     get minWidth() {
         return !this._defaultMinWidth ? this.defaultMinWidth : this._defaultMinWidth;
     }
+    /** @hidden @internal **/
+    get resolvedWidth() {
+        if (this.columnLayoutChild) {
+            return '';
+        }
+        const isAutoWidth = this._width && typeof this._width === 'string' && this._width === 'auto';
+        return isAutoWidth ? this.width : this.calcPixelWidth + 'px';
+    }
     /**
      * Gets the column index.
      * ```typescript
@@ -44347,7 +44355,7 @@ class IgxColumnComponent {
         else {
             this._calcWidth = this.width;
         }
-        this.calcPixelWidth = parseFloat(this._calcWidth);
+        this.calcPixelWidth = parseInt(this._calcWidth, 10);
     }
     /**
      * @hidden
@@ -44987,6 +44995,10 @@ class IgxColumnGroupComponent extends IgxColumnComponent {
         return width + 'px';
     }
     set width(val) { }
+    /** @hidden @internal **/
+    get resolvedWidth() {
+        return this.width;
+    }
     /**
      * @hidden
      */
@@ -51576,7 +51588,7 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
     }
     /** @hidden @internal */
     get expandIndicatorTemplate() {
-        return this.tree?.expandIndicator ? this.tree.expandIndicator : this._defaultExpandIndicatorTemplate;
+        return this.tree?.expandIndicator || this._defaultExpandIndicatorTemplate;
     }
     /**
      * The native DOM element representing the node. Could be null in certain environments.
@@ -55148,8 +55160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
 class IgxHeaderGroupWidthPipe {
     transform(width, minWidth, hasLayout) {
         const isFitContent = width === 'fit-content';
-        const isPercentage = typeof width === 'string' && width.indexOf('%') !== -1;
-        return hasLayout ? '' : isFitContent || isPercentage ? width : `${Math.max(parseFloat(width), minWidth)}px`;
+        return hasLayout ? '' : isFitContent ? width : `${Math.max(parseInt(width), minWidth)}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxHeaderGroupWidthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: IgxHeaderGroupWidthPipe, isStandalone: true, name: "igxHeaderGroupWidth" }); }
@@ -58869,11 +58880,11 @@ class IgxGridHeaderRowComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: "hasMRL", width: "width", density: "density" }, host: { properties: { "class.igx-grid-thead--cosy": "this.cosyStyle", "class.igx-grid-thead--compact": "this.compactStyle" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: "hasMRL", width: "width", density: "density" }, host: { properties: { "class.igx-grid-thead--cosy": "this.cosyStyle", "class.igx-grid-thead--compact": "this.compactStyle" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', standalone: true, imports: [NgIf, IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, NgFor, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe], template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', standalone: true, imports: [NgIf, IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, NgFor, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe], template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { grid: [{
                 type: Input
             }], pinnedColumnCollection: [{
@@ -59794,11 +59805,11 @@ class IgxSummaryRowComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", 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: "14.0.0", version: "16.1.2", type: IgxSummaryRowComponent, isStandalone: true, selector: "igx-grid-summary-row", inputs: { summaries: "summaries", gridID: "gridID", index: "index", firstCellIndentation: "firstCellIndentation" }, host: { properties: { "attr.data-rowIndex": "this.dataRowIndex" } }, providers: [IgxForOfSyncService], viewQueries: [{ propertyName: "virtDirRow", first: true, predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_summaryCells", predicate: IgxSummaryCellComponent, descendants: true, read: IgxSummaryCellComponent }], ngImport: i0, template: "<ng-container *ngIf=\"summaries.size\">\n    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    </ng-container>\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--cosy]=\"grid.displayDensity === 'cosy'\"\n            [class.igx-grid-summary--compact]=\"grid.displayDensity === 'compact'\"\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            [density]=\"grid.displayDensity\"\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.getCellWidth()\"\n            [style.max-width]=\"col.getCellWidth()\"\n            [style.flex-basis]=\"col.getCellWidth()\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template #summaryCellTemplate let-col>\n    <igx-grid-summary-cell *ngFor=\"let col of pinnedColumns | igxNotGrouped\"\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--cosy]=\"grid.displayDensity === 'cosy'\"\n            [class.igx-grid-summary--compact]=\"grid.displayDensity === 'compact'\"\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            [density]=\"grid.displayDensity\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.getCellWidth()\"\n            [style.max-width]=\"col.getCellWidth()\"\n            [style.flex-basis]=\"col.getCellWidth()\"\n            [style.left]=\"col.rightPinnedOffset\">\n        </igx-grid-summary-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "density", "summaryFormatter", "summaryTemplate", "active", "rowIndex"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: IgxSummaryRowComponent, isStandalone: true, selector: "igx-grid-summary-row", inputs: { summaries: "summaries", gridID: "gridID", index: "index", firstCellIndentation: "firstCellIndentation" }, host: { properties: { "attr.data-rowIndex": "this.dataRowIndex" } }, providers: [IgxForOfSyncService], viewQueries: [{ propertyName: "virtDirRow", first: true, predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_summaryCells", predicate: IgxSummaryCellComponent, descendants: true, read: IgxSummaryCellComponent }], ngImport: i0, template: "<ng-container *ngIf=\"summaries.size\">\n    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    </ng-container>\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--cosy]=\"grid.displayDensity === 'cosy'\"\n            [class.igx-grid-summary--compact]=\"grid.displayDensity === 'compact'\"\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            [density]=\"grid.displayDensity\"\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    <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template #summaryCellTemplate let-col>\n    <igx-grid-summary-cell *ngFor=\"let col of pinnedColumns | igxNotGrouped\"\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--cosy]=\"grid.displayDensity === 'cosy'\"\n            [class.igx-grid-summary--compact]=\"grid.displayDensity === 'compact'\"\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            [density]=\"grid.displayDensity\"\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</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "density", "summaryFormatter", "summaryTemplate", "active", "rowIndex"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxSummaryRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-row', providers: [IgxForOfSyncService], standalone: true, imports: [NgIf, NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, NgFor, IgxGridNotGroupedPipe], template: "<ng-container *ngIf=\"summaries.size\">\n    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    </ng-container>\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--cosy]=\"grid.displayDensity === 'cosy'\"\n            [class.igx-grid-summary--compact]=\"grid.displayDensity === 'compact'\"\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            [density]=\"grid.displayDensity\"\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.getCellWidth()\"\n            [style.max-width]=\"col.getCellWidth()\"\n            [style.flex-basis]=\"col.getCellWidth()\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template #summaryCellTemplate let-col>\n    <igx-grid-summary-cell *ngFor=\"let col of pinnedColumns | igxNotGrouped\"\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--cosy]=\"grid.displayDensity === 'cosy'\"\n            [class.igx-grid-summary--compact]=\"grid.displayDensity === 'compact'\"\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            [density]=\"grid.displayDensity\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.getCellWidth()\"\n            [style.max-width]=\"col.getCellWidth()\"\n            [style.flex-basis]=\"col.getCellWidth()\"\n            [style.left]=\"col.rightPinnedOffset\">\n        </igx-grid-summary-cell>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-row', providers: [IgxForOfSyncService], standalone: true, imports: [NgIf, NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, NgFor, IgxGridNotGroupedPipe], template: "<ng-container *ngIf=\"summaries.size\">\n    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    </ng-container>\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--cosy]=\"grid.displayDensity === 'cosy'\"\n            [class.igx-grid-summary--compact]=\"grid.displayDensity === 'compact'\"\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            [density]=\"grid.displayDensity\"\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    <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this)\"></ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template #summaryCellTemplate let-col>\n    <igx-grid-summary-cell *ngFor=\"let col of pinnedColumns | igxNotGrouped\"\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--cosy]=\"grid.displayDensity === 'cosy'\"\n            [class.igx-grid-summary--compact]=\"grid.displayDensity === 'compact'\"\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            [density]=\"grid.displayDensity\"\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</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -61785,6 +61796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             type: Injectable
         }] });
 
+IgcTrialWatermark.register();
 let FAKE_ROW_ID = -1;
 const DEFAULT_ITEMS_PER_PAGE = 15;
 const MINIMUM_COLUMN_WIDTH$1 = 136;
@@ -71283,11 +71295,11 @@ class IgxGridRowComponent extends IgxRowDirective {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"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    </ng-container>\n\n\n    <ng-container *ngIf=\"!grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\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        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\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                <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n                </ng-template>\n            </div>\n        </ng-template>\n\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n    <div *ngFor=\"let col of pinnedColumns | igxTopLevel\" 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        <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n    </div>\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        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.width\"\n        [style.max-width]=\"col.width\"\n        [style.flex-basis]=\"col.width\"\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        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.width\"\n        [style.max-width]=\"col.width\"\n        [style.flex-basis]=\"col.width\"\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        [style.min-height.px]=\"cellHeight\"\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        [style.min-height.px]=\"cellHeight\"\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { 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: "14.0.0", version: "16.1.2", 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    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"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    </ng-container>\n\n\n    <ng-container *ngIf=\"!grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\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        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\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                <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n                </ng-template>\n            </div>\n        </ng-template>\n\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n    <div *ngFor=\"let col of pinnedColumns | igxTopLevel\" 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        <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n    </div>\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        [style.min-height.px]=\"cellHeight\"\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        [style.min-height.px]=\"cellHeight\"\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        [style.min-height.px]=\"cellHeight\"\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        [style.min-height.px]=\"cellHeight\"\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { 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: "16.1.2", ngImport: i0, type: IgxGridRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], standalone: true, imports: [NgTemplateOutlet, NgIf, IgxRowDragDirective, NgFor, 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    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"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    </ng-container>\n\n\n    <ng-container *ngIf=\"!grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\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        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\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                <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n                </ng-template>\n            </div>\n        </ng-template>\n\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n    <div *ngFor=\"let col of pinnedColumns | igxTopLevel\" 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        <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n    </div>\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        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.width\"\n        [style.max-width]=\"col.width\"\n        [style.flex-basis]=\"col.width\"\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        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.width\"\n        [style.max-width]=\"col.width\"\n        [style.flex-basis]=\"col.width\"\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        [style.min-height.px]=\"cellHeight\"\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        [style.min-height.px]=\"cellHeight\"\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) }], standalone: true, imports: [NgTemplateOutlet, NgIf, IgxRowDragDirective, NgFor, 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    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"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    </ng-container>\n\n\n    <ng-container *ngIf=\"!grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\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        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\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                <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n                </ng-template>\n            </div>\n        </ng-template>\n\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n    <div *ngFor=\"let col of pinnedColumns | igxTopLevel\" 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        <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n    </div>\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        [style.min-height.px]=\"cellHeight\"\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        [style.min-height.px]=\"cellHeight\"\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        [style.min-height.px]=\"cellHeight\"\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        [style.min-height.px]=\"cellHeight\"\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;
@@ -73000,11 +73012,11 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         dropdown.open(this._subMenuOverlaySettings);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", 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: "14.0.0", version: "16.1.2", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", 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: "notificationChips", predicate: ["notifyChip"], descendants: true }, { propertyName: "headerContainers", predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective }], 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                <div #pivotFilterContainer *ngIf=\"grid.showPivotConfigurationUI\"\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                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                          *ngIf=\"grid.filterDimensions.length === 0\"\n                          class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                        <ng-container *ngFor=\"let filter of this.filterAreaDimensions; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(filterArea)'></span>\n                            <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [displayDensity]=\"grid.displayDensity\" [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 igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>\n                                {{filter.memberName}}\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                    <div class=\"igx-grid__pivot-filter-toggle\" *ngIf=\"isFiltersButton && grid.filterDimensions.length !== 0\">\n                        <igx-icon #filterIcon (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFiltersAreaDropdownClick($event)'>filter_list</igx-icon>\n                        <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                    </div>\n                </div>\n                <div class='igx-grid__tr-pivot--drop-row-area' (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                     (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                <div #pivotColumnContainer *ngIf=\"grid.showPivotConfigurationUI\" 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                    <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                        *ngIf=\"grid.columnDimensions.length === 0\" class='igx-grid__pivot-empty-chip-area'>\n                        {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                        <ng-container *ngFor=\"let col of grid.columnDimensions; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(colArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [displayDensity]=\"grid.displayDensity\" [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 igxPrefix>view_column</igx-icon>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>\n                                {{col.memberName}}\n                                <igx-icon *ngIf=\"col.sortDirection\" igxSuffix> {{ col.sortDirection < 2 ? 'arrow_upward'\n                                    : 'arrow_downward' }}</igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n\n                <div #pivotValueContainer *ngIf=\"grid.showPivotConfigurationUI\" 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                    <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop *ngIf=\"grid.values.length === 0\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                    <ng-container *ngFor=\"let value of grid.values; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' 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                                      [displayDensity]=\"grid.displayDensity\" [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>functions</igx-icon>\n                                    <igx-icon>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                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n        <!-- Column headers area -->\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\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                    <ng-container *ngIf=\"grid.showPivotConfigurationUI\">\n                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                        *ngIf=\"grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                    <ng-container *ngFor=\"let row of grid.rowDimensions; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(rowArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [displayDensity]=\"grid.displayDensity\" [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>table_rows</igx-icon>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>\n                                {{ row.memberName}}\n                                <igx-icon *ngIf=\"row.sortDirection\" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward'\n                                    : 'arrow_downward' }}</igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(rowArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                        </igx-chip>\n                    </ng-container>\n                </igx-chips-area>\n            </div>\n\n            <!-- Pinned columns collection from the start -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                           [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                           [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                </ng-container>\n            </ng-container>\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]='maxContainerHeight'>\n                <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' *ngFor='let dimLevelColumns of columnDimensionsByLevel; let i = index' [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.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                               [style.flex-basis]=\"column.calcWidth | 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            </div>\n\n            <!-- Pinned columns collection at the end -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                           [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                           [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                </ng-container>\n            </ng-container>\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    <igx-drop-down-item *ngFor=\"let item of aggregateList\" [selected]='isSelected(item)' [value]='item'>\n        {{ item.label }}\n    </igx-drop-down-item>\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                <igx-chip *ngFor=\"let filter of this.filterDropdownDimensions\" [id]=\"filter.memberName\"\n                [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                {{filter.memberName}}\n            </igx-chip>\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        <igx-chip *ngFor=\"let filter of grid.filterDimensions\" [id]=\"filter.memberName\" [draggable]=\"true\"\n            [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"filterRemoved($event)\">\n            <igx-icon igxPrefix>filter_list</igx-icon>\n            {{filter.memberName}}\n        </igx-chip>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "shape"] }, { 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" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", 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: "notificationChips", predicate: ["notifyChip"], descendants: true }, { propertyName: "headerContainers", predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective }], 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                <div #pivotFilterContainer *ngIf=\"grid.showPivotConfigurationUI\"\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                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                          *ngIf=\"grid.filterDimensions.length === 0\"\n                          class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                        <ng-container *ngFor=\"let filter of this.filterAreaDimensions; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(filterArea)'></span>\n                            <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [displayDensity]=\"grid.displayDensity\" [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 igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>\n                                {{filter.memberName}}\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                    <div class=\"igx-grid__pivot-filter-toggle\" *ngIf=\"isFiltersButton && grid.filterDimensions.length !== 0\">\n                        <igx-icon #filterIcon (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFiltersAreaDropdownClick($event)'>filter_list</igx-icon>\n                        <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                    </div>\n                </div>\n                <div class='igx-grid__tr-pivot--drop-row-area' (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                     (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                <div #pivotColumnContainer *ngIf=\"grid.showPivotConfigurationUI\" 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                    <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                        *ngIf=\"grid.columnDimensions.length === 0\" class='igx-grid__pivot-empty-chip-area'>\n                        {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                        <ng-container *ngFor=\"let col of grid.columnDimensions; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(colArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [displayDensity]=\"grid.displayDensity\" [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 igxPrefix>view_column</igx-icon>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>\n                                {{col.memberName}}\n                                <igx-icon *ngIf=\"col.sortDirection\" igxSuffix> {{ col.sortDirection < 2 ? 'arrow_upward'\n                                    : 'arrow_downward' }}</igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n\n                <div #pivotValueContainer *ngIf=\"grid.showPivotConfigurationUI\" 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                    <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop *ngIf=\"grid.values.length === 0\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                    <ng-container *ngFor=\"let value of grid.values; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' 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                                      [displayDensity]=\"grid.displayDensity\" [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>functions</igx-icon>\n                                    <igx-icon>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                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n        <!-- Column headers area -->\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\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                    <ng-container *ngIf=\"grid.showPivotConfigurationUI\">\n                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                        *ngIf=\"grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                    <ng-container *ngFor=\"let row of grid.rowDimensions; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(rowArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [displayDensity]=\"grid.displayDensity\" [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>table_rows</igx-icon>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>\n                                {{ row.memberName}}\n                                <igx-icon *ngIf=\"row.sortDirection\" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward'\n                                    : 'arrow_downward' }}</igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(rowArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                        </igx-chip>\n                    </ng-container>\n                </igx-chips-area>\n            </div>\n\n            <!-- Pinned columns collection from the start -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [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                </ng-container>\n            </ng-container>\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]='maxContainerHeight'>\n                <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' *ngFor='let dimLevelColumns of columnDimensionsByLevel; let i = index' [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            </div>\n\n            <!-- Pinned columns collection at the end -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [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                </ng-container>\n            </ng-container>\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    <igx-drop-down-item *ngFor=\"let item of aggregateList\" [selected]='isSelected(item)' [value]='item'>\n        {{ item.label }}\n    </igx-drop-down-item>\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                <igx-chip *ngFor=\"let filter of this.filterDropdownDimensions\" [id]=\"filter.memberName\"\n                [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                {{filter.memberName}}\n            </igx-chip>\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        <igx-chip *ngFor=\"let filter of grid.filterDimensions\" [id]=\"filter.memberName\" [draggable]=\"true\"\n            [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"filterRemoved($event)\">\n            <igx-icon igxPrefix>filter_list</igx-icon>\n            {{filter.memberName}}\n        </igx-chip>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "shape"] }, { 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" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxPivotHeaderRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-header-row', standalone: true, imports: [NgIf, IgxDropDirective, IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxBadgeComponent, IgxSuffixDirective, IgxDropDownItemNavigationDirective, NgTemplateOutlet, IgxGridHeaderGroupComponent, NgClass, NgStyle, IgxGridForOfDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe, IgxGridTopLevelColumns], 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                <div #pivotFilterContainer *ngIf=\"grid.showPivotConfigurationUI\"\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                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                          *ngIf=\"grid.filterDimensions.length === 0\"\n                          class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                        <ng-container *ngFor=\"let filter of this.filterAreaDimensions; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(filterArea)'></span>\n                            <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [displayDensity]=\"grid.displayDensity\" [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 igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>\n                                {{filter.memberName}}\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                    <div class=\"igx-grid__pivot-filter-toggle\" *ngIf=\"isFiltersButton && grid.filterDimensions.length !== 0\">\n                        <igx-icon #filterIcon (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFiltersAreaDropdownClick($event)'>filter_list</igx-icon>\n                        <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                    </div>\n                </div>\n                <div class='igx-grid__tr-pivot--drop-row-area' (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                     (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                <div #pivotColumnContainer *ngIf=\"grid.showPivotConfigurationUI\" 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                    <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                        *ngIf=\"grid.columnDimensions.length === 0\" class='igx-grid__pivot-empty-chip-area'>\n                        {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                        <ng-container *ngFor=\"let col of grid.columnDimensions; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(colArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [displayDensity]=\"grid.displayDensity\" [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 igxPrefix>view_column</igx-icon>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>\n                                {{col.memberName}}\n                                <igx-icon *ngIf=\"col.sortDirection\" igxSuffix> {{ col.sortDirection < 2 ? 'arrow_upward'\n                                    : 'arrow_downward' }}</igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n\n                <div #pivotValueContainer *ngIf=\"grid.showPivotConfigurationUI\" 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                    <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop *ngIf=\"grid.values.length === 0\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                    <ng-container *ngFor=\"let value of grid.values; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' 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                                      [displayDensity]=\"grid.displayDensity\" [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>functions</igx-icon>\n                                    <igx-icon>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                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n        <!-- Column headers area -->\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\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                    <ng-container *ngIf=\"grid.showPivotConfigurationUI\">\n                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                        *ngIf=\"grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                    <ng-container *ngFor=\"let row of grid.rowDimensions; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(rowArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [displayDensity]=\"grid.displayDensity\" [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>table_rows</igx-icon>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>\n                                {{ row.memberName}}\n                                <igx-icon *ngIf=\"row.sortDirection\" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward'\n                                    : 'arrow_downward' }}</igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(rowArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                        </igx-chip>\n                    </ng-container>\n                </igx-chips-area>\n            </div>\n\n            <!-- Pinned columns collection from the start -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                           [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                           [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                </ng-container>\n            </ng-container>\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]='maxContainerHeight'>\n                <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' *ngFor='let dimLevelColumns of columnDimensionsByLevel; let i = index' [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.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                               [style.flex-basis]=\"column.calcWidth | 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            </div>\n\n            <!-- Pinned columns collection at the end -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                           [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                           [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                </ng-container>\n            </ng-container>\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    <igx-drop-down-item *ngFor=\"let item of aggregateList\" [selected]='isSelected(item)' [value]='item'>\n        {{ item.label }}\n    </igx-drop-down-item>\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                <igx-chip *ngFor=\"let filter of this.filterDropdownDimensions\" [id]=\"filter.memberName\"\n                [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                {{filter.memberName}}\n            </igx-chip>\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        <igx-chip *ngFor=\"let filter of grid.filterDimensions\" [id]=\"filter.memberName\" [draggable]=\"true\"\n            [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"filterRemoved($event)\">\n            <igx-icon igxPrefix>filter_list</igx-icon>\n            {{filter.memberName}}\n        </igx-chip>\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" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-header-row', standalone: true, imports: [NgIf, IgxDropDirective, IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxBadgeComponent, IgxSuffixDirective, IgxDropDownItemNavigationDirective, NgTemplateOutlet, IgxGridHeaderGroupComponent, NgClass, NgStyle, IgxGridForOfDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe, IgxGridTopLevelColumns], 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                <div #pivotFilterContainer *ngIf=\"grid.showPivotConfigurationUI\"\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                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                          *ngIf=\"grid.filterDimensions.length === 0\"\n                          class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                        <ng-container *ngFor=\"let filter of this.filterAreaDimensions; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(filterArea)'></span>\n                            <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [displayDensity]=\"grid.displayDensity\" [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 igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>\n                                {{filter.memberName}}\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                    <div class=\"igx-grid__pivot-filter-toggle\" *ngIf=\"isFiltersButton && grid.filterDimensions.length !== 0\">\n                        <igx-icon #filterIcon (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFiltersAreaDropdownClick($event)'>filter_list</igx-icon>\n                        <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                    </div>\n                </div>\n                <div class='igx-grid__tr-pivot--drop-row-area' (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                     (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                <div #pivotColumnContainer *ngIf=\"grid.showPivotConfigurationUI\" 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                    <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                        *ngIf=\"grid.columnDimensions.length === 0\" class='igx-grid__pivot-empty-chip-area'>\n                        {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                        <ng-container *ngFor=\"let col of grid.columnDimensions; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(colArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [displayDensity]=\"grid.displayDensity\" [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 igxPrefix>view_column</igx-icon>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>\n                                {{col.memberName}}\n                                <igx-icon *ngIf=\"col.sortDirection\" igxSuffix> {{ col.sortDirection < 2 ? 'arrow_upward'\n                                    : 'arrow_downward' }}</igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n\n                <div #pivotValueContainer *ngIf=\"grid.showPivotConfigurationUI\" 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                    <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop *ngIf=\"grid.values.length === 0\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                    <ng-container *ngFor=\"let value of grid.values; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' 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                                      [displayDensity]=\"grid.displayDensity\" [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>functions</igx-icon>\n                                    <igx-icon>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                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n        <!-- Column headers area -->\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\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                    <ng-container *ngIf=\"grid.showPivotConfigurationUI\">\n                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                        *ngIf=\"grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                    <ng-container *ngFor=\"let row of grid.rowDimensions; let last = last;\">\n                        <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(rowArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [displayDensity]=\"grid.displayDensity\" [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>table_rows</igx-icon>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>\n                                {{ row.memberName}}\n                                <igx-icon *ngIf=\"row.sortDirection\" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward'\n                                    : 'arrow_downward' }}</igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span [style.visibility]='\"hidden\"' class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(rowArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                        </igx-chip>\n                    </ng-container>\n                </igx-chips-area>\n            </div>\n\n            <!-- Pinned columns collection from the start -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [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                </ng-container>\n            </ng-container>\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]='maxContainerHeight'>\n                <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' *ngFor='let dimLevelColumns of columnDimensionsByLevel; let i = index' [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            </div>\n\n            <!-- Pinned columns collection at the end -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [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                </ng-container>\n            </ng-container>\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    <igx-drop-down-item *ngFor=\"let item of aggregateList\" [selected]='isSelected(item)' [value]='item'>\n        {{ item.label }}\n    </igx-drop-down-item>\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                <igx-chip *ngFor=\"let filter of this.filterDropdownDimensions\" [id]=\"filter.memberName\"\n                [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                {{filter.memberName}}\n            </igx-chip>\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        <igx-chip *ngFor=\"let filter of grid.filterDimensions\" [id]=\"filter.memberName\" [draggable]=\"true\"\n            [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"filterRemoved($event)\">\n            <igx-icon igxPrefix>filter_list</igx-icon>\n            {{filter.memberName}}\n        </igx-chip>\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: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -74287,11 +74299,11 @@ class IgxPivotRowComponent extends IgxRowDirective {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxPivotRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: IgxGridSelectionService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: IgxPivotRowComponent, isStandalone: true, selector: "igx-pivot-row", inputs: { selected: "selected", data: "data" }, host: { properties: { "attr.aria-selected": "this.selected" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"'\n    [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth'\n    [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n    <igx-grid-cell #cell 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]=\"this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:pivotAggregationData[col.field]:pivotAggregationData:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\" [column]=\"col\"\n        [formatter]=\"col.formatter\" [intRow]=\"this\" [active]=\"isCellActive(col.visibleIndex)\"\n        [style.min-height.px]=\"cellHeight\" [rowData]=\"data\" [columnData]='getColumnData(col)'\n        [style.min-width]=\"col.width\" [style.max-width]=\"col.width\"\n        [style.flex-basis]=\"col.width\" [width]=\"col.getCellWidth()\" [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"pivotAggregationData[col.field] | dataMapper:col.field:grid.pipeTrigger:pivotAggregationData[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\" [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\" [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"selected\" [disableRipple]=\"true\" [disabled]=\"deleted\"\n            [disableTransitions]=\"grid.disableTransitions\" [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n", dependencies: [{ 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: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }, { kind: "pipe", type: IgxPivotGridCellStyleClassesPipe, name: "igxPivotCellStyleClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: IgxPivotRowComponent, isStandalone: true, selector: "igx-pivot-row", inputs: { selected: "selected", data: "data" }, host: { properties: { "attr.aria-selected": "this.selected" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"'\n    [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth'\n    [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n    <igx-grid-cell #cell 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]=\"this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:pivotAggregationData[col.field]:pivotAggregationData:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\" [column]=\"col\"\n        [formatter]=\"col.formatter\" [intRow]=\"this\" [active]=\"isCellActive(col.visibleIndex)\"\n        [style.min-height.px]=\"cellHeight\" [rowData]=\"data\" [columnData]='getColumnData(col)'\n        [style.min-width]=\"col.resolvedWidth\" [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\" [width]=\"col.getCellWidth()\" [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"pivotAggregationData[col.field] | dataMapper:col.field:grid.pipeTrigger:pivotAggregationData[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\" [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\" [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"selected\" [disableRipple]=\"true\" [disabled]=\"deleted\"\n            [disableTransitions]=\"grid.disableTransitions\" [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n", dependencies: [{ 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: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }, { kind: "pipe", type: IgxPivotGridCellStyleClassesPipe, name: "igxPivotCellStyleClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxPivotRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], standalone: true, imports: [IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, IgxPivotGridCellStyleClassesPipe], template: "<ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"'\n    [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth'\n    [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n    <igx-grid-cell #cell 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]=\"this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:pivotAggregationData[col.field]:pivotAggregationData:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\" [column]=\"col\"\n        [formatter]=\"col.formatter\" [intRow]=\"this\" [active]=\"isCellActive(col.visibleIndex)\"\n        [style.min-height.px]=\"cellHeight\" [rowData]=\"data\" [columnData]='getColumnData(col)'\n        [style.min-width]=\"col.width\" [style.max-width]=\"col.width\"\n        [style.flex-basis]=\"col.width\" [width]=\"col.getCellWidth()\" [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"pivotAggregationData[col.field] | dataMapper:col.field:grid.pipeTrigger:pivotAggregationData[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\" [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\" [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"selected\" [disableRipple]=\"true\" [disabled]=\"deleted\"\n            [disableTransitions]=\"grid.disableTransitions\" [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], standalone: true, imports: [IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, IgxPivotGridCellStyleClassesPipe], template: "<ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"'\n    [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth'\n    [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n    <igx-grid-cell #cell 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]=\"this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:pivotAggregationData[col.field]:pivotAggregationData:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\" [column]=\"col\"\n        [formatter]=\"col.formatter\" [intRow]=\"this\" [active]=\"isCellActive(col.visibleIndex)\"\n        [style.min-height.px]=\"cellHeight\" [rowData]=\"data\" [columnData]='getColumnData(col)'\n        [style.min-width]=\"col.resolvedWidth\" [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\" [width]=\"col.getCellWidth()\" [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"pivotAggregationData[col.field] | dataMapper:col.field:grid.pipeTrigger:pivotAggregationData[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\" [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\" [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"selected\" [disableRipple]=\"true\" [disabled]=\"deleted\"\n            [disableTransitions]=\"grid.disableTransitions\" [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -79297,11 +79309,11 @@ class IgxTreeGridRowComponent extends IgxRowDirective {
         this.grid.crudService.enterAddRowMode(this, true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxTreeGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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<ng-container *ngIf=\"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</ng-container>\n<ng-container *ngIf=\"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</ng-container>\n<ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n    <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n</ng-container>\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            [style.min-height.px]=\"cellHeight\"\n            [rowData]=\"data\"\n            [style.min-width]=\"col.width\"\n            [style.max-width]=\"col.width\"\n            [style.flex-basis]=\"col.width\"\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            [style.min-height.px]=\"cellHeight\"\n            [rowData]=\"data\"\n            [style.min-width]=\"col.width\"\n            [style.max-width]=\"col.width\"\n            [style.flex-basis]=\"col.width\"\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<ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n    <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n</ng-container>\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    <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\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                [style.min-height.px]=\"cellHeight\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.width\"\n                [style.max-width]=\"col.width\"\n                [style.flex-basis]=\"col.width\"\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                [style.min-height.px]=\"cellHeight\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.width\"\n                [style.max-width]=\"col.width\"\n                [style.flex-basis]=\"col.width\"\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    </ng-template>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "14.0.0", version: "16.1.2", 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<ng-container *ngIf=\"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</ng-container>\n<ng-container *ngIf=\"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</ng-container>\n<ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n    <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n</ng-container>\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            [style.min-height.px]=\"cellHeight\"\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            [style.min-height.px]=\"cellHeight\"\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<ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n    <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n</ng-container>\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    <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\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                [style.min-height.px]=\"cellHeight\"\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                [style.min-height.px]=\"cellHeight\"\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    </ng-template>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "16.1.2", ngImport: i0, type: IgxTreeGridRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], standalone: true, imports: [NgTemplateOutlet, NgIf, IgxRowDragDirective, IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxTreeGridCellComponent, IgxCheckboxComponent, NgFor, 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<ng-container *ngIf=\"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</ng-container>\n<ng-container *ngIf=\"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</ng-container>\n<ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n    <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n</ng-container>\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            [style.min-height.px]=\"cellHeight\"\n            [rowData]=\"data\"\n            [style.min-width]=\"col.width\"\n            [style.max-width]=\"col.width\"\n            [style.flex-basis]=\"col.width\"\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            [style.min-height.px]=\"cellHeight\"\n            [rowData]=\"data\"\n            [style.min-width]=\"col.width\"\n            [style.max-width]=\"col.width\"\n            [style.flex-basis]=\"col.width\"\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<ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n    <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n</ng-container>\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    <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\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                [style.min-height.px]=\"cellHeight\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.width\"\n                [style.max-width]=\"col.width\"\n                [style.flex-basis]=\"col.width\"\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                [style.min-height.px]=\"cellHeight\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.width\"\n                [style.max-width]=\"col.width\"\n                [style.flex-basis]=\"col.width\"\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    </ng-template>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], standalone: true, imports: [NgTemplateOutlet, NgIf, IgxRowDragDirective, IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxTreeGridCellComponent, IgxCheckboxComponent, NgFor, 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<ng-container *ngIf=\"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</ng-container>\n<ng-container *ngIf=\"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</ng-container>\n<ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n    <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n</ng-container>\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            [style.min-height.px]=\"cellHeight\"\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            [style.min-height.px]=\"cellHeight\"\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<ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n    <ng-container *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-container>\n</ng-container>\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    <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\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                [style.min-height.px]=\"cellHeight\"\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                [style.min-height.px]=\"cellHeight\"\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    </ng-template>\n</ng-template>\n" }]
         }], propDecorators: { _cells: [{
                 type: ViewChildren,
                 args: ['treeCell']
@@ -81656,11 +81668,11 @@ class IgxHierarchicalRowComponent extends IgxRowDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxHierarchicalRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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(function () { return 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 [active]='!added'>expand_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon [active]='!added'>chevron_right</igx-icon>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\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    <ng-container *ngIf=\"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    </ng-container>\n\n    <!-- Select Row -->\n    <ng-container *ngIf=\"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    </ng-container>\n\n    <!-- Row Expander -->\n    <div  (click)=\"expanderClick($event)\" (mousedown)='$event.preventDefault()' [ngClass]=\"expanderClassResolved\" *ngIf=\"hasChildren\" #expander>\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    </ng-container>\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            [style.min-height.px]=\"cellHeight\"\n            [rowData]=\"data\"\n            [style.min-width]=\"col.width\"\n            [style.max-width]=\"col.width\"\n            [style.flex-basis]=\"col.width\"\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    <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    </ng-container>\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        <igx-hierarchical-grid-cell *ngFor=\"let col of pinnedColumns | igxNotGrouped\"\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\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            [style.min-height.px]=\"cellHeight\"\n            [rowData]=\"data\"\n            [style.min-width]=\"col.width\"\n            [style.max-width]=\"col.width\"\n            [style.flex-basis]=\"col.width\"\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    </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: ["family", "active", "name"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "14.0.0", version: "16.1.2", 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(function () { return 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 [active]='!added'>expand_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon [active]='!added'>chevron_right</igx-icon>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\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    <ng-container *ngIf=\"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    </ng-container>\n\n    <!-- Select Row -->\n    <ng-container *ngIf=\"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    </ng-container>\n\n    <!-- Row Expander -->\n    <div  (click)=\"expanderClick($event)\" (mousedown)='$event.preventDefault()' [ngClass]=\"expanderClassResolved\" *ngIf=\"hasChildren\" #expander>\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    </ng-container>\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            [style.min-height.px]=\"cellHeight\"\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    <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    </ng-container>\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        <igx-hierarchical-grid-cell *ngFor=\"let col of pinnedColumns | igxNotGrouped\"\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\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            [style.min-height.px]=\"cellHeight\"\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    </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: ["family", "active", "name"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "16.1.2", ngImport: i0, type: IgxHierarchicalRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }], standalone: true, imports: [NgTemplateOutlet, IgxIconComponent, NgIf, IgxRowDragDirective, NgClass, IgxGridForOfDirective, IgxHierarchicalGridCellComponent, NgStyle, IgxCheckboxComponent, NgFor, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n<ng-template #defaultExpandedTemplate>\n    <igx-icon [active]='!added'>expand_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon [active]='!added'>chevron_right</igx-icon>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\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    <ng-container *ngIf=\"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    </ng-container>\n\n    <!-- Select Row -->\n    <ng-container *ngIf=\"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    </ng-container>\n\n    <!-- Row Expander -->\n    <div  (click)=\"expanderClick($event)\" (mousedown)='$event.preventDefault()' [ngClass]=\"expanderClassResolved\" *ngIf=\"hasChildren\" #expander>\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    </ng-container>\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            [style.min-height.px]=\"cellHeight\"\n            [rowData]=\"data\"\n            [style.min-width]=\"col.width\"\n            [style.max-width]=\"col.width\"\n            [style.flex-basis]=\"col.width\"\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    <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    </ng-container>\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        <igx-hierarchical-grid-cell *ngFor=\"let col of pinnedColumns | igxNotGrouped\"\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\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            [style.min-height.px]=\"cellHeight\"\n            [rowData]=\"data\"\n            [style.min-width]=\"col.width\"\n            [style.max-width]=\"col.width\"\n            [style.flex-basis]=\"col.width\"\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    </ng-template>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }], standalone: true, imports: [NgTemplateOutlet, IgxIconComponent, NgIf, IgxRowDragDirective, NgClass, IgxGridForOfDirective, IgxHierarchicalGridCellComponent, NgStyle, IgxCheckboxComponent, NgFor, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n<ng-template #defaultExpandedTemplate>\n    <igx-icon [active]='!added'>expand_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon [active]='!added'>chevron_right</igx-icon>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\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    <ng-container *ngIf=\"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    </ng-container>\n\n    <!-- Select Row -->\n    <ng-container *ngIf=\"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    </ng-container>\n\n    <!-- Row Expander -->\n    <div  (click)=\"expanderClick($event)\" (mousedown)='$event.preventDefault()' [ngClass]=\"expanderClassResolved\" *ngIf=\"hasChildren\" #expander>\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    </ng-container>\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            [style.min-height.px]=\"cellHeight\"\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    <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: this\"></ng-template>\n    </ng-container>\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        <igx-hierarchical-grid-cell *ngFor=\"let col of pinnedColumns | igxNotGrouped\"\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\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            [style.min-height.px]=\"cellHeight\"\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    </ng-template>\n</ng-template>\n" }]
         }], propDecorators: { expander: [{
                 type: ViewChild,
                 args: ['expander', { read: ElementRef }]
@@ -81692,6 +81704,23 @@ class IgxChildGridRowComponent {
     get parentHasScroll() {
         return !this.parentGrid.verticalScrollContainer.dc.instance.notVirtual;
     }
+    /**
+     *  The data passed to the row component.
+     *
+     * ```typescript
+     * // get the row data for the first selected row
+     * let selectedRowData = this.grid.selectedRows[0].data;
+     * ```
+     */
+    get data() {
+        return this._data || [];
+    }
+    set data(value) {
+        this._data = value;
+        if (this.hGrid) {
+            this.hGrid.data = this._data.childGridsData[this.layout.key];
+        }
+    }
     /**
      * Get a reference to the grid that contains the selected row.
      *
@@ -81731,15 +81760,6 @@ class IgxChildGridRowComponent {
         this.gridAPI = gridAPI;
         this.element = element;
         this.cdr = cdr;
-        /**
-         *  The data passed to the row component.
-         *
-         * ```typescript
-         * // get the row data for the first selected row
-         * let selectedRowData = this.grid.selectedRows[0].data;
-         * ```
-         */
-        this.data = [];
         /**
          * Returns whether the row is expanded.
          * ```typescript
@@ -90497,7 +90517,8 @@ const IGX_DATE_RANGE_PICKER_DIRECTIVES = [
 const IGX_TREE_DIRECTIVES = [
     IgxTreeComponent,
     IgxTreeNodeComponent,
-    IgxTreeNodeLinkDirective
+    IgxTreeNodeLinkDirective,
+    IgxTreeExpandIndicatorDirective
 ];
 
 /* NOTE: Query builder directives collection for ease-of-use import in standalone components scenario */
@@ -91650,7 +91671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
  */
 class IgxTreeModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective], exports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective], exports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxTreeModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: IgxTreeModule, decorators: [{
@@ -91676,5 +91697,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbsolutePosition, AbsoluteScrollStrategy, AutoPositionStrategy, BaseFilteringStrategy, BlockScrollStrategy, ButtonGroupAlignment, CachedDataCloneStrategy, Calendar, CalendarHammerConfig, CalendarSelection, CarouselHammerConfig, CarouselIndicatorsOrientation, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DEFAULT_PIVOT_KEYS, DataType, DataUtil, DatePart, DateRangePickerFormatPipe, DateRangeType, DefaultDataCloneStrategy, DefaultPivotGridRecordSortingStrategy, DefaultPivotSortingStrategy, DefaultSortingStrategy, DimensionValuesFilteringStrategy, Direction, DisplayDensity, DisplayDensityBase, DisplayDensityToken, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportHeaderType, ExportRecordType, FilterMode, FilterUtil, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, GRID_LEVEL_COL, GRID_PARENT, GRID_ROOT_SUMMARY, GlobalPositionStrategy, GridColumnDataType, GridInstanceType, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupMemberCountSortingStrategy, GroupedRecords, HorizontalAlignment, HorizontalAnimationType, IGX_ACCORDION_DIRECTIVES, IGX_ACTION_STRIP_DIRECTIVES, IGX_BANNER_DIRECTIVES, IGX_BOTTOM_NAV_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES, IGX_CALENDAR_DIRECTIVES, IGX_CARD_DIRECTIVES, IGX_CAROUSEL_DIRECTIVES, IGX_CHIPS_DIRECTIVES, IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES, IGX_COMBO_DIRECTIVES, IGX_DATE_PICKER_DIRECTIVES, IGX_DATE_RANGE_PICKER_DIRECTIVES, IGX_DIALOG_DIRECTIVES, IGX_DRAG_DROP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES, IGX_EXPANSION_PANEL_DIRECTIVES, IGX_GRID_ACTION_STRIP_DIRECTIVES, IGX_GRID_BASE, IGX_GRID_COMMON_DIRECTIVES, IGX_GRID_DIRECTIVES, IGX_GRID_SERVICE_BASE, IGX_GRID_VALIDATION_DIRECTIVES, IGX_HIERARCHICAL_GRID_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IGX_INPUT_GROUP_TYPE, IGX_LINEAR_PROGRESS_BAR_DIRECTIVES, IGX_LIST_DIRECTIVES, IGX_NAVBAR_DIRECTIVES, IGX_NAVIGATION_DRAWER_DIRECTIVES, IGX_PAGINATOR_DIRECTIVES, IGX_PIVOT_GRID_DIRECTIVES, IGX_PROGRESS_BAR_DIRECTIVES, IGX_QUERY_BUILDER_DIRECTIVES, IGX_SELECT_DIRECTIVES, IGX_SIMPLE_COMBO_DIRECTIVES, IGX_SLIDER_DIRECTIVES, IGX_SPLITTER_DIRECTIVES, IGX_STEPPER_DIRECTIVES, IGX_TABS_DIRECTIVES, IGX_TIME_PICKER_DIRECTIVES, IGX_TOOLTIP_DIRECTIVES, IGX_TREE_DIRECTIVES, IGX_TREE_GRID_DIRECTIVES, ITreeGridAggregation, IgcFormControlDirective, IgcFormsModule, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxActionStripModule, IgxAdvancedFilteringDialogComponent, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerActionsDirective, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollMonthDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCardType, IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxChildGridRowComponent, IgxChipComponent, IgxChipTypeVariant, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumPatternValidatorDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMaxLengthValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnPinningDirective, IgxColumnRequiredValidatorDirective, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboModule, IgxComboToggleIconDirective, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogModule, IgxDialogTitleDirective, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragIndicatorIconDirective, IgxDragLocation, IgxDropDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelModule, IgxExpansionPanelTitleDirective, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxFocusTrapDirective, IgxFocusTrapModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridCell, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridFooterComponent, IgxGridForOfContext, IgxGridForOfDirective, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeadSelectorDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHintDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxItemListDirective, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective, IgxPaginatorModule, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPivotAggregate, IgxPivotDataSelectorComponent, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotGridComponent, IgxPivotGridModule, IgxPivotNumericAggregate, IgxPivotTimeAggregate, IgxPivotValueChipTemplateDirective, IgxPrefixDirective, IgxPrependDropStrategy, IgxProgressBarGradientDirective, IgxProgressBarModule, IgxProgressBarTextTemplateDirective, IgxProgressType, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderModule, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandComponent, IgxRowSelectorDirective, IgxScrollInertiaDirective, IgxScrollInertiaModule, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSorting, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubTitleDirective, IgxStepTitleDirective, IgxStepType, IgxStepperComponent, IgxStepperModule, IgxStepperOrientation, IgxStepperTitlePosition, IgxStringFilteringOperand, IgxSuffixDirective, IgxSummaryOperand, IgxSummaryRow, IgxSummaryTemplateDirective, IgxSwitchComponent, IgxSwitchModule, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsAlignment, IgxTabsComponent, IgxTabsModule, IgxTemplateOutletDirective, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimeItemDirective, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectionType, IgxYearsViewComponent, LabelPosition, NoOpScrollStrategy, NoopFilteringStrategy, NoopPivotDimensionsStrategy, NoopSortingStrategy, PagingError, PickerInteractionMode, PivotColumnDimensionsStrategy, PivotDimensionType, PivotRowDimensionsStrategy, Point, RadioGroupAlignment, RadioLabelPosition, RelativePosition, RelativePositionStrategy, RowPinningPosition, SPLITTER_INTERACTION_KEYS, ScrollMonth, ScrollStrategy, SliderHandle, SortingDirection, SplitterType, SwitchLabelPosition, TickLabelsOrientation, TicksOrientation, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, VerticalAlignment, VerticalAnimationType, WEEKDAYS, blink, changei18n, comboIgnoreDiacriticsFilter, fadeIn, fadeOut, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, flipVerBck, flipVerFwd, getCurrentResourceStrings, getTypeNameForDebugging, growVerIn, growVerOut, heartbeat, isDateInRanges, isLeap, monthRange, pulsateBck, pulsateFwd, range, rotateInBl, rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd, weekDay };
+export { AbsolutePosition, AbsoluteScrollStrategy, AutoPositionStrategy, BaseFilteringStrategy, BlockScrollStrategy, ButtonGroupAlignment, CachedDataCloneStrategy, Calendar, CalendarHammerConfig, CalendarSelection, CarouselHammerConfig, CarouselIndicatorsOrientation, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DEFAULT_PIVOT_KEYS, DataType, DataUtil, DatePart, DateRangePickerFormatPipe, DateRangeType, DefaultDataCloneStrategy, DefaultPivotGridRecordSortingStrategy, DefaultPivotSortingStrategy, DefaultSortingStrategy, DimensionValuesFilteringStrategy, Direction, DisplayDensity, DisplayDensityBase, DisplayDensityToken, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportHeaderType, ExportRecordType, FilterMode, FilterUtil, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, GRID_LEVEL_COL, GRID_PARENT, GRID_ROOT_SUMMARY, GlobalPositionStrategy, GridColumnDataType, GridInstanceType, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupMemberCountSortingStrategy, GroupedRecords, HorizontalAlignment, HorizontalAnimationType, IGX_ACCORDION_DIRECTIVES, IGX_ACTION_STRIP_DIRECTIVES, IGX_BANNER_DIRECTIVES, IGX_BOTTOM_NAV_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES, IGX_CALENDAR_DIRECTIVES, IGX_CARD_DIRECTIVES, IGX_CAROUSEL_DIRECTIVES, IGX_CHIPS_DIRECTIVES, IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES, IGX_COMBO_DIRECTIVES, IGX_DATE_PICKER_DIRECTIVES, IGX_DATE_RANGE_PICKER_DIRECTIVES, IGX_DIALOG_DIRECTIVES, IGX_DRAG_DROP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES, IGX_EXPANSION_PANEL_DIRECTIVES, IGX_GRID_ACTION_STRIP_DIRECTIVES, IGX_GRID_BASE, IGX_GRID_COMMON_DIRECTIVES, IGX_GRID_DIRECTIVES, IGX_GRID_SERVICE_BASE, IGX_GRID_VALIDATION_DIRECTIVES, IGX_HIERARCHICAL_GRID_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IGX_INPUT_GROUP_TYPE, IGX_LINEAR_PROGRESS_BAR_DIRECTIVES, IGX_LIST_DIRECTIVES, IGX_NAVBAR_DIRECTIVES, IGX_NAVIGATION_DRAWER_DIRECTIVES, IGX_PAGINATOR_DIRECTIVES, IGX_PIVOT_GRID_DIRECTIVES, IGX_PROGRESS_BAR_DIRECTIVES, IGX_QUERY_BUILDER_DIRECTIVES, IGX_SELECT_DIRECTIVES, IGX_SIMPLE_COMBO_DIRECTIVES, IGX_SLIDER_DIRECTIVES, IGX_SPLITTER_DIRECTIVES, IGX_STEPPER_DIRECTIVES, IGX_TABS_DIRECTIVES, IGX_TIME_PICKER_DIRECTIVES, IGX_TOOLTIP_DIRECTIVES, IGX_TREE_DIRECTIVES, IGX_TREE_GRID_DIRECTIVES, ITreeGridAggregation, IgcFormControlDirective, IgcFormsModule, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxActionStripModule, IgxAdvancedFilteringDialogComponent, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerActionsDirective, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollMonthDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCardType, IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxChildGridRowComponent, IgxChipComponent, IgxChipTypeVariant, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumPatternValidatorDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMaxLengthValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnPinningDirective, IgxColumnRequiredValidatorDirective, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboModule, IgxComboToggleIconDirective, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogModule, IgxDialogTitleDirective, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragIndicatorIconDirective, IgxDragLocation, IgxDropDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelModule, IgxExpansionPanelTitleDirective, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxFocusTrapDirective, IgxFocusTrapModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridCell, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridFooterComponent, IgxGridForOfContext, IgxGridForOfDirective, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeadSelectorDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHintDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxItemListDirective, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective, IgxPaginatorModule, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPivotAggregate, IgxPivotDataSelectorComponent, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotGridComponent, IgxPivotGridModule, IgxPivotNumericAggregate, IgxPivotTimeAggregate, IgxPivotValueChipTemplateDirective, IgxPrefixDirective, IgxPrependDropStrategy, IgxProgressBarGradientDirective, IgxProgressBarModule, IgxProgressBarTextTemplateDirective, IgxProgressType, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderModule, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandComponent, IgxRowSelectorDirective, IgxScrollInertiaDirective, IgxScrollInertiaModule, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSorting, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubTitleDirective, IgxStepTitleDirective, IgxStepType, IgxStepperComponent, IgxStepperModule, IgxStepperOrientation, IgxStepperTitlePosition, IgxStringFilteringOperand, IgxSuffixDirective, IgxSummaryOperand, IgxSummaryRow, IgxSummaryTemplateDirective, IgxSwitchComponent, IgxSwitchModule, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsAlignment, IgxTabsComponent, IgxTabsModule, IgxTemplateOutletDirective, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimeItemDirective, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectionType, IgxYearsViewComponent, LabelPosition, NoOpScrollStrategy, NoopFilteringStrategy, NoopPivotDimensionsStrategy, NoopSortingStrategy, PagingError, PickerInteractionMode, PivotColumnDimensionsStrategy, PivotDimensionType, PivotRowDimensionsStrategy, Point, RadioGroupAlignment, RadioLabelPosition, RelativePosition, RelativePositionStrategy, RowPinningPosition, SPLITTER_INTERACTION_KEYS, ScrollMonth, ScrollStrategy, SliderHandle, SortingDirection, SplitterType, SwitchLabelPosition, TickLabelsOrientation, TicksOrientation, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, VerticalAlignment, VerticalAnimationType, WEEKDAYS, blink, changei18n, comboIgnoreDiacriticsFilter, fadeIn, fadeOut, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, flipVerBck, flipVerFwd, getCurrentResourceStrings, getTypeNameForDebugging, growVerIn, growVerOut, heartbeat, isDateInRanges, isLeap, monthRange, pulsateBck, pulsateFwd, range, rotateInBl, rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd, weekDay };
 //# sourceMappingURL=igniteui-angular.mjs.map