@progress/kendo-angular-pivotgrid 0.2.0-dev.202208250747 → 0.2.0-dev.202209021834

package/fesm2015/kendo-angular-pivotgrid.js

@@ -3,25 +3,31 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Output, Component, HostBinding, Input, Directive, Optional, forwardRef, ElementRef, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, Output, Component, HostBinding, Input, Directive, ContentChildren, isDevMode, Optional, ContentChild, forwardRef, ViewChild, ElementRef, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i3 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, PreventableEvent, hasObservers, anyChanged, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
-import { toTree, toRows, toColumns, toData, configuratorReducer, PIVOT_CONFIGURATOR_ACTION, HEADERS_ACTION, headersReducer, createFlatSchemaDimensions, createDataTree, createLocalDataState, rootFields, fetchData, createDataState, fetchDiscover, addKPI, buildKPIMeasures } from '@progress/kendo-pivotgrid-common';
+import { isDocumentAvailable, PreventableEvent, Keys, isChanged, hasObservers, anyChanged, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
+import { toTree, toRows, toColumns, toData, configuratorReducer, PIVOT_CONFIGURATOR_ACTION, PivotGridNavigation, HEADERS_ACTION, headersReducer, createFlatSchemaDimensions, createDataTree, createLocalDataState, rootFields, fetchData, createDataState, fetchDiscover, addKPI, buildKPIMeasures } from '@progress/kendo-pivotgrid-common';
 export { averageAggregate, maxAggregate, minAggregate, sumAggregate } from '@progress/kendo-pivotgrid-common';
-import { BehaviorSubject, Subscription, from, of, fromEvent } from 'rxjs';
-import { mergeMap, merge } from 'rxjs/operators';
-import * as i2 from '@progress/kendo-angular-l10n';
+import { BehaviorSubject, Subscription, Subject, from, of, fromEvent } from 'rxjs';
+import { take, mergeMap, merge } from 'rxjs/operators';
+import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import * as i6 from '@angular/common';
+import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i5$1 from '@progress/kendo-angular-indicators';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
+import * as i1$1 from '@progress/kendo-angular-popup';
 import * as i4 from '@progress/kendo-angular-treeview';
 import { TreeViewModule } from '@progress/kendo-angular-treeview';
 import * as i5 from '@progress/kendo-angular-buttons';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
-import * as i7 from '@progress/kendo-angular-inputs';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i3$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i1$2 from '@progress/kendo-angular-dropdowns';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import * as i6 from '@progress/kendo-angular-inputs';
 import { InputsModule } from '@progress/kendo-angular-inputs';
 import { __awaiter } from 'tslib';
 
@@ -32,15 +38,24 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1661413588,
+    publishDate: 1662143617,
     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'
 };
 
+const EMPTY_REGEX = /^\s*$/;
 /**
  * @hidden
  */
 const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ */
+const isBlank = (value) => value === null || value === undefined;
+/**
+ * @hidden
+ */
+const isNullOrEmptyString = (value) => isBlank(value) || EMPTY_REGEX.test(value);
 /**
  * @hidden
  * Returns whether two arrays contain the same values.
@@ -99,34 +114,6 @@ const syncWheel = (event, tables, prop, axis) => {
             tables[1][prop] += delta;
     }
 };
-/**
- * @hidden
- */
-function cloneTo(obj, result) {
-    for (let field in obj) {
-        if (obj.hasOwnProperty(field)) {
-            const value = obj[field];
-            if (Array.isArray(value)) {
-                result[field] = value.slice(0);
-            }
-            else if (value && typeof value === 'object' && !(value instanceof Date)) {
-                result[field] = result[field] || {};
-                cloneTo(value, result[field]);
-            }
-            else {
-                result[field] = value;
-            }
-        }
-    }
-}
-/**
- * @hidden
- */
-function clone(obj) {
-    const result = {};
-    cloneTo(obj, result);
-    return result;
-}
 /**
  * @hidden
  */
@@ -185,6 +172,56 @@ const position = (target, before) => {
  * @hidden
  */
 const filterAndMap = (arr, predicate, mapper) => arr.reduce((acc, curr) => predicate(curr) ? [...acc, mapper(curr)] : acc, []);
+/**
+ * @hidden
+ */
+const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
+/**
+ * @hidden
+ */
+const cloneDate = (date) => date ? new Date(date.getTime()) : null;
+/**
+ * @hidden
+ */
+function clone(obj) {
+    const result = {};
+    cloneObject(obj, result);
+    return result;
+}
+/**
+ * @hidden
+ */
+function cloneObject(obj, result) {
+    for (let field in obj) {
+        if (obj.hasOwnProperty(field)) {
+            const value = obj[field];
+            result[field] = cloneValue(value, result[field]);
+        }
+    }
+}
+/**
+ * @hidden
+ */
+function cloneValue(value, nextValue) {
+    if (Array.isArray(value)) {
+        return cloneArray(value);
+    }
+    else if (value instanceof Date) {
+        return cloneDate(value);
+    }
+    else if (value && typeof value === 'object') {
+        const newNextValue = nextValue || {};
+        cloneObject(value, newNextValue);
+        return newNextValue;
+    }
+    return value;
+}
+/**
+ * @hidden
+ */
+function cloneArray(array) {
+    return array.map(value => cloneValue(value, undefined));
+}
 
 /**
  * @hidden
@@ -242,6 +279,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
+/**
+ * @hidden
+ *
+ * Needed to keep the Pivot's LocalizationService reference and be able to use it inside the ChipList component.
+ */
+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 }]; } });
+
 /**
  * @hidden
  */
@@ -295,7 +354,7 @@ PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [ngClass]="{
                 'k-i-arrow-chevron-up': expanded,
                 'k-i-arrow-chevron-down': !expanded
-            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`, isInline: true, directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridCellDirective, decorators: [{
             type: Component,
             args: [{
@@ -384,7 +443,7 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </tr>
             </tbody>
         </table>
-    `, isInline: true, components: [{ type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex"] }], directives: [{ type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.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: [{
@@ -426,102 +485,1175 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </table>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: PivotGridDataService }]; }, propDecorators: { tableType: [{
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }]; }, propDecorators: { tableType: [{
+                type: Input
+            }], colWidth: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class ConfiguratorService {
+    constructor() {
+        this.configuratorStateChange = new EventEmitter();
+    }
+    parseConfiguratorState(action) {
+        const newState = configuratorReducer({
+            filter: this.state.filter,
+            sort: this.state.sort,
+            rowAxes: this.state.rowAxes,
+            columnAxes: this.state.columnAxes,
+            measureAxes: this.state.measureAxes,
+            dragItem: this.state.dragItem,
+            dropDirection: this.state.dropDirection,
+            dropTarget: this.state.dropTarget,
+            dropZone: this.state.dropZone
+        }, action);
+        Object.keys(newState).forEach(key => newState[key] === undefined && delete newState[key]);
+        this.state = Object.assign(Object.assign({}, this.state), newState);
+        this.configuratorStateChange.emit(this.state);
+    }
+}
+ConfiguratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ConfiguratorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, decorators: [{
+            type: Injectable
+        }], propDecorators: { configuratorStateChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+const append = (element) => {
+    let appended = false;
+    return () => {
+        if (!appended) {
+            document.body.appendChild(element);
+            appended = true;
+        }
+        return element;
+    };
+};
+/**
+ * @hidden
+ */
+class DropCueService {
+    create() {
+        this.dom = document.createElement('span');
+        this.dom.style.position = 'absolute';
+        const wrapper = document.createElement('div');
+        wrapper.classList.add('k-drop-hint', 'k-drop-hint-v');
+        const hintStart = document.createElement('div');
+        hintStart.classList.add('k-drop-hint-start');
+        const hintLine = document.createElement('div');
+        hintLine.classList.add('k-drop-hint-line');
+        const hintEnd = document.createElement('div');
+        hintEnd.classList.add('k-drop-hint-end');
+        wrapper.append(hintStart, hintLine, hintEnd);
+        this.dom.append(wrapper);
+        this.hide();
+    }
+    attach() {
+        return append(this.dom)();
+    }
+    remove() {
+        if (this.dom && this.dom.parentElement) {
+            document.body.removeChild(this.dom);
+            this.dom = null;
+        }
+    }
+    hide() {
+        this.dom.style.display = "none";
+    }
+    position({ left, top, height }) {
+        this.dom.style.display = 'block';
+        this.dom.style.height = height + 'px';
+        this.dom.style.top = top + 'px';
+        this.dom.style.zIndex = '1000';
+        const width = this.dom.offsetWidth / 2;
+        this.dom.style.left = left - width + 'px';
+    }
+}
+DropCueService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DropCueService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService, decorators: [{
+            type: Injectable
+        }] });
+
+const contains = (node, predicate) => {
+    while (node) {
+        if (predicate(node)) {
+            return true;
+        }
+        node = node.parentNode;
+    }
+    return false;
+};
+/**
+ * @hidden
+ * Arguments for the `close` event of the chip-menu popup.
+ */
+class PopupCloseEvent extends PreventableEvent {
+    constructor(e) {
+        super();
+        this.originalEvent = e;
+    }
+}
+const DEFAULT_POPUP_CLASS = 'k-grid-filter-popup';
+/**
+ * @hidden
+ * The service that is used for the popups of the chip menus.
+ */
+class SinglePopupService {
+    constructor(popupService, renderer, ngZone, localization) {
+        this.popupService = popupService;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.localization = localization;
+        /**
+         * Fires when the chip menus are about to close because the user clicked outside their popups.
+         * Used to prevent the popup from closing.
+         */
+        this.onClose = new Subject();
+        this.pointerEventsSub = new Subscription();
+        this.scrollSubscription = new Subscription();
+    }
+    open(anchor, template, popupRef, popupClass = DEFAULT_POPUP_CLASS) {
+        var _a;
+        const toggle = isPresent(popupRef) && this.popupRef === popupRef;
+        this.destroy();
+        if (!toggle) {
+            const direction = this.localization.rtl ? 'right' : 'left';
+            this.popupRef = this.popupService.open({
+                anchorAlign: { vertical: 'bottom', horizontal: direction },
+                popupAlign: { vertical: 'top', horizontal: direction },
+                anchor: anchor,
+                popupClass: popupClass,
+                content: template,
+                positionMode: "absolute"
+            });
+            this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
+            this.attachClose(anchor);
+        }
+        const popupEl = (_a = this.popupRef) === null || _a === void 0 ? void 0 : _a.popupElement;
+        if (popupEl) {
+            this.attachMouseListeners(popupEl);
+        }
+        return this.popupRef;
+    }
+    destroy() {
+        if (this.popupRef) {
+            this.detachClose();
+            this.pointerEventsSub.unsubscribe();
+            this.pointerEventsSub = null;
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+    }
+    ngOnDestroy() {
+        this.destroy();
+        this.scrollSubscription.unsubscribe();
+    }
+    detachClose() {
+        if (this.removeClick) {
+            this.removeClick();
+        }
+    }
+    attachClose(skipElement) {
+        this.detachClose();
+        this.ngZone.runOutsideAngular(() => this.removeClick = this.renderer.listen('document', 'click', (e) => {
+            if (!contains(e.target, x => this.popupRef.popupElement === x || x === skipElement)) {
+                const args = new PopupCloseEvent(e);
+                this.onClose.next(args);
+                if (!args.isDefaultPrevented() && this.canClosePopup) {
+                    this.destroy();
+                }
+                this.canClosePopup = true;
+            }
+        }));
+    }
+    attachMouseListeners(el) {
+        this.pointerEventsSub = new Subscription();
+        this.ngZone.runOutsideAngular(() => {
+            this.pointerEventsSub.add(this.renderer.listen(el, 'pointerdown', (e) => {
+                e.stopImmediatePropagation();
+                this.canClosePopup = false;
+            }));
+            this.pointerEventsSub.add(this.renderer.listen(el, 'pointerup', () => {
+                this.canClosePopup = true;
+            }));
+        });
+    }
+}
+SinglePopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SinglePopupService, deps: [{ token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PivotLocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+SinglePopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SinglePopupService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SinglePopupService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.PopupService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: PivotLocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+class MenuTabbingService {
+    constructor() {
+        this.isColumnMenu = false;
+        this.isPopupOpen = false;
+    }
+}
+MenuTabbingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuTabbingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MenuTabbingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuTabbingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MenuTabbingService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @hidden
+ * Represents the service that is passed to the ChipMenuFilterComponent and ChipMenuSortComponent.
+ */
+class ChipMenuService {
+    constructor(menuTabbingService) {
+        this.closeMenu = new EventEmitter();
+        this.menuTabbingService = menuTabbingService;
+    }
+    /**
+     * Closes the chip menu.
+     */
+    close() {
+        this.closeMenu.emit();
+    }
+}
+ChipMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuService, deps: [{ token: MenuTabbingService }], target: i0.ɵɵFactoryTarget.Injectable });
+ChipMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MenuTabbingService }]; } });
+
+/**
+ * @hidden
+ */
+class ChipMenuItemDirective {
+    constructor(hostElement, renderer, ngZone) {
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this._isFirst = false;
+        this._isLast = false;
+        this.subs = new Subscription();
+        this.onTab = (e) => {
+            if (e.keyCode !== Keys.Tab) {
+                return;
+            }
+            if (this.isFirst && e.shiftKey && e.target === this.chipMenuItems[0]) {
+                e.preventDefault();
+                this.menuItemComponent.service.menuTabbingService.lastFocusable.focus();
+            }
+            if (this.isLast && !e.shiftKey) {
+                const lastColumnMenuItem = this.getLastColumnMenuItem();
+                const isExpanded = this.menuItemComponent.expanded;
+                if (lastColumnMenuItem === e.target && !isExpanded) {
+                    e.preventDefault();
+                    this.menuItemComponent.service.menuTabbingService.firstFocusable.focus();
+                }
+            }
+        };
+    }
+    set isFirst(value) {
+        if (value) {
+            const focusableElement = this.chipMenuItems[0];
+            this.menuItemComponent.service.menuTabbingService.firstFocusable = focusableElement;
+            this.ngZone.runOutsideAngular(() => {
+                const firstItemKeydownSub = this.renderer.listen(focusableElement, 'keydown', this.onTab);
+                this.subs.add(firstItemKeydownSub);
+            });
+        }
+        this._isFirst = value;
+    }
+    get isFirst() {
+        return this._isFirst;
+    }
+    set isLast(value) {
+        if (!this.chipMenuItems) {
+            return;
+        }
+        if (value) {
+            const lastFocusableElement = this.getLastColumnMenuItem();
+            this.menuItemComponent.service.menuTabbingService.lastFocusable = lastFocusableElement;
+            this.ngZone.runOutsideAngular(() => {
+                const lastItemKeydownSub = this.renderer.listen(lastFocusableElement, 'keydown', this.onTab);
+                this.subs.add(lastItemKeydownSub);
+            });
+        }
+        this._isLast = value;
+    }
+    get isLast() {
+        return this._isLast;
+    }
+    ngAfterViewInit() {
+        this.chipMenuItems = this.hostElement.nativeElement.querySelectorAll('.k-columnmenu-item');
+        this.chipMenuItems.forEach(el => this.renderer.setAttribute(el, 'tabindex', '0'));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    getLastColumnMenuItem() {
+        return (this.chipMenuItems.length === 1 ? this.chipMenuItems[0] : this.chipMenuItems[1]);
+    }
+}
+ChipMenuItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ChipMenuItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: { menuItemComponent: ["kendoPivotChipMenuItem", "menuItemComponent"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoPivotChipMenuItem]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { menuItemComponent: [{
+                type: Input,
+                args: ['kendoPivotChipMenuItem']
+            }] } });
+
+/**
+ * @hidden
+ */
+class ChipMenuContainerComponent {
+    constructor(service, ngZone) {
+        this.service = service;
+        this.ngZone = ngZone;
+        this.hostClass = true;
+    }
+    ngAfterViewInit() {
+        if (!this.chipMenuItems.length) {
+            return;
+        }
+        this.chipMenuItems.first.isFirst = true;
+        this.chipMenuItems.last.isLast = true;
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.service.menuTabbingService.firstFocusable.focus());
+    }
+}
+ChipMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuContainerComponent, deps: [{ token: ChipMenuService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container", host: { properties: { "class.k-grid-columnmenu-popup": "this.hostClass" } }, queries: [{ propertyName: "chipMenuItems", predicate: ChipMenuItemDirective, descendants: true }], ngImport: i0, template: `
+        <ng-content></ng-content>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivot-chipmenu-container',
+                    template: `
+        <ng-content></ng-content>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: ChipMenuService }, { type: i0.NgZone }]; }, propDecorators: { chipMenuItems: [{
+                type: ContentChildren,
+                args: [ChipMenuItemDirective, { descendants: true }]
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-columnmenu-popup']
+            }] } });
+
+/**
+ * @hidden
+ */
+class ChipMenuItemBase {
+    constructor() {
+        this.hostClass = true;
+    }
+    ngOnInit() {
+        if (isDevMode() && !this.service) {
+            throw new Error('The service input of the host chip menu components (e.g. ChipMenuSortComponent) is mandatory.');
+        }
+    }
+    close() {
+        this.service.close();
+    }
+}
+ChipMenuItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipMenuItemBase, selector: "kendo-pivot-chip-menu-item-base", inputs: { service: "service" }, host: { properties: { "class.k-columnmenu-item-wrapper": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuItemBase, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivot-chip-menu-item-base',
+                    template: ``
+                }]
+        }], propDecorators: { service: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-columnmenu-item-wrapper']
+            }] } });
+
+/**
+ * @hidden
+ *
+ * Represents the content template of the ChipMenuItemComponent.
+ * Provides an option for specifying the content of a chip menu item..
+ */
+class ChipMenuItemContentTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ChipMenuItemContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuItemContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ChipMenuItemContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ChipMenuItemContentTemplateDirective, selector: "[kendoPivotChipMenuItemContentTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuItemContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotChipMenuItemContentTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * @hidden
+ *
+ */
+class ChipMenuItemComponent {
+    constructor() {
+        /**
+         * Fires when the item is clicked.
+         */
+        this.itemClick = new EventEmitter();
+        /**
+         * Fires when the content is expanded.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the content is collapsed.
+         */
+        this.collapse = new EventEmitter();
+        this.contentState = 'collapsed';
+    }
+    get iconClass() {
+        return `k-i-${this.icon}`;
+    }
+    ngOnChanges(changes) {
+        if (changes.expanded) {
+            this.updateContentState();
+        }
+    }
+    onClick(e) {
+        this.itemClick.emit(e);
+        if (this.contentTemplate) {
+            this.expanded = !this.expanded;
+            this.updateContentState();
+            if (this.expanded) {
+                this.expand.emit();
+            }
+            else {
+                this.collapse.emit();
+            }
+        }
+    }
+    updateContentState() {
+        this.contentState = this.expanded ? 'expanded' : 'collapsed';
+    }
+}
+ChipMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: { icon: "icon", text: "text", selected: "selected", expanded: "expanded" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ChipMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div
+            class="k-columnmenu-item"
+            (click)="onClick($event)"
+            (keydown.enter)="onClick($event)"
+            [class.k-selected]="selected"
+            role="button"
+            [attr.aria-expanded]="expanded">
+           <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
+           </span>
+           {{ text }}
+        </div>
+        <div *ngIf="contentTemplate" [@state]="contentState" style="overflow:hidden;" class="k-columnmenu-item-content">
+            <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
+            </ng-container>
+        <div>
+    `, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+        trigger('state', [
+            state('collapsed', style({ display: 'none' })),
+            state('expanded', style({ display: 'block' })),
+            transition('collapsed => expanded', [
+                style({
+                    height: '0px',
+                    display: 'block'
+                }),
+                animate('100ms ease-in', style({
+                    height: '*'
+                }))
+            ]),
+            transition('expanded => collapsed', [
+                style({
+                    height: '*'
+                }),
+                animate('100ms ease-in', style({
+                    height: '0px'
+                }))
+            ])
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    animations: [
+                        trigger('state', [
+                            state('collapsed', style({ display: 'none' })),
+                            state('expanded', style({ display: 'block' })),
+                            transition('collapsed => expanded', [
+                                style({
+                                    height: '0px',
+                                    display: 'block'
+                                }),
+                                animate('100ms ease-in', style({
+                                    height: '*'
+                                }))
+                            ]),
+                            transition('expanded => collapsed', [
+                                style({
+                                    height: '*'
+                                }),
+                                animate('100ms ease-in', style({
+                                    height: '0px'
+                                }))
+                            ])
+                        ])
+                    ],
+                    selector: 'kendo-pivot-chipmenu-item',
+                    template: `
+        <div
+            class="k-columnmenu-item"
+            (click)="onClick($event)"
+            (keydown.enter)="onClick($event)"
+            [class.k-selected]="selected"
+            role="button"
+            [attr.aria-expanded]="expanded">
+           <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
+           </span>
+           {{ text }}
+        </div>
+        <div *ngIf="contentTemplate" [@state]="contentState" style="overflow:hidden;" class="k-columnmenu-item-content">
+            <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
+            </ng-container>
+        <div>
+    `
+                }]
+        }], propDecorators: { itemClick: [{
+                type: Output
+            }], expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
+            }], icon: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], contentTemplate: [{
+                type: ContentChild,
+                args: [ChipMenuItemContentTemplateDirective, { static: false }]
+            }] } });
+
+/**
+ * @hidden
+ *
+ * Represents a chip-menu item for sorting PivotGrid fields.
+ * Allows the user to sort the PivotGrid.
+ */
+class ChipMenuSortComponent extends ChipMenuItemBase {
+    constructor(localization, renderer, configuratorService) {
+        super();
+        this.localization = localization;
+        this.renderer = renderer;
+        this.configuratorService = configuratorService;
+    }
+    get sortedAsc() {
+        const descriptor = this.descriptor;
+        return descriptor && (!descriptor.dir || descriptor.dir === 'asc');
+    }
+    get sortedDesc() {
+        const descriptor = this.descriptor;
+        return descriptor && descriptor.dir === 'desc';
+    }
+    /**
+     * Returns the localized message for a given token
+     */
+    messageFor(localizationToken) {
+        return this.localization.get(localizationToken);
+    }
+    toggleSort(dir) {
+        const field = this.chip.name.toString();
+        const descriptor = this.descriptor;
+        const sort = this.configuratorService.state.sort.filter(s => s.field !== field);
+        if (!descriptor || descriptor.dir !== dir) {
+            sort.push({ field, dir });
+        }
+        this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setSort, payload: sort });
+        this.close();
+    }
+    get descriptor() {
+        return [].concat(this.configuratorService.state.sort || []).find(s => s.field === this.chip.name.toString());
+    }
+}
+ChipMenuSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuSortComponent, deps: [{ token: PivotLocalizationService }, { token: i0.Renderer2 }, { token: ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: { chip: "chip" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-pivot-chipmenu-item
+            [text]="messageFor('fieldMenuSortAscendingItemLabel')"
+            icon="sort-asc-small"
+            (itemClick)="toggleSort('asc')"
+            [selected]="sortedAsc">
+        </kendo-pivot-chipmenu-item>
+        <kendo-pivot-chipmenu-item
+            [text]="messageFor('fieldMenuSortDescendingItemLabel')"
+            icon="sort-desc-small"
+            (itemClick)="toggleSort('desc')"
+            [selected]="sortedDesc">
+        </kendo-pivot-chipmenu-item>
+    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "text", "selected", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuSortComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivot-chipmenu-sort',
+                    template: `
+        <kendo-pivot-chipmenu-item
+            [text]="messageFor('fieldMenuSortAscendingItemLabel')"
+            icon="sort-asc-small"
+            (itemClick)="toggleSort('asc')"
+            [selected]="sortedAsc">
+        </kendo-pivot-chipmenu-item>
+        <kendo-pivot-chipmenu-item
+            [text]="messageFor('fieldMenuSortDescendingItemLabel')"
+            icon="sort-desc-small"
+            (itemClick)="toggleSort('desc')"
+            [selected]="sortedDesc">
+        </kendo-pivot-chipmenu-item>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: PivotLocalizationService }, { type: i0.Renderer2 }, { type: ConfiguratorService }]; }, propDecorators: { chip: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class FilterMenuDropDownListDirective {
+    constructor(host) {
+        this.host = host;
+        this.keydownHandler = (e) => {
+            if (e.keyCode === Keys.Escape && this.host.isOpen) {
+                e.stopPropagation();
+                this.host.toggle(false);
+            }
+        };
+    }
+    ngAfterViewInit() {
+        const wrapperElement = this.host.wrapper.nativeElement;
+        wrapperElement.setAttribute('aria-label', this.filterMenuDropDownLabel);
+        wrapperElement.addEventListener('keydown', this.keydownHandler, true);
+    }
+    ngOnDestroy() {
+        this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
+    }
+}
+FilterMenuDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1$2.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+FilterMenuDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: { filterMenuDropDownLabel: "filterMenuDropDownLabel" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterMenuDropDownListDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoFilterMenuDropDown]' }]
+        }], ctorParameters: function () { return [{ type: i1$2.DropDownListComponent }]; }, propDecorators: { filterMenuDropDownLabel: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+const localizeOperators = operators => localization => Object.keys(operators).map(key => ({
+    text: localization.get(key),
+    value: operators[key]
+}));
+const stringOperators = localizeOperators({
+    "filterEqOperator": "eq",
+    "filterNotEqOperator": "neq",
+    "filterContainsOperator": "contains",
+    "filterNotContainsOperator": "doesnotcontain",
+    "filterStartsWithOperator": "startswith",
+    "filterEndsWithOperator": "endswith",
+    "filterIsNullOperator": "isnull",
+    "filterIsNotNullOperator": "isnotnull",
+    "filterIsEmptyOperator": "isempty",
+    "filterIsNotEmptyOperator": "isnotempty"
+});
+/**
+ * @hidden
+ *
+ * Represents a string-filter menu component.
+ */
+class StringFilterMenuComponent {
+    constructor(localization, configuratorService, fb) {
+        this.localization = localization;
+        this.configuratorService = configuratorService;
+        this.fb = fb;
+        this.subscription = new Subscription();
+        this.onTouched = () => { };
+    }
+    get currentFilter() {
+        var _a;
+        const filterValue = (_a = this.configuratorService.state.filter) === null || _a === void 0 ? void 0 : _a.filter(x => x.field === this.chip.name.toString());
+        return filterValue && filterValue[0];
+    }
+    registerOnChange(fn) {
+        this.filterFormGroup.valueChanges.subscribe(fn);
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(val) {
+        if (val) {
+            this.filterFormGroup.setValue(val, { emitEvent: false });
+        }
+    }
+    get filterMenuDropDownLabel() {
+        const localizationMsg = this.localization.get('filterOperatorsDropDownLabel') || '';
+        const chipName = this.chip.name.toString();
+        return replaceMessagePlaceholder(localizationMsg, 'fields', chipName);
+    }
+    ngOnInit() {
+        this.filterFormGroup = this.fb.group({
+            operator: [this.currentFilter ? this.currentFilter.operator : ''],
+            value: [this.currentFilter ? this.currentFilter.value : '']
+        });
+        this.operators = stringOperators(this.localization);
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+}
+StringFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: PivotLocalizationService }, { token: ConfiguratorService }, { token: i3$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: { chip: "chip", menuTabbingService: "menuTabbingService" }, providers: [{
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => StringFilterMenuComponent),
+            multi: true
+        }], ngImport: i0, template: `
+        <ng-container [formGroup]="filterFormGroup">
+            <kendo-dropdownlist
+                    kendoFilterMenuDropDown
+                    [filterMenuDropDownLabel]="filterMenuDropDownLabel"
+                    [data]="operators"
+                    formControlName="operator"
+                    [valuePrimitive]="true"
+                    textField="text"
+                    valueField="value">
+                </kendo-dropdownlist>
+                <input
+                    kendoTextBox
+                    formControlName="value"
+                />
+        </ng-container>
+    `, isInline: true, components: [{ type: i1$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivot-string-filter-menu',
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StringFilterMenuComponent),
+                            multi: true
+                        }],
+                    template: `
+        <ng-container [formGroup]="filterFormGroup">
+            <kendo-dropdownlist
+                    kendoFilterMenuDropDown
+                    [filterMenuDropDownLabel]="filterMenuDropDownLabel"
+                    [data]="operators"
+                    formControlName="operator"
+                    [valuePrimitive]="true"
+                    textField="text"
+                    valueField="value">
+                </kendo-dropdownlist>
+                <input
+                    kendoTextBox
+                    formControlName="value"
+                />
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: PivotLocalizationService }, { type: ConfiguratorService }, { type: i3$1.FormBuilder }]; }, propDecorators: { chip: [{
                 type: Input
-            }], colWidth: [{
+            }], menuTabbingService: [{
                 type: Input
             }] } });
 
+const isNoValueOperator = operator => (operator === "isnull"
+    || operator === "isnotnull"
+    || operator === "isempty"
+    || operator === "isnotempty");
+const validFilter = ({ value, operator }) => !isNullOrEmptyString(value) || isNoValueOperator(operator);
 /**
  * @hidden
  */
-class ConfiguratorService {
-    constructor() {
-        this.configuratorStateChange = new EventEmitter();
+class FilterMenuContainerComponent {
+    constructor(localization, cd, menuTabbingService, configuratorService) {
+        this.localization = localization;
+        this.cd = cd;
+        this.configuratorService = configuratorService;
+        this.close = new EventEmitter();
+        this.actionsClass = 'k-action-buttons k-button-group';
+        this.menuTabbingService = menuTabbingService;
     }
-    parseConfiguratorState(action) {
-        const newState = configuratorReducer({
-            filter: [],
-            sort: [],
-            rowAxes: this.state.rowAxes,
-            columnAxes: this.state.columnAxes,
-            measureAxes: this.state.measureAxes,
-            dragItem: this.state.dragItem,
-            dropDirection: this.state.dropDirection,
-            dropTarget: this.state.dropTarget,
-            dropZone: this.state.dropZone
-        }, action);
-        Object.keys(newState).forEach(key => newState[key] === undefined && delete newState[key]);
-        this.state = Object.assign(Object.assign({}, this.state), newState);
-        this.configuratorStateChange.emit(this.state);
+    ngOnInit() {
+    }
+    ngAfterViewChecked() {
+        if (!this.menuTabbingService.isColumnMenu || (this.isLast && this.isExpanded)) {
+            this.menuTabbingService.lastFocusable = this.disabled ?
+                this.resetButton.nativeElement : this.filterButton.nativeElement;
+        }
+    }
+    ngOnDestroy() {
+        this.menuTabbingService.lastFocusable = null;
+    }
+    get disabled() {
+        return !(this.filterDescriptorValue && validFilter(this.filterDescriptorValue));
+    }
+    submit() {
+        const filterDescriptor = Object.assign({ field: this.chip.name.toString() }, this.filterDescriptorValue);
+        const payload = !this.configuratorService.state.filter ?
+            [filterDescriptor] :
+            [
+                ...this.configuratorService.state.filter.filter(descriptor => descriptor.field !== filterDescriptor.field),
+                filterDescriptor
+            ];
+        this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setFilter, payload: payload });
+        this.close.emit();
+        return false;
+    }
+    reset() {
+        const filters = this.configuratorService.state.filter.filter(descriptor => descriptor.field !== this.chip.name.toString());
+        this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setFilter, payload: filters });
+        this.close.emit();
+    }
+    onTab(e, buttonType) {
+        if (this.menuTabbingService.firstFocusable && (!this.menuTabbingService.isColumnMenu || this.isLast)) {
+            e.preventDefault();
+            if (buttonType === 'reset') {
+                // eslint-disable-next-line no-unused-expressions
+                this.disabled ? this.menuTabbingService.firstFocusable.focus() : this.filterButton.nativeElement.focus();
+            }
+            else {
+                this.menuTabbingService.firstFocusable.focus();
+            }
+        }
+    }
+    /**
+     * Returns the localized message for a given token
+     */
+    messageFor(localizationToken) {
+        return this.localization.get(localizationToken);
     }
 }
-ConfiguratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ConfiguratorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, decorators: [{
-            type: Injectable
-        }], propDecorators: { configuratorStateChange: [{
+FilterMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: PivotLocalizationService }, { token: i0.ChangeDetectorRef }, { token: MenuTabbingService }, { token: ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
+FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: { chip: "chip", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
+        MenuTabbingService
+    ], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "filterButton", first: true, predicate: ["filterButton"], descendants: true }], ngImport: i0, template: `
+        <form (submit)="submit()" (reset)="reset()"
+            class="k-filter-menu k-group k-reset k-state-border-up">
+            <div class="k-filter-menu-container">
+                <kendo-pivot-string-filter-menu
+                    [(ngModel)]="filterDescriptorValue"
+                    name="'filterDescriptorValue'"
+                    [chip]="chip"
+                    [menuTabbingService]="menuTabbingService">
+                </kendo-pivot-string-filter-menu>
+                <div [ngClass]="actionsClass">
+                    <button
+                        #resetButton
+                        type="reset"
+                        kendoButton
+                        (keydown.tab)="onTab($event, 'reset')">{{messageFor('filterClearButton')}}</button>
+                    <button #filterButton
+                        type="submit"
+                        [disabled]="disabled"
+                        kendoButton
+                        themeColor="primary"
+                        (keydown.tab)="onTab($event, 'filter')">{{messageFor('filterFilterButton')}}</button>
+                </div>
+            </div>
+        </form>
+    `, isInline: true, styles: ["\n        kendo-pivot-string-filter-menu {\n            display: flex;\n            flex-flow: column nowrap;\n            align-items: stretch;\n            gap: 8px;\n        }\n    "], components: [{ type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: ["chip", "menuTabbingService"] }], directives: [{ type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: FilterMenuContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        MenuTabbingService
+                    ],
+                    selector: 'kendo-pivot-filter-menu-container',
+                    template: `
+        <form (submit)="submit()" (reset)="reset()"
+            class="k-filter-menu k-group k-reset k-state-border-up">
+            <div class="k-filter-menu-container">
+                <kendo-pivot-string-filter-menu
+                    [(ngModel)]="filterDescriptorValue"
+                    name="'filterDescriptorValue'"
+                    [chip]="chip"
+                    [menuTabbingService]="menuTabbingService">
+                </kendo-pivot-string-filter-menu>
+                <div [ngClass]="actionsClass">
+                    <button
+                        #resetButton
+                        type="reset"
+                        kendoButton
+                        (keydown.tab)="onTab($event, 'reset')">{{messageFor('filterClearButton')}}</button>
+                    <button #filterButton
+                        type="submit"
+                        [disabled]="disabled"
+                        kendoButton
+                        themeColor="primary"
+                        (keydown.tab)="onTab($event, 'filter')">{{messageFor('filterFilterButton')}}</button>
+                </div>
+            </div>
+        </form>
+    `,
+                    styles: [`
+        kendo-pivot-string-filter-menu {
+            display: flex;
+            flex-flow: column nowrap;
+            align-items: stretch;
+            gap: 8px;
+        }
+    `]
+                }]
+        }], ctorParameters: function () { return [{ type: PivotLocalizationService }, { type: i0.ChangeDetectorRef }, { type: MenuTabbingService }, { type: ConfiguratorService }]; }, propDecorators: { close: [{
                 type: Output
+            }], chip: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], menuTabbingService: [{
+                type: Input
+            }], actionsClass: [{
+                type: Input
+            }], resetButton: [{
+                type: ViewChild,
+                args: ['resetButton']
+            }], filterButton: [{
+                type: ViewChild,
+                args: ['filterButton']
             }] } });
 
 /**
  * @hidden
+ * Represents the component for setting field filters in the PivotGrid.
  */
-const append = (element) => {
-    let appended = false;
-    return () => {
-        if (!appended) {
-            document.body.appendChild(element);
-            appended = true;
+class ChipMenuFilterComponent extends ChipMenuItemBase {
+    constructor(localization, hostElement) {
+        super();
+        this.localization = localization;
+        this.hostElement = hostElement;
+        /**
+         * Fires when the content is expanded.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the content is collapsed.
+         */
+        this.collapse = new EventEmitter();
+        /**
+         * Specifies if the content is expanded.
+         */
+        this.expanded = false;
+        this.isLast = false;
+        this.actionsClass = 'k-columnmenu-actions';
+    }
+    onCollapse() {
+        this.expanded = false;
+        if (this.isLast) {
+            this.service.menuTabbingService.lastFocusable = this.hostElement.nativeElement.querySelector('.k-columnmenu-item');
         }
-        return element;
-    };
-};
+        this.collapse.emit();
+    }
+    onExpand() {
+        this.expanded = true;
+        this.expand.emit();
+    }
+    /**
+     * Returns the localized message for a given token
+     */
+    messageFor(localizationToken) {
+        return this.localization.get(localizationToken);
+    }
+}
+ChipMenuFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuFilterComponent, deps: [{ token: PivotLocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: { chip: "chip", expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-pivot-chipmenu-item
+            classs="k-widget k-expander"
+            [text]="messageFor('fieldMenuFilterItemLabel')"
+            icon="filter"
+            [expanded]="expanded"
+            (collapse)="onCollapse()"
+            (expand)="onExpand()">
+            <ng-template kendoPivotChipMenuItemContentTemplate>
+                <kendo-pivot-filter-menu-container
+                    [chip]="chip"
+                    [menuTabbingService]="service.menuTabbingService"
+                    [actionsClass]="actionsClass"
+                    [isLast]="isLast"
+                    [isExpanded]="expanded"
+                    (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                    (close)="close()">
+                </kendo-pivot-filter-menu-container>
+            </ng-template>
+        </kendo-pivot-chipmenu-item>
+    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "text", "selected", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: ["chip", "isLast", "isExpanded", "menuTabbingService", "actionsClass"], outputs: ["close"] }], directives: [{ type: ChipMenuItemContentTemplateDirective, selector: "[kendoPivotChipMenuItemContentTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivot-chipmenu-filter',
+                    template: `
+        <kendo-pivot-chipmenu-item
+            classs="k-widget k-expander"
+            [text]="messageFor('fieldMenuFilterItemLabel')"
+            icon="filter"
+            [expanded]="expanded"
+            (collapse)="onCollapse()"
+            (expand)="onExpand()">
+            <ng-template kendoPivotChipMenuItemContentTemplate>
+                <kendo-pivot-filter-menu-container
+                    [chip]="chip"
+                    [menuTabbingService]="service.menuTabbingService"
+                    [actionsClass]="actionsClass"
+                    [isLast]="isLast"
+                    [isExpanded]="expanded"
+                    (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                    (close)="close()">
+                </kendo-pivot-filter-menu-container>
+            </ng-template>
+        </kendo-pivot-chipmenu-item>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: PivotLocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
+            }], chip: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }] } });
+
+const POPUP_CLASS = 'k-column-menu';
 /**
  * @hidden
+ *
+ * Represents the field chip menu component.
  */
-class DropCueService {
-    create() {
-        this.dom = document.createElement('span');
-        this.dom.style.position = 'absolute';
-        const wrapper = document.createElement('div');
-        wrapper.classList.add('k-drop-hint', 'k-drop-hint-v');
-        const hintStart = document.createElement('div');
-        hintStart.classList.add('k-drop-hint-start');
-        const hintLine = document.createElement('div');
-        hintLine.classList.add('k-drop-hint-line');
-        const hintEnd = document.createElement('div');
-        hintEnd.classList.add('k-drop-hint-end');
-        wrapper.append(hintStart, hintLine, hintEnd);
-        this.dom.append(wrapper);
-        this.hide();
+class ChipMenuComponent {
+    constructor(popupService, localization, service) {
+        this.popupService = popupService;
+        this.localization = localization;
+        this.service = service;
+        this.tabIndex = '-1';
+        this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
     }
-    attach() {
-        return append(this.dom)();
+    ngOnDestroy() {
+        this.close();
+        this.closeSubscription.unsubscribe();
     }
-    remove() {
-        if (this.dom && this.dom.parentElement) {
-            document.body.removeChild(this.dom);
-            this.dom = null;
+    toggle(e, anchor, template) {
+        if (e) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+        }
+        this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
+        if (!this.popupRef) {
+            this.anchor.nativeElement.focus();
         }
     }
-    hide() {
-        this.dom.style.display = "none";
+    close() {
+        this.popupService.destroy();
+        this.popupRef = null;
+        this.anchor.nativeElement.focus();
     }
-    position({ left, top, height }) {
-        this.dom.style.display = 'block';
-        this.dom.style.height = height + 'px';
-        this.dom.style.top = top + 'px';
-        this.dom.style.zIndex = '1000';
-        const width = this.dom.offsetWidth / 2;
-        this.dom.style.left = left - width + 'px';
+    get chipMenuTitle() {
+        const localizationMsg = this.localization.get('chipMenuIconTitle') || '';
+        const chipName = this.chip.name.toString();
+        return replaceMessagePlaceholder(localizationMsg, 'fieldName', chipName);
     }
 }
-DropCueService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DropCueService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService, decorators: [{
-            type: Injectable
-        }] });
+ChipMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuComponent, deps: [{ token: SinglePopupService }, { token: PivotLocalizationService }, { token: ChipMenuService }], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex" }, providers: [
+        ChipMenuService,
+        MenuTabbingService
+    ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }], ngImport: i0, template: `
+        <span #anchor
+            class="k-icon k-i-more-vertical"
+            (click)="toggle($event, anchor, template)"
+            [tabindex]="tabIndex"
+            [attr.title]="chipMenuTitle">
+        </span>
+        <ng-template #template>
+            <kendo-pivot-chipmenu-container
+                (keydown.escape)="close()"
+                (keydown.enter)="$event.stopImmediatePropagation()">
+                <kendo-pivot-chipmenu-sort
+                    #sortItem
+                    [chip]="chip"
+                    [kendoPivotChipMenuItem]="sortItem"
+                    [service]="service">
+                </kendo-pivot-chipmenu-sort>
+
+                <kendo-pivot-chipmenu-filter
+                    #filterItem
+                    [chip]="chip"
+                    [kendoPivotChipMenuItem]="filterItem"
+                    [service]="service">
+                </kendo-pivot-chipmenu-filter>
+            </kendo-pivot-chipmenu-container>
+        </ng-template>
+    `, isInline: true, components: [{ type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        ChipMenuService,
+                        MenuTabbingService
+                    ],
+                    selector: 'kendo-pivot-chip-menu',
+                    template: `
+        <span #anchor
+            class="k-icon k-i-more-vertical"
+            (click)="toggle($event, anchor, template)"
+            [tabindex]="tabIndex"
+            [attr.title]="chipMenuTitle">
+        </span>
+        <ng-template #template>
+            <kendo-pivot-chipmenu-container
+                (keydown.escape)="close()"
+                (keydown.enter)="$event.stopImmediatePropagation()">
+                <kendo-pivot-chipmenu-sort
+                    #sortItem
+                    [chip]="chip"
+                    [kendoPivotChipMenuItem]="sortItem"
+                    [service]="service">
+                </kendo-pivot-chipmenu-sort>
+
+                <kendo-pivot-chipmenu-filter
+                    #filterItem
+                    [chip]="chip"
+                    [kendoPivotChipMenuItem]="filterItem"
+                    [service]="service">
+                </kendo-pivot-chipmenu-filter>
+            </kendo-pivot-chipmenu-container>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: PivotLocalizationService }, { type: ChipMenuService }]; }, propDecorators: { chip: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], anchor: [{
+                type: ViewChild,
+                args: ['anchor', { static: true }]
+            }] } });
 
 /**
  * @hidden
@@ -690,6 +1822,7 @@ class PivotGridConfiguratorComponent {
         this.cdr = cdr;
         this.hostClass = true;
         this.horizontal = false;
+        this.sort = new Array();
         this.checked = [];
         this.subs = new Subscription();
         /**
@@ -852,10 +1985,11 @@ class PivotGridConfiguratorComponent {
     }
     ;
 }
-PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: PivotGridDataService }, { token: i2.LocalizationService }, { token: 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: PivotGridDataService }, { token: i1.LocalizationService }, { token: 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", 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"
@@ -924,6 +2058,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>
 
@@ -950,6 +2088,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>
 
@@ -972,18 +2114,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>
@@ -998,14 +2139,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: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i3.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: 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: i6.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i3.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 
@@ -1075,6 +2217,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>
 
@@ -1101,6 +2247,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>
 
@@ -1123,18 +2273,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>
@@ -1151,11 +2300,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
    `
                 }]
-        }], ctorParameters: function () { return [{ type: PivotGridDataService }, { type: i2.LocalizationService }, { type: ConfiguratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }, { type: i1.LocalizationService }, { type: ConfiguratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pivotgrid-configurator']
             }], horizontal: [{
                 type: Input
+            }], sort: [{
+                type: Input
+            }], filter: [{
+                type: Input
             }] } });
 
 /**
@@ -1164,7 +2317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 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: [{
@@ -1227,6 +2380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], configuratorEmptyMeasuresText: [{
                 type: Input
+            }], chipMenuIconTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -1238,7 +2393,7 @@ class LocalizedMessagesDirective extends PivotGridMessages {
         this.service = service;
     }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
 LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]", providers: [
         {
             provide: PivotGridMessages,
@@ -1256,7 +2411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     selector: '[kendoPivotGridLocalizedMessages]'
                 }]
-        }], ctorParameters: function () { return [{ type: i2.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 const DEFAULT_LOADER_SETTINGS = {
     type: 'converging-spinner',
@@ -1271,10 +2426,12 @@ const DEFAULT_CONFIGURATOR_SETTINGS = {
  * Represents the Kendo UI PivotGrid component for Angular.
  */
 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';
         /**
@@ -1283,6 +2440,12 @@ 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();
@@ -1358,6 +2521,12 @@ 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(() => {
@@ -1370,15 +2539,29 @@ 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
@@ -1386,16 +2569,38 @@ 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: 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: PivotGridDataService }, { token: i1.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"
@@ -1485,10 +2690,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"
@@ -1523,10 +2733,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: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["horizontal"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i6.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: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["horizontal", "sort", "filter"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i7.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: [{
@@ -1534,6 +2744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     providers: [
                         PivotGridDataService,
                         LocalizationService,
+                        PivotLocalizationService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.pivotgrid'
@@ -1629,10 +2840,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"
@@ -1667,7 +2883,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>
    `,
@@ -1681,7 +2897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }
    `]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i3.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-d-flex']
             }, {
@@ -1723,16 +2939,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], columnHeadersWidth: [{
                 type: Input
+            }], navigable: [{
+                type: Input
             }] } });
 
 /**
  * @hidden
  */
 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;
     }
 }
 
@@ -1784,6 +3004,10 @@ 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.
@@ -1805,7 +3029,7 @@ 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);
@@ -1831,16 +3055,16 @@ 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;
@@ -1859,7 +3083,9 @@ 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) {
@@ -1886,7 +3112,7 @@ class PivotBaseBindingDirective {
     ;
 }
 PivotBaseBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotBaseBindingDirective, deps: [{ token: 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: [{
@@ -1898,6 +3124,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: [{
@@ -1935,13 +3165,13 @@ 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,
@@ -1949,7 +3179,7 @@ class PivotLocalBindingDirective extends PivotBaseBindingDirective {
             rowAxes: rowAxes,
             columnAxes: columnAxes,
             measures: measuresSettings,
-            sort: [],
+            sort: sort,
             fields: bindingFields
         });
         this.updateDataServiceFields();
@@ -1990,18 +3220,20 @@ 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;
@@ -2160,7 +3392,7 @@ class CustomMessagesComponent extends PivotGridMessages {
         return true;
     }
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomMessagesComponent, selector: "kendo-pivotgrid-messages", providers: [
         {
             provide: PivotGridMessages,
@@ -2179,16 +3411,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: 'kendo-pivotgrid-messages',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i2.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
-const IMPORTED_MODULES = [
+const MODULES = [
     CommonModule,
+    DropDownsModule,
+    InputsModule,
+    ButtonsModule
+];
+/**
+ * @hidden
+ */
+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]
+                }]
+        }] });
+
+const COMPONENTS = [
+    ChipMenuItemComponent,
+    ChipMenuSortComponent,
+    ChipMenuComponent,
+    ChipMenuFilterComponent,
+    ChipMenuItemContentTemplateDirective,
+    FilterMenuContainerComponent,
+    StringFilterMenuComponent,
+    FilterMenuDropDownListDirective,
+    ChipMenuContainerComponent,
+    ChipMenuItemDirective
+];
+/**
+ * @hidden
+ */
+class ChipMenuModule {
+    static exports() {
+        return [
+            ChipMenuItemComponent,
+            ChipMenuSortComponent,
+            ChipMenuContainerComponent,
+            ChipMenuItemDirective,
+            ChipMenuComponent
+        ];
+    }
+}
+ChipMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChipMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuModule, declarations: [ChipMenuItemComponent,
+        ChipMenuSortComponent,
+        ChipMenuComponent,
+        ChipMenuFilterComponent,
+        ChipMenuItemContentTemplateDirective,
+        FilterMenuContainerComponent,
+        StringFilterMenuComponent,
+        FilterMenuDropDownListDirective,
+        ChipMenuContainerComponent,
+        ChipMenuItemDirective], imports: [SharedModule,
+        ReactiveFormsModule,
+        FormsModule], exports: [ChipMenuItemComponent,
+        ChipMenuSortComponent,
+        ChipMenuComponent,
+        ChipMenuFilterComponent,
+        ChipMenuItemContentTemplateDirective,
+        FilterMenuContainerComponent,
+        StringFilterMenuComponent,
+        FilterMenuDropDownListDirective,
+        ChipMenuContainerComponent,
+        ChipMenuItemDirective] });
+ChipMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuModule, imports: [[
+            SharedModule,
+            ReactiveFormsModule,
+            FormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [COMPONENTS],
+                    imports: [
+                        SharedModule,
+                        ReactiveFormsModule,
+                        FormsModule
+                    ],
+                    exports: [COMPONENTS]
+                }]
+        }] });
+
+const IMPORTED_MODULES = [
     EventsModule,
     IndicatorsModule,
-    ButtonsModule,
     TreeViewModule,
-    InputsModule,
-    DraggableModule
+    DraggableModule,
+    ChipMenuModule,
+    SharedModule
 ];
 const DECLARATIONS = [
     PivotGridComponent,
@@ -2225,13 +3553,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,