igniteui-angular 13.1.0-rc.1 → 13.1.0-rc.2

package/fesm2020/igniteui-angular.mjs

@@ -3386,7 +3386,7 @@ class IgxBaseExporter {
                     rowID: island.primaryKey ? entry[island.primaryKey] : entry,
                     rowIslandKey: island.key
                 };
-                const islandGrid = grid?.hgridAPI.getChildGrid([path]);
+                const islandGrid = grid?.gridAPI.getChildGrid([path]);
                 const keyRecordData = this.prepareIslandData(island, islandGrid, entry[island.key]) || [];
                 this.getAllChildColumnsAndData(island, keyRecordData, expansionStateVal, islandGrid);
             }
@@ -3480,7 +3480,7 @@ class IgxBaseExporter {
                             rowID: childIsland.primaryKey ? rec[childIsland.primaryKey] : rec,
                             rowIslandKey: childIsland.key
                         };
-                        const childIslandGrid = grid?.hgridAPI.getChildGrid([path]);
+                        const childIslandGrid = grid?.gridAPI.getChildGrid([path]);
                         const keyRecordData = this.prepareIslandData(island, childIslandGrid, rec[childIsland.key]) || [];
                         this.getAllChildColumnsAndData(childIsland, keyRecordData, islandExpansionStateVal, childIslandGrid);
                     }
@@ -21671,21 +21671,6 @@ const filteringStateDefaults = {
     strategy: new FilteringStrategy()
 };
 
-/**
-* Default pivot keys used for data processing in the pivot pipes.
-*/
-const DEFAULT_PIVOT_KEYS = {
-    aggregations: 'aggregations', records: 'records', children: 'children', level: 'level',
-    rowDimensionSeparator: '_', columnDimensionSeparator: '-'
-};
-/** The dimension types - Row, Column or Filter. */
-var PivotDimensionType;
-(function (PivotDimensionType) {
-    PivotDimensionType[PivotDimensionType["Row"] = 0] = "Row";
-    PivotDimensionType[PivotDimensionType["Column"] = 1] = "Column";
-    PivotDimensionType[PivotDimensionType["Filter"] = 2] = "Filter";
-})(PivotDimensionType || (PivotDimensionType = {}));
-
 const clear = (el) => el === 0 || Boolean(el);
 const first = (arr) => arr[0];
 const last = (arr) => arr[arr.length - 1];
@@ -22205,6 +22190,21 @@ class IgxPivotTimeAggregate extends IgxPivotAggregate {
     }
 }
 
+/**
+* Default pivot keys used for data processing in the pivot pipes.
+*/
+const DEFAULT_PIVOT_KEYS = {
+    aggregations: 'aggregations', records: 'records', children: 'children', level: 'level',
+    rowDimensionSeparator: '_', columnDimensionSeparator: '-'
+};
+/** The dimension types - Row, Column or Filter. */
+var PivotDimensionType;
+(function (PivotDimensionType) {
+    PivotDimensionType[PivotDimensionType["Row"] = 0] = "Row";
+    PivotDimensionType[PivotDimensionType["Column"] = 1] = "Column";
+    PivotDimensionType[PivotDimensionType["Filter"] = 2] = "Filter";
+})(PivotDimensionType || (PivotDimensionType = {}));
+
 class PivotUtil {
     // go through all children and apply new dimension groups as child
     static processGroups(recs, dimension, pivotKeys) {
@@ -22603,27 +22603,47 @@ class PivotUtil {
                 return IgxPivotAggregate.aggregators();
         }
     }
-    static generateDimensionSortingExpressions(dimensions) {
-        const expressions = [];
-        PivotUtil.flatten(dimensions).forEach(x => {
-            if (x.sortDirection) {
-                expressions.push({
-                    dir: x.sortDirection,
-                    fieldName: x.memberName,
-                    strategy: DefaultPivotSortingStrategy.instance()
-                });
-            }
-            else {
-                expressions.push({
-                    dir: SortingDirection.None,
-                    fieldName: x.memberName,
-                    strategy: DefaultPivotSortingStrategy.instance()
-                });
-            }
-        });
-        return expressions;
+}
+
+class DefaultPivotGridRecordSortingStrategy extends DefaultSortingStrategy {
+    static instance() {
+        return this._instance || (this._instance = new this());
+    }
+    sort(data, fieldName, dir, ignoreCase, valueResolver, isDate, isTime, grid) {
+        const reverse = (dir === SortingDirection.Desc ? -1 : 1);
+        const cmpFunc = (obj1, obj2) => this.compareObjects(obj1, obj2, fieldName, reverse, ignoreCase, this.getFieldValue, isDate, isTime);
+        return this.arraySort(data, cmpFunc);
+    }
+    getFieldValue(obj, key, isDate = false, isTime = false) {
+        return obj.aggregationValues.get(key);
     }
 }
+DefaultPivotGridRecordSortingStrategy._instance = null;
+class DefaultPivotSortingStrategy extends DefaultSortingStrategy {
+    static instance() {
+        return this._instance || (this._instance = new this());
+    }
+    sort(data, fieldName, dir, ignoreCase, valueResolver, isDate, isTime, grid) {
+        const key = fieldName;
+        const allDimensions = grid.allDimensions;
+        const enabledDimensions = allDimensions.filter(x => x && x.enabled);
+        this.dimension = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === key);
+        const reverse = (dir === SortingDirection.Desc ? -1 : 1);
+        const cmpFunc = (obj1, obj2) => this.compareObjects(obj1, obj2, key, reverse, ignoreCase, this.getFieldValue, isDate, isTime);
+        return this.arraySort(data, cmpFunc);
+    }
+    getFieldValue(obj, key, isDate = false, isTime = false) {
+        let resolvedValue = PivotUtil.extractValueFromDimension(this.dimension, obj) || obj[0];
+        const formatAsDate = this.dimension.dataType === GridColumnDataType.Date || this.dimension.dataType === GridColumnDataType.DateTime;
+        if (formatAsDate) {
+            const date = parseDate(resolvedValue);
+            resolvedValue = isTime && date ?
+                new Date().setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) : date;
+        }
+        return resolvedValue;
+    }
+}
+DefaultPivotSortingStrategy._instance = null;
 
 class NoopPivotDimensionsStrategy {
     static instance() {
@@ -22741,45 +22761,6 @@ class DimensionValuesFilteringStrategy extends FilteringStrategy {
         return PivotUtil.extractValueFromDimension(dim, rec);
     }
 }
-class DefaultPivotSortingStrategy extends DefaultSortingStrategy {
-    static instance() {
-        return this._instance || (this._instance = new this());
-    }
-    sort(data, fieldName, dir, ignoreCase, valueResolver, isDate, isTime, grid) {
-        const key = fieldName;
-        const allDimensions = grid.allDimensions;
-        const enabledDimensions = allDimensions.filter(x => x && x.enabled);
-        this.dimension = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === key);
-        const reverse = (dir === SortingDirection.Desc ? -1 : 1);
-        const cmpFunc = (obj1, obj2) => this.compareObjects(obj1, obj2, key, reverse, ignoreCase, this.getFieldValue, isDate, isTime);
-        return this.arraySort(data, cmpFunc);
-    }
-    getFieldValue(obj, key, isDate = false, isTime = false) {
-        let resolvedValue = PivotUtil.extractValueFromDimension(this.dimension, obj) || obj[0];
-        const formatAsDate = this.dimension.dataType === GridColumnDataType.Date || this.dimension.dataType === GridColumnDataType.DateTime;
-        if (formatAsDate) {
-            const date = parseDate(resolvedValue);
-            resolvedValue = isTime && date ?
-                new Date().setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) : date;
-        }
-        return resolvedValue;
-    }
-}
-DefaultPivotSortingStrategy._instance = null;
-class DefaultPivotGridRecordSortingStrategy extends DefaultSortingStrategy {
-    static instance() {
-        return this._instance || (this._instance = new this());
-    }
-    sort(data, fieldName, dir, ignoreCase, valueResolver, isDate, isTime, grid) {
-        const reverse = (dir === SortingDirection.Desc ? -1 : 1);
-        const cmpFunc = (obj1, obj2) => this.compareObjects(obj1, obj2, fieldName, reverse, ignoreCase, this.getFieldValue, isDate, isTime);
-        return this.arraySort(data, cmpFunc);
-    }
-    getFieldValue(obj, key, isDate = false, isTime = false) {
-        return obj.aggregationValues.get(key);
-    }
-}
-DefaultPivotGridRecordSortingStrategy._instance = null;
 
 /**
  * @hidden
@@ -25166,7 +25147,7 @@ class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective {
         // be sure row is in view
         if (grid.rowList.filter(r => r === row).length !== 0) {
             grid.gridAPI.crudService.enterEditMode(firstEditable, event);
-            firstEditable.activate();
+            firstEditable.activate(event);
         }
         this.strip.hide();
     }
@@ -44352,7 +44333,6 @@ class BaseProgressDirective {
     directionFlow(currentValue, prevValue) {
         return currentValue < prevValue ? this.step : -this.step;
     }
-    runAnimation(value) { }
     /**
      * @hidden
      * @param step
@@ -46763,8 +46743,8 @@ class IgxExcelStyleSearchComponent {
             selectAllBtn = this.esf.listData[0];
         }
         if (!this.searchValue) {
-            const anyFiltered = this.esf.listData.some(i => i.isFiltered);
-            const anyUnfiltered = this.esf.listData.some(i => !i.isFiltered);
+            let anyFiltered = this.esf.listData.some(i => i.isFiltered);
+            let anyUnfiltered = this.esf.listData.some(i => !i.isFiltered);
             selectAllBtn.indeterminate = anyFiltered && anyUnfiltered;
             if (this.isHierarchical() && this.tree) {
                 this._hierarchicalSelectedItems = this.tree.nodes.map(n => n.data).filter(item => item.isFiltered);
@@ -46777,7 +46757,10 @@ class IgxExcelStyleSearchComponent {
                     this.tree.nodes.forEach(n => {
                         const item = n.data;
                         n.selected = item.isSelected || item.isFiltered;
+                        anyFiltered = anyFiltered || n.selected;
+                        anyUnfiltered = anyUnfiltered || !n.selected;
                     });
+                    selectAllBtn.indeterminate = anyFiltered && anyUnfiltered;
                 }
             }
             selectAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all;
@@ -59003,7 +58986,7 @@ const FILTER_ROW_HEIGHT = 50;
 // but in the same time we need to set row editing overlay outlet before opening the overlay itself.
 const MIN_ROW_EDITING_COUNT_THRESHOLD = 2;
 class IgxGridBaseDirective extends DisplayDensityBase {
-    constructor(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, factoryResolver, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform, _diTransactions) {
+    constructor(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform, _diTransactions) {
         super(_displayDensityOptions);
         this.selectionService = selectionService;
         this.colResizingService = colResizingService;
@@ -59018,7 +59001,6 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.viewRef = viewRef;
         this.appRef = appRef;
         this.moduleRef = moduleRef;
-        this.factoryResolver = factoryResolver;
         this.injector = injector;
         this.navigation = navigation;
         this.filteringService = filteringService;
@@ -59815,6 +59797,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         */
         this.EMPTY_DATA = [];
         this.isPivot = false;
+        /**
+         * @hidden
+         */
+        this.destroy$ = new Subject();
         /**
          * @hidden
          */
@@ -59868,10 +59854,6 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this._columnPinning = false;
         this._pinnedRecordIDs = [];
-        /**
-         * @hidden
-         */
-        this.destroy$ = new Subject();
         this._allowFiltering = false;
         this._allowAdvancedFiltering = false;
         this._filterMode = FilterMode.quickFilter;
@@ -61311,7 +61293,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             this.notifyChanges(true);
         });
         this.verticalScrollContainer.contentSizeChange.pipe(filter(() => !this._init), destructor).subscribe(() => {
-            this.calculateGridSizes(false);
+            this.notifyChanges(true);
+            this.cdr.detectChanges();
         });
         this.onDensityChanged.pipe(destructor).subscribe(() => {
             this.crudService.endEdit(false);
@@ -61458,7 +61441,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         let dynamicFactory;
         const factoryResolver = this.moduleRef
             ? this.moduleRef.componentFactoryResolver
-            : this.factoryResolver;
+            : this.resolver;
         try {
             dynamicFactory = factoryResolver.resolveComponentFactory(component);
         }
@@ -65011,7 +64994,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.toggleRowEditingOverlay(true);
     }
 }
-IgxGridBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxGridBaseDirective, deps: [{ token: IgxGridSelectionService }, { token: IgxColumnResizingService }, { token: IGX_GRID_SERVICE_BASE }, { token: IgxFlatTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.NgModuleRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: IgxGridNavigationService }, { token: IgxFilteringService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: DisplayDensityToken, optional: true }, { token: LOCALE_ID }, { token: PlatformUtil }, { token: IgxGridTransaction, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+IgxGridBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxGridBaseDirective, deps: [{ token: IgxGridSelectionService }, { token: IgxColumnResizingService }, { token: IGX_GRID_SERVICE_BASE }, { token: IgxFlatTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.NgModuleRef }, { token: i0.Injector }, { token: IgxGridNavigationService }, { token: IgxFilteringService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: DisplayDensityToken, optional: true }, { token: LOCALE_ID }, { token: PlatformUtil }, { token: IgxGridTransaction, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 IgxGridBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: IgxGridBaseDirective, inputs: { snackbarDisplayTime: "snackbarDisplayTime", autoGenerate: "autoGenerate", moving: "moving", emptyGridTemplate: "emptyGridTemplate", addRowEmptyTemplate: "addRowEmptyTemplate", loadingGridTemplate: "loadingGridTemplate", summaryRowHeight: "summaryRowHeight", dataCloneStrategy: "dataCloneStrategy", clipboardOptions: "clipboardOptions", class: "class", evenRowCSS: "evenRowCSS", oddRowCSS: "oddRowCSS", rowClasses: "rowClasses", rowStyles: "rowStyles", primaryKey: "primaryKey", uniqueColumnValuesStrategy: "uniqueColumnValuesStrategy", resourceStrings: "resourceStrings", filteringLogic: "filteringLogic", filteringExpressionsTree: "filteringExpressionsTree", advancedFilteringExpressionsTree: "advancedFilteringExpressionsTree", locale: "locale", pagingMode: "pagingMode", paging: "paging", page: "page", perPage: "perPage", hideRowSelectors: "hideRowSelectors", rowDraggable: "rowDraggable", rowEditable: "rowEditable", height: "height", width: "width", rowHeight: "rowHeight", columnWidth: "columnWidth", emptyGridMessage: "emptyGridMessage", isLoading: "isLoading", emptyFilteredGridMessage: "emptyFilteredGridMessage", pinning: "pinning", allowFiltering: "allowFiltering", allowAdvancedFiltering: "allowAdvancedFiltering", filterMode: "filterMode", summaryPosition: "summaryPosition", summaryCalculationMode: "summaryCalculationMode", showSummaryOnCollapse: "showSummaryOnCollapse", filterStrategy: "filterStrategy", sortStrategy: "sortStrategy", selectedRows: "selectedRows", sortingExpressions: "sortingExpressions", batchEditing: "batchEditing", cellSelection: "cellSelection", rowSelection: "rowSelection", columnSelection: "columnSelection", expansionStates: "expansionStates", outlet: "outlet", totalRecords: "totalRecords", selectRowOnClick: "selectRowOnClick" }, outputs: { filteringExpressionsTreeChange: "filteringExpressionsTreeChange", advancedFilteringExpressionsTreeChange: "advancedFilteringExpressionsTreeChange", gridScroll: "gridScroll", pageChange: "pageChange", perPageChange: "perPageChange", cellClick: "cellClick", selected: "selected", rowSelectionChanging: "rowSelectionChanging", columnSelectionChanging: "columnSelectionChanging", columnPin: "columnPin", columnPinned: "columnPinned", cellEditEnter: "cellEditEnter", cellEditExit: "cellEditExit", cellEdit: "cellEdit", cellEditDone: "cellEditDone", rowEditEnter: "rowEditEnter", rowEdit: "rowEdit", rowEditDone: "rowEditDone", rowEditExit: "rowEditExit", columnInit: "columnInit", sorting: "sorting", sortingDone: "sortingDone", filtering: "filtering", filteringDone: "filteringDone", pagingDone: "pagingDone", rowAdded: "rowAdded", rowDeleted: "rowDeleted", rowDelete: "rowDelete", rowAdd: "rowAdd", columnResized: "columnResized", contextMenu: "contextMenu", doubleClick: "doubleClick", columnVisibilityChanging: "columnVisibilityChanging", columnVisibilityChanged: "columnVisibilityChanged", columnMovingStart: "columnMovingStart", columnMoving: "columnMoving", columnMovingEnd: "columnMovingEnd", gridKeydown: "gridKeydown", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", gridCopy: "gridCopy", expansionStatesChange: "expansionStatesChange", rowToggle: "rowToggle", rowPinning: "rowPinning", rowPinned: "rowPinned", activeNodeChange: "activeNodeChange", sortingExpressionsChange: "sortingExpressionsChange", toolbarExporting: "toolbarExporting", rangeSelected: "rangeSelected", rendered: "rendered", localeChange: "localeChange", dataChanging: "dataChanging", dataChanged: "dataChanged" }, host: { listeners: { "mouseleave": "hideActionStrip()" }, properties: { "attr.tabindex": "this.tabindex", "attr.role": "this.hostRole", "style.height": "this.height", "style.width": "this.hostWidth", "attr.class": "this.hostClass" } }, queries: [{ propertyName: "actionStrip", first: true, predicate: IgxActionStripComponent, descendants: true }, { propertyName: "excelStyleLoadingValuesTemplateDirective", first: true, predicate: IgxExcelStyleLoadingValuesTemplateDirective, descendants: true, read: IgxExcelStyleLoadingValuesTemplateDirective, static: true }, { propertyName: "rowAddText", first: true, predicate: IgxRowAddTextDirective, descendants: true, read: TemplateRef }, { propertyName: "rowExpandedIndicatorTemplate", first: true, predicate: IgxRowExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "rowCollapsedIndicatorTemplate", first: true, predicate: IgxRowCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerExpandIndicatorTemplate", first: true, predicate: IgxHeaderExpandIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerCollapseIndicatorTemplate", first: true, predicate: IgxHeaderCollapseIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleHeaderIconTemplate", first: true, predicate: IgxExcelStyleHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortAscendingHeaderIconTemplate", first: true, predicate: IgxSortAscendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortDescendingHeaderIconTemplate", first: true, predicate: IgxSortDescendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortHeaderIconTemplate", first: true, predicate: IgxSortHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "columnList", predicate: IgxColumnComponent, descendants: true, read: IgxColumnComponent }, { propertyName: "headSelectorsTemplates", predicate: IgxHeadSelectorDirective, read: IgxHeadSelectorDirective }, { propertyName: "rowSelectorsTemplates", predicate: IgxRowSelectorDirective, read: IgxRowSelectorDirective }, { propertyName: "dragGhostCustomTemplates", predicate: IgxRowDragGhostDirective, read: TemplateRef }, { propertyName: "rowEditCustomDirectives", predicate: IgxRowEditTemplateDirective, read: TemplateRef }, { propertyName: "rowEditTextDirectives", predicate: IgxRowEditTextDirective, read: TemplateRef }, { propertyName: "rowEditActionsDirectives", predicate: IgxRowEditActionsDirective, read: TemplateRef }, { propertyName: "dragIndicatorIconTemplates", predicate: IgxDragIndicatorIconDirective, read: TemplateRef }, { propertyName: "rowEditTabsCUSTOM", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "toolbar", predicate: IgxGridToolbarComponent }, { propertyName: "paginationComponents", predicate: IgxPaginatorComponent }], viewQueries: [{ propertyName: "addRowSnackbar", first: true, predicate: IgxSnackbarComponent, descendants: true }, { propertyName: "resizeLine", first: true, predicate: IgxGridColumnResizerComponent, descendants: true }, { propertyName: "loadingOverlay", first: true, predicate: ["loadingOverlay"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "loadingOutlet", first: true, predicate: ["igxLoadingOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "emptyFilteredGridTemplate", first: true, predicate: ["emptyFilteredGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyGridDefaultTemplate", first: true, predicate: ["defaultEmptyGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "loadingGridDefaultTemplate", first: true, predicate: ["defaultLoadingGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "parentVirtDir", first: true, predicate: ["scrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScrollContainer", first: true, predicate: ["verticalScrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScroll", first: true, predicate: ["verticalScrollHolder"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "scr", first: true, predicate: ["scr"], descendants: true, read: ElementRef, static: true }, { propertyName: "headerSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, read: ElementRef }, { propertyName: "theadRow", first: true, predicate: IgxGridHeaderRowComponent, descendants: true, static: true }, { propertyName: "groupArea", first: true, predicate: IgxGridGroupByAreaComponent, descendants: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, static: true }, { propertyName: "pinContainer", first: true, predicate: ["pinContainer"], descendants: true, read: ElementRef }, { propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true, static: true }, { propertyName: "rowEditingOutletDirective", first: true, predicate: ["igxRowEditingOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dragIndicatorIconBase", first: true, predicate: ["dragIndicatorIconBase"], descendants: true, read: TemplateRef, static: true }, { propertyName: "rowEditingOverlay", first: true, predicate: ["rowEditingOverlay"], descendants: true, read: IgxToggleDirective }, { propertyName: "_outletDirective", first: true, predicate: ["igxFilteringOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultESFHeaderIconTemplate", first: true, predicate: ["defaultESFHeaderIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultRowEditTemplate", first: true, predicate: ["defaultRowEditTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "tmpOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "rowEditTabsDEFAULT", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "_summaryRowList", predicate: ["summaryRow"], descendants: true, read: IgxSummaryRowComponent }, { propertyName: "_rowList", predicate: ["row"], descendants: true }, { propertyName: "_pinnedRowList", predicate: ["pinnedRow"], descendants: true }, { propertyName: "_dataRowList", predicate: IgxRowDirective, descendants: true, read: IgxRowDirective }], usesInheritance: true, ngImport: i0 });
 __decorate([
     WatchChanges()
@@ -65069,7 +65052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 }] }, { type: IgxFlatTransactionFactory }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.IterableDiffers }, { type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: i0.NgModuleRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: IgxGridNavigationService }, { type: IgxFilteringService }, { type: IgxOverlayService, decorators: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.IterableDiffers }, { type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: i0.NgModuleRef }, { type: i0.Injector }, { type: IgxGridNavigationService }, { type: IgxFilteringService }, { type: IgxOverlayService, decorators: [{
                     type: Inject,
                     args: [IgxOverlayService]
                 }] }, { type: IgxGridSummaryService }, { type: undefined, decorators: [{
@@ -66948,7 +66931,6 @@ class IgxGridCellComponent {
     }
     getCellType(useRow) {
         const rowID = useRow ? this.grid.createRow(this.intRow.index, this.intRow.data) : this.intRow.index;
-        // TODO: Fix types
         return new IgxGridCell(this.grid, rowID, this.column.field);
     }
 }
@@ -69024,7 +69006,7 @@ class IgxGridStateDirective {
                         childGrid = grid;
                         grid = grid.parent;
                     }
-                    return grid.hgridAPI.getParentRowId(childGrid);
+                    return grid.gridAPI.getParentRowId(childGrid);
                 }
             }
         };
@@ -72841,14 +72823,12 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
     // }
     constructor(selectionService, colResizingService, gridAPI, 
     // public gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>,
-    transactionFactory, _elementRef, _zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, factoryResolver, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform, _diTransactions) {
-        super(selectionService, colResizingService, gridAPI, transactionFactory, _elementRef, _zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, factoryResolver, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform);
+    transactionFactory, _elementRef, _zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform, _diTransactions) {
+        super(selectionService, colResizingService, gridAPI, transactionFactory, _elementRef, _zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform);
         this.selectionService = selectionService;
         this.colResizingService = colResizingService;
         this.gridAPI = gridAPI;
         this.transactionFactory = transactionFactory;
-        this._elementRef = _elementRef;
-        this._zone = _zone;
         this.document = document;
         this.cdr = cdr;
         this.resolver = resolver;
@@ -73611,7 +73591,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         });
     }
 }
-IgxTreeGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxTreeGridComponent, deps: [{ token: IgxGridSelectionService }, { token: IgxColumnResizingService }, { token: IGX_GRID_SERVICE_BASE }, { token: IgxHierarchicalTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.NgModuleRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: IgxGridNavigationService }, { token: IgxFilteringService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: DisplayDensityToken, optional: true }, { token: LOCALE_ID }, { token: PlatformUtil }, { token: IgxGridTransaction, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+IgxTreeGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxTreeGridComponent, deps: [{ token: IgxGridSelectionService }, { token: IgxColumnResizingService }, { token: IGX_GRID_SERVICE_BASE }, { token: IgxHierarchicalTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.NgModuleRef }, { token: i0.Injector }, { token: IgxGridNavigationService }, { token: IgxFilteringService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: DisplayDensityToken, optional: true }, { token: LOCALE_ID }, { token: PlatformUtil }, { token: IgxGridTransaction, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 IgxTreeGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IgxTreeGridComponent, selector: "igx-tree-grid", inputs: { childDataKey: "childDataKey", foreignKey: "foreignKey", hasChildrenKey: "hasChildrenKey", cascadeOnDelete: "cascadeOnDelete", loadChildrenOnDemand: "loadChildrenOnDemand", id: "id", data: "data", expansionDepth: "expansionDepth", rowLoadingIndicatorTemplate: "rowLoadingIndicatorTemplate" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, providers: [
         IgxGridCRUDService,
         IgxGridSummaryService,
@@ -73642,7 +73622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 }] }, { type: IgxHierarchicalTransactionFactory }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.IterableDiffers }, { type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: i0.NgModuleRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: IgxGridNavigationService }, { type: IgxFilteringService }, { type: IgxOverlayService, decorators: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.IterableDiffers }, { type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: i0.NgModuleRef }, { type: i0.Injector }, { type: IgxGridNavigationService }, { type: IgxFilteringService }, { type: IgxOverlayService, decorators: [{
                     type: Inject,
                     args: [IgxOverlayService]
                 }] }, { type: IgxGridSummaryService }, { type: undefined, decorators: [{
@@ -74054,7 +74034,7 @@ class IgxHierarchicalGridNavigationService extends IgxGridNavigationService {
             rowID: rowId,
             rowIslandKey: ri.key
         };
-        const childGrid = this.grid.hgridAPI.getChildGrid([pathSegment]);
+        const childGrid = this.grid.gridAPI.getChildGrid([pathSegment]);
         const targetIndex = isNext ? 0 : childGrid.dataView.length - 1;
         const targetRec = childGrid.dataView[targetIndex];
         if (!targetRec) {
@@ -74123,7 +74103,7 @@ class IgxHierarchicalGridNavigationService extends IgxGridNavigationService {
                 rowID: row.data.rowID,
                 rowIslandKey: riKey
             };
-            const childGrid = this.grid.hgridAPI.getChildGrid([pathSegment]);
+            const childGrid = this.grid.gridAPI.getChildGrid([pathSegment]);
             rowElem = childGrid.tfoot.nativeElement;
         }
         const gridBottom = this._getMinBottom(this.grid);
@@ -74253,14 +74233,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
             type: Injectable
         }] });
 
+class IgxHierarchicalGridAPIService extends GridBaseAPIService {
+    constructor() {
+        super(...arguments);
+        this.childRowIslands = new Map();
+        this.childGrids = new Map();
+    }
+    registerChildRowIsland(rowIsland) {
+        this.childRowIslands.set(rowIsland.key, rowIsland);
+        this.destroyMap.set(rowIsland.key, new Subject());
+    }
+    unsetChildRowIsland(rowIsland) {
+        this.childGrids.delete(rowIsland.key);
+        this.childRowIslands.delete(rowIsland.key);
+        this.destroyMap.delete(rowIsland.key);
+    }
+    getChildRowIsland(key) {
+        return this.childRowIslands.get(key);
+    }
+    getChildGrid(path) {
+        const currPath = path;
+        let grid;
+        const pathElem = currPath.shift();
+        const childrenForLayout = this.childGrids.get(pathElem.rowIslandKey);
+        if (childrenForLayout) {
+            const childGrid = childrenForLayout.get(pathElem.rowID);
+            if (currPath.length === 0) {
+                grid = childGrid;
+            }
+            else {
+                grid = childGrid.gridAPI.getChildGrid(currPath);
+            }
+        }
+        return grid;
+    }
+    getChildGrids(inDepth) {
+        const allChildren = [];
+        this.childGrids.forEach((layoutMap) => {
+            layoutMap.forEach((grid) => {
+                allChildren.push(grid);
+                if (inDepth) {
+                    const children = grid.gridAPI.getChildGrids(inDepth);
+                    children.forEach((item) => {
+                        allChildren.push(item);
+                    });
+                }
+            });
+        });
+        return allChildren;
+    }
+    getParentRowId(childGrid) {
+        let rowID;
+        this.childGrids.forEach((layoutMap) => {
+            layoutMap.forEach((grid, key) => {
+                if (grid === childGrid) {
+                    rowID = key;
+                    return;
+                }
+            });
+        });
+        return rowID;
+    }
+    registerChildGrid(parentRowID, rowIslandKey, grid) {
+        let childrenForLayout = this.childGrids.get(rowIslandKey);
+        if (!childrenForLayout) {
+            this.childGrids.set(rowIslandKey, new Map());
+            childrenForLayout = this.childGrids.get(rowIslandKey);
+        }
+        childrenForLayout.set(parentRowID, grid);
+    }
+    getChildGridsForRowIsland(rowIslandKey) {
+        const childrenForLayout = this.childGrids.get(rowIslandKey);
+        const children = [];
+        if (childrenForLayout) {
+            childrenForLayout.forEach((child) => {
+                children.push(child);
+            });
+        }
+        return children;
+    }
+    getChildGridByID(rowIslandKey, rowID) {
+        const childrenForLayout = this.childGrids.get(rowIslandKey);
+        return childrenForLayout.get(rowID);
+    }
+    get_row_expansion_state(record) {
+        let inState;
+        if (record.childGridsData !== undefined) {
+            const ri = record.key;
+            const states = this.grid.expansionStates;
+            const expanded = states.get(ri);
+            if (expanded !== undefined) {
+                return expanded;
+            }
+            else {
+                return this.grid.getDefaultExpandState(record);
+            }
+        }
+        else {
+            inState = !!super.get_row_expansion_state(record);
+        }
+        return inState && this.grid.childLayoutList.length !== 0;
+    }
+    allow_expansion_state_change(rowID, expanded) {
+        const rec = this.get_rec_by_id(rowID);
+        const grid = this.grid;
+        if (grid.hasChildrenKey && !rec[grid.hasChildrenKey]) {
+            return false;
+        }
+        return !!rec && this.grid.expansionStates.get(rowID) !== expanded;
+    }
+    get_rec_by_id(rowID) {
+        const data = this.get_all_data(false);
+        const index = this.get_row_index_in_data(rowID, data);
+        return data[index];
+    }
+}
+IgxHierarchicalGridAPIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxHierarchicalGridAPIService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+IgxHierarchicalGridAPIService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxHierarchicalGridAPIService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxHierarchicalGridAPIService, decorators: [{
+            type: Injectable
+        }] });
+
 const hierarchicalTransactionServiceFactory = () => new IgxTransactionService();
 const IgxHierarchicalTransactionServiceFactory = {
     provide: IgxGridTransaction,
     useFactory: hierarchicalTransactionServiceFactory
 };
 class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
-    constructor(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, factoryResolver, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform, _diTransactions) {
-        super(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, factoryResolver, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform);
+    constructor(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform, _diTransactions) {
+        super(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform);
         this.selectionService = selectionService;
         this.colResizingService = colResizingService;
         this.gridAPI = gridAPI;
@@ -74295,7 +74396,6 @@ class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
         this.dataPreLoad = new EventEmitter();
         /** @hidden @internal */
         this.batchEditingChange = new EventEmitter();
-        this.hgridAPI = gridAPI;
     }
     /**
      * @hidden
@@ -74406,26 +74506,26 @@ class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
         return ref;
     }
     getGridsForIsland(rowIslandID) {
-        return this.hgridAPI.getChildGridsForRowIsland(rowIslandID);
+        return this.gridAPI.getChildGridsForRowIsland(rowIslandID);
     }
     getChildGrid(path) {
         if (!path) {
             return;
         }
-        return this.hgridAPI.getChildGrid(path);
+        return this.gridAPI.getChildGrid(path);
     }
 }
-IgxHierarchicalGridBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxHierarchicalGridBaseDirective, deps: [{ token: IgxGridSelectionService }, { token: IgxColumnResizingService }, { token: IGX_GRID_SERVICE_BASE }, { token: IgxFlatTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.NgModuleRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: IgxHierarchicalGridNavigationService }, { token: IgxFilteringService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: DisplayDensityToken, optional: true }, { token: LOCALE_ID }, { token: PlatformUtil }, { token: IgxGridTransaction, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+IgxHierarchicalGridBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxHierarchicalGridBaseDirective, deps: [{ token: IgxGridSelectionService }, { token: IgxColumnResizingService }, { token: IGX_GRID_SERVICE_BASE }, { token: IgxFlatTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.NgModuleRef }, { token: i0.Injector }, { token: IgxHierarchicalGridNavigationService }, { token: IgxFilteringService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: DisplayDensityToken, optional: true }, { token: LOCALE_ID }, { token: PlatformUtil }, { token: IgxGridTransaction, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 IgxHierarchicalGridBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: IgxHierarchicalGridBaseDirective, inputs: { hasChildrenKey: "hasChildrenKey", showExpandAll: "showExpandAll" }, outputs: { dataPreLoad: "dataPreLoad" }, viewQueries: [{ propertyName: "dragIndicatorIconBase", first: true, predicate: ["dragIndicatorIconBase"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxHierarchicalGridBaseDirective, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: IgxGridSelectionService }, { type: IgxColumnResizingService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: IgxGridSelectionService }, { type: IgxColumnResizingService }, { type: IgxHierarchicalGridAPIService, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_SERVICE_BASE]
                 }] }, { type: IgxFlatTransactionFactory }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.IterableDiffers }, { type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: i0.NgModuleRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: IgxHierarchicalGridNavigationService }, { type: IgxFilteringService }, { type: IgxOverlayService, decorators: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.IterableDiffers }, { type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: i0.NgModuleRef }, { type: i0.Injector }, { type: IgxHierarchicalGridNavigationService }, { type: IgxFilteringService }, { type: IgxOverlayService, decorators: [{
                     type: Inject,
                     args: [IgxOverlayService]
                 }] }, { type: IgxGridSummaryService }, { type: undefined, decorators: [{
@@ -74462,127 +74562,6 @@ const flatten = (arr) => {
     return result;
 };
 
-class IgxHierarchicalGridAPIService extends GridBaseAPIService {
-    constructor() {
-        super(...arguments);
-        this.childRowIslands = new Map();
-        this.childGrids = new Map();
-    }
-    registerChildRowIsland(rowIsland) {
-        this.childRowIslands.set(rowIsland.key, rowIsland);
-        this.destroyMap.set(rowIsland.key, new Subject());
-    }
-    unsetChildRowIsland(rowIsland) {
-        this.childGrids.delete(rowIsland.key);
-        this.childRowIslands.delete(rowIsland.key);
-        this.destroyMap.delete(rowIsland.key);
-    }
-    getChildRowIsland(key) {
-        return this.childRowIslands.get(key);
-    }
-    getChildGrid(path) {
-        const currPath = path;
-        let grid;
-        const pathElem = currPath.shift();
-        const childrenForLayout = this.childGrids.get(pathElem.rowIslandKey);
-        if (childrenForLayout) {
-            const childGrid = childrenForLayout.get(pathElem.rowID);
-            if (currPath.length === 0) {
-                grid = childGrid;
-            }
-            else {
-                grid = childGrid.hgridAPI.getChildGrid(currPath);
-            }
-        }
-        return grid;
-    }
-    getChildGrids(inDepth) {
-        const allChildren = [];
-        this.childGrids.forEach((layoutMap) => {
-            layoutMap.forEach((grid) => {
-                allChildren.push(grid);
-                if (inDepth) {
-                    const children = grid.hgridAPI.getChildGrids(inDepth);
-                    children.forEach((item) => {
-                        allChildren.push(item);
-                    });
-                }
-            });
-        });
-        return allChildren;
-    }
-    getParentRowId(childGrid) {
-        let rowID;
-        this.childGrids.forEach((layoutMap) => {
-            layoutMap.forEach((grid, key) => {
-                if (grid === childGrid) {
-                    rowID = key;
-                    return;
-                }
-            });
-        });
-        return rowID;
-    }
-    registerChildGrid(parentRowID, rowIslandKey, grid) {
-        let childrenForLayout = this.childGrids.get(rowIslandKey);
-        if (!childrenForLayout) {
-            this.childGrids.set(rowIslandKey, new Map());
-            childrenForLayout = this.childGrids.get(rowIslandKey);
-        }
-        childrenForLayout.set(parentRowID, grid);
-    }
-    getChildGridsForRowIsland(rowIslandKey) {
-        const childrenForLayout = this.childGrids.get(rowIslandKey);
-        const children = [];
-        if (childrenForLayout) {
-            childrenForLayout.forEach((child) => {
-                children.push(child);
-            });
-        }
-        return children;
-    }
-    getChildGridByID(rowIslandKey, rowID) {
-        const childrenForLayout = this.childGrids.get(rowIslandKey);
-        return childrenForLayout.get(rowID);
-    }
-    get_row_expansion_state(record) {
-        let inState;
-        if (record.childGridsData !== undefined) {
-            const ri = record.key;
-            const states = this.grid.expansionStates;
-            const expanded = states.get(ri);
-            if (expanded !== undefined) {
-                return expanded;
-            }
-            else {
-                return this.grid.getDefaultExpandState(record);
-            }
-        }
-        else {
-            inState = !!super.get_row_expansion_state(record);
-        }
-        return inState && this.grid.childLayoutList.length !== 0;
-    }
-    allow_expansion_state_change(rowID, expanded) {
-        const rec = this.get_rec_by_id(rowID);
-        const grid = this.grid;
-        if (grid.hasChildrenKey && !rec[grid.hasChildrenKey]) {
-            return false;
-        }
-        return !!rec && this.grid.expansionStates.get(rowID) !== expanded;
-    }
-    get_rec_by_id(rowID) {
-        const data = this.get_all_data(false);
-        const index = this.get_row_index_in_data(rowID, data);
-        return data[index];
-    }
-}
-IgxHierarchicalGridAPIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxHierarchicalGridAPIService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-IgxHierarchicalGridAPIService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxHierarchicalGridAPIService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxHierarchicalGridAPIService, decorators: [{
-            type: Injectable
-        }] });
-
 class IgxRowIslandAPIService {
     constructor() {
         this.change = new Subject();
@@ -74653,11 +74632,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
         }] });
 
 class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
-    constructor(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, moduleRef, factoryResolver, injector, appRef, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, rowIslandAPI, localeId, platform) {
-        super(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, factoryResolver, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform);
+    constructor(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, moduleRef, injector, appRef, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, rowIslandAPI, localeId, platform) {
+        super(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform);
         this.selectionService = selectionService;
         this.colResizingService = colResizingService;
-        this.gridAPI = gridAPI;
         this.transactionFactory = transactionFactory;
         this.document = document;
         this.overlayService = overlayService;
@@ -74714,7 +74692,6 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         this.rootGrid = null;
         this.layout_id = `igx-row-island-`;
         this.isInit = false;
-        this.hgridAPI = gridAPI;
     }
     /**
      * Sets if all immediate children of the grids for this `IgxRowIslandComponent` should be expanded/collapsed.
@@ -74783,7 +74760,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
      */
     ngOnInit() {
         this.filteringService.grid = this;
-        this.rootGrid = this.hgridAPI.grid;
+        this.rootGrid = this.gridAPI.grid;
         this.rowIslandAPI.rowIsland = this;
         this.ri_columnListDiffer = this.differs.find([]).create(null);
     }
@@ -74835,7 +74812,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
             this.parentIsland.rowIslandAPI.registerChildRowIsland(this);
         }
         else {
-            this.rootGrid.hgridAPI.registerChildRowIsland(this);
+            this.rootGrid.gridAPI.registerChildRowIsland(this);
         }
         this._init = false;
         // Create the child toolbar if the parent island has a toolbar definition
@@ -74870,12 +74847,12 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         if (this.parentIsland) {
             this.getGridsForIsland(this.key).forEach(grid => {
                 this.cleanGridState(grid);
-                grid.hgridAPI.unsetChildRowIsland(this);
+                grid.gridAPI.unsetChildRowIsland(this);
             });
             this.parentIsland.rowIslandAPI.unsetChildRowIsland(this);
         }
         else {
-            this.rootGrid.hgridAPI.unsetChildRowIsland(this);
+            this.rootGrid.gridAPI.unsetChildRowIsland(this);
             this.cleanGridState(this.rootGrid);
         }
     }
@@ -74929,7 +74906,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         grid.onRowIslandChange();
     }
 }
-IgxRowIslandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxRowIslandComponent, deps: [{ token: IgxGridSelectionService }, { token: IgxColumnResizingService }, { token: IGX_GRID_SERVICE_BASE }, { token: IgxFlatTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.NgModuleRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: IgxHierarchicalGridNavigationService }, { token: IgxFilteringService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: DisplayDensityToken, optional: true }, { token: IgxRowIslandAPIService }, { token: LOCALE_ID }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
+IgxRowIslandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxRowIslandComponent, deps: [{ token: IgxGridSelectionService }, { token: IgxColumnResizingService }, { token: IGX_GRID_SERVICE_BASE }, { token: IgxFlatTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.NgModuleRef }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: IgxHierarchicalGridNavigationService }, { token: IgxFilteringService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: DisplayDensityToken, optional: true }, { token: IgxRowIslandAPIService }, { token: LOCALE_ID }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
 IgxRowIslandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IgxRowIslandComponent, selector: "igx-row-island", inputs: { key: "key", expandChildren: "expandChildren" }, outputs: { layoutChange: "layoutChange", gridCreated: "gridCreated", gridInitialized: "gridInitialized" }, providers: [
         IgxRowIslandAPIService,
         IgxFilteringService,
@@ -74947,13 +74924,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         IgxGridSelectionService
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: IgxGridSelectionService }, { type: IgxColumnResizingService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: IgxGridSelectionService }, { type: IgxColumnResizingService }, { type: IgxHierarchicalGridAPIService, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_SERVICE_BASE]
                 }] }, { type: IgxFlatTransactionFactory }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.IterableDiffers }, { type: i0.ViewContainerRef }, { type: i0.NgModuleRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: IgxHierarchicalGridNavigationService }, { type: IgxFilteringService }, { type: IgxOverlayService, decorators: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.IterableDiffers }, { type: i0.ViewContainerRef }, { type: i0.NgModuleRef }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: IgxHierarchicalGridNavigationService }, { type: IgxFilteringService }, { type: IgxOverlayService, decorators: [{
                     type: Inject,
                     args: [IgxOverlayService]
                 }] }, { type: IgxGridSummaryService }, { type: undefined, decorators: [{
@@ -75021,7 +74998,7 @@ class IgxHierarchicalGridCellComponent extends IgxGridCellComponent {
         while (this._rootGrid.id !== parentGrid.id) {
             childGrid = parentGrid;
             parentGrid = parentGrid.parent;
-            const parentRowID = parentGrid.hgridAPI.getParentRowId(childGrid);
+            const parentRowID = parentGrid.gridAPI.getParentRowId(childGrid);
             parentGrid.highlightedRowID = parentRowID;
         }
         this.grid.navigation.activeNode.gridID = this.gridID;
@@ -75159,7 +75136,7 @@ class IgxHierarchicalRowComponent extends IgxRowDirective {
         if (grid.gridAPI.crudService.cellInEditMode) {
             grid.gridAPI.crudService.endEdit();
         }
-        grid.hgridAPI.getChildGrids(true).forEach(g => {
+        grid.gridAPI.getChildGrids(true).forEach(g => {
             if (g.gridAPI.crudService.cellInEditMode) {
                 g.gridAPI.crudService.endEdit();
             }
@@ -75361,8 +75338,8 @@ class IgxChildGridRowComponent {
     ngAfterViewInit() {
         this.hGrid.childLayoutList = this.layout.children;
         const layouts = this.hGrid.childLayoutList.toArray();
-        layouts.forEach((l) => this.hGrid.hgridAPI.registerChildRowIsland(l));
-        this.parentGrid.hgridAPI.registerChildGrid(this.data.rowID, this.layout.key, this.hGrid);
+        layouts.forEach((l) => this.hGrid.gridAPI.registerChildRowIsland(l));
+        this.parentGrid.gridAPI.registerChildGrid(this.data.rowID, this.layout.key, this.hGrid);
         this.layout.rowIslandAPI.registerChildGrid(this.data.rowID, this.hGrid);
         this.layout.gridInitialized.emit({
             owner: this.layout,
@@ -75406,7 +75383,7 @@ IgxChildGridRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxChildGridRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-child-grid-row', template: "<div class=\"igx-grid__hierarchical-indent\" [ngClass]=\"{'igx-grid__hierarchical-indent--scroll': parentHasScroll}\">\n    <igx-hierarchical-grid #hgrid [data]='data.childGridsData[layout.key]'></igx-hierarchical-grid>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: IgxHierarchicalGridAPIService, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_SERVICE_BASE]
                 }] }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { layout: [{
@@ -75610,7 +75587,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         if (!this.parent) {
             return null;
         }
-        return this.parent.hgridAPI.getParentRowId(this);
+        return this.parent.gridAPI.getParentRowId(this);
     }
     /**
      * @hidden
@@ -75877,7 +75854,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
     }
     ngOnDestroy() {
         if (!this.parent) {
-            this.hgridAPI.getChildGrids(true).forEach((grid) => {
+            this.gridAPI.getChildGrids(true).forEach((grid) => {
                 if (!grid.childRow.cdr.destroyed) {
                     grid.childRow.cdr.destroy();
                 }
@@ -76066,7 +76043,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
             const cachedData = this.childGridTemplates.get(key);
             cachedData.owner = args.owner;
             this.childLayoutList.forEach((layout) => {
-                const relatedGrid = this.hgridAPI.getChildGridByID(layout.key, args.context.$implicit.rowID);
+                const relatedGrid = this.gridAPI.getChildGridByID(layout.key, args.context.$implicit.rowID);
                 if (relatedGrid && relatedGrid.updateOnRender) {
                     // Detect changes if `expandChildren` has changed when the grid wasn't visible. This is for performance reasons.
                     relatedGrid.notifyChanges(true);
@@ -76111,7 +76088,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
     }
     /** @hidden @internal */
     getChildGrids(inDeph) {
-        return this.hgridAPI.getChildGrids(inDeph);
+        return this.gridAPI.getChildGrids(inDeph);
     }
     generateDataFields(data) {
         return super.generateDataFields(data).filter((field) => {
@@ -76157,7 +76134,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
     updateSizes() {
         if (document.body.contains(this.nativeElement) && this.isPercentWidth) {
             this.reflow();
-            this.hgridAPI.getChildGrids(false).forEach((grid) => {
+            this.gridAPI.getChildGrids(false).forEach((grid) => {
                 grid.updateSizes();
             });
         }
@@ -84392,7 +84369,7 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
     * @hidden
     * @internal
     */
-    onChipSort(event, dimension, dimensionType) {
+    onChipSort(_event, dimension) {
         const startDirection = dimension.sortDirection || SortingDirection.None;
         const direction = startDirection + 1 > SortingDirection.Desc ?
             SortingDirection.None : startDirection + 1;
@@ -84487,11 +84464,8 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
             currentDim.findIndex(x => x.memberName === event.owner.id) : currentDim.length;
         const targetIndex = this._dropPos === DropPosition.AfterDropTarget ? chipIndex + 1 : chipIndex;
         if (isNewChip) {
-            const allDims = this.grid.pivotConfiguration.rows
-                .concat(this.grid.pivotConfiguration.columns)
-                .concat(this.grid.pivotConfiguration.filters);
-            // chip moved from external collection
-            const dim = allDims.find(x => x && x.memberName === dragId);
+            // chip moved from an external collection
+            const dim = this.grid.allDimensions.find(x => x && x.memberName === dragId);
             if (!dim) {
                 // you have dragged something that is not a dimension
                 return;
@@ -84524,10 +84498,10 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
     }
 }
 IgxPivotHeaderRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", 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: "12.0.0", version: "13.2.2", 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, 1)\">\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                                {{value.aggregate.key}}({{value.displayName || value.member}})\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, 0)\">\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", components: [{ type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["class", "width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon"] }, { type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus"], outputs: ["opening", "opened", "closing", "closed"] }, { type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache"], outputs: ["dataChanging"] }, { type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }], pipes: { "igxTopLevel": IgxGridTopLevelColumns, "igxHeaderGroupStyle": IgxHeaderGroupStylePipe, "igxHeaderGroupWidth": IgxHeaderGroupWidthPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IgxPivotHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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                                {{value.aggregate.key}}({{value.displayName || value.member}})\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", components: [{ type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["class", "width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon"] }, { type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus"], outputs: ["opening", "opened", "closing", "closed"] }, { type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache"], outputs: ["dataChanging"] }, { type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }], pipes: { "igxTopLevel": IgxGridTopLevelColumns, "igxHeaderGroupStyle": IgxHeaderGroupStylePipe, "igxHeaderGroupWidth": IgxHeaderGroupWidthPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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, 1)\">\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                                {{value.aggregate.key}}({{value.displayName || value.member}})\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, 0)\">\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" }]
+            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                                {{value.aggregate.key}}({{value.displayName || value.member}})\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" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -84891,7 +84865,6 @@ class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowComponent {
     * @internal
     */
     ngOnChanges(changes) {
-        const rowDimConfig = this.grid.rowDimensions;
         if (changes.rowData) {
             // generate new rowDimension on row data change
             this.rowDimensionData = null;
@@ -84908,23 +84881,23 @@ class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowComponent {
     * @hidden
     * @internal
     */
-    toggleRowDimension(event, column) {
-        this.grid.toggleRow(this.getRowDimensionKey(column));
+    toggleRowDimension(event) {
+        this.grid.toggleRow(this.getRowDimensionKey());
         event?.stopPropagation();
     }
     /**
      * @hidden
      * @internal
      */
-    getRowDimensionKey(col) {
+    getRowDimensionKey() {
         const dimData = this.rowDimensionData;
         const key = PivotUtil.getRecordKey(this.rowData, dimData.dimension);
         return key;
     }
-    getExpandState(col) {
-        return this.grid.gridAPI.get_row_expansion_state(this.getRowDimensionKey(col));
+    getExpandState() {
+        return this.grid.gridAPI.get_row_expansion_state(this.getRowDimensionKey());
     }
-    getLevel(col) {
+    getLevel() {
         return this.dimension.level;
     }
     get rowSpan() {
@@ -84965,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, column)\">\n            {{ getExpandState(column) ? '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>", 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                [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 });
 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, column)\">\n            {{ getExpandState(column) ? '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>" }]
+            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" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -84991,6 +84964,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 args: [IgxPivotRowDimensionHeaderGroupComponent]
             }] } });
 
+class PivotSortUtil {
+    static generateDimensionSortingExpressions(dimensions) {
+        const expressions = [];
+        PivotUtil.flatten(dimensions).forEach(x => {
+            if (x.sortDirection) {
+                expressions.push({
+                    dir: x.sortDirection,
+                    fieldName: x.memberName,
+                    strategy: DefaultPivotSortingStrategy.instance()
+                });
+            }
+            else {
+                expressions.push({
+                    dir: SortingDirection.None,
+                    fieldName: x.memberName,
+                    strategy: DefaultPivotSortingStrategy.instance()
+                });
+            }
+        });
+        return expressions;
+    }
+}
+
 const MINIMUM_COLUMN_WIDTH$1 = 200;
 class IgxPivotRowComponent extends IgxRowDirective {
     constructor(grid, selectionService, element, cdr, resolver, viewRef) {
@@ -85284,8 +85280,6 @@ class IgxPivotCellMergingPipe {
         const res = [];
         const enabledRows = config.rows?.filter(x => x.enabled);
         let groupData = [];
-        let prevDim;
-        let prevDimRoot;
         let prevId;
         const index = enabledRows.indexOf(dim);
         for (let rec of data) {
@@ -85299,8 +85293,6 @@ class IgxPivotCellMergingPipe {
                 groupData = [];
             }
             groupData.push(rec);
-            prevDim = currentDim;
-            prevDimRoot = dim;
             prevId = id;
         }
         if (groupData.length > 0) {
@@ -85380,7 +85372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
  * @hidden
  */
 class IgxPivotGridColumnSortingPipe {
-    transform(collection, expressions, sorting, pipeTrigger) {
+    transform(collection, expressions, sorting, _pipeTrigger) {
         let result;
         if (!expressions.length) {
             result = collection;
@@ -85410,11 +85402,11 @@ class IgxPivotGridSortingPipe {
     constructor(gridAPI) {
         this.gridAPI = gridAPI;
     }
-    transform(collection, config, sorting, id, pipeTrigger, pinned) {
+    transform(collection, config, sorting, _pipeTrigger) {
         let result;
         const allDimensions = config.rows || [];
         const enabledDimensions = allDimensions.filter(x => x && x.enabled);
-        const expressions = PivotUtil.generateDimensionSortingExpressions(enabledDimensions);
+        const expressions = PivotSortUtil.generateDimensionSortingExpressions(enabledDimensions);
         if (!expressions.length) {
             result = collection;
         }
@@ -85485,8 +85477,8 @@ const MINIMUM_COLUMN_WIDTH_SUPER_COMPACT = 104;
  * ```
  */
 class IgxPivotGridComponent extends IgxGridBaseDirective {
-    constructor(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, factoryResolver, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform, _diTransactions) {
-        super(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, factoryResolver, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform);
+    constructor(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform, _diTransactions) {
+        super(selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, appRef, moduleRef, injector, navigation, filteringService, overlayService, summaryService, _displayDensityOptions, localeId, platform);
         this.selectionService = selectionService;
         this.colResizingService = colResizingService;
         this.transactionFactory = transactionFactory;
@@ -85638,6 +85630,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
          */
         this._emptyRowDimension = { memberName: '', enabled: true, level: 0 };
         this._defaultExpandState = false;
+        this._filterStrategy = new DimensionValuesFilteringStrategy();
         this._pivotConfiguration = { rows: null, columns: null, values: null, filters: null };
         this.p_id = `igx-pivot-grid-${NEXT_ID++}`;
         this._superCompactMode = false;
@@ -86026,7 +86019,6 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         this.cdr.detectChanges();
     }
     uniqueDimensionValuesStrategy(column, exprTree, done) {
-        const config = this.pivotConfiguration;
         const enabledDimensions = this.allDimensions.filter(x => x && x.enabled);
         const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === column.field);
         if (dim) {
@@ -86702,7 +86694,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
             dim.childLevel.sortDirection = dimension.sortDirection;
             dim = dim.childLevel;
         }
-        const dimensionsSortingExpressions = PivotUtil.generateDimensionSortingExpressions(this.rowDimensions);
+        const dimensionsSortingExpressions = PivotSortUtil.generateDimensionSortingExpressions(this.rowDimensions);
         this.pipeTrigger++;
         this.dimensionsSortingExpressionsChange.emit(dimensionsSortingExpressions);
         if (dimensionType === PivotDimensionType.Column) {
@@ -86872,7 +86864,6 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
      */
     autogenerateColumns() {
         let columns = [];
-        this.filterStrategy = this.filterStrategy ?? new DimensionValuesFilteringStrategy();
         const data = this.gridAPI.filterDataByExpressions(this.filteringExpressionsTree);
         this.dimensionDataColumns = this.generateDimensionColumns();
         let fieldsMap;
@@ -86947,7 +86938,6 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
     }
     generateColumnHierarchy(fields, data, parent = null) {
         const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
-        const factoryColumnGroup = this.resolver.resolveComponentFactory(IgxColumnGroupComponent);
         let columns = [];
         if (fields.size === 0) {
             this.values.forEach((value) => {
@@ -86976,7 +86966,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
             const sorted = DataUtil.sort(cloneArray(entries, true), expressions, this.sortStrategy, this.gridAPI.grid);
             currentFields = new Map(sorted);
         }
-        currentFields.forEach((value, key) => {
+        currentFields.forEach((value) => {
             let shouldGenerate = true;
             if (value.dimension && value.dimension.filter) {
                 const state = {
@@ -87095,7 +87085,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         super.template;
     }
 }
-IgxPivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxPivotGridComponent, deps: [{ token: IgxGridSelectionService }, { token: IgxPivotColumnResizingService }, { token: GridBaseAPIService }, { token: IgxFlatTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.NgModuleRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: IgxPivotGridNavigationService }, { token: IgxFilteringService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: DisplayDensityToken, optional: true }, { token: LOCALE_ID }, { token: PlatformUtil }, { token: IgxGridTransaction, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+IgxPivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxPivotGridComponent, deps: [{ token: IgxGridSelectionService }, { token: IgxPivotColumnResizingService }, { token: GridBaseAPIService }, { token: IgxFlatTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.NgModuleRef }, { token: i0.Injector }, { token: IgxPivotGridNavigationService }, { token: IgxFilteringService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: DisplayDensityToken, optional: true }, { token: LOCALE_ID }, { token: PlatformUtil }, { token: IgxGridTransaction, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 IgxPivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IgxPivotGridComponent, selector: "igx-pivot-grid", inputs: { pivotConfiguration: "pivotConfiguration", showPivotConfigurationUI: "showPivotConfigurationUI", superCompactMode: "superCompactMode", displayDensity: "displayDensity", addRowEmptyTemplate: "addRowEmptyTemplate", snackbarDisplayTime: "snackbarDisplayTime", defaultExpandState: "defaultExpandState", pagingMode: "pagingMode", hideRowSelectors: "hideRowSelectors", rowDraggable: "rowDraggable", allowAdvancedFiltering: "allowAdvancedFiltering", filterMode: "filterMode", allowFiltering: "allowFiltering", page: "page", paging: "paging", perPage: "perPage", summaryRowHeight: "summaryRowHeight", rowEditable: "rowEditable", pinning: "pinning", summaryPosition: "summaryPosition", summaryCalculationMode: "summaryCalculationMode", showSummaryOnCollapse: "showSummaryOnCollapse", batchEditing: "batchEditing", id: "id", data: "data", totalRecords: "totalRecords", emptyPivotGridTemplate: "emptyPivotGridTemplate" }, outputs: { dimensionsChange: "dimensionsChange", dimensionsSortingExpressionsChange: "dimensionsSortingExpressionsChange", valuesChange: "valuesChange", cellEdit: "cellEdit", cellEditDone: "cellEditDone", cellEditEnter: "cellEditEnter", cellEditExit: "cellEditExit", columnMovingStart: "columnMovingStart", columnMoving: "columnMoving", columnMovingEnd: "columnMovingEnd", columnPin: "columnPin", columnPinned: "columnPinned", rowAdd: "rowAdd", rowAdded: "rowAdded", rowDeleted: "rowDeleted", rowDelete: "rowDelete", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", rowEditEnter: "rowEditEnter", rowEdit: "rowEdit", rowEditDone: "rowEditDone", rowEditExit: "rowEditExit", rowPinning: "rowPinning", rowPinned: "rowPinned" }, host: { properties: { "attr.role": "this.role", "class.igx-grid__pivot--super-compact": "this.superCompactMode", "attr.id": "this.id" } }, providers: [
         IgxGridCRUDService,
         IgxGridSummaryService,
@@ -87107,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:id: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.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 });
 __decorate([
     WatchChanges()
 ], IgxPivotGridComponent.prototype, "hideRowSelectors", null);
@@ -87127,11 +87117,11 @@ 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:id: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.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" }]
         }], ctorParameters: function () { return [{ type: IgxGridSelectionService }, { type: IgxPivotColumnResizingService }, { type: GridBaseAPIService }, { type: IgxFlatTransactionFactory }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.IterableDiffers }, { type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: i0.NgModuleRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: IgxPivotGridNavigationService }, { type: IgxFilteringService }, { type: IgxOverlayService, decorators: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.IterableDiffers }, { type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: i0.NgModuleRef }, { type: i0.Injector }, { type: IgxPivotGridNavigationService }, { type: IgxFilteringService }, { type: IgxOverlayService, decorators: [{
                     type: Inject,
                     args: [IgxOverlayService]
                 }] }, { type: IgxGridSummaryService }, { type: undefined, decorators: [{
@@ -87339,7 +87329,7 @@ class IgxPivotDateDimension {
         this.memberName = 'AllPeriods';
         this._resourceStrings = CurrentResourceStrings.GridResStrings;
         /** @hidden @internal */
-        this.memberFunction = (data) => this.resourceStrings.igx_grid_pivot_date_dimension_total;
+        this.memberFunction = (_data) => this.resourceStrings.igx_grid_pivot_date_dimension_total;
         const options = { ...this.defaultOptions, ...inOptions };
         if (!inBaseDimension) {
             console.warn(`Please provide data child level to the pivot dimension.`);
@@ -87687,10 +87677,7 @@ class IgxPivotDataSelectorComponent {
         const itemIndex = dimension?.findIndex((x) => x?.memberName === itemId) !== -1
             ? dimension?.findIndex((x) => x.memberName === itemId)
             : dimension?.length;
-        const dimensions = this.grid.pivotConfiguration.rows
-            .concat(this.grid.pivotConfiguration.columns)
-            .concat(this.grid.pivotConfiguration.filters)
-            .filter((x) => x && x.memberName === itemId);
+        const dimensions = this.grid.allDimensions.filter((x) => x && x.memberName === itemId);
         const reorder = dimensionState?.findIndex((item) => item.memberName === itemId) !==
             -1;
         let targetIndex = targetId !== ""