igniteui-angular 22.2.0-rc.2 → 22.2.1

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';
@@ -1127,6 +1127,8 @@ class IgxPivotGridNavigationService extends IgxGridNavigationService {
                     error: (err) => resolve(err)
                 });
             });
+            // Large scroll jumps only reassign the row contexts, so update the row dimension rows before looking them up.
+            this.grid.cdr.detectChanges();
         }
     }
     getNextVerticalColumnIndex(nextRow, newRowStart, newColStart) {
@@ -1468,7 +1470,7 @@ class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowComponent {
         ref.instance.header = header;
         ref.instance.width = this.grid.rowDimensionWidthToPixels(this.rootDimension) + 'px';
         ref.instance.resizable = this.grid.rowDimensionResizing;
-        ref.instance._vIndex = this.grid.columns.length + this.rowIndex + this.rowIndex * this.grid.pivotConfiguration.rows.length;
+        ref.instance._vIndex = this.grid.columns.length + this.rowIndex + this.rowIndex * (this.grid.pivotConfiguration.rows?.length ?? 0);
         if (header && dim.childLevel && (!this.rowData.totalRecordDimensionName || this.rowData.totalRecordDimensionName !== dim.memberName)) {
             ref.instance.headerTemplate = this.headerTemplate;
         }
@@ -2715,6 +2717,8 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
      */
     set pivotConfiguration(value) {
         this._pivotConfiguration = value;
+        // The visible row dimensions of the previous configuration are no longer valid.
+        this._visibleRowDimensions = null;
         this.emitInitEvents(this._pivotConfiguration);
         this.filteringExpressionsTree = PivotUtil.buildExpressionTree(value);
         this.setDateDimensionsLocaleData();
@@ -3097,6 +3101,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.
      *
@@ -3115,7 +3130,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         const config = this._pivotConfiguration;
         if (!config)
             return [];
-        const uniqueVisibleRowDims = this.visibleRowDimensions.filter(dim => !config.rows.find(configRow => configRow.memberName === dim.memberName));
+        const uniqueVisibleRowDims = this.visibleRowDimensions.filter(dim => !config.rows?.find(configRow => configRow.memberName === dim.memberName));
         const rows = (config.rows || []).concat(...uniqueVisibleRowDims);
         return rows.concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined);
     }
@@ -4347,12 +4362,6 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         ref.changeDetectorRef.detectChanges();
         return ref.instance;
     }
-    resolveColumnDimensionWidth(dim) {
-        if (dim.width) {
-            return dim.width;
-        }
-        return this.minColumnWidth + 'px';
-    }
     getMeasureChildren(data, parent, hidden, parentWidth) {
         const cols = [];
         const count = this.values.length;
@@ -4397,9 +4406,6 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
             this.valueInit.emit(val);
         });
     }
-    rowDimensionByName(memberName) {
-        return this.visibleRowDimensions.find((rowDim) => rowDim.memberName === memberName);
-    }
     calculateResizerTop() {
         return this.pivotUI.showRowHeaders ?
             (this.theadRow.pivotFilterContainer?.nativeElement.offsetHeight || 0) + (this.theadRow.pivotRowContainer?.nativeElement.offsetHeight || 0) :
@@ -5097,11 +5103,11 @@ class IgxPivotDataSelectorComponent {
             this.updateDropDown(value, dropdown);
         }
         else {
-            // close for previous chip
-            dropdown.close();
+            // close for previous chip. Subscribe first, since closing without animation emits `closed` synchronously.
             dropdown.closed.pipe(first()).subscribe(() => {
                 this.updateDropDown(value, dropdown);
             });
+            dropdown.close();
         }
     }
     /**
@@ -5228,11 +5234,11 @@ class IgxPivotDataSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPivotDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.key) {\n    <igx-drop-down-item [selected]=\"isSelected(item)\" [value]=\"item\">\n      {{ item.label }}\n    </igx-drop-down-item>\n  }\n</igx-drop-down>\n\n<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.2.0", 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          : 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"] }]
+            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.key) {\n    <igx-drop-down-item [selected]=\"isSelected(item)\" [value]=\"item\">\n      {{ item.label }}\n    </igx-drop-down-item>\n  }\n</igx-drop-down>\n\n<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 }]
@@ -5268,6 +5274,7 @@ const IGX_PIVOT_GRID_DIRECTIVES = [
     IgxPivotGridComponent,
     IgxPivotDataSelectorComponent,
     IgxPivotValueChipTemplateDirective,
+    IgxPivotRowDimensionHeaderTemplateDirective,
     // IGX_GRID_COMMON_DIRECTIVES:
     IgxRowDirective,
     IgxGridFooterComponent,
@@ -5347,6 +5354,7 @@ class IgxPivotGridModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxPivotGridModule, imports: [IgxPivotGridComponent,
             IgxPivotDataSelectorComponent,
             IgxPivotValueChipTemplateDirective,
+            IgxPivotRowDimensionHeaderTemplateDirective,
             // IGX_GRID_COMMON_DIRECTIVES:
             IgxRowDirective,
             IgxGridFooterComponent,
@@ -5418,6 +5426,7 @@ class IgxPivotGridModule {
             IgxExcelStyleLoadingValuesTemplateDirective], exports: [IgxPivotGridComponent,
             IgxPivotDataSelectorComponent,
             IgxPivotValueChipTemplateDirective,
+            IgxPivotRowDimensionHeaderTemplateDirective,
             // IGX_GRID_COMMON_DIRECTIVES:
             IgxRowDirective,
             IgxGridFooterComponent,