igniteui-angular 22.1.4 → 22.1.6

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

@@ -2,7 +2,7 @@ import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, HostListener, ChangeDetectionStrategy, Component, HostBinding, ViewChild, Input, Renderer2, ViewChildren, Injectable, NgZone, Injector, EnvironmentInjector, ViewContainerRef, createComponent, TemplateRef, Directive, Pipe, forwardRef, EventEmitter, booleanAttribute, Output, ContentChild, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, ChangeDetectorRef, NgModule } from '@angular/core';
 import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
-import { takeUntil, take, timeout, first } from 'rxjs/operators';
+import { takeUntil, take, timeout, first, filter } from 'rxjs/operators';
 import { IgxGridHeaderComponent, IgxPivotColumnResizingService, PivotRowLayoutType, PivotUtil, SortingIndexPipe, IgxGridHeaderGroupComponent, IGX_GRID_BASE, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe, IgxGridHeaderRowComponent, DropPosition, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleSearchComponent, IgxGridTopLevelColumns, IgxGridNavigationService, HEADER_KEYS, ROW_EXPAND_KEYS, ROW_COLLAPSE_KEYS, PivotSummaryPosition, IgxFilteringService, DimensionValuesFilteringStrategy, IgxColumnComponent, DEFAULT_PIVOT_KEYS, PivotRowDimensionsStrategy, PivotColumnDimensionsStrategy, GridBaseAPIService, IgxRowDirective, IgxGridCellComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridTransactionStatePipe, FilterMode, PivotDimensionType, NoopPivotDimensionsStrategy, IgxPivotDateDimension, IgxColumnGroupComponent, IgxGridBodyDirective, IgxGridDragSelectDirective, IgxPivotGridColumnResizerComponent, IgxGridRowClassesPipe, IgxGridRowStylesPipe, IgxGridCRUDService, IgxGridValidationService, IgxGridSummaryService, IgxGridSelectionService, IgxColumnResizingService, IGX_GRID_SERVICE_BASE, WatchChanges, IgxGridFooterComponent, IgxAdvancedFilteringDialogComponent, IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxDragIndicatorIconDirective, IgxRowDragGhostDirective, IgxGridStateDirective, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxGridActionsBaseDirective, IgxGridActionButtonComponent, IgxFilterCellTemplateDirective, IgxSummaryTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCellHeaderTemplateDirective, IgxCellFooterTemplateDirective, IgxCellEditorTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnLayoutComponent, IgxColumnActionsComponent, IgxColumnHidingDirective, IgxColumnPinningDirective, IgxRowSelectorDirective, IgxGroupByRowSelectorDirective, IgxHeadSelectorDirective, IgxCSVTextDirective, IgxExcelTextDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridToolbarDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleMovingComponent, IgxExcelStyleLoadingValuesTemplateDirective } from 'igniteui-angular/grids/core';
 import { SortingDirection, VerticalAlignment, AbsoluteScrollStrategy, AutoPositionStrategy, FilteringExpressionsTree, FilteringLogic, ExpressionsTreeUtil, DefaultSortingStrategy, GridColumnDataType, parseDate, cloneArray, FilterUtil, DataUtil, columnFieldPath, resolveNestedPath, DefaultDataCloneStrategy, ɵSize as _Size, onResourceChangeHandle, resizeObservable, runAfterRenderOnce, IgxOverlayOutletDirective } from 'igniteui-angular/core';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -2485,7 +2485,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
          */
         this.dimensionsChange = new EventEmitter();
         /**
-         * Emitted when any of the pivotConfiguration properties is changed via the grid chip area.
+         * Emitted when the pivot configuration or any of its properties changes.
          *
          * @example
          * ```html
@@ -2716,6 +2716,8 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         this.setDateDimensionsLocaleData();
         if (!this._init) {
             this.setupColumns();
+            // Notify listeners (e.g. IgxPivotDataSelectorComponent) that the whole config was replaced, not just a single dimension/value.
+            this.pivotConfigurationChange.emit({ pivotConfiguration: this.pivotConfiguration });
         }
         this.notifyChanges(true);
     }
@@ -3091,6 +3093,17 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         this.pipeTrigger++;
         this.cdr.detectChanges();
     }
+    /**
+     * @hidden @internal
+     */
+    _zoneBegoneListeners() {
+        super._zoneBegoneListeners();
+        if (this.headerContainer) {
+            return;
+        }
+        // In case of delayed render of the header container, ensure required handlers are attached.
+        this.theadRow.headerContainers.changes.pipe(takeUntil(this.destroy$), filter((changes) => changes.length > 0), take(1)).subscribe(() => this.zone.runOutsideAngular(() => this.setupHeaderContainerListeners()));
+    }
     /**
      * Gets the full list of dimensions.
      *
@@ -3630,6 +3643,11 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
             this.dimensionDataColumns = this.generateDimensionColumns();
             this.reflow();
         }
+        else {
+            // In case that target collection is row dimension and the target dimension is not coming from
+            // the column dimensions collection we should schedule CD
+            this.cdr.markForCheck();
+        }
         this.pivotConfigurationChange.emit({ pivotConfiguration: this.pivotConfiguration });
     }
     /**
@@ -4444,7 +4462,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         return row;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPivotGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxPivotGridComponent, isStandalone: true, selector: "igx-pivot-grid", inputs: { valueChipTemplate: "valueChipTemplate", rowDimensionHeaderTemplate: "rowDimensionHeaderTemplate", pivotConfiguration: "pivotConfiguration", autoGenerateConfig: ["autoGenerateConfig", "autoGenerateConfig", booleanAttribute], pivotUI: "pivotUI", superCompactMode: "superCompactMode", pivotValueCloneStrategy: "pivotValueCloneStrategy", addRowEmptyTemplate: "addRowEmptyTemplate", autoGenerateExclude: "autoGenerateExclude", snackbarDisplayTime: "snackbarDisplayTime", defaultExpandState: ["defaultExpandState", "defaultExpandState", booleanAttribute], pagingMode: "pagingMode", hideRowSelectors: ["hideRowSelectors", "hideRowSelectors", booleanAttribute], rowDraggable: ["rowDraggable", "rowDraggable", booleanAttribute], allowAdvancedFiltering: ["allowAdvancedFiltering", "allowAdvancedFiltering", booleanAttribute], filterMode: "filterMode", allowFiltering: ["allowFiltering", "allowFiltering", booleanAttribute], page: "page", perPage: "perPage", summaryRowHeight: "summaryRowHeight", rowEditable: ["rowEditable", "rowEditable", booleanAttribute], pinning: "pinning", summaryPosition: "summaryPosition", summaryCalculationMode: "summaryCalculationMode", showSummaryOnCollapse: ["showSummaryOnCollapse", "showSummaryOnCollapse", booleanAttribute], batchEditing: ["batchEditing", "batchEditing", booleanAttribute], id: "id", data: "data", totalRecords: "totalRecords", emptyPivotGridTemplate: "emptyPivotGridTemplate" }, outputs: { dimensionsChange: "dimensionsChange", pivotConfigurationChange: "pivotConfigurationChange", dimensionInit: "dimensionInit", valueInit: "valueInit", dimensionsSortingExpressionsChange: "dimensionsSortingExpressionsChange", valuesChange: "valuesChange", cellEdit: "cellEdit", cellEditDone: "cellEditDone", cellEditEnter: "cellEditEnter", cellEditExit: "cellEditExit", columnMovingStart: "columnMovingStart", columnMoving: "columnMoving", columnMovingEnd: "columnMovingEnd", columnPin: "columnPin", columnPinned: "columnPinned", rowAdd: "rowAdd", rowAdded: "rowAdded", rowDeleted: "rowDeleted", rowDelete: "rowDelete", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", rowEditEnter: "rowEditEnter", rowEdit: "rowEdit", rowEditDone: "rowEditDone", rowEditExit: "rowEditExit", rowPinning: "rowPinning", rowPinned: "rowPinned" }, host: { properties: { "attr.role": "this.role", "class.igx-grid__pivot--super-compact": "this.superCompactMode", "attr.id": "this.id" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxPivotGridComponent, isStandalone: true, selector: "igx-pivot-grid", inputs: { valueChipTemplate: "valueChipTemplate", rowDimensionHeaderTemplate: "rowDimensionHeaderTemplate", pivotConfiguration: "pivotConfiguration", autoGenerateConfig: ["autoGenerateConfig", "autoGenerateConfig", booleanAttribute], pivotUI: "pivotUI", superCompactMode: "superCompactMode", pivotValueCloneStrategy: "pivotValueCloneStrategy", addRowEmptyTemplate: "addRowEmptyTemplate", autoGenerateExclude: "autoGenerateExclude", snackbarDisplayTime: "snackbarDisplayTime", defaultExpandState: ["defaultExpandState", "defaultExpandState", booleanAttribute], pagingMode: "pagingMode", hideRowSelectors: ["hideRowSelectors", "hideRowSelectors", booleanAttribute], rowDraggable: ["rowDraggable", "rowDraggable", booleanAttribute], allowAdvancedFiltering: ["allowAdvancedFiltering", "allowAdvancedFiltering", booleanAttribute], filterMode: "filterMode", allowFiltering: ["allowFiltering", "allowFiltering", booleanAttribute], page: "page", perPage: "perPage", summaryRowHeight: "summaryRowHeight", rowEditable: ["rowEditable", "rowEditable", booleanAttribute], pinning: "pinning", summaryPosition: "summaryPosition", summaryCalculationMode: "summaryCalculationMode", showSummaryOnCollapse: ["showSummaryOnCollapse", "showSummaryOnCollapse", booleanAttribute], batchEditing: ["batchEditing", "batchEditing", booleanAttribute], id: "id", data: "data", totalRecords: "totalRecords", emptyPivotGridTemplate: "emptyPivotGridTemplate" }, outputs: { dimensionsChange: "dimensionsChange", pivotConfigurationChange: "pivotConfigurationChange", dimensionInit: "dimensionInit", valueInit: "valueInit", dimensionsSortingExpressionsChange: "dimensionsSortingExpressionsChange", valuesChange: "valuesChange", cellEdit: "cellEdit", cellEditDone: "cellEditDone", cellEditEnter: "cellEditEnter", cellEditExit: "cellEditExit", columnMovingStart: "columnMovingStart", columnMoving: "columnMoving", columnMovingEnd: "columnMovingEnd", columnPin: "columnPin", columnPinned: "columnPinned", rowAdd: "rowAdd", rowAdded: "rowAdded", rowDeleted: "rowDeleted", rowDelete: "rowDelete", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", rowEditEnter: "rowEditEnter", rowEdit: "rowEdit", rowEditDone: "rowEditDone", rowEditExit: "rowEditExit", rowPinning: "rowPinning", rowPinned: "rowPinned" }, host: { properties: { "attr.role": "this.role", "class.igx-grid__pivot--super-compact": "this.superCompactMode", "attr.id": "this.id" }, classAttribute: "igx-grid--pivot" }, providers: [
             IgxGridCRUDService,
             IgxGridValidationService,
             IgxGridSummaryService,
@@ -4459,7 +4477,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    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n}\n", styles: ["@layer ig.base{.igx-grid--pivot .igx-grid__scroll-start{background:var(--header-background)}.igx-grid--pivot .igx-grid__scroll-start--pinned{border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/.38))}}\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()
@@ -4469,7 +4487,7 @@ __decorate([
 ], IgxPivotGridComponent.prototype, "rowEditable", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxPivotGridComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, selector: 'igx-pivot-grid', encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, selector: 'igx-pivot-grid', host: { 'class': 'igx-grid--pivot' }, encapsulation: ViewEncapsulation.None, providers: [
                         IgxGridCRUDService,
                         IgxGridValidationService,
                         IgxGridSummaryService,
@@ -4518,7 +4536,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    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n}\n", styles: ["@layer ig.base{.igx-grid--pivot .igx-grid__scroll-start{background:var(--header-background)}.igx-grid--pivot .igx-grid__scroll-start--pinned{border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/.38))}}\n"] }]
         }], propDecorators: { dimensionsChange: [{
                 type: Output
             }], pivotConfigurationChange: [{
@@ -4717,6 +4735,7 @@ class IgxPivotDataSelectorComponent {
     constructor() {
         this.renderer = inject(Renderer2);
         this.cdr = inject(ChangeDetectorRef);
+        this.pipeRetrigger = 0;
         /**
          * Gets/sets whether the columns panel is expanded
          * Get
@@ -4914,12 +4933,24 @@ class IgxPivotDataSelectorComponent {
     get values() {
         return this._grid?.pivotConfiguration.values || [];
     }
+    /**
+     * @hidden @internal
+     */
+    ngOnDestroy() {
+        this.pivotConfigChangeSub?.unsubscribe();
+    }
     /* treatAsRef */
     /**
      * Sets the grid.
      */
     set grid(value) {
         this._grid = value;
+        this.pivotConfigChangeSub?.unsubscribe();
+        this.pivotConfigChangeSub = value?.pivotConfigurationChange
+            .subscribe(() => {
+            this.pipeRetrigger++;
+            this.cdr.markForCheck();
+        });
     }
     /* treatAsRef */
     /**
@@ -5201,11 +5232,11 @@ 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", "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 }); }
+    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          : pipeRetrigger;\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          : pipeRetrigger;\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;flex-shrink:0;overflow:hidden}.igx-pivot-data-selector__filter igx-list{display:flex;flex-direction:column;flex-shrink:0;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{flex-shrink:0;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,
-            args: [{ selector: "igx-pivot-data-selector", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe], 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"] }]
+            args: [{ selector: "igx-pivot-data-selector", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe], 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          : pipeRetrigger;\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          : pipeRetrigger;\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;flex-shrink:0;overflow:hidden}.igx-pivot-data-selector__filter igx-list{display:flex;flex-direction:column;flex-shrink:0;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{flex-shrink:0;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"] }]
         }], propDecorators: { columnsExpanded: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]