igniteui-angular 22.1.0-rc.0 → 22.1.1

package/fesm2022/igniteui-angular-grids-pivot-grid.mjs

@@ -739,7 +739,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: "22.1.1", ngImport: i0, type: IgxPivotHeaderRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", host: { properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, 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(filterArea)\"\n                         igxDrop (dropped)=\"onDimAreaDrop($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)=\"onDimAreaDrop($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)=\"onDimChipDrop($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)=\"onDimChipDrop($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(rowArea)\"\n                            (dropped)=\"onDimAreaDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimAreaDrop($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)=\"onDimChipDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort(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)=\"onDimChipDrop($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)=\"onDimAreaDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave(colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimAreaDrop($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)=\"onDimChipDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort(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)=\"onDimChipDrop($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)=\"onValueAreaDrop($event)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave(valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueAreaDrop($event)\" 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)=\"onValueChipDrop($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)=\"onValueChipDrop($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        [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(rowArea)\" igxDrop\n                    (dropped)=\"onDimAreaDrop($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)=\"onDimAreaDrop($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)=\"onDimChipDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort(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)=\"onDimChipDrop($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\" [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.width.px]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [style.flex-basis.px]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\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 (pinnedStartColumnCollection.length) {\n                @for (column of pinnedStartColumnCollection | 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\"\n                        [style.flex-basis]=\"column.resolvedWidth\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader()\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]=\"maxContainerHeight\" (click)=\"grid.navigation.focusOutRowHeader()\">\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\"\n                                [style.flex-basis]=\"column.resolvedWidth\"\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 (pinnedEndColumnCollection.length) {\n                @for (column of pinnedEndColumnCollection | 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\"\n                        [style.flex-basis]=\"column.resolvedWidth\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader()\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n\n        <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\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: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { 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", "role"], 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", "filterCleared"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "[igxExcelStyleColumnOperations],igx-excel-style-column-operations" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "[igxExcelStyleFilterOperations],igx-excel-style-filter-operations" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "component", type: IgxPivotRowHeaderGroupComponent, selector: "igx-pivot-row-header-group", inputs: ["rowIndex", "dimWidth", "rootDimension"] }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", host: { properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, 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(filterArea)\"\n                         igxDrop (dropped)=\"onDimAreaDrop($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)=\"onDimAreaDrop($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)=\"onDimChipDrop($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)=\"onDimChipDrop($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(rowArea)\"\n                            (dropped)=\"onDimAreaDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimAreaDrop($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)=\"onDimChipDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort(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)=\"onDimChipDrop($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)=\"onDimAreaDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave(colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimAreaDrop($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)=\"onDimChipDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort(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)=\"onDimChipDrop($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)=\"onValueAreaDrop($event)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave(valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueAreaDrop($event)\" 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)=\"onValueChipDrop($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)=\"onValueChipDrop($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        [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(rowArea)\" igxDrop\n                    (dropped)=\"onDimAreaDrop($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)=\"onDimAreaDrop($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)=\"onDimChipDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort(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)=\"onDimChipDrop($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\" [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.width.px]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [style.flex-basis.px]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\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 (pinnedStartColumnCollection.length) {\n                @for (column of pinnedStartColumnCollection | 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\"\n                        [style.flex-basis]=\"column.resolvedWidth\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader()\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]=\"maxContainerHeight\" (click)=\"grid.navigation.focusOutRowHeader()\">\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\"\n                                [style.flex-basis]=\"column.resolvedWidth\"\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 (pinnedEndColumnCollection.length) {\n                @for (column of pinnedEndColumnCollection | 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\"\n                        [style.flex-basis]=\"column.resolvedWidth\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader()\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n\n        <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\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", "outlined", "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: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { 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", "role"], 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", "filterCleared"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "[igxExcelStyleColumnOperations],igx-excel-style-column-operations" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "[igxExcelStyleFilterOperations],igx-excel-style-filter-operations" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "component", type: IgxPivotRowHeaderGroupComponent, selector: "igx-pivot-row-header-group", inputs: ["rowIndex", "dimWidth", "rootDimension"] }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPivotHeaderRowComponent, decorators: [{
             type: Component,
@@ -4459,7 +4459,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: "rowDimensionMrlComponent", first: true, predicate: IgxPivotRowDimensionMrlRowComponent, descendants: true, read: IgxPivotRowDimensionMrlRowComponent }, { 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    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($any($event))\"\n    (keydown.control.c)=\"copyHandler($any($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($any($event))\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"presentation\">\n    <ng-container *ngTemplateOutlet=\"rowDimensions.length ? (hasHorizontalLayout ? horizontalRowDimensionsTemplate : defaultRowDimensionsTemplate) : emptyRowDimensionsTemplate; context: this\"></ng-container>\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\"  [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? 'rowgroup' : '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\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #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]=\"pinnedStartWidth\"></span>\n        }\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData!\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\n            #verticalScrollContainer (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <div [attr.data-index]=\"rowIndex\">\n            <ng-template\n                [igxTemplateOutlet]=\"recordTemplate\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n            </ng-template>\n            </div>\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:isRecordMerged(rowData):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        <ng-container #bodyViewContainerRef></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\"></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 [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" role=\"presentation\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\"\n        [class.igx-grid__scroll-start--pinned]=\"pivotPinnedStartWidth > 0\"\n        [class.igx-grid__scroll-start--column-selection]=\"columnSelection !== 'none'\"\n        [style.width.px]=\"pivotPinnedStartWidth\" [style.min-width.px]=\"pivotPinnedStartWidth\"></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]=\"pivotPinnedEndWidth\" [style.min-width.px]=\"pivotPinnedEndWidth\" [hidden]=\"pivotPinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"presentation\" #tfoot>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #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__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\" role=\"rowgroup\" [style.height.px]=\"totalHeight\" #rowDimensionContainer class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n            [attr.aria-activedescendant]=\"headerRowActiveDescendant\">\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                <div [attr.data-index]=\"rowIndex\">\n                    <igx-pivot-row-dimension-content\n                        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                </div>\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\" role=\"rowgroup\" class=\"igx-grid__tbody-pivot-mrl-dimension\" #rowDimensionContainer [style.height.px]=\"totalHeight\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n        [attr.aria-activedescendant]=\"headerRowActiveDescendant\">\n        @if (dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger; as groupedData) {\n            <ng-template #verticalRowDimScrollContainer 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                [igxForTrackBy]=\"trackHorizontalRowGroup\"\n            >\n                <div [attr.data-index]=\"rowIndex\">\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                </div>\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        [attr.aria-activedescendant]=\"headerRowActiveDescendant\">\n        @if ((columnDimensions.length > 0 || values.length > 0) && data!.length > 0) {\n            <igx-pivot-row-dimension-content 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;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\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: ["ariaHidden", "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", "filterCleared"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "[igxExcelStyleColumnOperations],igx-excel-style-column-operations" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "[igxExcelStyleFilterOperations],igx-excel-style-filter-operations" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "component", type: IgxPivotRowDimensionMrlRowComponent, selector: "igx-pivot-row-dimension-mrl-row", inputs: ["rowIndex", "rowGroup", "groupedData"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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: "rowDimensionMrlComponent", first: true, predicate: IgxPivotRowDimensionMrlRowComponent, descendants: true, read: IgxPivotRowDimensionMrlRowComponent }, { 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    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($any($event))\"\n    (keydown.control.c)=\"copyHandler($any($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($any($event))\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"presentation\">\n    <ng-container *ngTemplateOutlet=\"rowDimensions.length ? (hasHorizontalLayout ? horizontalRowDimensionsTemplate : defaultRowDimensionsTemplate) : emptyRowDimensionsTemplate; context: this\"></ng-container>\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\"  [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? 'rowgroup' : '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\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #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]=\"pinnedStartWidth\"></span>\n        }\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData!\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\n            #verticalScrollContainer (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <div [attr.data-index]=\"rowIndex\">\n            <ng-template\n                [igxTemplateOutlet]=\"recordTemplate\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n            </ng-template>\n            </div>\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:isRecordMerged(rowData):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        <ng-container #bodyViewContainerRef></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\"></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 [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" role=\"presentation\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\"\n        [class.igx-grid__scroll-start--pinned]=\"pivotPinnedStartWidth > 0\"\n        [class.igx-grid__scroll-start--column-selection]=\"columnSelection !== 'none'\"\n        [style.width.px]=\"pivotPinnedStartWidth\" [style.min-width.px]=\"pivotPinnedStartWidth\"></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]=\"pivotPinnedEndWidth\" [style.min-width.px]=\"pivotPinnedEndWidth\" [hidden]=\"pivotPinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"presentation\" #tfoot>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #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__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\" role=\"rowgroup\" [style.height.px]=\"totalHeight\" #rowDimensionContainer class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n            [attr.aria-activedescendant]=\"headerRowActiveDescendant\">\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                <div [attr.data-index]=\"rowIndex\">\n                    <igx-pivot-row-dimension-content\n                        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                </div>\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\" role=\"rowgroup\" class=\"igx-grid__tbody-pivot-mrl-dimension\" #rowDimensionContainer [style.height.px]=\"totalHeight\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n        [attr.aria-activedescendant]=\"headerRowActiveDescendant\">\n        @if (dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger; as groupedData) {\n            <ng-template #verticalRowDimScrollContainer 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                [igxForTrackBy]=\"trackHorizontalRowGroup\"\n            >\n                <div [attr.data-index]=\"rowIndex\">\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                </div>\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        [attr.aria-activedescendant]=\"headerRowActiveDescendant\">\n        @if ((columnDimensions.length > 0 || values.length > 0) && data!.length > 0) {\n            <igx-pivot-row-dimension-content 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;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\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: ["ariaHidden", "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", "filterCleared"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "[igxExcelStyleColumnOperations],igx-excel-style-column-operations" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "[igxExcelStyleFilterOperations],igx-excel-style-filter-operations" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "component", type: IgxPivotRowDimensionMrlRowComponent, selector: "igx-pivot-row-dimension-mrl-row", inputs: ["rowIndex", "rowGroup", "groupedData"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     WatchChanges()
@@ -4518,7 +4518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", 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    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($any($event))\"\n    (keydown.control.c)=\"copyHandler($any($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($any($event))\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"presentation\">\n    <ng-container *ngTemplateOutlet=\"rowDimensions.length ? (hasHorizontalLayout ? horizontalRowDimensionsTemplate : defaultRowDimensionsTemplate) : emptyRowDimensionsTemplate; context: this\"></ng-container>\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\"  [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? 'rowgroup' : '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\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #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]=\"pinnedStartWidth\"></span>\n        }\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData!\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\n            #verticalScrollContainer (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <div [attr.data-index]=\"rowIndex\">\n            <ng-template\n                [igxTemplateOutlet]=\"recordTemplate\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n            </ng-template>\n            </div>\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:isRecordMerged(rowData):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        <ng-container #bodyViewContainerRef></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\"></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 [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" role=\"presentation\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\"\n        [class.igx-grid__scroll-start--pinned]=\"pivotPinnedStartWidth > 0\"\n        [class.igx-grid__scroll-start--column-selection]=\"columnSelection !== 'none'\"\n        [style.width.px]=\"pivotPinnedStartWidth\" [style.min-width.px]=\"pivotPinnedStartWidth\"></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]=\"pivotPinnedEndWidth\" [style.min-width.px]=\"pivotPinnedEndWidth\" [hidden]=\"pivotPinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"presentation\" #tfoot>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #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__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\" role=\"rowgroup\" [style.height.px]=\"totalHeight\" #rowDimensionContainer class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n            [attr.aria-activedescendant]=\"headerRowActiveDescendant\">\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                <div [attr.data-index]=\"rowIndex\">\n                    <igx-pivot-row-dimension-content\n                        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                </div>\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\" role=\"rowgroup\" class=\"igx-grid__tbody-pivot-mrl-dimension\" #rowDimensionContainer [style.height.px]=\"totalHeight\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n        [attr.aria-activedescendant]=\"headerRowActiveDescendant\">\n        @if (dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger; as groupedData) {\n            <ng-template #verticalRowDimScrollContainer 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                [igxForTrackBy]=\"trackHorizontalRowGroup\"\n            >\n                <div [attr.data-index]=\"rowIndex\">\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                </div>\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        [attr.aria-activedescendant]=\"headerRowActiveDescendant\">\n        @if ((columnDimensions.length > 0 || values.length > 0) && data!.length > 0) {\n            <igx-pivot-row-dimension-content 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;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\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    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($any($event))\"\n    (keydown.control.c)=\"copyHandler($any($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($any($event))\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"presentation\">\n    <ng-container *ngTemplateOutlet=\"rowDimensions.length ? (hasHorizontalLayout ? horizontalRowDimensionsTemplate : defaultRowDimensionsTemplate) : emptyRowDimensionsTemplate; context: this\"></ng-container>\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\"  [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? 'rowgroup' : '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\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #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]=\"pinnedStartWidth\"></span>\n        }\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData!\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\n            #verticalScrollContainer (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <div [attr.data-index]=\"rowIndex\">\n            <ng-template\n                [igxTemplateOutlet]=\"recordTemplate\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n            </ng-template>\n            </div>\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:isRecordMerged(rowData):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        <ng-container #bodyViewContainerRef></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\"></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 [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" role=\"presentation\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\"\n        [class.igx-grid__scroll-start--pinned]=\"pivotPinnedStartWidth > 0\"\n        [class.igx-grid__scroll-start--column-selection]=\"columnSelection !== 'none'\"\n        [style.width.px]=\"pivotPinnedStartWidth\" [style.min-width.px]=\"pivotPinnedStartWidth\"></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]=\"pivotPinnedEndWidth\" [style.min-width.px]=\"pivotPinnedEndWidth\" [hidden]=\"pivotPinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"presentation\" #tfoot>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #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__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\" role=\"rowgroup\" [style.height.px]=\"totalHeight\" #rowDimensionContainer class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n            [attr.aria-activedescendant]=\"headerRowActiveDescendant\">\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                <div [attr.data-index]=\"rowIndex\">\n                    <igx-pivot-row-dimension-content\n                        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                </div>\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\" role=\"rowgroup\" class=\"igx-grid__tbody-pivot-mrl-dimension\" #rowDimensionContainer [style.height.px]=\"totalHeight\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n        [attr.aria-activedescendant]=\"headerRowActiveDescendant\">\n        @if (dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger; as groupedData) {\n            <ng-template #verticalRowDimScrollContainer 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                [igxForTrackBy]=\"trackHorizontalRowGroup\"\n            >\n                <div [attr.data-index]=\"rowIndex\">\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                </div>\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        [attr.aria-activedescendant]=\"headerRowActiveDescendant\">\n        @if ((columnDimensions.length > 0 || values.length > 0) && data!.length > 0) {\n            <igx-pivot-row-dimension-content 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;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n}\n" }]
         }], propDecorators: { dimensionsChange: [{
                 type: Output
             }], pivotConfigurationChange: [{
@@ -5201,7 +5201,7 @@ class IgxPivotDataSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPivotDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxPivotDataSelectorComponent, isStandalone: true, selector: "igx-pivot-data-selector", inputs: { columnsExpanded: ["columnsExpanded", "columnsExpanded", booleanAttribute], rowsExpanded: ["rowsExpanded", "rowsExpanded", booleanAttribute], filtersExpanded: ["filtersExpanded", "filtersExpanded", booleanAttribute], valuesExpanded: ["valuesExpanded", "valuesExpanded", booleanAttribute], grid: "grid" }, outputs: { columnsExpandedChange: "columnsExpandedChange", rowsExpandedChange: "rowsExpandedChange", filtersExpandedChange: "filtersExpandedChange", valuesExpandedChange: "valuesExpandedChange" }, host: { properties: { "class.igx-pivot-data-selector": "this.cssClass", "style.--ig-size": "this.size" } }, ngImport: i0, template: "<div class=\"igx-pivot-data-selector__filter\">\n  <igx-input-group type=\"box\">\n    <igx-icon family=\"default\" name=\"search\" igxPrefix></igx-icon>\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      placeholder=\"Search\"\n      autocomplete=\"off\"\n    />\n  </igx-input-group>\n  <igx-list>\n    @for (\n      item of dims\n        | filterPivotItems\n          : input.value\n          : grid?.pipeTrigger;\n      track item.memberName\n    ) {\n      <igx-list-item [id]=\"item.memberName\">\n        <igx-checkbox\n          [aria-labelledby]=\"item.memberName\"\n          [disableRipple]=\"true\"\n          [checked]=\"item.enabled\"\n          (click)=\"toggleItem(item)\"\n        ></igx-checkbox>\n        <span>{{ item.displayName || item.memberName }}</span>\n      </igx-list-item>\n    }\n    @for (\n      item of values\n        | filterPivotItems\n          : input.value\n          : grid?.pipeTrigger;\n      track item\n    ) {\n      <igx-list-item [id]=\"item.member\">\n        <igx-checkbox\n          [aria-labelledby]=\"item.member\"\n          [disableRipple]=\"true\"\n          [checked]=\"item.enabled\"\n          (click)=\"toggleItem(item)\"\n        ></igx-checkbox>\n        <span>{{ item.displayName || item.member }}</span>\n      </igx-list-item>\n    }\n  </igx-list>\n</div>\n\n<igx-accordion>\n  @for (panel of _panels; track panel) {\n    <igx-expansion-panel\n      [animationSettings]=\"animationSettings\"\n      [collapsed]=\"getPanelCollapsed(panel.type!)\"\n      (collapsedChange)=\"onCollapseChange($event, panel.type!)\"\n    >\n      <igx-expansion-panel-header\n        iconPosition=\"left\"\n        [disabled]=\"false\"\n        igxDrop\n        (enter)=\"onPanelEntry($event, panel.name)\"\n        (dropped)=\"onItemDropped($event, panel.type!)\"\n      >\n        <igx-expansion-panel-title class=\"igx-pivot-data-selector__header\">\n          <h6 class=\"igx-pivot-data-selector__header-title\">\n            {{ $any(grid?.resourceStrings)[panel.i18n] }}\n          </h6>\n          <div class=\"igx-pivot-data-selector__header-extra\">\n            <igx-icon family=\"default\" [name]=\"panel.icon\"></igx-icon>\n            <igx-chip>{{\n              this.grid ? this.grid[panel.dataKey].length : 0\n            }}</igx-chip>\n          </div>\n        </igx-expansion-panel-title>\n      </igx-expansion-panel-header>\n      <igx-expansion-panel-body\n        igxDrop\n        (enter)=\"onPanelEntry($event, panel.name)\"\n        (dropped)=\"onItemDropped($event, panel.type!)\"\n      >\n        @if (this.grid && this.grid[panel.dataKey].length > 0) {\n          <igx-list>\n            @for (\n              item of this.grid[panel.dataKey];\n              track item.memberName || item.member\n            ) {\n              <igx-list-item\n                igxDrop\n                [igxDrag]=\"{\n                  gridID: grid.id,\n                  selectorChannels: panel.dragChannels,\n                }\"\n                [ghostTemplate]=\"itemGhost\"\n                (ghostCreate)=\"ghostCreated($event, item[panel.itemKey])\"\n                (over)=\"onItemDragOver($event)\"\n                (leave)=\"onItemDragLeave($event)\"\n                (dragMove)=\"onItemDragMove($event)\"\n                (dragEnd)=\"onItemDragEnd($event)\"\n                (dropped)=\"onItemDropped($event, panel.type!)\"\n                [id]=\"item[panel.itemKey]\"\n              >\n                <div class=\"igx-pivot-data-selector__item\">\n                  <div\n                    class=\"igx-pivot-data-selector__item-start\"\n                    (click)=\"onItemSort($event, item, panel.type!)\"\n                    [class.igx-pivot-data-selector__action-sort]=\"\n                      panel.sortable\n                    \"\n                  >\n                    <div class=\"igx-pivot-data-selector__item-text\">\n                      @if (panel.type === null) {\n                        <span>{{ item.aggregate.key }}</span>\n                      }\n                      @if (panel.type === null) {\n                        <span>(</span>\n                      }\n                      <span>{{\n                        item[panel.displayKey!] || item[panel.itemKey]\n                      }}</span>\n                      @if (panel.type === null) {\n                        <span>)</span>\n                      }\n                    </div>\n                    @if (panel.sortable && item.sortDirection) {\n                      <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                          item.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\n                        \"\n                        class=\"igx-pivot-data-selector__action-sort\"\n                      >\n                      </igx-icon>\n                    }\n                  </div>\n                  <div class=\"igx-pivot-data-selector__item-end\">\n                    @if (panel.type !== null) {\n                      <igx-icon\n                        family=\"default\"\n                        name=\"filter_list\"\n                        class=\"igx-pivot-data-selector__action-filter\"\n                        (pointerdown)=\"onFilteringIconPointerDown($event)\"\n                        (click)=\"onFilteringIconClick($event, item)\"\n                      >\n                      </igx-icon>\n                    }\n                    @if (panel.type === null) {\n                      <igx-icon\n                        family=\"default\"\n                        name=\"functions\"\n                        class=\"igx-pivot-data-selector__action-summary\"\n                        (click)=\"onSummaryClick($event, item, dropdown)\"\n                        [igxDropDownItemNavigation]=\"dropdown\"\n                      >\n                      </igx-icon>\n                    }\n                    @if (panel.dragChannels.length > 0) {\n                      <igx-icon\n                        family=\"default\"\n                        name=\"drag_indicator\"\n                        igxDragHandle\n                        class=\"igx-pivot-data-selector__action-move\"\n                      >\n                      </igx-icon>\n                    }\n                  </div>\n                </div>\n              </igx-list-item>\n            }\n          </igx-list>\n        }\n        @if (this.grid && this.grid[panel.dataKey].length === 0) {\n          <div class=\"igx-pivot-data-selector__empty\">\n            {{ grid?.resourceStrings.igx_grid_pivot_selector_panel_empty }}\n          </div>\n        }\n      </igx-expansion-panel-body>\n    </igx-expansion-panel>\n  }\n</igx-accordion>\n\n<igx-drop-down #dropdown (selectionChanging)=\"onAggregationChange($event)\">\n  @for (item of aggregateList; track item) {\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<ng-template #itemGhost>\n  <div\n    class=\"igx-pivot-data-selector__item-ghost\"\n    [style.width.px]=\"ghostWidth\"\n    [class.igx-pivot-data-selector__item-ghost--no-drop]=\"!dropAllowed\"\n  >\n    <div class=\"igx-pivot-data-selector__item-ghost-text\">\n      <igx-icon family=\"default\" name=\"import_export\"></igx-icon>\n      <span>{{ ghostText }}</span>\n    </div>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n  </div>\n</ng-template>\n", styles: ["@layer ig.base{.igx-pivot-data-selector__action-summary,.igx-pivot-data-selector__action-filter,.igx-pivot-data-selector__action-sort{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.igx-pivot-data-selector{display:flex;flex-direction:column;max-width:17.5rem;background:var(--background);z-index:0}.igx-pivot-data-selector igx-input-group input{transform:none}.igx-pivot-data-selector igx-input-group [igxPrefix]{box-sizing:content-box}.igx-pivot-data-selector igx-input-group .igx-input-group__bundle-main{padding-top:0!important}.igx-pivot-data-selector>igx-list igx-display-container{padding:.25rem}.igx-pivot-data-selector>igx-list igx-list-item{display:flex;min-height:1.75rem}.igx-pivot-data-selector .igx-expansion-panel__body{position:relative;height:8rem;font-size:.875rem;padding:.25rem;overflow-y:auto}.igx-pivot-data-selector .igx-expansion-panel__body igx-list{height:auto}.igx-pivot-data-selector .igx-expansion-panel__header-icon--start{margin-inline-end:.5rem}.igx-pivot-data-selector igx-expansion-panel-title.igx-expansion-panel__header-title{display:flex}.igx-pivot-data-selector igx-expansion-panel-title.igx-expansion-panel__header-title>h6{font-size:.75rem;margin-block:0}.igx-pivot-data-selector .igx-expansion-panel__header-inner{background:var(--header-color);padding:.25rem}.dragOver .igx-pivot-data-selector .igx-expansion-panel__header-inner{background:var(--ig-gray-300);box-shadow:inset 0 0 0 .0625rem var(--ig-gray-400)}.igx-pivot-data-selector igx-icon{--size: var(--ig-icon-size, 1.125rem)}.igx-pivot-data-selector__header,.igx-pivot-data-selector__header-extra{display:flex;align-items:center}.igx-pivot-data-selector__header-extra igx-icon{padding:0 .5rem;box-sizing:content-box!important}.igx-pivot-data-selector__header-extra .igx-chip__item{height:max(var(--is-large, 1)*max(1.375rem,-1 * 1.375rem),var(--is-medium, 1)*max(1.25rem,-1 * 1.25rem),var(--is-small, 1)*max(1.125rem,-1 * 1.125rem))}.igx-pivot-data-selector__header-extra .igx-chip__content{padding:0 .125rem}.igx-pivot-data-selector__filter{display:flex;flex-direction:column;overflow:hidden}.igx-pivot-data-selector__filter igx-list{display:flex;flex-direction:column;padding:.5rem .25rem;min-height:11.625rem;max-height:13rem;overflow-y:auto}.igx-pivot-data-selector__filter igx-list-item{display:flex}.igx-pivot-data-selector__filter igx-checkbox+span{margin-inline-start:.5rem;line-height:1.75rem}.igx-pivot-data-selector__item{display:flex;align-items:center;justify-content:space-between;min-height:2rem;width:100%}.igx-drag--push .igx-pivot-data-selector__item{padding-top:2rem}.igx-pivot-data-selector__item-ghost{--ig-icon-size: 1.125rem;display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background:var(--ig-surface-500);min-height:2rem;height:auto;padding:0 .125rem 0 .25rem;cursor:grabbing;box-shadow:elevation(24);border:.0625rem solid var(--ig-gray-100);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .125rem),.125rem);z-index:10}.igx-pivot-data-selector__item-ghost--no-drop{cursor:no-drop}.igx-pivot-data-selector__item-ghost-text{display:flex;align-items:center}.igx-pivot-data-selector__item-ghost-text igx-icon{margin-inline-end:.5rem}.igx-pivot-data-selector__item-start{display:flex;justify-content:space-between;align-items:center;flex:0 1 100%;margin-inline-end:.5rem;overflow:hidden}.igx-pivot-data-selector__item-end{display:flex}.igx-pivot-data-selector__item-end igx-icon+igx-icon{margin-inline-start:.5rem}.igx-pivot-data-selector__item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:calc(100% - .625rem);-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-pivot-data-selector__action-move{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:grab}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-pivot-data-selector__filter igx-input-group{padding:.25rem}}}@layer ig.material{@container style(--ig-theme: material){.igx-pivot-data-selector .igx-checkbox__composite-wrapper{padding:0}.igx-pivot-data-selector igx-input-group [igxPrefix]{padding-inline-end:1rem!important}}}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role", "selected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxAccordionComponent, selector: "igx-accordion", inputs: ["id", "animationSettings", "singleBranchExpand"], outputs: ["panelExpanding", "panelExpanded", "panelCollapsing", "panelCollapsed"] }, { kind: "component", type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { kind: "component", type: IgxExpansionPanelHeaderComponent, selector: "igx-expansion-panel-header", inputs: ["lv", "role", "iconPosition", "disabled"], outputs: ["interaction"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxExpansionPanelTitleDirective, selector: "igx-expansion-panel-title" }, { 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: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostClasses", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "pipe", type: IgxFilterPivotItemsPipe, name: "filterPivotItems" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxPivotDataSelectorComponent, isStandalone: true, selector: "igx-pivot-data-selector", inputs: { columnsExpanded: ["columnsExpanded", "columnsExpanded", booleanAttribute], rowsExpanded: ["rowsExpanded", "rowsExpanded", booleanAttribute], filtersExpanded: ["filtersExpanded", "filtersExpanded", booleanAttribute], valuesExpanded: ["valuesExpanded", "valuesExpanded", booleanAttribute], grid: "grid" }, outputs: { columnsExpandedChange: "columnsExpandedChange", rowsExpandedChange: "rowsExpandedChange", filtersExpandedChange: "filtersExpandedChange", valuesExpandedChange: "valuesExpandedChange" }, host: { properties: { "class.igx-pivot-data-selector": "this.cssClass", "style.--ig-size": "this.size" } }, ngImport: i0, template: "<div class=\"igx-pivot-data-selector__filter\">\n  <igx-input-group type=\"box\">\n    <igx-icon family=\"default\" name=\"search\" igxPrefix></igx-icon>\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      placeholder=\"Search\"\n      autocomplete=\"off\"\n    />\n  </igx-input-group>\n  <igx-list>\n    @for (\n      item of dims\n        | filterPivotItems\n          : input.value\n          : grid?.pipeTrigger;\n      track item.memberName\n    ) {\n      <igx-list-item [id]=\"item.memberName\">\n        <igx-checkbox\n          [aria-labelledby]=\"item.memberName\"\n          [disableRipple]=\"true\"\n          [checked]=\"item.enabled\"\n          (click)=\"toggleItem(item)\"\n        ></igx-checkbox>\n        <span>{{ item.displayName || item.memberName }}</span>\n      </igx-list-item>\n    }\n    @for (\n      item of values\n        | filterPivotItems\n          : input.value\n          : grid?.pipeTrigger;\n      track item\n    ) {\n      <igx-list-item [id]=\"item.member\">\n        <igx-checkbox\n          [aria-labelledby]=\"item.member\"\n          [disableRipple]=\"true\"\n          [checked]=\"item.enabled\"\n          (click)=\"toggleItem(item)\"\n        ></igx-checkbox>\n        <span>{{ item.displayName || item.member }}</span>\n      </igx-list-item>\n    }\n  </igx-list>\n</div>\n\n<igx-accordion>\n  @for (panel of _panels; track panel) {\n    <igx-expansion-panel\n      [animationSettings]=\"animationSettings\"\n      [collapsed]=\"getPanelCollapsed(panel.type!)\"\n      (collapsedChange)=\"onCollapseChange($event, panel.type!)\"\n    >\n      <igx-expansion-panel-header\n        iconPosition=\"left\"\n        [disabled]=\"false\"\n        igxDrop\n        (enter)=\"onPanelEntry($event, panel.name)\"\n        (dropped)=\"onItemDropped($event, panel.type!)\"\n      >\n        <igx-expansion-panel-title class=\"igx-pivot-data-selector__header\">\n          <h6 class=\"igx-pivot-data-selector__header-title\">\n            {{ $any(grid?.resourceStrings)[panel.i18n] }}\n          </h6>\n          <div class=\"igx-pivot-data-selector__header-extra\">\n            <igx-icon family=\"default\" [name]=\"panel.icon\"></igx-icon>\n            <igx-chip>{{\n              this.grid ? this.grid[panel.dataKey].length : 0\n            }}</igx-chip>\n          </div>\n        </igx-expansion-panel-title>\n      </igx-expansion-panel-header>\n      <igx-expansion-panel-body\n        igxDrop\n        (enter)=\"onPanelEntry($event, panel.name)\"\n        (dropped)=\"onItemDropped($event, panel.type!)\"\n      >\n        @if (this.grid && this.grid[panel.dataKey].length > 0) {\n          <igx-list>\n            @for (\n              item of this.grid[panel.dataKey];\n              track item.memberName || item.member\n            ) {\n              <igx-list-item\n                igxDrop\n                [igxDrag]=\"{\n                  gridID: grid.id,\n                  selectorChannels: panel.dragChannels,\n                }\"\n                [ghostTemplate]=\"itemGhost\"\n                (ghostCreate)=\"ghostCreated($event, item[panel.itemKey])\"\n                (over)=\"onItemDragOver($event)\"\n                (leave)=\"onItemDragLeave($event)\"\n                (dragMove)=\"onItemDragMove($event)\"\n                (dragEnd)=\"onItemDragEnd($event)\"\n                (dropped)=\"onItemDropped($event, panel.type!)\"\n                [id]=\"item[panel.itemKey]\"\n              >\n                <div class=\"igx-pivot-data-selector__item\">\n                  <div\n                    class=\"igx-pivot-data-selector__item-start\"\n                    (click)=\"onItemSort($event, item, panel.type!)\"\n                    [class.igx-pivot-data-selector__action-sort]=\"\n                      panel.sortable\n                    \"\n                  >\n                    <div class=\"igx-pivot-data-selector__item-text\">\n                      @if (panel.type === null) {\n                        <span>{{ item.aggregate.key }}</span>\n                      }\n                      @if (panel.type === null) {\n                        <span>(</span>\n                      }\n                      <span>{{\n                        item[panel.displayKey!] || item[panel.itemKey]\n                      }}</span>\n                      @if (panel.type === null) {\n                        <span>)</span>\n                      }\n                    </div>\n                    @if (panel.sortable && item.sortDirection) {\n                      <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                          item.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\n                        \"\n                        class=\"igx-pivot-data-selector__action-sort\"\n                      >\n                      </igx-icon>\n                    }\n                  </div>\n                  <div class=\"igx-pivot-data-selector__item-end\">\n                    @if (panel.type !== null) {\n                      <igx-icon\n                        family=\"default\"\n                        name=\"filter_list\"\n                        class=\"igx-pivot-data-selector__action-filter\"\n                        (pointerdown)=\"onFilteringIconPointerDown($event)\"\n                        (click)=\"onFilteringIconClick($event, item)\"\n                      >\n                      </igx-icon>\n                    }\n                    @if (panel.type === null) {\n                      <igx-icon\n                        family=\"default\"\n                        name=\"functions\"\n                        class=\"igx-pivot-data-selector__action-summary\"\n                        (click)=\"onSummaryClick($event, item, dropdown)\"\n                        [igxDropDownItemNavigation]=\"dropdown\"\n                      >\n                      </igx-icon>\n                    }\n                    @if (panel.dragChannels.length > 0) {\n                      <igx-icon\n                        family=\"default\"\n                        name=\"drag_indicator\"\n                        igxDragHandle\n                        class=\"igx-pivot-data-selector__action-move\"\n                      >\n                      </igx-icon>\n                    }\n                  </div>\n                </div>\n              </igx-list-item>\n            }\n          </igx-list>\n        }\n        @if (this.grid && this.grid[panel.dataKey].length === 0) {\n          <div class=\"igx-pivot-data-selector__empty\">\n            {{ grid?.resourceStrings.igx_grid_pivot_selector_panel_empty }}\n          </div>\n        }\n      </igx-expansion-panel-body>\n    </igx-expansion-panel>\n  }\n</igx-accordion>\n\n<igx-drop-down #dropdown (selectionChanging)=\"onAggregationChange($event)\">\n  @for (item of aggregateList; track item) {\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<ng-template #itemGhost>\n  <div\n    class=\"igx-pivot-data-selector__item-ghost\"\n    [style.width.px]=\"ghostWidth\"\n    [class.igx-pivot-data-selector__item-ghost--no-drop]=\"!dropAllowed\"\n  >\n    <div class=\"igx-pivot-data-selector__item-ghost-text\">\n      <igx-icon family=\"default\" name=\"import_export\"></igx-icon>\n      <span>{{ ghostText }}</span>\n    </div>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n  </div>\n</ng-template>\n", styles: ["@layer ig.base{.igx-pivot-data-selector__action-summary,.igx-pivot-data-selector__action-filter,.igx-pivot-data-selector__action-sort{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.igx-pivot-data-selector{display:flex;flex-direction:column;max-width:17.5rem;background:var(--background);z-index:0}.igx-pivot-data-selector igx-input-group input{transform:none}.igx-pivot-data-selector igx-input-group [igxPrefix]{box-sizing:content-box}.igx-pivot-data-selector igx-input-group .igx-input-group__bundle-main{padding-top:0!important}.igx-pivot-data-selector>igx-list igx-display-container{padding:.25rem}.igx-pivot-data-selector>igx-list igx-list-item{display:flex;min-height:1.75rem}.igx-pivot-data-selector .igx-expansion-panel__body{position:relative;height:8rem;font-size:.875rem;padding:.25rem;overflow-y:auto}.igx-pivot-data-selector .igx-expansion-panel__body igx-list{height:auto}.igx-pivot-data-selector .igx-expansion-panel__header-icon--start{margin-inline-end:.5rem}.igx-pivot-data-selector igx-expansion-panel-title.igx-expansion-panel__header-title{display:flex}.igx-pivot-data-selector igx-expansion-panel-title.igx-expansion-panel__header-title>h6{font-size:.75rem;margin-block:0}.igx-pivot-data-selector .igx-expansion-panel__header-inner{background:var(--header-color);padding:.25rem}.dragOver .igx-pivot-data-selector .igx-expansion-panel__header-inner{background:var(--ig-gray-300);box-shadow:inset 0 0 0 .0625rem var(--ig-gray-400)}.igx-pivot-data-selector igx-icon{--size: var(--ig-icon-size, 1.125rem)}.igx-pivot-data-selector__header,.igx-pivot-data-selector__header-extra{display:flex;align-items:center}.igx-pivot-data-selector__header-extra igx-icon{padding:0 .5rem;box-sizing:content-box!important}.igx-pivot-data-selector__header-extra .igx-chip__item{height:max(var(--is-large, 1)*max(1.375rem,-1 * 1.375rem),var(--is-medium, 1)*max(1.25rem,-1 * 1.25rem),var(--is-small, 1)*max(1.125rem,-1 * 1.125rem))}.igx-pivot-data-selector__header-extra .igx-chip__content{padding:0 .125rem}.igx-pivot-data-selector__filter{display:flex;flex-direction:column;overflow:hidden}.igx-pivot-data-selector__filter igx-list{display:flex;flex-direction:column;padding:.5rem .25rem;min-height:11.625rem;max-height:13rem;overflow-y:auto}.igx-pivot-data-selector__filter igx-list-item{display:flex}.igx-pivot-data-selector__filter igx-checkbox+span{margin-inline-start:.5rem;line-height:1.75rem}.igx-pivot-data-selector__item{display:flex;align-items:center;justify-content:space-between;min-height:2rem;width:100%}.igx-drag--push .igx-pivot-data-selector__item{padding-top:2rem}.igx-pivot-data-selector__item-ghost{--ig-icon-size: 1.125rem;display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background:var(--ig-surface-500);min-height:2rem;height:auto;padding:0 .125rem 0 .25rem;cursor:grabbing;box-shadow:elevation(24);border:.0625rem solid var(--ig-gray-100);border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .125rem),.125rem);z-index:10}.igx-pivot-data-selector__item-ghost--no-drop{cursor:no-drop}.igx-pivot-data-selector__item-ghost-text{display:flex;align-items:center}.igx-pivot-data-selector__item-ghost-text igx-icon{margin-inline-end:.5rem}.igx-pivot-data-selector__item-start{display:flex;justify-content:space-between;align-items:center;flex:0 1 100%;margin-inline-end:.5rem;overflow:hidden}.igx-pivot-data-selector__item-end{display:flex}.igx-pivot-data-selector__item-end igx-icon+igx-icon{margin-inline-start:.5rem}.igx-pivot-data-selector__item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:calc(100% - .625rem);-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-pivot-data-selector__action-move{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:grab}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-pivot-data-selector__filter igx-input-group{padding:.25rem}}}@layer ig.material{@container style(--ig-theme: material){.igx-pivot-data-selector .igx-checkbox__composite-wrapper{padding:0}.igx-pivot-data-selector igx-input-group [igxPrefix]{padding-inline-end:1rem!important}}}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role", "selected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxAccordionComponent, selector: "igx-accordion", inputs: ["id", "animationSettings", "singleBranchExpand"], outputs: ["panelExpanding", "panelExpanded", "panelCollapsing", "panelCollapsed"] }, { kind: "component", type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { kind: "component", type: IgxExpansionPanelHeaderComponent, selector: "igx-expansion-panel-header", inputs: ["lv", "role", "iconPosition", "disabled"], outputs: ["interaction"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxExpansionPanelTitleDirective, selector: "igx-expansion-panel-title" }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "outlined", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostClasses", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "pipe", type: IgxFilterPivotItemsPipe, name: "filterPivotItems" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPivotDataSelectorComponent, decorators: [{
             type: Component,