igniteui-angular 13.1.0 → 13.1.1

package/fesm2020/igniteui-angular.mjs

@@ -10360,7 +10360,8 @@ class IgxForOfDirective {
         for (let i = 0; i < l; i++) {
             const rNode = rNodes[i];
             if (rNode) {
-                const h = rNode.offsetHeight || parseInt(this.igxForItemSize, 10);
+                const height = window.getComputedStyle(rNode).getPropertyValue('height');
+                const h = parseFloat(height) || parseInt(this.igxForItemSize, 10);
                 const index = this.state.startIndex + i;
                 if (!this.isRemote && !this.igxForOf[index]) {
                     continue;
@@ -84905,9 +84906,6 @@ class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowComponent {
     get rowSpan() {
         return this.rowData.rowSpan || 1;
     }
-    get headerHeight() {
-        return this.rowSpan > 1 ? this.rowSpan * this.grid.rowHeight + (this.rowSpan - 1) : this.grid.rowHeight;
-    }
     extractFromDimensions() {
         const col = this.extractFromDimension(this.dimension, this.rowData);
         const prevDims = [];
@@ -84940,10 +84938,10 @@ class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowComponent {
     }
 }
 IgxPivotRowDimensionContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxPivotRowDimensionContentComponent, deps: [{ token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxPivotRowDimensionContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IgxPivotRowDimensionContentComponent, selector: "igx-pivot-row-dimension-content", inputs: { rowIndex: "rowIndex", dimension: "dimension", rootDimension: "rootDimension", rowData: "rowData" }, viewQueries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headerTemplateDefault", first: true, predicate: ["headerDefaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headerGroups", predicate: IgxPivotRowDimensionHeaderGroupComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n    <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"width\">\n            <igx-pivot-row-dimension-header-group [ngClass]=\"rowDimensionColumn.headerGroupClasses\"\n                [ngStyle]=\"rowDimensionColumn.headerGroupStyles | igxHeaderGroupStyle:rowDimensionColumn:grid.pipeTrigger\" [column]=\"rowDimensionColumn\"\n                [style.min-width]=\"grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [rowIndex]=\"rowIndex\"\n                [style.height.px]='headerHeight' [parent]='this'>\n            </igx-pivot-row-dimension-header-group>\n    </div>\n</div>\n\n<ng-template #headerTemplate let-column>\n    <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{dimension.level}}'>\n        <igx-icon [attr.draggable]=\" false\" (click)=\"toggleRowDimension($event)\">\n            {{ getExpandState() ? 'expand_more' : 'chevron_right'}}</igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #headerDefaultTemplate let-column>\n\n    <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{dimension.level}}'>\n        <igx-icon style='flex-shrink: 0;' [attr.draggable]=\" false\">\n        </igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n", components: [{ type: IgxPivotRowDimensionHeaderGroupComponent, selector: "igx-pivot-row-dimension-header-group", inputs: ["rowIndex", "parent"] }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "igxHeaderGroupStyle": IgxHeaderGroupStylePipe, "igxHeaderGroupWidth": IgxHeaderGroupWidthPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IgxPivotRowDimensionContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IgxPivotRowDimensionContentComponent, selector: "igx-pivot-row-dimension-content", inputs: { rowIndex: "rowIndex", dimension: "dimension", rootDimension: "rootDimension", rowData: "rowData" }, viewQueries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headerTemplateDefault", first: true, predicate: ["headerDefaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headerGroups", predicate: IgxPivotRowDimensionHeaderGroupComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n    <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"width\">\n            <igx-pivot-row-dimension-header-group [ngClass]=\"rowDimensionColumn.headerGroupClasses\"\n                [ngStyle]=\"rowDimensionColumn.headerGroupStyles | igxHeaderGroupStyle:rowDimensionColumn:grid.pipeTrigger\" [column]=\"rowDimensionColumn\"\n                [style.min-width]=\"grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [rowIndex]=\"rowIndex\"\n                [parent]='this'>\n            </igx-pivot-row-dimension-header-group>\n    </div>\n</div>\n\n<ng-template #headerTemplate let-column>\n    <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{dimension.level}}'>\n        <igx-icon [attr.draggable]=\" false\" (click)=\"toggleRowDimension($event)\">\n            {{ getExpandState() ? 'expand_more' : 'chevron_right'}}</igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #headerDefaultTemplate let-column>\n\n    <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{dimension.level}}'>\n        <igx-icon style='flex-shrink: 0;' [attr.draggable]=\" false\">\n        </igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n", components: [{ type: IgxPivotRowDimensionHeaderGroupComponent, selector: "igx-pivot-row-dimension-header-group", inputs: ["rowIndex", "parent"] }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "igxHeaderGroupStyle": IgxHeaderGroupStylePipe, "igxHeaderGroupWidth": IgxHeaderGroupWidthPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxPivotRowDimensionContentComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-content', template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n    <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"width\">\n            <igx-pivot-row-dimension-header-group [ngClass]=\"rowDimensionColumn.headerGroupClasses\"\n                [ngStyle]=\"rowDimensionColumn.headerGroupStyles | igxHeaderGroupStyle:rowDimensionColumn:grid.pipeTrigger\" [column]=\"rowDimensionColumn\"\n                [style.min-width]=\"grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [rowIndex]=\"rowIndex\"\n                [style.height.px]='headerHeight' [parent]='this'>\n            </igx-pivot-row-dimension-header-group>\n    </div>\n</div>\n\n<ng-template #headerTemplate let-column>\n    <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{dimension.level}}'>\n        <igx-icon [attr.draggable]=\" false\" (click)=\"toggleRowDimension($event)\">\n            {{ getExpandState() ? 'expand_more' : 'chevron_right'}}</igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #headerDefaultTemplate let-column>\n\n    <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{dimension.level}}'>\n        <igx-icon style='flex-shrink: 0;' [attr.draggable]=\" false\">\n        </igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-content', template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n    <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"width\">\n            <igx-pivot-row-dimension-header-group [ngClass]=\"rowDimensionColumn.headerGroupClasses\"\n                [ngStyle]=\"rowDimensionColumn.headerGroupStyles | igxHeaderGroupStyle:rowDimensionColumn:grid.pipeTrigger\" [column]=\"rowDimensionColumn\"\n                [style.min-width]=\"grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [rowIndex]=\"rowIndex\"\n                [parent]='this'>\n            </igx-pivot-row-dimension-header-group>\n    </div>\n</div>\n\n<ng-template #headerTemplate let-column>\n    <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{dimension.level}}'>\n        <igx-icon [attr.draggable]=\" false\" (click)=\"toggleRowDimension($event)\">\n            {{ getExpandState() ? 'expand_more' : 'chevron_right'}}</igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #headerDefaultTemplate let-column>\n\n    <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{dimension.level}}'>\n        <igx-icon style='flex-shrink: 0;' [attr.draggable]=\" false\">\n        </igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -87099,7 +87097,7 @@ IgxPivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         IgxPivotColumnResizingService,
         IgxForOfSyncService,
         IgxForOfScrollSyncService
-    ], viewQueries: [{ propertyName: "theadRow", first: true, predicate: IgxPivotHeaderRowComponent, descendants: true, static: true }, { propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "resizeLine", first: true, predicate: IgxPivotGridColumnResizerComponent, descendants: true }, { propertyName: "defaultEmptyPivotGridTemplate", first: true, predicate: ["emptyPivotGridTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, descendants: true, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "rowDimensionContentCollection", predicate: IgxPivotRowDimensionContentComponent, descendants: true }, { propertyName: "verticalRowDimScrollContainers", predicate: ["verticalRowDimScrollContainer"], descendants: true, read: IgxGridForOfDirective }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Grid table head row area -->\n<igx-pivot-header-row class=\"igx-grid-thead igx-grid-thead--pivot\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n>\n</igx-pivot-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <ng-container *ngTemplateOutlet=\"rowDimensions.length ? defaultRowDimensionsTemplate : emptyRowDimensionsTemplate; context: this\"></ng-container>\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)='preventContainerScroll($event)'\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger\n        | pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger\n        | pivotGridRow:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridColumn:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridAutoTransform:pivotConfiguration:pipeTrigger\n        | pivotGridColumnSort:sortingExpressions:sortStrategy:pipeTrigger\n        | pivotGridRowExpansion:pivotConfiguration:expansionStates:defaultExpandState:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight'\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            #verticalScrollContainer>\n            <ng-template\n                [igxTemplateOutlet]='recordTemplate'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData>\n            <igx-pivot-row [style.min-height.px]=\"renderedRowHeight\" [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-pivot-row>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" #tfoot>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n    </span>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n<igx-pivot-grid-column-resizer [restrictResizerTop]=\"theadRow.nativeElement.clientHeight\" *ngIf=\"colResizingService.showResizer\"></igx-pivot-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n\n<ng-template #headerTemplate let-column>\n    <div class=\"igx-grid__tr--header\">\n        <igx-icon [attr.draggable]=\"false\"\n                  (click)=\"toggleColumn(column)\">\n                  {{getColumnGroupExpandState(column) ? 'chevron_right' : 'expand_more'}}</igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #defaultRowDimensionsTemplate>\n    <div tabindex=\"0\" [style.height.px]='totalHeight' *ngFor='let dim of rowDimensions; let dimIndex = index;' #rowDimensionContainer role=\"rowgroup\" class='igx-grid__tbody-pivot-dimension' (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"dataView\n        | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger\"\n                     let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n                     [igxForContainerSize]='calcHeight'\n                     [igxForItemSize]=\"renderedRowHeight\"\n                     [igxForSizePropName]='\"height\"'\n                     #verticalRowDimScrollContainer>\n            <igx-pivot-row-dimension-content role='row' class=\"igx-grid-thead\" [grid]=\"this\"\n                                             [dimension]='rowData.dimensions[dimIndex]'\n                                             [rootDimension]='dim'\n                                             [rowIndex]='rowIndex' [rowData]='rowData'\n                                             [density]=\"displayDensity\" [width]=\"rowDimensionWidthToPixels(dim)\">\n            </igx-pivot-row-dimension-content>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #emptyRowDimensionsTemplate>\n    <div tabindex=\"0\" *ngIf='columnDimensions.length > 0 || values.length > 0' #rowDimensionContainer role=\"rowgroup\" class='igx-grid__tbody-pivot-dimension' (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        <igx-pivot-row-dimension-content role='row' class=\"igx-grid-thead\" [grid]=\"this\"\n            [dimension]='emptyRowDimension'\n            [rootDimension]='emptyRowDimension'\n            [rowIndex]='0' [rowData]='dataView[0]'\n            [density]=\"displayDensity\" [width]=\"rowDimensionWidthToPixels(emptyRowDimension)\">\n        </igx-pivot-row-dimension-content>\n    </div>\n</ng-template>\n\n<ng-template #emptyPivotGridTemplate>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{resourceStrings.igx_grid_pivot_empty_message}}</span>\n    </span>\n</ng-template>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='excelStyleFilterMaxHeight' [minHeight]='excelStyleFilterMinHeight'>\n        <div igxExcelStyleColumnOperations [hidden]='true'></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", components: [{ type: IgxPivotHeaderRowComponent, selector: "igx-pivot-header-row" }, { type: IgxPivotRowComponent, selector: "igx-pivot-row", inputs: ["selected", "data"] }, { type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { type: IgxPivotGridColumnResizerComponent, selector: "igx-pivot-grid-column-resizer" }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxPivotRowDimensionContentComponent, selector: "igx-pivot-row-dimension-content", inputs: ["rowIndex", "dimension", "rootDimension", "rowData"] }, { type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search" }], directives: [{ type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache"], outputs: ["dataChanging"] }, { type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }], pipes: { "pivotGridRowExpansion": IgxPivotRowExpansionPipe, "pivotGridColumnSort": IgxPivotGridColumnSortingPipe, "pivotGridAutoTransform": IgxPivotAutoTransform, "pivotGridColumn": IgxPivotColumnPipe, "pivotGridRow": IgxPivotRowPipe, "pivotGridSort": IgxPivotGridSortingPipe, "pivotGridFilter": IgxPivotGridFilterPipe, "igxGridRowClasses": IgxGridRowClassesPipe, "igxGridRowStyles": IgxGridRowStylesPipe, "pivotGridCellMerging": IgxPivotCellMergingPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "theadRow", first: true, predicate: IgxPivotHeaderRowComponent, descendants: true, static: true }, { propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "resizeLine", first: true, predicate: IgxPivotGridColumnResizerComponent, descendants: true }, { propertyName: "defaultEmptyPivotGridTemplate", first: true, predicate: ["emptyPivotGridTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, descendants: true, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "rowDimensionContentCollection", predicate: IgxPivotRowDimensionContentComponent, descendants: true }, { propertyName: "verticalRowDimScrollContainers", predicate: ["verticalRowDimScrollContainer"], descendants: true, read: IgxGridForOfDirective }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Grid table head row area -->\n<igx-pivot-header-row class=\"igx-grid-thead igx-grid-thead--pivot\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n>\n</igx-pivot-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <ng-container *ngTemplateOutlet=\"rowDimensions.length ? defaultRowDimensionsTemplate : emptyRowDimensionsTemplate; context: this\"></ng-container>\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)='preventContainerScroll($event)'\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger\n        | pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger\n        | pivotGridRow:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridColumn:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridAutoTransform:pivotConfiguration:pipeTrigger\n        | pivotGridColumnSort:sortingExpressions:sortStrategy:pipeTrigger\n        | pivotGridRowExpansion:pivotConfiguration:expansionStates:defaultExpandState:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight'\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            #verticalScrollContainer>\n            <ng-template\n                [igxTemplateOutlet]='recordTemplate'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData>\n            <igx-pivot-row [style.height.px]=\"renderedRowHeight\" [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-pivot-row>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" #tfoot>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n    </span>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n<igx-pivot-grid-column-resizer [restrictResizerTop]=\"theadRow.nativeElement.clientHeight\" *ngIf=\"colResizingService.showResizer\"></igx-pivot-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n\n<ng-template #headerTemplate let-column>\n    <div class=\"igx-grid__tr--header\">\n        <igx-icon [attr.draggable]=\"false\"\n                  (click)=\"toggleColumn(column)\">\n                  {{getColumnGroupExpandState(column) ? 'chevron_right' : 'expand_more'}}</igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #defaultRowDimensionsTemplate>\n    <div tabindex=\"0\" [style.height.px]='totalHeight' *ngFor='let dim of rowDimensions; let dimIndex = index;' #rowDimensionContainer role=\"rowgroup\" class='igx-grid__tbody-pivot-dimension' (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"dataView\n        | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger\"\n                     let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n                     [igxForContainerSize]='calcHeight'\n                     [igxForItemSize]=\"renderedRowHeight\"\n                     [igxForSizePropName]='\"height\"'\n                     #verticalRowDimScrollContainer>\n            <igx-pivot-row-dimension-content role='row' class=\"igx-grid-thead\" [grid]=\"this\"\n                                             [dimension]='rowData.dimensions[dimIndex]'\n                                             [rootDimension]='dim'\n                                             [style.height.px]=\"renderedRowHeight * (rowData.rowSpan || 1)\"\n                                             [rowIndex]='rowIndex' [rowData]='rowData'\n                                             [density]=\"displayDensity\" [width]=\"rowDimensionWidthToPixels(dim)\">\n            </igx-pivot-row-dimension-content>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #emptyRowDimensionsTemplate>\n    <div tabindex=\"0\" *ngIf='columnDimensions.length > 0 || values.length > 0' #rowDimensionContainer role=\"rowgroup\" class='igx-grid__tbody-pivot-dimension' (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        <igx-pivot-row-dimension-content role='row' class=\"igx-grid-thead\" [grid]=\"this\"\n            [dimension]='emptyRowDimension'\n            [rootDimension]='emptyRowDimension'\n            [rowIndex]='0' [rowData]='dataView[0]'\n            [density]=\"displayDensity\" [width]=\"rowDimensionWidthToPixels(emptyRowDimension)\">\n        </igx-pivot-row-dimension-content>\n    </div>\n</ng-template>\n\n<ng-template #emptyPivotGridTemplate>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{resourceStrings.igx_grid_pivot_empty_message}}</span>\n    </span>\n</ng-template>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='excelStyleFilterMaxHeight' [minHeight]='excelStyleFilterMinHeight'>\n        <div igxExcelStyleColumnOperations [hidden]='true'></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", components: [{ type: IgxPivotHeaderRowComponent, selector: "igx-pivot-header-row" }, { type: IgxPivotRowComponent, selector: "igx-pivot-row", inputs: ["selected", "data"] }, { type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { type: IgxPivotGridColumnResizerComponent, selector: "igx-pivot-grid-column-resizer" }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxPivotRowDimensionContentComponent, selector: "igx-pivot-row-dimension-content", inputs: ["rowIndex", "dimension", "rootDimension", "rowData"] }, { type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search" }], directives: [{ type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache"], outputs: ["dataChanging"] }, { type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }], pipes: { "pivotGridRowExpansion": IgxPivotRowExpansionPipe, "pivotGridColumnSort": IgxPivotGridColumnSortingPipe, "pivotGridAutoTransform": IgxPivotAutoTransform, "pivotGridColumn": IgxPivotColumnPipe, "pivotGridRow": IgxPivotRowPipe, "pivotGridSort": IgxPivotGridSortingPipe, "pivotGridFilter": IgxPivotGridFilterPipe, "igxGridRowClasses": IgxGridRowClassesPipe, "igxGridRowStyles": IgxGridRowStylesPipe, "pivotGridCellMerging": IgxPivotCellMergingPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     WatchChanges()
 ], IgxPivotGridComponent.prototype, "hideRowSelectors", null);
@@ -87119,7 +87117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         IgxPivotColumnResizingService,
                         IgxForOfSyncService,
                         IgxForOfScrollSyncService
-                    ], template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Grid table head row area -->\n<igx-pivot-header-row class=\"igx-grid-thead igx-grid-thead--pivot\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n>\n</igx-pivot-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <ng-container *ngTemplateOutlet=\"rowDimensions.length ? defaultRowDimensionsTemplate : emptyRowDimensionsTemplate; context: this\"></ng-container>\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)='preventContainerScroll($event)'\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger\n        | pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger\n        | pivotGridRow:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridColumn:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridAutoTransform:pivotConfiguration:pipeTrigger\n        | pivotGridColumnSort:sortingExpressions:sortStrategy:pipeTrigger\n        | pivotGridRowExpansion:pivotConfiguration:expansionStates:defaultExpandState:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight'\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            #verticalScrollContainer>\n            <ng-template\n                [igxTemplateOutlet]='recordTemplate'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData>\n            <igx-pivot-row [style.min-height.px]=\"renderedRowHeight\" [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-pivot-row>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" #tfoot>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n    </span>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n<igx-pivot-grid-column-resizer [restrictResizerTop]=\"theadRow.nativeElement.clientHeight\" *ngIf=\"colResizingService.showResizer\"></igx-pivot-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n\n<ng-template #headerTemplate let-column>\n    <div class=\"igx-grid__tr--header\">\n        <igx-icon [attr.draggable]=\"false\"\n                  (click)=\"toggleColumn(column)\">\n                  {{getColumnGroupExpandState(column) ? 'chevron_right' : 'expand_more'}}</igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #defaultRowDimensionsTemplate>\n    <div tabindex=\"0\" [style.height.px]='totalHeight' *ngFor='let dim of rowDimensions; let dimIndex = index;' #rowDimensionContainer role=\"rowgroup\" class='igx-grid__tbody-pivot-dimension' (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"dataView\n        | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger\"\n                     let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n                     [igxForContainerSize]='calcHeight'\n                     [igxForItemSize]=\"renderedRowHeight\"\n                     [igxForSizePropName]='\"height\"'\n                     #verticalRowDimScrollContainer>\n            <igx-pivot-row-dimension-content role='row' class=\"igx-grid-thead\" [grid]=\"this\"\n                                             [dimension]='rowData.dimensions[dimIndex]'\n                                             [rootDimension]='dim'\n                                             [rowIndex]='rowIndex' [rowData]='rowData'\n                                             [density]=\"displayDensity\" [width]=\"rowDimensionWidthToPixels(dim)\">\n            </igx-pivot-row-dimension-content>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #emptyRowDimensionsTemplate>\n    <div tabindex=\"0\" *ngIf='columnDimensions.length > 0 || values.length > 0' #rowDimensionContainer role=\"rowgroup\" class='igx-grid__tbody-pivot-dimension' (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        <igx-pivot-row-dimension-content role='row' class=\"igx-grid-thead\" [grid]=\"this\"\n            [dimension]='emptyRowDimension'\n            [rootDimension]='emptyRowDimension'\n            [rowIndex]='0' [rowData]='dataView[0]'\n            [density]=\"displayDensity\" [width]=\"rowDimensionWidthToPixels(emptyRowDimension)\">\n        </igx-pivot-row-dimension-content>\n    </div>\n</ng-template>\n\n<ng-template #emptyPivotGridTemplate>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{resourceStrings.igx_grid_pivot_empty_message}}</span>\n    </span>\n</ng-template>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='excelStyleFilterMaxHeight' [minHeight]='excelStyleFilterMinHeight'>\n        <div igxExcelStyleColumnOperations [hidden]='true'></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" }]
+                    ], template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Grid table head row area -->\n<igx-pivot-header-row class=\"igx-grid-thead igx-grid-thead--pivot\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n>\n</igx-pivot-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <ng-container *ngTemplateOutlet=\"rowDimensions.length ? defaultRowDimensionsTemplate : emptyRowDimensionsTemplate; context: this\"></ng-container>\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)='preventContainerScroll($event)'\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger\n        | pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger\n        | pivotGridRow:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridColumn:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridAutoTransform:pivotConfiguration:pipeTrigger\n        | pivotGridColumnSort:sortingExpressions:sortStrategy:pipeTrigger\n        | pivotGridRowExpansion:pivotConfiguration:expansionStates:defaultExpandState:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight'\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            #verticalScrollContainer>\n            <ng-template\n                [igxTemplateOutlet]='recordTemplate'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData>\n            <igx-pivot-row [style.height.px]=\"renderedRowHeight\" [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-pivot-row>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" #tfoot>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n    </span>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n<igx-pivot-grid-column-resizer [restrictResizerTop]=\"theadRow.nativeElement.clientHeight\" *ngIf=\"colResizingService.showResizer\"></igx-pivot-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n\n<ng-template #headerTemplate let-column>\n    <div class=\"igx-grid__tr--header\">\n        <igx-icon [attr.draggable]=\"false\"\n                  (click)=\"toggleColumn(column)\">\n                  {{getColumnGroupExpandState(column) ? 'chevron_right' : 'expand_more'}}</igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #defaultRowDimensionsTemplate>\n    <div tabindex=\"0\" [style.height.px]='totalHeight' *ngFor='let dim of rowDimensions; let dimIndex = index;' #rowDimensionContainer role=\"rowgroup\" class='igx-grid__tbody-pivot-dimension' (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"dataView\n        | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger\"\n                     let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n                     [igxForContainerSize]='calcHeight'\n                     [igxForItemSize]=\"renderedRowHeight\"\n                     [igxForSizePropName]='\"height\"'\n                     #verticalRowDimScrollContainer>\n            <igx-pivot-row-dimension-content role='row' class=\"igx-grid-thead\" [grid]=\"this\"\n                                             [dimension]='rowData.dimensions[dimIndex]'\n                                             [rootDimension]='dim'\n                                             [style.height.px]=\"renderedRowHeight * (rowData.rowSpan || 1)\"\n                                             [rowIndex]='rowIndex' [rowData]='rowData'\n                                             [density]=\"displayDensity\" [width]=\"rowDimensionWidthToPixels(dim)\">\n            </igx-pivot-row-dimension-content>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #emptyRowDimensionsTemplate>\n    <div tabindex=\"0\" *ngIf='columnDimensions.length > 0 || values.length > 0' #rowDimensionContainer role=\"rowgroup\" class='igx-grid__tbody-pivot-dimension' (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        <igx-pivot-row-dimension-content role='row' class=\"igx-grid-thead\" [grid]=\"this\"\n            [dimension]='emptyRowDimension'\n            [rootDimension]='emptyRowDimension'\n            [rowIndex]='0' [rowData]='dataView[0]'\n            [density]=\"displayDensity\" [width]=\"rowDimensionWidthToPixels(emptyRowDimension)\">\n        </igx-pivot-row-dimension-content>\n    </div>\n</ng-template>\n\n<ng-template #emptyPivotGridTemplate>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{resourceStrings.igx_grid_pivot_empty_message}}</span>\n    </span>\n</ng-template>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='excelStyleFilterMaxHeight' [minHeight]='excelStyleFilterMinHeight'>\n        <div igxExcelStyleColumnOperations [hidden]='true'></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" }]
         }], ctorParameters: function () { return [{ type: IgxGridSelectionService }, { type: IgxPivotColumnResizingService }, { type: GridBaseAPIService }, { type: IgxFlatTransactionFactory }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]