igniteui-angular 15.1.26 → 15.1.29

package/fesm2020/igniteui-angular.mjs

@@ -15,7 +15,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;
@@ -51667,6 +51667,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
@@ -53257,7 +53265,7 @@ class IgxColumnComponent {
         else {
             this._calcWidth = this.width;
         }
-        this.calcPixelWidth = parseFloat(this._calcWidth);
+        this.calcPixelWidth = parseInt(this._calcWidth, 10);
     }
     /**
      * @hidden
@@ -53997,6 +54005,10 @@ class IgxColumnGroupComponent extends IgxColumnComponent {
         return width + 'px';
     }
     set width(val) { }
+    /** @hidden @internal **/
+    get resolvedWidth() {
+        return this.width;
+    }
     /**
      * @hidden
      */
@@ -55735,10 +55747,10 @@ class IgxSummaryRowComponent {
     }
 }
 IgxSummaryRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxSummaryRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxSummaryRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxSummaryRowComponent, 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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IgxSummaryRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxSummaryRowComponent, 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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxSummaryRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-row', providers: [IgxForOfSyncService], 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], 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]
@@ -60073,8 +60085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", 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`;
     }
 }
 IgxHeaderGroupWidthPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxHeaderGroupWidthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -61211,10 +61222,10 @@ class IgxGridHeaderRowComponent {
     }
 }
 IgxGridHeaderRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxGridHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxGridHeaderRowComponent, 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { 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: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IgxGridHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxGridHeaderRowComponent, 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { 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: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { 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: "15.2.0", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', 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', 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: [{
@@ -62459,6 +62470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
             type: Injectable
         }] });
 
+IgcTrialWatermark.register();
 let FAKE_ROW_ID = -1;
 const DEFAULT_ITEMS_PER_PAGE = 15;
 const MINIMUM_COLUMN_WIDTH$1 = 136;
@@ -71437,10 +71449,10 @@ class IgxGridRowComponent extends IgxRowDirective {
     }
 }
 IgxGridRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-IgxGridRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxGridRowComponent, 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: "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: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { 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: 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 });
+IgxGridRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxGridRowComponent, 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: "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: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { 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: 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: "15.2.0", ngImport: i0, type: IgxGridRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], 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) }], 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" }]
         }] });
 
 class IgxSummaryDataPipe {
@@ -73345,10 +73357,10 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
     }
 }
 IgxPivotHeaderRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxPivotHeaderRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-IgxPivotHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxPivotHeaderRowComponent, 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: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { 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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "shape"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { 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: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IgxPivotHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxPivotHeaderRowComponent, 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: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { 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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "shape"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { 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: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { 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: "15.2.0", ngImport: i0, type: IgxPivotHeaderRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-header-row', 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', 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]
@@ -74431,10 +74443,10 @@ class IgxPivotRowComponent extends IgxRowDirective {
     }
 }
 IgxPivotRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxPivotRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: IgxGridSelectionService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxPivotRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxPivotRowComponent, 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: "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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { 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 });
+IgxPivotRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxPivotRowComponent, 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: "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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { 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: "15.2.0", ngImport: i0, type: IgxPivotRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], 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) }], 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]
@@ -80227,10 +80239,10 @@ class IgxTreeGridRowComponent extends IgxRowDirective {
     }
 }
 IgxTreeGridRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxTreeGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-IgxTreeGridRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxTreeGridRowComponent, 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: "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: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { 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: IgxTreeGridCellComponent, selector: "igx-tree-grid-cell", inputs: ["level", "showIndicator", "isLoading", "row"] }, { 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 });
+IgxTreeGridRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxTreeGridRowComponent, 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: "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: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { 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: IgxTreeGridCellComponent, selector: "igx-tree-grid-cell", inputs: ["level", "showIndicator", "isLoading", "row"] }, { 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: "15.2.0", ngImport: i0, type: IgxTreeGridRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], 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) }], 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']
@@ -83016,10 +83028,10 @@ class IgxHierarchicalRowComponent extends IgxRowDirective {
     }
 }
 IgxHierarchicalRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IgxHierarchicalRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-IgxHierarchicalRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxHierarchicalRowComponent, 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: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { 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: IgxHierarchicalGridCellComponent, selector: "igx-hierarchical-grid-cell" }, { 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 });
+IgxHierarchicalRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: IgxHierarchicalRowComponent, 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: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { 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: IgxHierarchicalGridCellComponent, selector: "igx-hierarchical-grid-cell" }, { 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: "15.2.0", ngImport: i0, type: IgxHierarchicalRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }], 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) }], 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 }]
@@ -83128,6 +83140,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.
      *
@@ -83167,15 +83196,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
@@ -86481,6 +86501,7 @@ class IgxSliderComponent {
         const adjustedValue = this.valueInRange(value, this.lowerBound, this.upperBound);
         if (this._lowerValue !== adjustedValue) {
             this._lowerValue = adjustedValue;
+            this.lowerValueChange.emit(this._lowerValue);
             this.value = { lower: this._lowerValue, upper: this._upperValue };
         }
     }
@@ -86515,6 +86536,7 @@ class IgxSliderComponent {
         const adjustedValue = this.valueInRange(value, this.lowerBound, this.upperBound);
         if (this._upperValue !== adjustedValue) {
             this._upperValue = adjustedValue;
+            this.upperValueChange.emit(this._upperValue);
             this.value = { lower: this._lowerValue, upper: this._upperValue };
         }
     }
@@ -86681,27 +86703,25 @@ class IgxSliderComponent {
         const oldValue = this.value;
         if (this.isRange) {
             if (thumbType === SliderHandle.FROM) {
-                const newLower = this.lowerValue + value;
-                if (newLower >= this.lowerBound && newLower <= this.upperValue) {
-                    this._lowerValue = newLower;
-                    this.lowerValueChange.emit(this._lowerValue);
+                if (this.lowerValue + value > this.upperValue) {
+                    this.upperValue = this.lowerValue + value;
                 }
+                this.lowerValue += value;
             }
             else {
-                const newUpper = this.upperValue + value;
-                if (newUpper <= this.upperBound && newUpper >= this.lowerValue) {
-                    this._upperValue = newUpper;
-                    this.upperValueChange.emit(this._upperValue);
+                if (this.upperValue + value < this.lowerValue) {
+                    this.lowerValue = this.upperValue + value;
                 }
+                this.upperValue += value;
             }
             const newVal = {
-                lower: this._lowerValue,
-                upper: this._upperValue
+                lower: this.lowerValue,
+                upper: this.upperValue
             };
             // Swap the thumbs if a collision appears.
-            if (newVal.lower == newVal.upper) {
-                this.toggleThumb();
-            }
+            // if (newVal.lower == newVal.upper) {
+            //     this.toggleThumb();
+            // }
             this.value = newVal;
         }
         else {
@@ -86779,11 +86799,11 @@ class IgxSliderComponent {
     calculateStepDistance() {
         return this._el.nativeElement.getBoundingClientRect().width / (this.maxValue - this.minValue) * this.step;
     }
-    toggleThumb() {
-        return this.thumbFrom.isActive ?
-            this.thumbTo.nativeElement.focus() :
-            this.thumbFrom.nativeElement.focus();
-    }
+    // private toggleThumb() {
+    //     return this.thumbFrom.isActive ?
+    //         this.thumbTo.nativeElement.focus() :
+    //         this.thumbFrom.nativeElement.focus();
+    // }
     valueInRange(value, min = 0, max = 100) {
         return Math.max(Math.min(value, max), min);
     }