igniteui-angular 13.1.0-beta.0 → 13.1.0-beta.1

package/fesm2020/igniteui-angular.mjs

@@ -85991,9 +85991,12 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         if (prevCollectionType === null)
             return;
         // remove from old collection
-        this.removeDimension(dimension);
+        this._removeDimensionInternal(dimension);
         // add to target
         this.insertDimensionAt(dimension, targetCollectionType, index);
+        if (prevCollectionType === PivotDimensionType.Column) {
+            this.setupColumns();
+        }
     }
     /**
      * Removes dimension from its currently collection.
@@ -86008,11 +86011,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
      */
     removeDimension(dimension) {
         const prevCollectionType = this.getDimensionType(dimension);
-        if (prevCollectionType === null)
-            return;
-        const prevCollection = this.getDimensionsByType(prevCollectionType);
-        const currentIndex = prevCollection.indexOf(dimension);
-        prevCollection.splice(currentIndex, 1);
+        this._removeDimensionInternal(dimension);
         if (prevCollectionType === PivotDimensionType.Column) {
             this.setupColumns();
         }
@@ -86170,6 +86169,20 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         this.pipeTrigger++;
         this.cdr.detectChanges();
     }
+    /*
+    * @hidden
+    * @internal
+    */
+    _removeDimensionInternal(dimension) {
+        const prevCollectionType = this.getDimensionType(dimension);
+        if (prevCollectionType === null)
+            return;
+        const prevCollection = this.getDimensionsByType(prevCollectionType);
+        const currentIndex = prevCollection.indexOf(dimension);
+        prevCollection.splice(currentIndex, 1);
+        this.pipeTrigger++;
+        this.cdr.detectChanges();
+    }
     getDimensionType(dimension) {
         return PivotUtil.flatten(this.pivotConfiguration.rows).indexOf(dimension) !== -1 ? PivotDimensionType.Row :
             PivotUtil.flatten(this.pivotConfiguration.columns).indexOf(dimension) !== -1 ? PivotDimensionType.Column :
@@ -87116,7 +87129,7 @@ class IgxPivotDataSelectorComponent {
     }
 }
 IgxPivotDataSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxPivotDataSelectorComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxPivotDataSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IgxPivotDataSelectorComponent, selector: "igx-pivot-data-selector", inputs: { grid: "grid" }, host: { properties: { "class.igx-pivot-data-selector": "this.cssClass" } }, ngImport: i0, template: "<div class=\"igx-pivot-data-selector__filter\">\n    <igx-input-group type=\"box\" [displayDensity]=\"displayDensity\">\n        <igx-icon igxPrefix>search</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 [displayDensity]=\"displayDensity\">\n        <igx-list-item\n            *ngFor=\"\n                let item of dims\n                    | filterPivotItems: input.value:grid.pipeTrigger\n            \"\n            [id]=\"item.memberName\"\n        >\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.memberName }}</span>\n        </igx-list-item>\n        <igx-list-item\n            *ngFor=\"\n                let item of values\n                    | filterPivotItems: input.value:grid.pipeTrigger\n            \"\n            [id]=\"item.member\"\n        >\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    </igx-list>\n</div>\n\n<igx-accordion>\n    <igx-expansion-panel\n        [animationSettings]=\"animationSettings\"\n        [collapsed]=\"false\"\n        *ngFor=\"let panel of _panels\"\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                    {{ grid.resourceStrings[panel.i18n] }}\n                </h6>\n                <div class=\"igx-pivot-data-selector__header-extra\">\n                    <igx-icon>{{ panel.icon }}</igx-icon>\n                    <igx-chip>{{ this.grid[panel.dataKey].length }}</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            <igx-list\n                *ngIf=\"this.grid[panel.dataKey].length > 0\"\n                [displayDensity]=\"displayDensity\"\n            >\n                <igx-list-item\n                    igxDrop\n                    [igxDrag]=\"{ gridID: grid.id, selectorChannels: panel.dragChannels }\"\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                    *igxFor=\"\n                        let item of this.grid[panel.dataKey];\n                        scrollOrientation: 'vertical';\n                        let index\n                    \"\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                                <span *ngIf=\"panel.type === null\">{{\n                                    item.aggregate.key\n                                }}</span>\n                                <span *ngIf=\"panel.type === null\">(</span>\n                                <span>{{ item[panel.displayKey] || item[panel.itemKey] }}</span>\n                                <span *ngIf=\"panel.type === null\">)</span>\n                            </div>\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-sort\"\n                                *ngIf=\"panel.sortable && item.sortDirection\"\n                            >\n                                {{\n                                    item.sortDirection < 2\n                                        ? \"arrow_upward\"\n                                        : \"arrow_downward\"\n                                }}\n                            </igx-icon>\n                        </div>\n                        <div class=\"igx-pivot-data-selector__item-end\">\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-filter\"\n                                *ngIf=\"panel.type !== null\"\n                                (pointerdown)=\"\n                                    onFilteringIconPointerDown($event)\n                                \"\n                                (click)=\"onFilteringIconClick($event, item)\"\n                                >filter_list\n                            </igx-icon>\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-summary\"\n                                *ngIf=\"panel.type === null\"\n                                (click)=\"onSummaryClick($event, item, dropdown)\"\n                                [igxDropDownItemNavigation]=\"dropdown\"\n                            >\n                                functions\n                            </igx-icon>\n                            <igx-icon\n                                igxDragHandle\n                                class=\"igx-pivot-data-selector__action-move\"\n                                *ngIf=\"panel.dragChannels.length > 0\"\n                                >drag_handle</igx-icon\n                            >\n                        </div>\n                    </div>\n                </igx-list-item>\n            </igx-list>\n            <div\n                class=\"igx-pivot-data-selector__empty\"\n                *ngIf=\"this.grid[panel.dataKey].length === 0\"\n            >\n                {{ grid.resourceStrings.igx_grid_pivot_selector_panel_empty }}\n            </div>\n        </igx-expansion-panel-body>\n    </igx-expansion-panel>\n</igx-accordion>\n\n<igx-drop-down #dropdown (selectionChanging)=\"onAggregationChange($event)\">\n    <igx-drop-down-item\n        *ngFor=\"let item of aggregateList\"\n        [selected]=\"isSelected(item)\"\n        [value]=\"item\"\n    >\n        {{ item.label }}\n    </igx-drop-down-item>\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>unfold_more</igx-icon>\n            <span>{{ ghostText }}</span>\n        </div>\n        <igx-icon>drag_handle</igx-icon>\n    </div>\n</ng-template>\n", components: [{ type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { type: IgxExpansionPanelHeaderComponent, selector: "igx-expansion-panel-header", inputs: ["lv", "role", "iconPosition", "disabled"], outputs: ["interaction"] }, { type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { type: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus"], outputs: ["opening", "opened", "closing", "closed"] }, { type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }], directives: [{ type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { type: IgxExpansionPanelTitleDirective, selector: "igx-expansion-panel-title" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostTemplate", "ghostHost", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { type: IgxDragHandleDirective, selector: "[igxDragHandle]" }], pipes: { "filterPivotItems": IgxFilterPivotItemsPipe } });
+IgxPivotDataSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IgxPivotDataSelectorComponent, selector: "igx-pivot-data-selector", inputs: { grid: "grid" }, host: { properties: { "class.igx-pivot-data-selector": "this.cssClass" } }, ngImport: i0, template: "<div class=\"igx-pivot-data-selector__filter\">\n    <igx-input-group type=\"box\" [displayDensity]=\"displayDensity\">\n        <igx-icon igxPrefix>search</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 [displayDensity]=\"displayDensity\">\n        <igx-list-item\n            *ngFor=\"\n                let item of dims\n                    | filterPivotItems: input.value:grid.pipeTrigger\n            \"\n            [id]=\"item.memberName\"\n        >\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.memberName }}</span>\n        </igx-list-item>\n        <igx-list-item\n            *ngFor=\"\n                let item of values\n                    | filterPivotItems: input.value:grid.pipeTrigger\n            \"\n            [id]=\"item.member\"\n        >\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    </igx-list>\n</div>\n\n<igx-accordion>\n    <igx-expansion-panel\n        [animationSettings]=\"animationSettings\"\n        [collapsed]=\"false\"\n        *ngFor=\"let panel of _panels\"\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                    {{ grid.resourceStrings[panel.i18n] }}\n                </h6>\n                <div class=\"igx-pivot-data-selector__header-extra\">\n                    <igx-icon>{{ panel.icon }}</igx-icon>\n                    <igx-chip>{{ this.grid[panel.dataKey].length }}</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            <igx-list\n                *ngIf=\"this.grid[panel.dataKey].length > 0\"\n                [displayDensity]=\"displayDensity\"\n            >\n                <igx-list-item\n                    igxDrop\n                    [igxDrag]=\"{ gridID: grid.id, selectorChannels: panel.dragChannels }\"\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                    *igxFor=\"\n                        let item of this.grid[panel.dataKey];\n                        scrollOrientation: 'vertical';\n                        let index\n                    \"\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                                <span *ngIf=\"panel.type === null\">{{\n                                    item.aggregate.key\n                                }}</span>\n                                <span *ngIf=\"panel.type === null\">(</span>\n                                <span>{{ item[panel.displayKey] || item[panel.itemKey] }}</span>\n                                <span *ngIf=\"panel.type === null\">)</span>\n                            </div>\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-sort\"\n                                *ngIf=\"panel.sortable && item.sortDirection\"\n                            >\n                                {{\n                                    item.sortDirection < 2\n                                        ? \"arrow_upward\"\n                                        : \"arrow_downward\"\n                                }}\n                            </igx-icon>\n                        </div>\n                        <div class=\"igx-pivot-data-selector__item-end\">\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-filter\"\n                                *ngIf=\"panel.type !== null\"\n                                (pointerdown)=\"\n                                    onFilteringIconPointerDown($event)\n                                \"\n                                (click)=\"onFilteringIconClick($event, item)\"\n                                >filter_list\n                            </igx-icon>\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-summary\"\n                                *ngIf=\"panel.type === null\"\n                                (click)=\"onSummaryClick($event, item, dropdown)\"\n                                [igxDropDownItemNavigation]=\"dropdown\"\n                            >\n                                functions\n                            </igx-icon>\n                            <igx-icon\n                                igxDragHandle\n                                class=\"igx-pivot-data-selector__action-move\"\n                                *ngIf=\"panel.dragChannels.length > 0\"\n                                >drag_handle</igx-icon\n                            >\n                        </div>\n                    </div>\n                </igx-list-item>\n            </igx-list>\n            <div\n                class=\"igx-pivot-data-selector__empty\"\n                *ngIf=\"this.grid[panel.dataKey].length === 0\"\n            >\n                {{ grid.resourceStrings.igx_grid_pivot_selector_panel_empty }}\n            </div>\n        </igx-expansion-panel-body>\n    </igx-expansion-panel>\n</igx-accordion>\n\n<igx-drop-down #dropdown (selectionChanging)=\"onAggregationChange($event)\">\n    <igx-drop-down-item\n        *ngFor=\"let item of aggregateList\"\n        [selected]=\"isSelected(item)\"\n        [value]=\"item\"\n    >\n        {{ item.label }}\n    </igx-drop-down-item>\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>unfold_more</igx-icon>\n            <span>{{ ghostText }}</span>\n        </div>\n        <igx-icon>drag_handle</igx-icon>\n    </div>\n</ng-template>\n", components: [{ type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index"] }, { type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { type: IgxAccordionComponent, selector: "igx-accordion", inputs: ["id", "animationSettings", "singleBranchExpand"], outputs: ["panelExpanding", "panelExpanded", "panelCollapsing", "panelCollapsed"] }, { type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { type: IgxExpansionPanelHeaderComponent, selector: "igx-expansion-panel-header", inputs: ["lv", "role", "iconPosition", "disabled"], outputs: ["interaction"] }, { type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { type: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus"], outputs: ["opening", "opened", "closing", "closed"] }, { type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }], directives: [{ type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { type: IgxExpansionPanelTitleDirective, selector: "igx-expansion-panel-title" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostTemplate", "ghostHost", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { type: IgxDragHandleDirective, selector: "[igxDragHandle]" }], pipes: { "filterPivotItems": IgxFilterPivotItemsPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxPivotDataSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: "igx-pivot-data-selector", template: "<div class=\"igx-pivot-data-selector__filter\">\n    <igx-input-group type=\"box\" [displayDensity]=\"displayDensity\">\n        <igx-icon igxPrefix>search</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 [displayDensity]=\"displayDensity\">\n        <igx-list-item\n            *ngFor=\"\n                let item of dims\n                    | filterPivotItems: input.value:grid.pipeTrigger\n            \"\n            [id]=\"item.memberName\"\n        >\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.memberName }}</span>\n        </igx-list-item>\n        <igx-list-item\n            *ngFor=\"\n                let item of values\n                    | filterPivotItems: input.value:grid.pipeTrigger\n            \"\n            [id]=\"item.member\"\n        >\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    </igx-list>\n</div>\n\n<igx-accordion>\n    <igx-expansion-panel\n        [animationSettings]=\"animationSettings\"\n        [collapsed]=\"false\"\n        *ngFor=\"let panel of _panels\"\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                    {{ grid.resourceStrings[panel.i18n] }}\n                </h6>\n                <div class=\"igx-pivot-data-selector__header-extra\">\n                    <igx-icon>{{ panel.icon }}</igx-icon>\n                    <igx-chip>{{ this.grid[panel.dataKey].length }}</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            <igx-list\n                *ngIf=\"this.grid[panel.dataKey].length > 0\"\n                [displayDensity]=\"displayDensity\"\n            >\n                <igx-list-item\n                    igxDrop\n                    [igxDrag]=\"{ gridID: grid.id, selectorChannels: panel.dragChannels }\"\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                    *igxFor=\"\n                        let item of this.grid[panel.dataKey];\n                        scrollOrientation: 'vertical';\n                        let index\n                    \"\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                                <span *ngIf=\"panel.type === null\">{{\n                                    item.aggregate.key\n                                }}</span>\n                                <span *ngIf=\"panel.type === null\">(</span>\n                                <span>{{ item[panel.displayKey] || item[panel.itemKey] }}</span>\n                                <span *ngIf=\"panel.type === null\">)</span>\n                            </div>\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-sort\"\n                                *ngIf=\"panel.sortable && item.sortDirection\"\n                            >\n                                {{\n                                    item.sortDirection < 2\n                                        ? \"arrow_upward\"\n                                        : \"arrow_downward\"\n                                }}\n                            </igx-icon>\n                        </div>\n                        <div class=\"igx-pivot-data-selector__item-end\">\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-filter\"\n                                *ngIf=\"panel.type !== null\"\n                                (pointerdown)=\"\n                                    onFilteringIconPointerDown($event)\n                                \"\n                                (click)=\"onFilteringIconClick($event, item)\"\n                                >filter_list\n                            </igx-icon>\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-summary\"\n                                *ngIf=\"panel.type === null\"\n                                (click)=\"onSummaryClick($event, item, dropdown)\"\n                                [igxDropDownItemNavigation]=\"dropdown\"\n                            >\n                                functions\n                            </igx-icon>\n                            <igx-icon\n                                igxDragHandle\n                                class=\"igx-pivot-data-selector__action-move\"\n                                *ngIf=\"panel.dragChannels.length > 0\"\n                                >drag_handle</igx-icon\n                            >\n                        </div>\n                    </div>\n                </igx-list-item>\n            </igx-list>\n            <div\n                class=\"igx-pivot-data-selector__empty\"\n                *ngIf=\"this.grid[panel.dataKey].length === 0\"\n            >\n                {{ grid.resourceStrings.igx_grid_pivot_selector_panel_empty }}\n            </div>\n        </igx-expansion-panel-body>\n    </igx-expansion-panel>\n</igx-accordion>\n\n<igx-drop-down #dropdown (selectionChanging)=\"onAggregationChange($event)\">\n    <igx-drop-down-item\n        *ngFor=\"let item of aggregateList\"\n        [selected]=\"isSelected(item)\"\n        [value]=\"item\"\n    >\n        {{ item.label }}\n    </igx-drop-down-item>\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>unfold_more</igx-icon>\n            <span>{{ ghostText }}</span>\n        </div>\n        <igx-icon>drag_handle</igx-icon>\n    </div>\n</ng-template>\n" }]
@@ -87148,7 +87161,7 @@ IgxPivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         IgxPivotGridColumnSortingPipe,
         IgxPivotCellMergingPipe,
         IgxFilterPivotItemsPipe,
-        IgxPivotDataSelectorComponent], imports: [IgxGridModule, IgxExpansionPanelModule, IgxDragDropModule], exports: [IgxGridModule,
+        IgxPivotDataSelectorComponent], imports: [IgxGridModule, IgxExpansionPanelModule, IgxDragDropModule, IgxListModule, IgxAccordionModule], exports: [IgxGridModule,
         IgxPivotGridComponent,
         IgxPivotRowComponent,
         IgxPivotHeaderRowComponent,
@@ -87165,7 +87178,7 @@ IgxPivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         IgxPivotCellMergingPipe,
         IgxFilterPivotItemsPipe,
         IgxPivotDataSelectorComponent] });
-IgxPivotGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxPivotGridModule, imports: [[IgxGridModule, IgxExpansionPanelModule, IgxDragDropModule], IgxGridModule] });
+IgxPivotGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxPivotGridModule, imports: [[IgxGridModule, IgxExpansionPanelModule, IgxDragDropModule, IgxListModule, IgxAccordionModule], IgxGridModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxPivotGridModule, decorators: [{
             type: NgModule,
             args: [{
@@ -87206,7 +87219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         IgxFilterPivotItemsPipe,
                         IgxPivotDataSelectorComponent,
                     ],
-                    imports: [IgxGridModule, IgxExpansionPanelModule, IgxDragDropModule],
+                    imports: [IgxGridModule, IgxExpansionPanelModule, IgxDragDropModule, IgxListModule, IgxAccordionModule],
                     entryComponents: [IgxGridComponent],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]