@progress/kendo-angular-pivotgrid 0.2.0-dev.202209020712 → 0.2.0-dev.202209070927

package/esm2015/configurator/configurator.component.js

@@ -8,17 +8,19 @@ import { DropCueService } from './drop-cue.service';
 import { from, of, Subscription } from 'rxjs';
 import { mergeMap } from 'rxjs/operators';
 import { clone } from '../util';
+import { SinglePopupService } from './chip-menu/single-popup.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../data-binding/pivotgrid-data.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "./configurator.service";
 import * as i4 from "@progress/kendo-angular-treeview";
 import * as i5 from "@progress/kendo-angular-buttons";
-import * as i6 from "@angular/common";
-import * as i7 from "@progress/kendo-angular-inputs";
-import * as i8 from "./drop-target.directive";
-import * as i9 from "./draggable.directive";
-import * as i10 from "@progress/kendo-angular-common";
+import * as i6 from "./chip-menu/chip-menu.component";
+import * as i7 from "@angular/common";
+import * as i8 from "@progress/kendo-angular-inputs";
+import * as i9 from "./drop-target.directive";
+import * as i10 from "./draggable.directive";
+import * as i11 from "@progress/kendo-angular-common";
 /**
  * @hidden
  * Represents the Kendo UI PivotGrid Configurator component for Angular.
@@ -31,6 +33,7 @@ export class PivotGridConfiguratorComponent {
         this.cdr = cdr;
         this.hostClass = true;
         this.horizontal = false;
+        this.sort = new Array();
         this.checked = [];
         this.subs = new Subscription();
         /**
@@ -194,9 +197,10 @@ export class PivotGridConfiguratorComponent {
     ;
 }
 PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i3.ConfiguratorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { horizontal: "horizontal" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass" } }, providers: [
+PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { horizontal: "horizontal", sort: "sort", filter: "filter" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass" } }, providers: [
         ConfiguratorService,
-        DropCueService
+        DropCueService,
+        SinglePopupService
     ], ngImport: i0, template: `
         <div 
             class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
@@ -265,6 +269,10 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                                 [removable]="true"
                             >
                                 {{ getName(item.name) }}
+
+                                <kendo-pivot-chip-menu
+                                    [chip]="item">
+                                </kendo-pivot-chip-menu>
                             </kendo-chip>
                         </kendo-chiplist>
 
@@ -291,6 +299,10 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                                 [removable]="true"
                             >
                                 {{ getName(item.name) }}
+
+                                <kendo-pivot-chip-menu
+                                    [chip]="item">
+                                </kendo-pivot-chip-menu>
                             </kendo-chip>
                         </kendo-chiplist>
 
@@ -313,18 +325,17 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                             kendoDropTarget
                             axes="measureAxes"
                         >
-                        <kendo-chip *ngFor="let item of state.measureAxes"
-                            kendoChipDraggable
-                            kendoDraggable
-                            kendoDropTarget
-                            [item]="item"
-                            axes="measureAxes"
-                            
-                            rounded="full"
-                            [removable]="true"
-                            >
-                            {{ getName(item.name) }}
-                        </kendo-chip>
+                            <kendo-chip *ngFor="let item of state.measureAxes"
+                                kendoChipDraggable
+                                kendoDraggable
+                                kendoDropTarget
+                                [item]="item"
+                                axes="measureAxes"
+                                rounded="full"
+                                [removable]="true"
+                                >
+                                {{ getName(item.name) }}
+                            </kendo-chip>
                         </kendo-chiplist>
 
                         <ng-template #noMeasureAxes>
@@ -339,14 +350,15 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
         </div>
-   `, isInline: true, components: [{ type: i4.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i10.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+   `, isInline: true, components: [{ type: i4.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: i6.ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i11.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivotgrid-configurator',
                     providers: [
                         ConfiguratorService,
-                        DropCueService
+                        DropCueService,
+                        SinglePopupService
                     ],
                     template: `
         <div 
@@ -416,6 +428,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                                 [removable]="true"
                             >
                                 {{ getName(item.name) }}
+
+                                <kendo-pivot-chip-menu
+                                    [chip]="item">
+                                </kendo-pivot-chip-menu>
                             </kendo-chip>
                         </kendo-chiplist>
 
@@ -442,6 +458,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                                 [removable]="true"
                             >
                                 {{ getName(item.name) }}
+
+                                <kendo-pivot-chip-menu
+                                    [chip]="item">
+                                </kendo-pivot-chip-menu>
                             </kendo-chip>
                         </kendo-chiplist>
 
@@ -464,18 +484,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             kendoDropTarget
                             axes="measureAxes"
                         >
-                        <kendo-chip *ngFor="let item of state.measureAxes"
-                            kendoChipDraggable
-                            kendoDraggable
-                            kendoDropTarget
-                            [item]="item"
-                            axes="measureAxes"
-                            
-                            rounded="full"
-                            [removable]="true"
-                            >
-                            {{ getName(item.name) }}
-                        </kendo-chip>
+                            <kendo-chip *ngFor="let item of state.measureAxes"
+                                kendoChipDraggable
+                                kendoDraggable
+                                kendoDropTarget
+                                [item]="item"
+                                axes="measureAxes"
+                                rounded="full"
+                                [removable]="true"
+                                >
+                                {{ getName(item.name) }}
+                            </kendo-chip>
                         </kendo-chiplist>
 
                         <ng-template #noMeasureAxes>
@@ -497,4 +516,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-pivotgrid-configurator']
             }], horizontal: [{
                 type: Input
+            }], sort: [{
+                type: Input
+            }], filter: [{
+                type: Input
             }] } });

package/esm2015/configurator/configurator.service.js

@@ -14,8 +14,8 @@ export class ConfiguratorService {
     }
     parseConfiguratorState(action) {
         const newState = configuratorReducer({
-            filter: [],
-            sort: [],
+            filter: this.state.filter,
+            sort: this.state.sort,
             rowAxes: this.state.rowAxes,
             columnAxes: this.state.columnAxes,
             measureAxes: this.state.measureAxes,

package/esm2015/data-binding/base-binding-directive.js

@@ -31,6 +31,10 @@ export class PivotBaseBindingDirective {
          * Represents the measure axes configuration of the PivotGrid.
          */
         this.measureAxes = [];
+        /**
+         * Represents the initial sorted state of the PivotGrid.
+         */
+        this.sort = [];
         /**
          * Fires each time a row or column header gets expanded or collapsed by the end user. The event is preventable.
          * If you prevent the event, the PivotGrid will not be rerendered with the new state, resulting from the end user interaction.
@@ -52,7 +56,7 @@ export class PivotBaseBindingDirective {
      * @hidden
      */
     get state() {
-        return new PivotGridState(this.columnAxes, this.rowAxes, this.measureAxes);
+        return new PivotGridState(this.columnAxes, this.rowAxes, this.measureAxes, this.sort, this.filter);
     }
     ngOnInit() {
         this.loadData(this.state);
@@ -78,16 +82,16 @@ export class PivotBaseBindingDirective {
                 this.dataService.configuredFields.next({
                     columnAxes: state.columnAxes,
                     rowAxes: state.rowAxes,
-                    measureAxes: state.measureAxes
+                    measureAxes: state.measureAxes,
+                    sort: state.sort,
+                    filter: state.filter
                 });
                 this.loadData(state);
             });
         }));
         this.subs.add(this.dataService.valuesRows.subscribe((data) => {
             this.zone.run(() => {
-                if (hasObservers(this.dataLoaded)) {
-                    this.dataLoaded.emit(data);
-                }
+                this.dataService.aggregateData = data;
             });
         }));
         this.dataService.directive = this;
@@ -106,7 +110,9 @@ export class PivotBaseBindingDirective {
         this.dataService.configuredFields.next({
             columnAxes: this.columnAxes,
             rowAxes: this.rowAxes,
-            measureAxes: this.measureAxes
+            measureAxes: this.measureAxes,
+            sort: this.sort,
+            filter: this.filter
         });
     }
     updateHeaders(axes, tree, path) {
@@ -133,7 +139,7 @@ export class PivotBaseBindingDirective {
     ;
 }
 PivotBaseBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotBaseBindingDirective, deps: [{ token: i1.PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-PivotBaseBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PivotBaseBindingDirective, selector: "kendo-base-binding-directive", inputs: { columnAxes: "columnAxes", rowAxes: "rowAxes", measureAxes: "measureAxes" }, outputs: { expandChange: "expandChange", configurationChange: "configurationChange", dataLoaded: "dataLoaded" }, ngImport: i0 });
+PivotBaseBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PivotBaseBindingDirective, selector: "kendo-base-binding-directive", inputs: { columnAxes: "columnAxes", rowAxes: "rowAxes", measureAxes: "measureAxes", sort: "sort", filter: "filter" }, outputs: { expandChange: "expandChange", configurationChange: "configurationChange", dataLoaded: "dataLoaded" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotBaseBindingDirective, decorators: [{
             type: Directive,
             args: [{
@@ -145,6 +151,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], measureAxes: [{
                 type: Input
+            }], sort: [{
+                type: Input
+            }], filter: [{
+                type: Input
             }], expandChange: [{
                 type: Output
             }], configurationChange: [{

package/esm2015/data-binding/local-binding.directive.js

@@ -37,13 +37,13 @@ export class PivotLocalBindingDirective extends PivotBaseBindingDirective {
         this.updateConfiguratorFields();
     }
     loadData(state) {
-        const { columnAxes, rowAxes, measureAxes } = state;
+        const { columnAxes, rowAxes, measureAxes, sort, filter } = state;
         const rootColumnAxes = this.getRootAxes(columnAxes);
         const rootRowAxes = this.getRootAxes(rowAxes);
         const columnSettings = rootColumnAxes.split(stringSeparator).map(this.createAxisSettings);
         const rowSettings = rootRowAxes.split(stringSeparator).map(this.createAxisSettings);
         const measuresSettings = measureAxes.map(m => this.measures.find(meas => String(meas.name) === String(m.name))).filter(Boolean);
-        const dataTree = createDataTree(this.data, rowSettings, columnSettings, measuresSettings, bindingFields);
+        const dataTree = createDataTree(this.data, rowSettings, columnSettings, measuresSettings, bindingFields, filter);
         this.dataState = createLocalDataState({
             dataTree,
             rowSettings,
@@ -51,7 +51,7 @@ export class PivotLocalBindingDirective extends PivotBaseBindingDirective {
             rowAxes: rowAxes,
             columnAxes: columnAxes,
             measures: measuresSettings,
-            sort: [],
+            sort: sort,
             fields: bindingFields
         });
         this.updateDataServiceFields();

package/esm2015/data-binding/olap-binding.directive.js

@@ -7,6 +7,7 @@ import { Directive, Input } from '@angular/core';
 import { addKPI, buildKPIMeasures, createDataState, fetchData, fetchDiscover } from '@progress/kendo-pivotgrid-common';
 import { anyChanged } from '@progress/kendo-angular-common';
 import { PivotBaseBindingDirective } from './base-binding-directive';
+import { clone } from '../util';
 import * as i0 from "@angular/core";
 import * as i1 from "./pivotgrid-data.service";
 /**
@@ -24,18 +25,20 @@ export class PivotOLAPBindingDirective extends PivotBaseBindingDirective {
         }
     }
     loadData(state) {
-        const { columnAxes, rowAxes, measureAxes } = state;
+        const { columnAxes, rowAxes, measureAxes, sort, filter } = state;
         this.dataService.loading.next(true);
         const options = {
             connection: {
                 catalog: this.catalog,
                 cube: this.cube
             },
-            columnAxes: columnAxes,
-            rowAxes: rowAxes,
-            measureAxes: measureAxes
+            columnAxes,
+            rowAxes,
+            measureAxes,
+            sort,
+            filter
         };
-        fetchData({ url: this.url }, JSON.parse(JSON.stringify(options)))
+        fetchData({ url: this.url }, clone(options))
             .then(createDataState)
             .then(newDataState => {
             this.dataState = newDataState;

package/esm2015/localization/messages.js

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class PivotGridMessages extends ComponentMessages {
 }
 PivotGridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-PivotGridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridMessages, inputs: { fieldMenuFilterItemLabel: "fieldMenuFilterItemLabel", fieldMenuSortAscendingItemLabel: "fieldMenuSortAscendingItemLabel", fieldMenuSortDescendingItemLabel: "fieldMenuSortDescendingItemLabel", filterInputLabel: "filterInputLabel", filterOperatorsDropDownLabel: "filterOperatorsDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", loading: "loading", emptyCellLabel: "emptyCellLabel", configuratorButtonText: "configuratorButtonText", configuratorHeaderText: "configuratorHeaderText", configuratorFieldsText: "configuratorFieldsText", configuratorColumnsText: "configuratorColumnsText", configuratorRowsText: "configuratorRowsText", configuratorValuesText: "configuratorValuesText", configuratorCancelButtonText: "configuratorCancelButtonText", configuratorApplyButtonText: "configuratorApplyButtonText", configuratorEmptyRowsText: "configuratorEmptyRowsText", configuratorEmptyColumnsText: "configuratorEmptyColumnsText", configuratorEmptyMeasuresText: "configuratorEmptyMeasuresText" }, usesInheritance: true, ngImport: i0 });
+PivotGridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridMessages, inputs: { fieldMenuFilterItemLabel: "fieldMenuFilterItemLabel", fieldMenuSortAscendingItemLabel: "fieldMenuSortAscendingItemLabel", fieldMenuSortDescendingItemLabel: "fieldMenuSortDescendingItemLabel", filterInputLabel: "filterInputLabel", filterOperatorsDropDownLabel: "filterOperatorsDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", loading: "loading", emptyCellLabel: "emptyCellLabel", configuratorButtonText: "configuratorButtonText", configuratorHeaderText: "configuratorHeaderText", configuratorFieldsText: "configuratorFieldsText", configuratorColumnsText: "configuratorColumnsText", configuratorRowsText: "configuratorRowsText", configuratorValuesText: "configuratorValuesText", configuratorCancelButtonText: "configuratorCancelButtonText", configuratorApplyButtonText: "configuratorApplyButtonText", configuratorEmptyRowsText: "configuratorEmptyRowsText", configuratorEmptyColumnsText: "configuratorEmptyColumnsText", configuratorEmptyMeasuresText: "configuratorEmptyMeasuresText", chipMenuIconTitle: "chipMenuIconTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridMessages, decorators: [{
             type: Directive
         }], propDecorators: { fieldMenuFilterItemLabel: [{
@@ -74,4 +74,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], configuratorEmptyMeasuresText: [{
                 type: Input
+            }], chipMenuIconTitle: [{
+                type: Input
             }] } });

package/esm2015/localization/pivot-localization.service.js

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * @hidden
+ *
+ * Needed to keep the Pivot's LocalizationService reference and be able to use it inside the ChipList component.
+ */
+export class PivotLocalizationService {
+    constructor(localization) {
+        this.localization = localization;
+    }
+    get(token) {
+        return this.localization.get(token);
+    }
+    get rtl() {
+        return this.localization.rtl;
+    }
+}
+PivotLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotLocalizationService, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+PivotLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotLocalizationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotLocalizationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });

package/esm2015/models/configurator-settings.js

@@ -6,9 +6,11 @@
  * @hidden
  */
 export class PivotGridState {
-    constructor(columnAxes, rowAxes, measureAxes) {
+    constructor(columnAxes, rowAxes, measureAxes, sort, filter) {
         this.columnAxes = columnAxes;
         this.rowAxes = rowAxes;
         this.measureAxes = measureAxes;
+        this.sort = sort;
+        this.filter = filter;
     }
 }

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1662102713,
+    publishDate: 1662542827,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/pivotgrid.component.js

@@ -8,11 +8,12 @@ import { packageMetadata } from './package-metadata';
 import { isChanged, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { PivotGridDataService } from './data-binding/pivotgrid-data.service';
 import { fromEvent, Subscription } from 'rxjs';
-import { syncScroll, syncWheel } from './util';
+import { cloneArray, syncScroll, syncWheel } from './util';
 // eslint-disable-next-line rxjs/ban-operators
 import { merge } from 'rxjs/operators';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { PivotGridNavigation } from '@progress/kendo-pivotgrid-common';
+import { PivotLocalizationService } from './localization/pivot-localization.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./data-binding/pivotgrid-data.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -44,7 +45,7 @@ export class PivotGridComponent {
         this.hostClass = true;
         this.ariaRole = 'grid';
         /**
-         * Specify the width of the column header and data cells. Value is treated as pixels.
+         * Specify the width of the column header and data cells. Value is treated as pixels [(see example)]({% slug appearance_pivotgrid %}#toc-column-headers-width).
          *
          * @default 200
          */
@@ -130,6 +131,12 @@ export class PivotGridComponent {
     get configuratorSettings() {
         return this.configurator && Object.assign({}, DEFAULT_CONFIGURATOR_SETTINGS, this.configurator);
     }
+    /**
+     * Holds the displayed aggregated PivotGrid values.
+     */
+    get aggregateData() {
+        return cloneArray(this.dataService.aggregateData);
+    }
     ngAfterViewInit() {
         if (isDocumentAvailable()) {
             this.zone.runOutsideAngular(() => {
@@ -198,6 +205,7 @@ PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", configurator: "configurator", columnHeadersWidth: "columnHeadersWidth", navigable: "navigable" }, host: { properties: { "class.k-d-flex": "this.hostClass", "class.k-pos-relative": "this.hostClass", "class.k-flex-row": "this.rightPositionClass", "class.k-flex-row-reverse": "this.leftPositionClass", "class.k-flex-column": "this.bottomPositionClass", "class.k-flex-column-reverse": "this.topPositionClass", "attr.dir": "this.dir", "attr.role": "this.ariaRole" } }, providers: [
         PivotGridDataService,
         LocalizationService,
+        PivotLocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.pivotgrid'
@@ -292,7 +300,10 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         configuratorEmptyColumnsText="Select some fields to begin setup"
         
         i18n-configuratorEmptyMeasuresText="kendo.pivotgrid.configuratorEmptyMeasuresText|The text content of the PivotGrid configurator empty measures container"
-        configuratorEmptyMeasuresText="Select some fields to begin setup"></ng-container>
+        configuratorEmptyMeasuresText="Select some fields to begin setup"
+        
+        i18n-chipMenuIconTitle="kendo.grid.chipMenuIconTitle|The title of the field menu icon"
+        chipMenuIconTitle="{{ '{fieldName} Field Menu' }}"></ng-container>
 
         <div #table class="k-pivotgrid">
             <span class="k-pivotgrid-empty-cell">
@@ -332,10 +343,10 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         <div *ngIf="configurator"
             class="k-pivotgrid-configurator-button"
             (click)="showConfigurator = !showConfigurator">
-            <span>{{ messageFor('configuratorButtonText') }}<span class="k-icon k-i-gear k-color-inherit"></span>
+            <span>{{messageFor('configuratorButtonText')}}<span class="k-icon k-i-gear k-color-inherit"></span>
             </span>
         </div>
-   `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "], components: [{ type: i4.PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: i6.PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["horizontal"] }], directives: [{ type: i7.LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+   `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n\n        .k-pivotgrid-empty-cell:focus {\n            outline: none;\n        }\n   "], components: [{ type: i4.PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: i6.PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["horizontal", "sort", "filter"] }], directives: [{ type: i7.LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
             args: [{
@@ -343,6 +354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     providers: [
                         PivotGridDataService,
                         LocalizationService,
+                        PivotLocalizationService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.pivotgrid'
@@ -438,7 +450,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         configuratorEmptyColumnsText="Select some fields to begin setup"
         
         i18n-configuratorEmptyMeasuresText="kendo.pivotgrid.configuratorEmptyMeasuresText|The text content of the PivotGrid configurator empty measures container"
-        configuratorEmptyMeasuresText="Select some fields to begin setup"></ng-container>
+        configuratorEmptyMeasuresText="Select some fields to begin setup"
+        
+        i18n-chipMenuIconTitle="kendo.grid.chipMenuIconTitle|The title of the field menu icon"
+        chipMenuIconTitle="{{ '{fieldName} Field Menu' }}"></ng-container>
 
         <div #table class="k-pivotgrid">
             <span class="k-pivotgrid-empty-cell">
@@ -478,7 +493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <div *ngIf="configurator"
             class="k-pivotgrid-configurator-button"
             (click)="showConfigurator = !showConfigurator">
-            <span>{{ messageFor('configuratorButtonText') }}<span class="k-icon k-i-gear k-color-inherit"></span>
+            <span>{{messageFor('configuratorButtonText')}}<span class="k-icon k-i-gear k-color-inherit"></span>
             </span>
         </div>
    `,
@@ -490,6 +505,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             left: 50%;
             transform: translate(-50%, -50%);
         }
+
+        .k-pivotgrid-empty-cell:focus {
+            outline: none;
+        }
    `]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i3.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{

package/esm2015/pivotgrid.module.js

@@ -2,10 +2,8 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { IndicatorsModule } from "@progress/kendo-angular-indicators";
-import { ButtonsModule } from "@progress/kendo-angular-buttons";
 import { TreeViewModule } from "@progress/kendo-angular-treeview";
 import { PivotGridComponent } from './pivotgrid.component';
 import { PivotGridCellDirective } from './rendering/pivotgrid-cell.directive';
@@ -16,18 +14,18 @@ import { PivotOLAPBindingDirective } from './data-binding/olap-binding.directive
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 import { CustomMessagesComponent } from './localization/custom-messages.component';
 import { PivotGridConfiguratorComponent } from './configurator/configurator.component';
-import { InputsModule } from '@progress/kendo-angular-inputs';
 import { DraggableChipDirective } from './configurator/draggable.directive';
 import { DropTargetDirective } from './configurator/drop-target.directive';
+import { ChipMenuModule } from './configurator/chip-menu/chip-menu.module';
+import { SharedModule } from './shared.module';
 import * as i0 from "@angular/core";
 const IMPORTED_MODULES = [
-    CommonModule,
     EventsModule,
     IndicatorsModule,
-    ButtonsModule,
     TreeViewModule,
-    InputsModule,
-    DraggableModule
+    DraggableModule,
+    ChipMenuModule,
+    SharedModule
 ];
 const DECLARATIONS = [
     PivotGridComponent,
@@ -64,13 +62,12 @@ PivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         DraggableChipDirective,
         DropTargetDirective,
         LocalizedMessagesDirective,
-        CustomMessagesComponent], imports: [CommonModule,
-        EventsModule,
+        CustomMessagesComponent], imports: [EventsModule,
         IndicatorsModule,
-        ButtonsModule,
         TreeViewModule,
-        InputsModule,
-        DraggableModule], exports: [PivotGridComponent,
+        DraggableModule,
+        ChipMenuModule,
+        SharedModule], exports: [PivotGridComponent,
         PivotGridTableComponent,
         PivotGridCellDirective,
         PivotLocalBindingDirective,

package/esm2015/rendering/pivotgrid-table.component.js

@@ -65,7 +65,7 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </tr>
             </tbody>
         </table>
-    `, isInline: true, components: [{ type: i2.PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        .k-pivotgrid-cell:focus {\n            outline: none;\n        }\n    "], components: [{ type: i2.PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -105,7 +105,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 </tr>
             </tbody>
         </table>
-    `
+    `,
+                    styles: [`
+        /** TODO: Remove if added to themes */
+        .k-pivotgrid-cell:focus {
+            outline: none;
+        }
+    `]
                 }]
         }], ctorParameters: function () { return [{ type: i1.PivotGridDataService }]; }, propDecorators: { tableType: [{
                 type: Input

package/esm2015/shared.module.js

@@ -0,0 +1,40 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import * as i0 from "@angular/core";
+const MODULES = [
+    CommonModule,
+    DropDownsModule,
+    InputsModule,
+    ButtonsModule
+];
+/**
+ * @hidden
+ */
+export class SharedModule {
+}
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, imports: [CommonModule,
+        DropDownsModule,
+        InputsModule,
+        ButtonsModule], exports: [CommonModule,
+        DropDownsModule,
+        InputsModule,
+        ButtonsModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, imports: [[MODULES], CommonModule,
+        DropDownsModule,
+        InputsModule,
+        ButtonsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [MODULES],
+                    exports: [MODULES]
+                }]
+        }] });