@progress/kendo-angular-pivotgrid 0.2.0-dev.202208190706 → 0.2.0-dev.202209020832

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.
@@ -41,13 +45,18 @@ export class PivotBaseBindingDirective {
          * If you prevent the event, the PivotGrid will not be rerendered with the new state, resulting from the configuration changes, applied through the configurator interface.
          */
         this.configurationChange = new EventEmitter();
+        /**
+         * Fires each time when new data is loaded and transformed to show aggregated values.
+         * The event fires upon initialization and on user interaction that changes the state of the PivotGrid.
+         */
+        this.dataLoaded = new EventEmitter();
         this.subs = new Subscription();
     }
     /**
      * @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);
@@ -73,11 +82,20 @@ 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.directive = this;
     }
     ngOnDestroy() {
@@ -94,7 +112,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) {
@@ -121,7 +141,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" }, 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: [{
@@ -133,8 +153,14 @@ 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: [{
                 type: Output
+            }], dataLoaded: [{
+                type: Output
             }] } });

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

@@ -24,16 +24,18 @@ 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)))
             .then(createDataState)

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/models/data-row-item.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+;
+export {};

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: 1660892763,
+    publishDate: 1662107494,
     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

@@ -5,13 +5,15 @@
 import { Component, ElementRef, HostBinding, Input, ViewChild } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
+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';
 // 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";
@@ -34,10 +36,12 @@ const DEFAULT_CONFIGURATOR_SETTINGS = {
  * Represents the Kendo UI PivotGrid component for Angular.
  */
 export class PivotGridComponent {
-    constructor(hostEl, zone, dataService, localization, _scrollbarWidthService) {
+    constructor(hostEl, zone, dataService, localization, renderer, _scrollbarWidthService) {
+        this.hostEl = hostEl;
         this.zone = zone;
         this.dataService = dataService;
         this.localization = localization;
+        this.renderer = renderer;
         this.hostClass = true;
         this.ariaRole = 'grid';
         /**
@@ -46,6 +50,12 @@ export class PivotGridComponent {
          * @default 200
          */
         this.columnHeadersWidth = 200;
+        /**
+         * If set to true, the user can use dedicated shortcuts to interact with the PivotGrid. By default, navigation is disabled.
+         *
+         * @default false
+         */
+        this.navigable = false;
         this.resizeObservers = [];
         this._loaderSettings = DEFAULT_LOADER_SETTINGS;
         this.subs = new Subscription();
@@ -133,15 +143,29 @@ export class PivotGridComponent {
                 this.resizeObservers = [headerColsResizeObserver, headerRowsResizeObserver];
                 this.subs.add(fromEvent(rowHeadersTable, 'wheel')
                     .pipe(merge(fromEvent(colHeadersTable, 'wheel'), fromEvent(this.valuesTable.nativeElement, 'scroll'))).subscribe((ev) => this.handleScroll(ev)));
+                if (this.navigable) {
+                    this.initNavigation();
+                }
             });
         }
     }
     ngAfterContentInit() {
         this.subs.add(this.dataService.loading.subscribe(state => this.loading = state));
     }
+    ngOnChanges(changes) {
+        if (isChanged('navigable', changes)) {
+            if (this.navigable) {
+                this.initNavigation();
+            }
+            else {
+                this.stopNavigation();
+            }
+        }
+    }
     ngOnDestroy() {
         this.resizeObservers.forEach(o => o.disconnect());
         this.subs.unsubscribe();
+        this.stopNavigation();
     }
     /**
      * @hidden
@@ -149,16 +173,38 @@ export class PivotGridComponent {
     messageFor(localizationToken) {
         return this.localization.get(localizationToken);
     }
+    initNavigation() {
+        this.stopNavigation();
+        this.navigation = new PivotGridNavigation({ tabIndex: 0 });
+        this.navigation.start(this.hostEl.nativeElement);
+        const firstCell = this.navigation.first;
+        if (firstCell) {
+            firstCell.setAttribute('tabindex', '0');
+        }
+        this.subs.add(this.dataService.directive.expandChange.pipe(merge(this.dataService.directive.configurationChange)).subscribe(() => this.zone.runOutsideAngular(() => {
+            setTimeout(() => this.navigation.update());
+        })));
+    }
+    stopNavigation() {
+        if (this.navigation) {
+            const lastFocusedEl = this.navigation.elements.find(el => el.hasAttribute('tabindex'));
+            if (lastFocusedEl) {
+                this.renderer.removeAttribute(lastFocusedEl, 'tabindex');
+            }
+            this.navigation.stop();
+        }
+    }
 }
-PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i3.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", configurator: "configurator", columnHeadersWidth: "columnHeadersWidth" }, 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: [
+PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i3.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+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'
         }
-    ], viewQueries: [{ propertyName: "colHeadersTable", first: true, predicate: ["colHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "rowHeadersTable", first: true, predicate: ["rowHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "valuesTable", first: true, predicate: ["valuesTable"], descendants: true, read: ElementRef }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "colHeadersTable", first: true, predicate: ["colHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "rowHeadersTable", first: true, predicate: ["rowHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "valuesTable", first: true, predicate: ["valuesTable"], descendants: true, read: ElementRef }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoPivotGridLocalizedMessages
         i18n-loading="kendo.pivotgrid.loading|The loading text"
         loading="Loading"
@@ -248,10 +294,15 @@ 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" [attr.aria-label]="messageFor('emptyCellLabel')"></span>
+            <span class="k-pivotgrid-empty-cell">
+                <span class="k-sr-only">{{messageFor('emptyCellLabel')}}</span>
+            </span>
             <kendo-pivotgrid-table
                 #colHeadersTable
                 [colWidth]="columnHeadersWidth"
@@ -286,10 +337,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   "], 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: [{
@@ -297,6 +348,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     providers: [
                         PivotGridDataService,
                         LocalizationService,
+                        PivotLocalizationService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.pivotgrid'
@@ -392,10 +444,15 @@ 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" [attr.aria-label]="messageFor('emptyCellLabel')"></span>
+            <span class="k-pivotgrid-empty-cell">
+                <span class="k-sr-only">{{messageFor('emptyCellLabel')}}</span>
+            </span>
             <kendo-pivotgrid-table
                 #colHeadersTable
                 [colWidth]="columnHeadersWidth"
@@ -430,7 +487,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>
    `,
@@ -444,7 +501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }
    `]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i3.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-d-flex']
             }, {
@@ -486,4 +543,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], columnHeadersWidth: [{
                 type: Input
+            }], navigable: [{
+                type: Input
             }] } });