igniteui-angular 19.2.0-alpha.1 → 19.2.0-alpha.2

package/fesm2022/igniteui-angular.mjs

@@ -2280,6 +2280,7 @@ class IgxFilteringOperand {
     }
     /**
      * Returns an array of names of the conditions which are visible in the UI, including "In" and "Not In", allowing the creation of sub-queries.
+     * @hidden @internal
      */
     extendedConditionList() {
         return this.operations.filter(f => !f.hidden).map((element) => element.name);
@@ -2300,9 +2301,6 @@ class IgxFilteringOperand {
     append(operation) {
         this.operations.push(operation);
     }
-    /**
-     * @hidden
-     */
     findValueInSet(target, searchVal) {
         return searchVal.has(target);
     }
@@ -2407,9 +2405,6 @@ class IgxBaseDateTimeFilteringOperand extends IgxFilteringOperand {
         }
         return res;
     }
-    /**
-     * @hidden
-     */
     findValueInSet(target, searchVal) {
         if (!target) {
             return false;
@@ -2907,9 +2902,6 @@ class IgxTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand {
             }];
         this.operations = newOperations.concat(this.operations);
     }
-    /**
-     * @hidden
-     */
     findValueInSet(target, searchVal) {
         if (!target) {
             return false;
@@ -75197,7 +75189,7 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         if (columnDimensions.length === 0) {
             return 1;
         }
-        let totalDepth = columnDimensions.map(x => PivotUtil.getDimensionDepth(x) + 1).reduce((acc, val) => acc + val);
+        let totalDepth = columnDimensions.map(x => this.grid.data.length > 0 ? PivotUtil.getDimensionDepth(x) + 1 : 0).reduce((acc, val) => acc + val);
         if (this.grid.hasMultipleValues) {
             totalDepth += 1;
         }
@@ -75542,7 +75534,7 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         return this.grid.dimensionDataColumns ? this.grid.dimensionDataColumns.find((col) => col.field === dim.memberName) : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: IgxPivotHeaderRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", viewQueries: [{ propertyName: "esf", first: true, predicate: ["esf"], descendants: true }, { propertyName: "filterArea", first: true, predicate: ["filterAreaHidden"], descendants: true }, { propertyName: "filtersButton", first: true, predicate: ["filterIcon"], descendants: true }, { propertyName: "dropdownChips", first: true, predicate: ["dropdownChips"], descendants: true }, { propertyName: "pivotFilterContainer", first: true, predicate: ["pivotFilterContainer"], descendants: true }, { propertyName: "pivotRowContainer", first: true, predicate: ["pivotRowContainer"], descendants: true }, { propertyName: "notificationChips", predicate: ["notifyChip"], descendants: true }, { propertyName: "headerContainers", predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "rowDimensionHeaders", predicate: ["rowDimensionHeaders"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotFilterContainer\n                         class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                         [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                         igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                        <!-- Filter area -->\n                        <igx-chips-area #filterArea droppable='true'>\n                            @if (grid.filterDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                                  class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                            }\n                            @for (filter of this.filterAreaDimensions; track filter; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                                <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, filter)'>\n                                    </igx-icon>\n                                    {{filter.displayName || filter.memberName}}\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(filterArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                        @if (isFiltersButton && grid.filterDimensions.length !== 0) {\n                            <div class=\"igx-grid__pivot-filter-toggle\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    #filterIcon\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFiltersAreaDropdownClick($event)'>\n                                </igx-icon>\n                                <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                            </div>\n                        }\n                    </div>\n                }\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    @if (grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders) {\n                        <div #pivotRowContainer [style.width.px]=\"grid.pivotRowWidths - 1\"\n                            class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                            (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                            (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                                }\n                                @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        @if (row.sortDirection) {\n                                            <igx-icon\n                                                family=\"default\"\n                                                [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                                igxSuffix>\n                                            </igx-icon>\n                                        }\n                                    </igx-chip>\n                                    @if (last) {\n                                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    }\n                                }\n                                <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                    {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                                </igx-chip>\n                            </igx-chips-area>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotColumnContainer class=\"igx-grid__tr-pivot\"\n                         (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                                    class='igx-grid__pivot-empty-chip-area'>\n                                {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                            }\n                            @for (col of grid.columnDimensions; track col.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"view_column\"\n                                        igxPrefix>\n                                    </igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, col)'>\n                                    </igx-icon>\n                                    {{col.displayName || col.memberName}}\n                                    @if (col.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(colArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotValueContainer class=\"igx-grid__tr-pivot\"\n                         (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                            }\n                            @for (value of grid.values; track value.member; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                                <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                    <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                         (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                         (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                        <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                        <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                    </div>\n                                    <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(valueArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [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            @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        @if (grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0) {\n                            @if (grid.rowDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            }\n                            @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                        [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                        (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort($event, row)\">\n                                    <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, row)'>\n                                    </igx-icon>\n                                    {{ row.displayName || row.memberName}}\n                                    @if (row.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        }\n                    </igx-chips-area>\n                </div>\n            }\n\n            @if (grid.pivotUI.showRowHeaders && grid.visibleRowDimensions.length > 0) {\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {\n                        @if (getRowDimensionColumn(dim); as dimCol) {\n                            <igx-pivot-row-header-group #rowDimensionHeaders\n                                [ngClass]=\"dimCol.headerGroupClasses\"\n                                [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                                [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [column]=\"dimCol\"\n                                [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                                [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [rowIndex]=\"-1\" >\n                            </igx-pivot-row-header-group>\n                        }\n                    }\n                </div>\n            }\n\n            <!-- Pinned columns collection from the start -->\n            @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]='maxContainerHeight' (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {\n                    <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' [style.width.px]='grid.unpinnedWidth'>\n                        <ng-template igxGridFor #headerVirtualContainer let-column\n                            [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache] = 'true' [igxForScrollContainer]=\"grid.parentVirtDir\"\n                            [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                            [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                            <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                [style.height.px]='totalDepth > 1 ? calcHeight(column, i) : undefined'\n                                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [class.igx-grid__tr-pivot--columnDimensionLeaf] = 'isDuplicateOfExistingParent(column, i)'\n                                [class.igx-grid__tr-pivot--columnMultiRowSpan] = 'isMultiRow(column, i)'\n                            >\n                            </igx-grid-header-group>\n                        </ng-template>\n                    </div>\n                }\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    @for (item of aggregateList; track item.key) {\n        <igx-drop-down-item [selected]='isSelected(item)' [value]='item'>\n            {{ item.label }}\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                @for (filter of this.filterDropdownDimensions; track filter) {\n                    <igx-chip [id]=\"filter.memberName\"\n                        [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                        (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                        {{filter.displayName || filter.memberName}}\n                    </igx-chip>\n                }\n            </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        @for (filter of grid.filterDimensions; track filter) {\n            <igx-chip\n                [id]=\"filter.memberName\"\n                [draggable]=\"true\"\n                [removable]=\"true\"\n                (remove)=\"filterRemoved($event)\">\n                <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        }\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "component", type: IgxPivotRowHeaderGroupComponent, selector: "igx-pivot-row-header-group", inputs: ["rowIndex", "dimWidth", "rootDimension"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", viewQueries: [{ propertyName: "esf", first: true, predicate: ["esf"], descendants: true }, { propertyName: "filterArea", first: true, predicate: ["filterAreaHidden"], descendants: true }, { propertyName: "filtersButton", first: true, predicate: ["filterIcon"], descendants: true }, { propertyName: "dropdownChips", first: true, predicate: ["dropdownChips"], descendants: true }, { propertyName: "pivotFilterContainer", first: true, predicate: ["pivotFilterContainer"], descendants: true }, { propertyName: "pivotRowContainer", first: true, predicate: ["pivotRowContainer"], descendants: true }, { propertyName: "notificationChips", predicate: ["notifyChip"], descendants: true }, { propertyName: "headerContainers", predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "rowDimensionHeaders", predicate: ["rowDimensionHeaders"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotFilterContainer\n                         class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                         [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                         igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                        <!-- Filter area -->\n                        <igx-chips-area #filterArea droppable='true'>\n                            @if (grid.filterDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                                  class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                            }\n                            @for (filter of this.filterAreaDimensions; track filter; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                                <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, filter)'>\n                                    </igx-icon>\n                                    {{filter.displayName || filter.memberName}}\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(filterArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                        @if (isFiltersButton && grid.filterDimensions.length !== 0) {\n                            <div class=\"igx-grid__pivot-filter-toggle\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    #filterIcon\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFiltersAreaDropdownClick($event)'>\n                                </igx-icon>\n                                <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                            </div>\n                        }\n                    </div>\n                }\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    @if (grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders) {\n                        <div #pivotRowContainer [style.width.px]=\"grid.pivotRowWidths - 1\"\n                            class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                            (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                            (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                                }\n                                @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        @if (row.sortDirection) {\n                                            <igx-icon\n                                                family=\"default\"\n                                                [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                                igxSuffix>\n                                            </igx-icon>\n                                        }\n                                    </igx-chip>\n                                    @if (last) {\n                                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    }\n                                }\n                                <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                    {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                                </igx-chip>\n                            </igx-chips-area>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotColumnContainer class=\"igx-grid__tr-pivot\"\n                         (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                                    class='igx-grid__pivot-empty-chip-area'>\n                                {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                            }\n                            @for (col of grid.columnDimensions; track col.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"view_column\"\n                                        igxPrefix>\n                                    </igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, col)'>\n                                    </igx-icon>\n                                    {{col.displayName || col.memberName}}\n                                    @if (col.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(colArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotValueContainer class=\"igx-grid__tr-pivot\"\n                         (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                            }\n                            @for (value of grid.values; track value.member; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                                <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                    <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                         (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                         (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                        <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                        <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                    </div>\n                                    <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(valueArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [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            @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        @if (grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0) {\n                            @if (grid.rowDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            }\n                            @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                        [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                        (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort($event, row)\">\n                                    <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, row)'>\n                                    </igx-icon>\n                                    {{ row.displayName || row.memberName}}\n                                    @if (row.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        }\n                    </igx-chips-area>\n                </div>\n            }\n\n            @if (grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0) {\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {\n                        @if (getRowDimensionColumn(dim); as dimCol) {\n                            <igx-pivot-row-header-group #rowDimensionHeaders\n                                [ngClass]=\"dimCol.headerGroupClasses\"\n                                [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                                [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [column]=\"dimCol\"\n                                [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                                [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [rowIndex]=\"-1\" >\n                            </igx-pivot-row-header-group>\n                        }\n                    }\n                </div>\n            }\n\n            <!-- Pinned columns collection from the start -->\n            @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]=\"maxContainerHeight\" (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {\n                    <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]=\"totalDepth > 1 ? grid.rowHeight : undefined\" [style.width.px]=\"grid.unpinnedWidth\">\n                        <ng-template igxGridFor #headerVirtualContainer let-column\n                            [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache]=\"true\" [igxForScrollContainer]=\"grid.parentVirtDir\"\n                            [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                            [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                            <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                [style.height.px]=\"totalDepth > 1 ? calcHeight(column, i) : undefined\"\n                                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [class.igx-grid__tr-pivot--columnDimensionLeaf]=\"isDuplicateOfExistingParent(column, i)\"\n                                [class.igx-grid__tr-pivot--columnMultiRowSpan]=\"isMultiRow(column, i)\"\n                            >\n                            </igx-grid-header-group>\n                        </ng-template>\n                    </div>\n                }\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    @for (item of aggregateList; track item.key) {\n        <igx-drop-down-item [selected]='isSelected(item)' [value]='item'>\n            {{ item.label }}\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                @for (filter of this.filterDropdownDimensions; track filter) {\n                    <igx-chip [id]=\"filter.memberName\"\n                        [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                        (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                        {{filter.displayName || filter.memberName}}\n                    </igx-chip>\n                }\n            </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        @for (filter of grid.filterDimensions; track filter) {\n            <igx-chip\n                [id]=\"filter.memberName\"\n                [draggable]=\"true\"\n                [removable]=\"true\"\n                (remove)=\"filterRemoved($event)\">\n                <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        }\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "component", type: IgxPivotRowHeaderGroupComponent, selector: "igx-pivot-row-header-group", inputs: ["rowIndex", "dimWidth", "rootDimension"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: IgxPivotHeaderRowComponent, decorators: [{
             type: Component,
@@ -75552,7 +75544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         IgxDropDownComponent, IgxDropDownItemComponent, IgxGridExcelStyleFilteringComponent,
                         IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective,
                         IgxExcelStyleSearchComponent, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe, IgxGridTopLevelColumns,
-                        IgxPivotRowHeaderGroupComponent], template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotFilterContainer\n                         class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                         [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                         igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                        <!-- Filter area -->\n                        <igx-chips-area #filterArea droppable='true'>\n                            @if (grid.filterDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                                  class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                            }\n                            @for (filter of this.filterAreaDimensions; track filter; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                                <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, filter)'>\n                                    </igx-icon>\n                                    {{filter.displayName || filter.memberName}}\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(filterArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                        @if (isFiltersButton && grid.filterDimensions.length !== 0) {\n                            <div class=\"igx-grid__pivot-filter-toggle\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    #filterIcon\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFiltersAreaDropdownClick($event)'>\n                                </igx-icon>\n                                <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                            </div>\n                        }\n                    </div>\n                }\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    @if (grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders) {\n                        <div #pivotRowContainer [style.width.px]=\"grid.pivotRowWidths - 1\"\n                            class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                            (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                            (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                                }\n                                @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        @if (row.sortDirection) {\n                                            <igx-icon\n                                                family=\"default\"\n                                                [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                                igxSuffix>\n                                            </igx-icon>\n                                        }\n                                    </igx-chip>\n                                    @if (last) {\n                                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    }\n                                }\n                                <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                    {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                                </igx-chip>\n                            </igx-chips-area>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotColumnContainer class=\"igx-grid__tr-pivot\"\n                         (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                                    class='igx-grid__pivot-empty-chip-area'>\n                                {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                            }\n                            @for (col of grid.columnDimensions; track col.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"view_column\"\n                                        igxPrefix>\n                                    </igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, col)'>\n                                    </igx-icon>\n                                    {{col.displayName || col.memberName}}\n                                    @if (col.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(colArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotValueContainer class=\"igx-grid__tr-pivot\"\n                         (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                            }\n                            @for (value of grid.values; track value.member; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                                <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                    <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                         (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                         (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                        <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                        <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                    </div>\n                                    <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(valueArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [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            @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        @if (grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0) {\n                            @if (grid.rowDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            }\n                            @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                        [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                        (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort($event, row)\">\n                                    <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, row)'>\n                                    </igx-icon>\n                                    {{ row.displayName || row.memberName}}\n                                    @if (row.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        }\n                    </igx-chips-area>\n                </div>\n            }\n\n            @if (grid.pivotUI.showRowHeaders && grid.visibleRowDimensions.length > 0) {\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {\n                        @if (getRowDimensionColumn(dim); as dimCol) {\n                            <igx-pivot-row-header-group #rowDimensionHeaders\n                                [ngClass]=\"dimCol.headerGroupClasses\"\n                                [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                                [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [column]=\"dimCol\"\n                                [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                                [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [rowIndex]=\"-1\" >\n                            </igx-pivot-row-header-group>\n                        }\n                    }\n                </div>\n            }\n\n            <!-- Pinned columns collection from the start -->\n            @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]='maxContainerHeight' (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {\n                    <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' [style.width.px]='grid.unpinnedWidth'>\n                        <ng-template igxGridFor #headerVirtualContainer let-column\n                            [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache] = 'true' [igxForScrollContainer]=\"grid.parentVirtDir\"\n                            [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                            [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                            <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                [style.height.px]='totalDepth > 1 ? calcHeight(column, i) : undefined'\n                                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [class.igx-grid__tr-pivot--columnDimensionLeaf] = 'isDuplicateOfExistingParent(column, i)'\n                                [class.igx-grid__tr-pivot--columnMultiRowSpan] = 'isMultiRow(column, i)'\n                            >\n                            </igx-grid-header-group>\n                        </ng-template>\n                    </div>\n                }\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    @for (item of aggregateList; track item.key) {\n        <igx-drop-down-item [selected]='isSelected(item)' [value]='item'>\n            {{ item.label }}\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                @for (filter of this.filterDropdownDimensions; track filter) {\n                    <igx-chip [id]=\"filter.memberName\"\n                        [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                        (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                        {{filter.displayName || filter.memberName}}\n                    </igx-chip>\n                }\n            </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        @for (filter of grid.filterDimensions; track filter) {\n            <igx-chip\n                [id]=\"filter.memberName\"\n                [draggable]=\"true\"\n                [removable]=\"true\"\n                (remove)=\"filterRemoved($event)\">\n                <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        }\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n" }]
+                        IgxPivotRowHeaderGroupComponent], template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotFilterContainer\n                         class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                         [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                         igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                        <!-- Filter area -->\n                        <igx-chips-area #filterArea droppable='true'>\n                            @if (grid.filterDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                                  class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                            }\n                            @for (filter of this.filterAreaDimensions; track filter; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                                <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, filter)'>\n                                    </igx-icon>\n                                    {{filter.displayName || filter.memberName}}\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(filterArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                        @if (isFiltersButton && grid.filterDimensions.length !== 0) {\n                            <div class=\"igx-grid__pivot-filter-toggle\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    #filterIcon\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFiltersAreaDropdownClick($event)'>\n                                </igx-icon>\n                                <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                            </div>\n                        }\n                    </div>\n                }\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    @if (grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders) {\n                        <div #pivotRowContainer [style.width.px]=\"grid.pivotRowWidths - 1\"\n                            class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                            (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                            (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                                }\n                                @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        @if (row.sortDirection) {\n                                            <igx-icon\n                                                family=\"default\"\n                                                [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                                igxSuffix>\n                                            </igx-icon>\n                                        }\n                                    </igx-chip>\n                                    @if (last) {\n                                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    }\n                                }\n                                <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                    {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                                </igx-chip>\n                            </igx-chips-area>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotColumnContainer class=\"igx-grid__tr-pivot\"\n                         (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                                    class='igx-grid__pivot-empty-chip-area'>\n                                {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                            }\n                            @for (col of grid.columnDimensions; track col.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"view_column\"\n                                        igxPrefix>\n                                    </igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, col)'>\n                                    </igx-icon>\n                                    {{col.displayName || col.memberName}}\n                                    @if (col.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(colArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotValueContainer class=\"igx-grid__tr-pivot\"\n                         (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                            }\n                            @for (value of grid.values; track value.member; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                                <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                    <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                         (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                         (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                        <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                        <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                    </div>\n                                    <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(valueArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [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            @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        @if (grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0) {\n                            @if (grid.rowDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            }\n                            @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                        [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                        (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort($event, row)\">\n                                    <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, row)'>\n                                    </igx-icon>\n                                    {{ row.displayName || row.memberName}}\n                                    @if (row.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        }\n                    </igx-chips-area>\n                </div>\n            }\n\n            @if (grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0) {\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {\n                        @if (getRowDimensionColumn(dim); as dimCol) {\n                            <igx-pivot-row-header-group #rowDimensionHeaders\n                                [ngClass]=\"dimCol.headerGroupClasses\"\n                                [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                                [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [column]=\"dimCol\"\n                                [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                                [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [rowIndex]=\"-1\" >\n                            </igx-pivot-row-header-group>\n                        }\n                    }\n                </div>\n            }\n\n            <!-- Pinned columns collection from the start -->\n            @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]=\"maxContainerHeight\" (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {\n                    <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]=\"totalDepth > 1 ? grid.rowHeight : undefined\" [style.width.px]=\"grid.unpinnedWidth\">\n                        <ng-template igxGridFor #headerVirtualContainer let-column\n                            [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache]=\"true\" [igxForScrollContainer]=\"grid.parentVirtDir\"\n                            [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                            [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                            <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                [style.height.px]=\"totalDepth > 1 ? calcHeight(column, i) : undefined\"\n                                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [class.igx-grid__tr-pivot--columnDimensionLeaf]=\"isDuplicateOfExistingParent(column, i)\"\n                                [class.igx-grid__tr-pivot--columnMultiRowSpan]=\"isMultiRow(column, i)\"\n                            >\n                            </igx-grid-header-group>\n                        </ng-template>\n                    </div>\n                }\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    @for (item of aggregateList; track item.key) {\n        <igx-drop-down-item [selected]='isSelected(item)' [value]='item'>\n            {{ item.label }}\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                @for (filter of this.filterDropdownDimensions; track filter) {\n                    <igx-chip [id]=\"filter.memberName\"\n                        [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                        (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                        {{filter.displayName || filter.memberName}}\n                    </igx-chip>\n                }\n            </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        @for (filter of grid.filterDimensions; track filter) {\n            <igx-chip\n                [id]=\"filter.memberName\"\n                [draggable]=\"true\"\n                [removable]=\"true\"\n                (remove)=\"filterRemoved($event)\">\n                <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        }\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -77873,6 +77865,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
     }
     constructor(validationService, selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, differs, viewRef, injector, envInjector, navigation, filteringService, textHighlightService, overlayService, summaryService, localeId, platform, _diTransactions) {
         super(validationService, selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, differs, viewRef, injector, envInjector, navigation, filteringService, textHighlightService, overlayService, summaryService, localeId, platform, _diTransactions);
+        this.navigation = navigation;
         /**
          * Emitted when the dimension collection is changed via the grid chip area.
          *
@@ -78173,6 +78166,9 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         }
         return false;
     }
+    get emptyBottomSize() {
+        return this.totalHeight - this.verticalScroll.scrollComponent.size;
+    }
     /** @hidden @internal */
     createFilterESF(dropdown, column, options, shouldReatach) {
         options.outlet = this.outlet;
@@ -78301,8 +78297,11 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
     }
     /** @hidden @internal */
     get pivotContentCalcWidth() {
-        const totalDimWidth = this.rowDimensions.length > 0 ?
-            this.rowDimensions.map((dim) => this.rowDimensionWidthToPixels(dim)).reduce((prev, cur) => prev + cur) :
+        if (!this.visibleRowDimensions.length) {
+            return Math.max(0, this.calcWidth - this.pivotRowWidths);
+        }
+        const totalDimWidth = this.visibleRowDimensions.length > 0 ?
+            this.visibleRowDimensions.map((dim) => this.rowDimensionWidthToPixels(dim)).reduce((prev, cur) => prev + cur) :
             0;
         return this.calcWidth - totalDimWidth;
     }
@@ -79423,7 +79422,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
             IgxPivotColumnResizingService,
             IgxForOfSyncService,
             IgxForOfScrollSyncService
-        ], queries: [{ propertyName: "valueChipTemplateDirective", first: true, predicate: IgxPivotValueChipTemplateDirective, descendants: true, read: IgxPivotValueChipTemplateDirective }, { propertyName: "rowDimensionHeaderDirective", first: true, predicate: IgxPivotRowDimensionHeaderTemplateDirective, descendants: true, read: IgxPivotRowDimensionHeaderTemplateDirective }], 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: "rowDimensionContainer", predicate: ["rowDimensionContainer"], descendants: true, read: ElementRef }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, descendants: true, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "rowDimensionContentCollection", predicate: IgxPivotRowDimensionContentComponent, descendants: true }, { propertyName: "verticalRowDimScrollContainers", predicate: ["verticalRowDimScrollContainer"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "rowDimensionMrlRowsCollection", predicate: IgxPivotRowDimensionMrlRowComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-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    [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 ? (hasHorizontalLayout ? horizontalRowDimensionsTemplate : 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]=\"pivotContentCalcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasMovableColumns && columnInDrag && pinnedColumns.length <= 0) {\n            <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (hasMovableColumns && columnInDrag && pinnedColumns.length > 0) {\n            <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        }\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger\n        | pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger\n        | pivotGridRow:pivotConfiguration:pivotValueCloneStrategy:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridColumn:pivotConfiguration:pivotValueCloneStrategy: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            [igxGridForOfVariableSizes]=\"false\"\n            #verticalScrollContainer (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\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 [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-pivot-row>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (hasMovableColumns && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\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]=\"pivotPinnedWidth\" [style.min-width.px]=\"pivotPinnedWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"pivotUnpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pivotPinnedWidth\" [style.min-width.px]=\"pivotPinnedWidth\" [hidden]=\"pivotPinnedWidth === 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,igc-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@if (colResizingService.showResizer) {\n    <igx-pivot-grid-column-resizer [restrictResizerTop]=\"calculateResizerTop()\"></igx-pivot-grid-column-resizer>\n}\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\n            family=\"default\"\n            [name]=\"getColumnGroupExpandState(column) ? 'tree_expand' : 'tree_collapse'\"\n            [attr.draggable]=\"false\"\n            (click)=\"toggleColumn(column)\">\n        </igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #defaultRowDimensionsTemplate>\n    @for (dim of rowDimensions; track dim.memberName; let dimIndex = $index) {\n        <div tabindex=\"0\" [style.height.px]=\"totalHeight\" #rowDimensionContainer role=\"rowgroup\" class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n            <ng-template igxGridFor let-rowData\n                [igxGridForOf]=\"dataView | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger\"\n                let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n                [igxForContainerSize]=\"calcHeight\"\n                [igxForItemSize]=\"renderedRowHeight\"\n                [igxForSizePropName]=\"'height'\"\n                #verticalRowDimScrollContainer\n            >\n                <igx-pivot-row-dimension-content\n                    role=\"row\" class=\"igx-grid-thead\" [grid]=\"this\"\n                    [dimension]=\"rowData.dimensions[dimIndex]\"\n                    [rootDimension]=\"dim\"\n                    [style.height.px]=\"renderedRowHeight * (rowData.rowSpan || 1)\"\n                    [rowIndex]=\"rowIndex\" [rowData]=\"rowData\"\n                    [width]=\"rowDimensionWidthToPixels(dim)\">\n                </igx-pivot-row-dimension-content>\n            </ng-template>\n        </div>\n    }\n</ng-template>\n\n<ng-template #horizontalRowDimensionsTemplate>\n    <div tabindex=\"0\" class=\"igx-grid__tbody-pivot-mrl-dimension\" #rowDimensionContainer [style.height.px]=\"totalHeight\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        @if (dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger; as groupedData) {\n            <ng-template #verticalRowDimScrollContainer role=\"rowgroup\" igxGridFor let-rowGroup let-rowIndex=\"index\"\n                [igxGridForOf]=\"groupedData\"\n                [igxForScrollOrientation]=\"'vertical'\"\n                [igxForScrollContainer]=\"verticalScroll\"\n                [igxForContainerSize]=\"calcHeight\"\n                [igxForItemSize]=\"renderedRowHeight\"\n                [igxForSizePropName]=\"'height'\"\n            >\n                <igx-pivot-row-dimension-mrl-row [rowIndex]=\"rowIndex\" [rowGroup]=\"rowGroup\" [groupedData]=\"groupedData\" [style.height.px]=\"renderedRowHeight * rowGroup.length\"></igx-pivot-row-dimension-mrl-row>\n            </ng-template>\n        }\n    </div>\n</ng-template>\n\n<ng-template #emptyRowDimensionsTemplate>\n    @if (columnDimensions.length > 0 || values.length > 0) {\n        <div tabindex=\"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                [width]=\"rowDimensionWidthToPixels(emptyRowDimension)\">\n            </igx-pivot-row-dimension-content>\n        </div>\n    }\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\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxPivotHeaderRowComponent, selector: "igx-pivot-header-row" }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxPivotRowComponent, selector: "igx-pivot-row", inputs: ["selected", "data"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxPivotGridColumnResizerComponent, selector: "igx-pivot-grid-column-resizer" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxPivotRowDimensionContentComponent, selector: "igx-pivot-row-dimension-content", inputs: ["rowIndex", "colIndex", "layout", "dimension", "rootDimension", "rowData"] }, { kind: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxPivotRowPipe, name: "pivotGridRow" }, { kind: "pipe", type: IgxPivotRowExpansionPipe, name: "pivotGridRowExpansion" }, { kind: "pipe", type: IgxPivotAutoTransform, name: "pivotGridAutoTransform" }, { kind: "pipe", type: IgxPivotColumnPipe, name: "pivotGridColumn" }, { kind: "pipe", type: IgxPivotGridFilterPipe, name: "pivotGridFilter" }, { kind: "pipe", type: IgxPivotGridSortingPipe, name: "pivotGridSort" }, { kind: "pipe", type: IgxPivotGridColumnSortingPipe, name: "pivotGridColumnSort" }, { kind: "pipe", type: IgxPivotCellMergingPipe, name: "pivotGridCellMerging" }, { kind: "pipe", type: IgxPivotGridHorizontalRowGrouping, name: "pivotGridHorizontalRowGrouping" }, { kind: "component", type: IgxPivotRowDimensionMrlRowComponent, selector: "igx-pivot-row-dimension-mrl-row", inputs: ["rowIndex", "rowGroup", "groupedData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "valueChipTemplateDirective", first: true, predicate: IgxPivotValueChipTemplateDirective, descendants: true, read: IgxPivotValueChipTemplateDirective }, { propertyName: "rowDimensionHeaderDirective", first: true, predicate: IgxPivotRowDimensionHeaderTemplateDirective, descendants: true, read: IgxPivotRowDimensionHeaderTemplateDirective }], 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: "rowDimensionContainer", predicate: ["rowDimensionContainer"], descendants: true, read: ElementRef }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, descendants: true, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "rowDimensionContentCollection", predicate: IgxPivotRowDimensionContentComponent, descendants: true }, { propertyName: "verticalRowDimScrollContainers", predicate: ["verticalRowDimScrollContainer"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "rowDimensionMrlRowsCollection", predicate: IgxPivotRowDimensionMrlRowComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-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    [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 ? (hasHorizontalLayout ? horizontalRowDimensionsTemplate : 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]=\"pivotContentCalcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasMovableColumns && columnInDrag && pinnedColumns.length <= 0) {\n            <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (hasMovableColumns && columnInDrag && pinnedColumns.length > 0) {\n            <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        }\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger\n        | pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger\n        | pivotGridRow:pivotConfiguration:pivotValueCloneStrategy:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridColumn:pivotConfiguration:pivotValueCloneStrategy: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            [igxGridForOfVariableSizes]=\"false\"\n            #verticalScrollContainer (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\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 [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-pivot-row>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (hasMovableColumns && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\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]=\"pivotPinnedWidth\" [style.min-width.px]=\"pivotPinnedWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"pivotUnpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pivotPinnedWidth\" [style.min-width.px]=\"pivotPinnedWidth\" [hidden]=\"pivotPinnedWidth === 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,igc-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@if (colResizingService.showResizer) {\n    <igx-pivot-grid-column-resizer [restrictResizerTop]=\"calculateResizerTop()\"></igx-pivot-grid-column-resizer>\n}\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\n            family=\"default\"\n            [name]=\"getColumnGroupExpandState(column) ? 'tree_expand' : 'tree_collapse'\"\n            [attr.draggable]=\"false\"\n            (click)=\"toggleColumn(column)\">\n        </igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #defaultRowDimensionsTemplate>\n    @for (dim of rowDimensions; track dim.memberName; let dimIndex = $index) {\n        <div tabindex=\"0\" [style.height.px]=\"totalHeight\" #rowDimensionContainer role=\"rowgroup\" class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n            <ng-template igxGridFor let-rowData\n                [igxGridForOf]=\"dataView | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger\"\n                let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n                [igxForContainerSize]=\"calcHeight\"\n                [igxForItemSize]=\"renderedRowHeight\"\n                [igxForSizePropName]=\"'height'\"\n                #verticalRowDimScrollContainer\n            >\n                <igx-pivot-row-dimension-content\n                    role=\"row\" class=\"igx-grid-thead\" [grid]=\"this\"\n                    [dimension]=\"rowData.dimensions[dimIndex]\"\n                    [rootDimension]=\"dim\"\n                    [style.height.px]=\"renderedRowHeight * (rowData.rowSpan || 1)\"\n                    [rowIndex]=\"rowIndex\" [rowData]=\"rowData\"\n                    [width]=\"rowDimensionWidthToPixels(dim)\">\n                </igx-pivot-row-dimension-content>\n            </ng-template>\n            <ng-container *ngTemplateOutlet=\"emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(dim) }\"></ng-container>\n        </div>\n    }\n</ng-template>\n\n<ng-template #horizontalRowDimensionsTemplate>\n    <div tabindex=\"0\" class=\"igx-grid__tbody-pivot-mrl-dimension\" #rowDimensionContainer [style.height.px]=\"totalHeight\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        @if (dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger; as groupedData) {\n            <ng-template #verticalRowDimScrollContainer role=\"rowgroup\" igxGridFor let-rowGroup let-rowIndex=\"index\"\n                [igxGridForOf]=\"groupedData\"\n                [igxForScrollOrientation]=\"'vertical'\"\n                [igxForScrollContainer]=\"verticalScroll\"\n                [igxForContainerSize]=\"calcHeight\"\n                [igxForItemSize]=\"renderedRowHeight\"\n                [igxForSizePropName]=\"'height'\"\n            >\n                <igx-pivot-row-dimension-mrl-row [rowIndex]=\"rowIndex\" [rowGroup]=\"rowGroup\" [groupedData]=\"groupedData\" [style.height.px]=\"renderedRowHeight * rowGroup.length\"></igx-pivot-row-dimension-mrl-row>\n            </ng-template>\n        }\n        <ng-container *ngTemplateOutlet=\"emptyRowDimensionFill; context: { $implicit: this, widthPx: pivotRowWidths }\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #emptyRowDimensionsTemplate>\n    <div tabindex=\"0\" #rowDimensionContainer role=\"rowgroup\" class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        @if ((columnDimensions.length > 0 || values.length > 0) && data.length > 0) {\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                [width]=\"rowDimensionWidthToPixels(emptyRowDimension)\">\n            </igx-pivot-row-dimension-content>\n        }\n        <ng-container *ngTemplateOutlet=\"emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(emptyRowDimension) }\"></ng-container>\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<ng-template #emptyRowDimensionFill let-width=\"widthPx\">\n    @if (emptyBottomSize > 0) {\n        <div class=\"igx-pivot-grid-row-filler__wrapper\" [style.height.px]=\"emptyBottomSize\" [style.width.px]=\"width\">\n            <!-- Reuse header styles to keep visuals consistent -->\n            <div class=\"igx-grid-thead__wrapper\">\n                <div class=\"igx-grid-th\"></div>\n            </div>\n        </div>\n    }\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\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxPivotHeaderRowComponent, selector: "igx-pivot-header-row" }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxPivotRowComponent, selector: "igx-pivot-row", inputs: ["selected", "data"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxPivotGridColumnResizerComponent, selector: "igx-pivot-grid-column-resizer" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxPivotRowDimensionContentComponent, selector: "igx-pivot-row-dimension-content", inputs: ["rowIndex", "colIndex", "layout", "dimension", "rootDimension", "rowData"] }, { kind: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxPivotRowPipe, name: "pivotGridRow" }, { kind: "pipe", type: IgxPivotRowExpansionPipe, name: "pivotGridRowExpansion" }, { kind: "pipe", type: IgxPivotAutoTransform, name: "pivotGridAutoTransform" }, { kind: "pipe", type: IgxPivotColumnPipe, name: "pivotGridColumn" }, { kind: "pipe", type: IgxPivotGridFilterPipe, name: "pivotGridFilter" }, { kind: "pipe", type: IgxPivotGridSortingPipe, name: "pivotGridSort" }, { kind: "pipe", type: IgxPivotGridColumnSortingPipe, name: "pivotGridColumnSort" }, { kind: "pipe", type: IgxPivotCellMergingPipe, name: "pivotGridCellMerging" }, { kind: "pipe", type: IgxPivotGridHorizontalRowGrouping, name: "pivotGridHorizontalRowGrouping" }, { kind: "component", type: IgxPivotRowDimensionMrlRowComponent, selector: "igx-pivot-row-dimension-mrl-row", inputs: ["rowIndex", "rowGroup", "groupedData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     WatchChanges()
@@ -79481,7 +79480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         IgxPivotCellMergingPipe,
                         IgxPivotGridHorizontalRowGrouping,
                         IgxPivotRowDimensionMrlRowComponent
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-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    [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 ? (hasHorizontalLayout ? horizontalRowDimensionsTemplate : 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]=\"pivotContentCalcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasMovableColumns && columnInDrag && pinnedColumns.length <= 0) {\n            <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (hasMovableColumns && columnInDrag && pinnedColumns.length > 0) {\n            <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        }\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger\n        | pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger\n        | pivotGridRow:pivotConfiguration:pivotValueCloneStrategy:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridColumn:pivotConfiguration:pivotValueCloneStrategy: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            [igxGridForOfVariableSizes]=\"false\"\n            #verticalScrollContainer (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\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 [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-pivot-row>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (hasMovableColumns && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\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]=\"pivotPinnedWidth\" [style.min-width.px]=\"pivotPinnedWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"pivotUnpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pivotPinnedWidth\" [style.min-width.px]=\"pivotPinnedWidth\" [hidden]=\"pivotPinnedWidth === 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,igc-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@if (colResizingService.showResizer) {\n    <igx-pivot-grid-column-resizer [restrictResizerTop]=\"calculateResizerTop()\"></igx-pivot-grid-column-resizer>\n}\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\n            family=\"default\"\n            [name]=\"getColumnGroupExpandState(column) ? 'tree_expand' : 'tree_collapse'\"\n            [attr.draggable]=\"false\"\n            (click)=\"toggleColumn(column)\">\n        </igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #defaultRowDimensionsTemplate>\n    @for (dim of rowDimensions; track dim.memberName; let dimIndex = $index) {\n        <div tabindex=\"0\" [style.height.px]=\"totalHeight\" #rowDimensionContainer role=\"rowgroup\" class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n            <ng-template igxGridFor let-rowData\n                [igxGridForOf]=\"dataView | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger\"\n                let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n                [igxForContainerSize]=\"calcHeight\"\n                [igxForItemSize]=\"renderedRowHeight\"\n                [igxForSizePropName]=\"'height'\"\n                #verticalRowDimScrollContainer\n            >\n                <igx-pivot-row-dimension-content\n                    role=\"row\" class=\"igx-grid-thead\" [grid]=\"this\"\n                    [dimension]=\"rowData.dimensions[dimIndex]\"\n                    [rootDimension]=\"dim\"\n                    [style.height.px]=\"renderedRowHeight * (rowData.rowSpan || 1)\"\n                    [rowIndex]=\"rowIndex\" [rowData]=\"rowData\"\n                    [width]=\"rowDimensionWidthToPixels(dim)\">\n                </igx-pivot-row-dimension-content>\n            </ng-template>\n        </div>\n    }\n</ng-template>\n\n<ng-template #horizontalRowDimensionsTemplate>\n    <div tabindex=\"0\" class=\"igx-grid__tbody-pivot-mrl-dimension\" #rowDimensionContainer [style.height.px]=\"totalHeight\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        @if (dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger; as groupedData) {\n            <ng-template #verticalRowDimScrollContainer role=\"rowgroup\" igxGridFor let-rowGroup let-rowIndex=\"index\"\n                [igxGridForOf]=\"groupedData\"\n                [igxForScrollOrientation]=\"'vertical'\"\n                [igxForScrollContainer]=\"verticalScroll\"\n                [igxForContainerSize]=\"calcHeight\"\n                [igxForItemSize]=\"renderedRowHeight\"\n                [igxForSizePropName]=\"'height'\"\n            >\n                <igx-pivot-row-dimension-mrl-row [rowIndex]=\"rowIndex\" [rowGroup]=\"rowGroup\" [groupedData]=\"groupedData\" [style.height.px]=\"renderedRowHeight * rowGroup.length\"></igx-pivot-row-dimension-mrl-row>\n            </ng-template>\n        }\n    </div>\n</ng-template>\n\n<ng-template #emptyRowDimensionsTemplate>\n    @if (columnDimensions.length > 0 || values.length > 0) {\n        <div tabindex=\"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                [width]=\"rowDimensionWidthToPixels(emptyRowDimension)\">\n            </igx-pivot-row-dimension-content>\n        </div>\n    }\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\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    </div>\n}\n" }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-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    [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 ? (hasHorizontalLayout ? horizontalRowDimensionsTemplate : 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]=\"pivotContentCalcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasMovableColumns && columnInDrag && pinnedColumns.length <= 0) {\n            <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (hasMovableColumns && columnInDrag && pinnedColumns.length > 0) {\n            <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        }\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger\n        | pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger\n        | pivotGridRow:pivotConfiguration:pivotValueCloneStrategy:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridColumn:pivotConfiguration:pivotValueCloneStrategy: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            [igxGridForOfVariableSizes]=\"false\"\n            #verticalScrollContainer (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\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 [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-pivot-row>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (hasMovableColumns && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\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]=\"pivotPinnedWidth\" [style.min-width.px]=\"pivotPinnedWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"pivotUnpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pivotPinnedWidth\" [style.min-width.px]=\"pivotPinnedWidth\" [hidden]=\"pivotPinnedWidth === 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,igc-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@if (colResizingService.showResizer) {\n    <igx-pivot-grid-column-resizer [restrictResizerTop]=\"calculateResizerTop()\"></igx-pivot-grid-column-resizer>\n}\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\n            family=\"default\"\n            [name]=\"getColumnGroupExpandState(column) ? 'tree_expand' : 'tree_collapse'\"\n            [attr.draggable]=\"false\"\n            (click)=\"toggleColumn(column)\">\n        </igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #defaultRowDimensionsTemplate>\n    @for (dim of rowDimensions; track dim.memberName; let dimIndex = $index) {\n        <div tabindex=\"0\" [style.height.px]=\"totalHeight\" #rowDimensionContainer role=\"rowgroup\" class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n            <ng-template igxGridFor let-rowData\n                [igxGridForOf]=\"dataView | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger\"\n                let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n                [igxForContainerSize]=\"calcHeight\"\n                [igxForItemSize]=\"renderedRowHeight\"\n                [igxForSizePropName]=\"'height'\"\n                #verticalRowDimScrollContainer\n            >\n                <igx-pivot-row-dimension-content\n                    role=\"row\" class=\"igx-grid-thead\" [grid]=\"this\"\n                    [dimension]=\"rowData.dimensions[dimIndex]\"\n                    [rootDimension]=\"dim\"\n                    [style.height.px]=\"renderedRowHeight * (rowData.rowSpan || 1)\"\n                    [rowIndex]=\"rowIndex\" [rowData]=\"rowData\"\n                    [width]=\"rowDimensionWidthToPixels(dim)\">\n                </igx-pivot-row-dimension-content>\n            </ng-template>\n            <ng-container *ngTemplateOutlet=\"emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(dim) }\"></ng-container>\n        </div>\n    }\n</ng-template>\n\n<ng-template #horizontalRowDimensionsTemplate>\n    <div tabindex=\"0\" class=\"igx-grid__tbody-pivot-mrl-dimension\" #rowDimensionContainer [style.height.px]=\"totalHeight\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        @if (dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger; as groupedData) {\n            <ng-template #verticalRowDimScrollContainer role=\"rowgroup\" igxGridFor let-rowGroup let-rowIndex=\"index\"\n                [igxGridForOf]=\"groupedData\"\n                [igxForScrollOrientation]=\"'vertical'\"\n                [igxForScrollContainer]=\"verticalScroll\"\n                [igxForContainerSize]=\"calcHeight\"\n                [igxForItemSize]=\"renderedRowHeight\"\n                [igxForSizePropName]=\"'height'\"\n            >\n                <igx-pivot-row-dimension-mrl-row [rowIndex]=\"rowIndex\" [rowGroup]=\"rowGroup\" [groupedData]=\"groupedData\" [style.height.px]=\"renderedRowHeight * rowGroup.length\"></igx-pivot-row-dimension-mrl-row>\n            </ng-template>\n        }\n        <ng-container *ngTemplateOutlet=\"emptyRowDimensionFill; context: { $implicit: this, widthPx: pivotRowWidths }\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #emptyRowDimensionsTemplate>\n    <div tabindex=\"0\" #rowDimensionContainer role=\"rowgroup\" class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        @if ((columnDimensions.length > 0 || values.length > 0) && data.length > 0) {\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                [width]=\"rowDimensionWidthToPixels(emptyRowDimension)\">\n            </igx-pivot-row-dimension-content>\n        }\n        <ng-container *ngTemplateOutlet=\"emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(emptyRowDimension) }\"></ng-container>\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<ng-template #emptyRowDimensionFill let-width=\"widthPx\">\n    @if (emptyBottomSize > 0) {\n        <div class=\"igx-pivot-grid-row-filler__wrapper\" [style.height.px]=\"emptyBottomSize\" [style.width.px]=\"width\">\n            <!-- Reuse header styles to keep visuals consistent -->\n            <div class=\"igx-grid-thead__wrapper\">\n                <div class=\"igx-grid-th\"></div>\n            </div>\n        </div>\n    }\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\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    </div>\n}\n" }]
         }], ctorParameters: () => [{ type: IgxGridValidationService }, { type: IgxGridSelectionService }, { type: IgxPivotColumnResizingService }, { type: GridBaseAPIService }, { type: IgxFlatTransactionFactory }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -85230,6 +85229,7 @@ class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
     constructor(validationService, selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, differs, viewRef, injector, envInjector, navigation, filteringService, textHighlightService, overlayService, summaryService, localeId, platform, _diTransactions) {
         super(validationService, selectionService, colResizingService, gridAPI, transactionFactory, elementRef, zone, document, cdr, differs, viewRef, injector, envInjector, navigation, filteringService, textHighlightService, overlayService, summaryService, localeId, platform, _diTransactions);
         this.gridAPI = gridAPI;
+        this.navigation = navigation;
         /**
          * Gets/Sets whether the expand/collapse all button in the header should be rendered.
          *