@progress/kendo-angular-pivotgrid 17.0.0-develop.20 → 17.0.0-develop.22

package/{fesm2020 → fesm2022}/progress-kendo-angular-pivotgrid.mjs

@@ -34,12 +34,15 @@ import { DialogContainerService, DialogService, WindowService, WindowContainerSe
  * @hidden
  */
 class ChipKeyboardNavigationDirective {
+    host;
+    renderer;
+    ngZone;
+    keydownSub = new Subscription();
+    reorder = new EventEmitter();
     constructor(host, renderer, ngZone) {
         this.host = host;
         this.renderer = renderer;
         this.ngZone = ngZone;
-        this.keydownSub = new Subscription();
-        this.reorder = new EventEmitter();
     }
     ngOnInit() {
         const chipElement = this.host.element.nativeElement;
@@ -73,10 +76,10 @@ class ChipKeyboardNavigationDirective {
     ngOnDestroy() {
         this.keydownSub.unsubscribe();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipKeyboardNavigationDirective, deps: [{ token: i1.ChipComponent }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChipKeyboardNavigationDirective, isStandalone: true, selector: "[kendoChipKeyboardNavigation]", outputs: { reorder: "reorder" }, ngImport: i0 });
 }
-ChipKeyboardNavigationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipKeyboardNavigationDirective, deps: [{ token: i1.ChipComponent }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ChipKeyboardNavigationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ChipKeyboardNavigationDirective, isStandalone: true, selector: "[kendoChipKeyboardNavigation]", outputs: { reorder: "reorder" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipKeyboardNavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipKeyboardNavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoChipKeyboardNavigation]',
@@ -90,31 +93,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @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();
-                }
-            }
-        };
-    }
+    hostElement;
+    renderer;
+    ngZone;
+    menuItemComponent;
+    firstFocusableElement;
+    lastFocusableElement;
     set isFirst(value) {
         if (value) {
             const focusableElement = this.chipMenuItems[0];
@@ -146,6 +130,15 @@ class ChipMenuItemDirective {
     get isLast() {
         return this._isLast;
     }
+    _isFirst = false;
+    _isLast = false;
+    chipMenuItems;
+    subs = new Subscription();
+    constructor(hostElement, renderer, ngZone) {
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+    }
     ngAfterViewInit() {
         this.chipMenuItems = this.hostElement.nativeElement.querySelectorAll('.k-columnmenu-item');
         this.chipMenuItems.forEach(el => this.renderer.setAttribute(el, 'tabindex', '0'));
@@ -153,13 +146,30 @@ class ChipMenuItemDirective {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
+    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();
+            }
+        }
+    };
     getLastColumnMenuItem() {
         return this.chipMenuItems[this.chipMenuItems.length - 1];
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuItemDirective, isStandalone: true, selector: "[kendoPivotChipMenuItem]", inputs: { menuItemComponent: ["kendoPivotChipMenuItem", "menuItemComponent"] }, ngImport: i0 });
 }
-ChipMenuItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ChipMenuItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuItemDirective, isStandalone: true, selector: "[kendoPivotChipMenuItem]", inputs: { menuItemComponent: ["kendoPivotChipMenuItem", "menuItemComponent"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPivotChipMenuItem]',
@@ -399,21 +409,32 @@ let nextPivotGridId = 0;
  * @hidden
  */
 class PivotGridDataService {
+    ngZone;
+    expandedStateChange = new EventEmitter();
+    configuratorFieldChange = new EventEmitter();
+    expandedFieldChange = new EventEmitter();
+    directive;
+    normalizedData;
+    rows;
+    columns;
+    wrapper;
+    aggregateData;
+    state;
+    columnHeaderLeaves;
+    columnHeaderRows = new BehaviorSubject([]);
+    columnHeaderCols = new BehaviorSubject([]);
+    rowHeaderLeaves;
+    rowHeaderCols = new BehaviorSubject([]);
+    rowHeaderRows = new BehaviorSubject([]);
+    valuesRows = new BehaviorSubject([]);
+    loading = new BehaviorSubject(false);
+    pivotGridId;
     constructor(ngZone) {
         this.ngZone = ngZone;
-        this.expandedStateChange = new EventEmitter();
-        this.configuratorFieldChange = new EventEmitter();
-        this.expandedFieldChange = new EventEmitter();
-        this.columnHeaderRows = new BehaviorSubject([]);
-        this.columnHeaderCols = new BehaviorSubject([]);
-        this.rowHeaderCols = new BehaviorSubject([]);
-        this.rowHeaderRows = new BehaviorSubject([]);
-        this.valuesRows = new BehaviorSubject([]);
-        this.loading = new BehaviorSubject(false);
-        this.fields = new BehaviorSubject([]);
-        this.configuredFields = new BehaviorSubject([]);
         this.pivotGridId = nextPivotGridId++;
     }
+    fields = new BehaviorSubject([]);
+    configuredFields = new BehaviorSubject([]);
     updateRowsAndCols() {
         const rowsTree = toTree((this.rows || []).slice());
         const [rowHeaderRows, rowHeaderLeaves, rowHeaderDepth, rowHeaderBreadth] = toRows(rowsTree);
@@ -434,10 +455,10 @@ class PivotGridDataService {
             });
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridDataService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridDataService });
 }
-PivotGridDataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridDataService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-PivotGridDataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridDataService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridDataService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { expandedStateChange: [{
                 type: Output
@@ -451,6 +472,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class PivotGridState {
+    columnAxes;
+    rowAxes;
+    measureAxes;
+    sort;
+    filter;
     constructor(columnAxes, rowAxes, measureAxes, sort, filter) {
         this.columnAxes = columnAxes;
         this.rowAxes = rowAxes;
@@ -464,10 +490,17 @@ class PivotGridState {
  * @hidden
  */
 class ConfiguratorService {
+    dataService;
+    configuratorInstance;
+    state;
+    draggedElement;
+    dropTargetElement;
+    cueContainer;
+    orientation;
+    configuratorStateChange = new EventEmitter();
+    closeMenu = new EventEmitter();
     constructor(dataService) {
         this.dataService = dataService;
-        this.configuratorStateChange = new EventEmitter();
-        this.closeMenu = new EventEmitter();
     }
     parseConfiguratorState(action) {
         const newState = configuratorReducer({
@@ -486,10 +519,10 @@ class ConfiguratorService {
         this.dataService.state = new PivotGridState(this.state.columnAxes, this.state.rowAxes, this.state.measureAxes, this.state.sort, this.state.filter);
         this.configuratorStateChange.emit(this.state);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfiguratorService, deps: [{ token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfiguratorService });
 }
-ConfiguratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConfiguratorService, deps: [{ token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Injectable });
-ConfiguratorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConfiguratorService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConfiguratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfiguratorService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: PivotGridDataService }]; }, propDecorators: { configuratorStateChange: [{
                 type: Output
@@ -501,13 +534,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class MenuTabbingService {
-    constructor() {
-        this.isPopupOpen = false;
-    }
+    firstFocusable;
+    lastFocusable;
+    isPopupOpen = false;
+    lastMenuItem;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuTabbingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuTabbingService });
 }
-MenuTabbingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuTabbingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MenuTabbingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuTabbingService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuTabbingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuTabbingService, decorators: [{
             type: Injectable
         }] });
 
@@ -516,26 +550,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the service that is passed to the ChipMenuFilterComponent and ChipMenuSortComponent.
  */
 class ChipMenuService {
-    constructor(menuTabbingService, configuratorService) {
-        this.configuratorService = configuratorService;
-        this.closeMenu = new EventEmitter();
-        this.sub = new Subscription();
-        this.menuTabbingService = menuTabbingService;
-        configuratorService && (this.sub = configuratorService.closeMenu.subscribe(() => this.close()));
-    }
+    configuratorService;
+    menuTabbingService;
+    closeMenu = new EventEmitter();
+    sub = new Subscription();
     /**
      * Closes the chip menu.
      */
     close() {
         this.closeMenu.emit();
     }
+    constructor(menuTabbingService, configuratorService) {
+        this.configuratorService = configuratorService;
+        this.menuTabbingService = menuTabbingService;
+        configuratorService && (this.sub = configuratorService.closeMenu.subscribe(() => this.close()));
+    }
     ngOnDestroy() {
         this.sub.unsubscribe();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuService, deps: [{ token: MenuTabbingService }, { token: ConfiguratorService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuService });
 }
-ChipMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuService, deps: [{ token: MenuTabbingService }, { token: ConfiguratorService }], target: i0.ɵɵFactoryTarget.Injectable });
-ChipMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: MenuTabbingService }, { type: ConfiguratorService }]; } });
 
@@ -543,10 +579,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class ChipMenuContainerComponent {
+    service;
+    ngZone;
+    chipMenuItems;
+    hostClass = true;
     constructor(service, ngZone) {
         this.service = service;
         this.ngZone = ngZone;
-        this.hostClass = true;
     }
     ngAfterViewInit() {
         if (!this.chipMenuItems.length) {
@@ -556,12 +595,12 @@ class ChipMenuContainerComponent {
         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: "15.2.10", ngImport: i0, type: ChipMenuContainerComponent, deps: [{ token: ChipMenuService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuContainerComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-container", host: { properties: { "class.k-grid-columnmenu-popup": "this.hostClass" } }, queries: [{ propertyName: "chipMenuItems", predicate: ChipMenuItemDirective, descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuContainerComponent, deps: [{ token: ChipMenuService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuContainerComponent, isStandalone: true, 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: "15.2.10", ngImport: i0, type: ChipMenuContainerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivot-chipmenu-container',
@@ -584,6 +623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Needed to keep the Pivot's LocalizationService reference and be able to use it inside the ChipList component.
  */
 class PivotLocalizationService {
+    localization;
     constructor(localization) {
         this.localization = localization;
     }
@@ -593,10 +633,10 @@ class PivotLocalizationService {
     get rtl() {
         return this.localization.rtl;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotLocalizationService, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotLocalizationService });
 }
-PivotLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotLocalizationService, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-PivotLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotLocalizationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotLocalizationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
@@ -604,9 +644,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class ChipMenuItemBase {
-    constructor() {
-        this.hostClass = true;
-    }
+    /**
+     * Represents the ChipMenuService class.
+     * Requires a mandatory input.
+     */
+    service;
+    hostClass = true;
     ngOnInit() {
         if (isDevMode() && !this.service) {
             throw new Error('The service input of the host chip menu components (e.g. ChipMenuSortComponent) is mandatory.');
@@ -615,10 +658,10 @@ class ChipMenuItemBase {
     close() {
         this.service.close();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 });
 }
-ChipMenuItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: ChipMenuItemBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuItemBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivot-chip-menu-item-base',
@@ -635,14 +678,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FilterMenuDropDownListDirective {
+    host;
+    filterMenuDropDownLabel;
     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;
@@ -652,10 +691,16 @@ class FilterMenuDropDownListDirective {
     ngOnDestroy() {
         this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
     }
+    keydownHandler = (e) => {
+        if (e.keyCode === Keys.Escape && this.host.isOpen) {
+            e.stopPropagation();
+            this.host.toggle(false);
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1$2.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuDropDownListDirective, isStandalone: true, selector: "[kendoFilterMenuDropDown]", inputs: { filterMenuDropDownLabel: "filterMenuDropDownLabel" }, ngImport: i0 });
 }
-FilterMenuDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1$2.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
-FilterMenuDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FilterMenuDropDownListDirective, isStandalone: true, selector: "[kendoFilterMenuDropDown]", inputs: { filterMenuDropDownLabel: "filterMenuDropDownLabel" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuDropDownListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuDropDownListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoFilterMenuDropDown]',
@@ -690,18 +735,28 @@ const stringOperators = localizeOperators({
  * Represents a string-filter menu component.
  */
 class StringFilterMenuComponent {
+    localization;
+    configuratorService;
+    fb;
+    /**
+     * The field with which the filter is associated.
+     */
+    chip;
+    menuTabbingService;
+    operators;
+    filterFormGroup;
+    get currentFilter() {
+        const filterValue = this.configuratorService.state.filter?.filter(x => x.field === this.chip.name.toString());
+        return filterValue && filterValue[0];
+    }
+    subscription = new Subscription();
     constructor(localization, configuratorService, fb) {
         this.localization = localization;
         this.configuratorService = configuratorService;
         this.fb = fb;
-        this.subscription = new Subscription();
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onTouched = () => { };
-    }
-    get currentFilter() {
-        const filterValue = this.configuratorService.state.filter?.filter(x => x.field === this.chip.name.toString());
-        return filterValue && filterValue[0];
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
     registerOnChange(fn) {
         this.filterFormGroup.valueChanges.subscribe(fn);
     }
@@ -728,13 +783,12 @@ class StringFilterMenuComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-}
-StringFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: PivotLocalizationService }, { token: ConfiguratorService }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StringFilterMenuComponent, isStandalone: true, selector: "kendo-pivot-string-filter-menu", inputs: { chip: "chip", menuTabbingService: "menuTabbingService" }, providers: [{
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => StringFilterMenuComponent),
-            multi: true
-        }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: PivotLocalizationService }, { token: ConfiguratorService }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StringFilterMenuComponent, isStandalone: true, 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
@@ -751,7 +805,8 @@ StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
                 />
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }, { kind: "directive", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivot-string-filter-menu',
@@ -795,12 +850,25 @@ const validFilter = ({ value, operator }) => !isNullOrEmptyString(value) || isNo
  * @hidden
  */
 class FilterMenuContainerComponent {
+    localization;
+    cd;
+    configuratorService;
+    close = new EventEmitter();
+    /**
+     * The field with which the filter is associated.
+     */
+    chip;
+    isLast;
+    isExpanded;
+    menuTabbingService;
+    actionsClass = 'k-action-buttons k-button-group';
+    filterDescriptorValue;
+    resetButton;
+    filterButton;
     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;
     }
     ngAfterViewChecked() {
@@ -853,11 +921,10 @@ class FilterMenuContainerComponent {
     messageFor(localizationToken) {
         return this.localization.get(localizationToken);
     }
-}
-FilterMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: PivotLocalizationService }, { token: i0.ChangeDetectorRef }, { token: MenuTabbingService }, { token: ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
-FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FilterMenuContainerComponent, isStandalone: true, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: PivotLocalizationService }, { token: i0.ChangeDetectorRef }, { token: MenuTabbingService }, { token: ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuContainerComponent, isStandalone: true, 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">
@@ -884,7 +951,8 @@ FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             </div>
         </form>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: ["chip", "menuTabbingService"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -948,13 +1016,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Provides an option for specifying the content of a chip menu item..
  */
 class ChipMenuItemContentTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuItemContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuItemContentTemplateDirective, isStandalone: true, selector: "[kendoPivotChipMenuItemContentTemplate]", ngImport: i0 });
 }
-ChipMenuItemContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuItemContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ChipMenuItemContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuItemContentTemplateDirective, isStandalone: true, selector: "[kendoPivotChipMenuItemContentTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuItemContentTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuItemContentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPivotChipMenuItemContentTemplate]',
@@ -970,24 +1039,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  *
  */
 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';
-    }
+    /**
+     * Fires when the item is clicked.
+     */
+    itemClick = new EventEmitter();
+    /**
+     * Fires when the content is expanded.
+     */
+    expand = new EventEmitter();
+    /**
+     * Fires when the content is collapsed.
+     */
+    collapse = new EventEmitter();
+    /**
+     * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons)
+     * that will be rendered for the item.
+     */
+    icon;
+    /**
+     * Defines an SVGIcon to be rendered for the column menu items.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    svgIcon;
+    /**
+     * Specifies the item text.
+     */
+    text;
+    /**
+     * Specifies if the item is selected.
+     */
+    selected;
+    /**
+     * Specifies if the item is expanded.
+     */
+    expanded;
+    /**
+     * Specified if the item is disabled
+     */
+    disabled;
+    contentTemplate;
     get iconClass() {
         return `k-i-${this.icon}`;
     }
+    contentState = 'collapsed';
     ngOnChanges(changes) {
         if (changes.expanded) {
             this.updateContentState();
@@ -1009,9 +1103,8 @@ class ChipMenuItemComponent {
     updateContentState() {
         this.contentState = this.expanded ? 'expanded' : 'collapsed';
     }
-}
-ChipMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuItemComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", expanded: "expanded", disabled: "disabled" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ChipMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuItemComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", expanded: "expanded", disabled: "disabled" }, 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)"
@@ -1033,29 +1126,30 @@ ChipMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef"></ng-container>
         <div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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'
-                }))
+            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: "15.2.10", ngImport: i0, type: ChipMenuItemComponent, decorators: [{
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuItemComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -1135,25 +1229,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the component for setting field filters in the PivotGrid.
  */
 class ChipMenuFilterComponent extends ChipMenuItemBase {
+    localization;
+    hostElement;
+    /**
+     * Fires when the content is expanded.
+     */
+    expand = new EventEmitter();
+    /**
+     * Fires when the content is collapsed.
+     */
+    collapse = new EventEmitter();
+    /**
+     * Holds current field information.
+     */
+    chip;
+    /**
+     * Specifies if the content is expanded.
+     */
+    expanded = false;
+    isLast = false;
+    actionsClass = 'k-columnmenu-actions';
+    filterSVGIcon = filterIcon;
     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';
-        this.filterSVGIcon = filterIcon;
     }
     ngAfterViewInit() {
         if (this.isLast) {
@@ -1182,9 +1282,8 @@ class ChipMenuFilterComponent extends ChipMenuItemBase {
     messageFor(localizationToken) {
         return this.localization.get(localizationToken);
     }
-}
-ChipMenuFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuFilterComponent, deps: [{ token: PivotLocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuFilterComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-filter", inputs: { chip: "chip", expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuFilterComponent, deps: [{ token: PivotLocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuFilterComponent, isStandalone: true, 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')"
@@ -1206,7 +1305,8 @@ ChipMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             </ng-template>
         </kendo-pivot-chipmenu-item>
     `, isInline: true, dependencies: [{ kind: "component", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded", "disabled"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ChipMenuItemContentTemplateDirective, selector: "[kendoPivotChipMenuItemContentTemplate]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: ["chip", "isLast", "isExpanded", "menuTabbingService", "actionsClass"], outputs: ["close"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuFilterComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivot-chipmenu-filter',
@@ -1253,21 +1353,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents a chip-menu item for reordering PivotGrid fields.
  */
 class ChipMenuReorderComponent extends ChipMenuItemBase {
-    constructor(localization, renderer, configuratorService, dataService, cdr, ngZone) {
-        super();
-        this.localization = localization;
-        this.renderer = renderer;
-        this.configuratorService = configuratorService;
-        this.dataService = dataService;
-        this.cdr = cdr;
-        this.ngZone = ngZone;
-        this.columnsIcon = columnsIcon;
-        this.rowsIcon = rowsIcon;
-        this.arrowLeftIcon = arrowLeftIcon;
-        this.arrowRightIcon = arrowRightIcon;
-        this.rtl = false;
-        this.subs = this.localization.localization.changes.subscribe(({ rtl }) => this.rtl = rtl);
-    }
+    localization;
+    renderer;
+    configuratorService;
+    dataService;
+    cdr;
+    ngZone;
+    chip;
+    columnsIcon = columnsIcon;
+    rowsIcon = rowsIcon;
+    arrowLeftIcon = arrowLeftIcon;
+    arrowRightIcon = arrowRightIcon;
+    rtl = false;
     get isColumnsField() {
         return this.configuratorService.state.columnAxes.some(item => item === this.chip);
     }
@@ -1289,6 +1386,17 @@ class ChipMenuReorderComponent extends ChipMenuItemBase {
             this.isRowsField && state.rowAxes[state.rowAxes.length - 1] === this.chip ||
             this.isMeasureField && state.measureAxes[state.measureAxes.length - 1] === this.chip;
     }
+    subs;
+    constructor(localization, renderer, configuratorService, dataService, cdr, ngZone) {
+        super();
+        this.localization = localization;
+        this.renderer = renderer;
+        this.configuratorService = configuratorService;
+        this.dataService = dataService;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.subs = this.localization.localization.changes.subscribe(({ rtl }) => this.rtl = rtl);
+    }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
@@ -1341,9 +1449,8 @@ class ChipMenuReorderComponent extends ChipMenuItemBase {
         }
         this.close();
     }
-}
-ChipMenuReorderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuReorderComponent, deps: [{ token: PivotLocalizationService }, { token: i0.Renderer2 }, { token: ConfiguratorService }, { token: PivotGridDataService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuReorderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuReorderComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-reorder", inputs: { chip: "chip" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuReorderComponent, deps: [{ token: PivotLocalizationService }, { token: i0.Renderer2 }, { token: ConfiguratorService }, { token: PivotGridDataService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuReorderComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-reorder", inputs: { chip: "chip" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-pivot-chipmenu-item
             *ngIf="!isMeasureField"
             [disabled]="isColumnsField"
@@ -1375,7 +1482,8 @@ ChipMenuReorderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
             (itemClick)="move($event, 'next')">
         </kendo-pivot-chipmenu-item>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded", "disabled"], outputs: ["itemClick", "expand", "collapse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuReorderComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuReorderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivot-chipmenu-reorder',
@@ -1425,13 +1533,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Allows the user to sort the PivotGrid.
  */
 class ChipMenuSortComponent extends ChipMenuItemBase {
+    localization;
+    renderer;
+    configuratorService;
+    chip;
+    sortAscSVGIcon = sortAscSmallIcon;
+    sortDescSVGIcon = sortDescSmallIcon;
     constructor(localization, renderer, configuratorService) {
         super();
         this.localization = localization;
         this.renderer = renderer;
         this.configuratorService = configuratorService;
-        this.sortAscSVGIcon = sortAscSmallIcon;
-        this.sortDescSVGIcon = sortDescSmallIcon;
     }
     get sortedAsc() {
         const descriptor = this.descriptor;
@@ -1460,9 +1572,8 @@ class ChipMenuSortComponent extends ChipMenuItemBase {
     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: "15.2.10", ngImport: i0, type: ChipMenuSortComponent, deps: [{ token: PivotLocalizationService }, { token: i0.Renderer2 }, { token: ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuSortComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-sort", inputs: { chip: "chip" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuSortComponent, deps: [{ token: PivotLocalizationService }, { token: i0.Renderer2 }, { token: ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuSortComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-sort", inputs: { chip: "chip" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-pivot-chipmenu-item
             [text]="messageFor('fieldMenuSortAscendingItemLabel')"
             icon="sort-asc-small"
@@ -1478,7 +1589,8 @@ ChipMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             [selected]="sortedDesc">
         </kendo-pivot-chipmenu-item>
     `, isInline: true, dependencies: [{ kind: "component", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded", "disabled"], outputs: ["itemClick", "expand", "collapse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuSortComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuSortComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivot-chipmenu-sort',
@@ -1519,6 +1631,10 @@ const contains = (node, predicate) => {
  * Arguments for the `close` event of the chip-menu popup.
  */
 class PopupCloseEvent extends PreventableEvent {
+    /**
+     * The original DOM event that causes the popup to close.
+     */
+    originalEvent;
     /**
      * @hidden
      */
@@ -1533,18 +1649,25 @@ const DEFAULT_POPUP_CLASS = 'k-grid-filter-popup';
  * The service that is used for the popups of the chip menus.
  */
 class SinglePopupService {
+    popupService;
+    renderer;
+    ngZone;
+    localization;
+    /**
+     * Fires when the chip menus are about to close because the user clicked outside their popups.
+     * Used to prevent the popup from closing.
+     */
+    onClose = new Subject();
+    removeClick;
+    pointerEventsSub = new Subscription();
+    popupRef;
+    scrollSubscription = new Subscription();
+    canClosePopup;
     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) {
         const toggle = isPresent(popupRef) && this.popupRef === popupRef;
@@ -1611,10 +1734,10 @@ class SinglePopupService {
             }));
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SinglePopupService, deps: [{ token: i1$3.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PivotLocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SinglePopupService });
 }
-SinglePopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SinglePopupService, deps: [{ token: i1$3.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PivotLocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-SinglePopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SinglePopupService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SinglePopupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SinglePopupService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$3.PopupService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: PivotLocalizationService }]; } });
 
@@ -1626,14 +1749,26 @@ const POPUP_CLASS = 'k-column-menu';
  * Represents the field chip menu component.
  */
 class ChipMenuComponent {
+    popupService;
+    localization;
+    service;
+    renderer;
+    /**
+     * The Configurator field instance to control with the menu.
+     */
+    chip;
+    tabIndex = '-1';
+    isMeasureField = false;
+    anchor;
+    template;
+    menuItemSVGIcon = moreVerticalIcon;
+    popupRef;
+    closeSubscription;
     constructor(popupService, localization, service, renderer) {
         this.popupService = popupService;
         this.localization = localization;
         this.service = service;
         this.renderer = renderer;
-        this.tabIndex = '-1';
-        this.isMeasureField = false;
-        this.menuItemSVGIcon = moreVerticalIcon;
         this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
     }
     ngOnDestroy() {
@@ -1662,12 +1797,11 @@ class ChipMenuComponent {
         const chipName = this.chip.name.toString();
         return replaceMessagePlaceholder(localizationMsg, 'fieldName', chipName);
     }
-}
-ChipMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuComponent, deps: [{ token: SinglePopupService }, { token: PivotLocalizationService }, { token: ChipMenuService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuComponent, isStandalone: true, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex", isMeasureField: "isMeasureField", anchor: "anchor" }, providers: [
-        ChipMenuService,
-        MenuTabbingService
-    ], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuComponent, deps: [{ token: SinglePopupService }, { token: PivotLocalizationService }, { token: ChipMenuService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipMenuComponent, isStandalone: true, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex", isMeasureField: "isMeasureField", anchor: "anchor" }, providers: [
+            ChipMenuService,
+            MenuTabbingService
+        ], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
         <ng-template #template>
             <kendo-pivot-chipmenu-container
                 (keydown.escape)="close()"
@@ -1697,7 +1831,8 @@ ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             </kendo-pivot-chipmenu-container>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { kind: "directive", type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }, { kind: "component", type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ChipMenuReorderComponent, selector: "kendo-pivot-chipmenu-reorder", inputs: ["chip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipMenuComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -1768,6 +1903,7 @@ const append = (element, container) => {
  * @hidden
  */
 class DropCueService {
+    dom;
     create() {
         this.dom = document.createElement('span');
         const wrapper = document.createElement('div');
@@ -1811,10 +1947,10 @@ class DropCueService {
         }
         this.dom.style.display = '';
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropCueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropCueService });
 }
-DropCueService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropCueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DropCueService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropCueService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropCueService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropCueService, decorators: [{
             type: Injectable
         }] });
 
@@ -1822,6 +1958,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class DraggableChipDirective {
+    draggable;
+    element;
+    zone;
+    service;
+    cue;
+    renderer;
+    get pointerEvents() {
+        return this.drag ? 'none' : undefined;
+    }
+    touchActions = 'none';
+    item;
+    initialX = {};
+    initialY = {};
+    drag;
+    invalidTarget = false;
+    subs = new Subscription();
     constructor(draggable, element, zone, service, cue, renderer) {
         this.draggable = draggable;
         this.element = element;
@@ -1829,14 +1981,6 @@ class DraggableChipDirective {
         this.service = service;
         this.cue = cue;
         this.renderer = renderer;
-        this.touchActions = 'none';
-        this.initialX = {};
-        this.initialY = {};
-        this.invalidTarget = false;
-        this.subs = new Subscription();
-    }
-    get pointerEvents() {
-        return this.drag ? 'none' : undefined;
     }
     ngOnInit() {
         this.subs.add(this.draggable.kendoPress
@@ -1906,10 +2050,10 @@ class DraggableChipDirective {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i1$4.DraggableDirective, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: ConfiguratorService }, { token: DropCueService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DraggableChipDirective, isStandalone: true, selector: "[kendoChipDraggable]", inputs: { item: "item" }, host: { properties: { "style.pointerEvents": "this.pointerEvents", "style.touch-action": "this.touchActions" } }, ngImport: i0 });
 }
-DraggableChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i1$4.DraggableDirective, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: ConfiguratorService }, { token: DropCueService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-DraggableChipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DraggableChipDirective, isStandalone: true, selector: "[kendoChipDraggable]", inputs: { item: "item" }, host: { properties: { "style.pointerEvents": "this.pointerEvents", "style.touch-action": "this.touchActions" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DraggableChipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableChipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoChipDraggable]',
@@ -1931,13 +2075,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class DropTargetDirective {
+    element;
+    configuratorService;
+    cue;
+    renderer;
+    zone;
+    item;
+    axes;
+    elementType;
+    elementSectionType;
+    targetElement;
+    nextChipOffset;
+    subs = new Subscription();
     constructor(element, configuratorService, cue, renderer, zone) {
         this.element = element;
         this.configuratorService = configuratorService;
         this.cue = cue;
         this.renderer = renderer;
         this.zone = zone;
-        this.subs = new Subscription();
     }
     ngOnInit() {
         const element = this.element.nativeElement;
@@ -2079,10 +2234,10 @@ class DropTargetDirective {
             }
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropTargetDirective, deps: [{ token: i0.ElementRef }, { token: ConfiguratorService }, { token: DropCueService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DropTargetDirective, isStandalone: true, selector: "[kendoDropTarget]", inputs: { item: "item", axes: "axes" }, ngImport: i0 });
 }
-DropTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropTargetDirective, deps: [{ token: i0.ElementRef }, { token: ConfiguratorService }, { token: DropCueService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-DropTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropTargetDirective, isStandalone: true, selector: "[kendoDropTarget]", inputs: { item: "item", axes: "axes" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropTargetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropTargetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropTarget]',
@@ -2099,44 +2254,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the Kendo UI PivotGrid Configurator component for Angular.
  */
 class PivotGridConfiguratorComponent {
+    dataService;
+    localization;
+    configuratorService;
+    cdr;
+    zone;
+    hostClass = true;
+    hostAriaRole = 'dialog';
+    get headerTextId() {
+        return `k-pivotgrid-${this.dataService.pivotGridId}-configurator-header`;
+    }
+    orientation = 'vertical';
+    sort = new Array();
+    filter;
+    navigation;
+    close = new EventEmitter();
+    treeView;
+    columnsList;
+    rowsList;
+    originalState;
+    state;
+    fields;
+    checked = [];
+    get isHorizontal() {
+        return this.orientation === 'horizontal';
+    }
+    subs = new Subscription();
+    /**
+     * A function which determines if a specific node has child nodes.
+     */
+    hasChildren = (node) => !('hierarchyUniqueName' in node) && !('aggregator' in node);
     constructor(dataService, localization, configuratorService, cdr, zone) {
         this.dataService = dataService;
         this.localization = localization;
         this.configuratorService = configuratorService;
         this.cdr = cdr;
         this.zone = zone;
-        this.hostClass = true;
-        this.hostAriaRole = 'dialog';
-        this.orientation = 'vertical';
-        this.sort = new Array();
-        this.close = new EventEmitter();
-        this.checked = [];
-        this.subs = new Subscription();
-        /**
-         * A function which determines if a specific node has child nodes.
-         */
-        this.hasChildren = (node) => !('hierarchyUniqueName' in node) && !('aggregator' in node);
-        this.checkItemBy = (context) => {
-            return context.dataItem;
-        };
-        /**
-         * A function which provides the child nodes for a given parent node.
-         */
-        this.children = (node) => {
-            if (this.dataService.directive.type === 'olap') {
-                const observable = from(this.dataService.directive.fetchChildren(node, this.fields));
-                return observable.pipe(mergeMap(value => of(value)));
-            }
-            return of(node.children);
-        };
         this.configuratorService.configuratorInstance = this;
     }
-    get headerTextId() {
-        return `k-pivotgrid-${this.dataService.pivotGridId}-configurator-header`;
-    }
-    get isHorizontal() {
-        return this.orientation === 'horizontal';
-    }
     ngOnInit() {
         this.subs.add(this.dataService.fields
             .subscribe(res => {
@@ -2273,6 +2428,9 @@ class PivotGridConfiguratorComponent {
         ].some((h) => (h === f.uniqueName || h === f.defaultHierarchy)));
         this.checked = checked;
     }
+    checkItemBy = (context) => {
+        return context.dataItem;
+    };
     /**
      * Determines if a checkbox should be rendered.
      */
@@ -2282,6 +2440,16 @@ class PivotGridConfiguratorComponent {
             || (node.type === 2)
             || node.uniqueName === '[KPIs]');
     }
+    /**
+     * A function which provides the child nodes for a given parent node.
+     */
+    children = (node) => {
+        if (this.dataService.directive.type === 'olap') {
+            const observable = from(this.dataService.directive.fetchChildren(node, this.fields));
+            return observable.pipe(mergeMap(value => of(value)));
+        }
+        return of(node.children);
+    };
     /**
      * Check if the newly loaded child nodes have checked items.
      * (Only for OLAP data-binding directive)
@@ -2368,13 +2536,12 @@ class PivotGridConfiguratorComponent {
         this.cdr.detectChanges();
         this[`${targetCollectionName}sList`]?.chips.last.focus();
     }
-}
-PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: PivotGridDataService }, { token: i1$1.LocalizationService }, { token: ConfiguratorService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotGridConfiguratorComponent, isStandalone: true, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter", navigation: "navigation" }, outputs: { close: "close" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass", "attr.role": "this.hostAriaRole", "attr.aria-labelledby": "this.headerTextId" } }, providers: [
-        ConfiguratorService,
-        DropCueService,
-        SinglePopupService
-    ], viewQueries: [{ propertyName: "treeView", first: true, predicate: TreeViewComponent, descendants: true }, { propertyName: "columnsList", first: true, predicate: ["columnsChiplist"], descendants: true }, { propertyName: "rowsList", first: true, predicate: ["rowsChiplist"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: PivotGridDataService }, { token: i1$1.LocalizationService }, { token: ConfiguratorService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PivotGridConfiguratorComponent, isStandalone: true, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter", navigation: "navigation" }, outputs: { close: "close" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass", "attr.role": "this.hostAriaRole", "attr.aria-labelledby": "this.headerTextId" } }, providers: [
+            ConfiguratorService,
+            DropCueService,
+            SinglePopupService
+        ], viewQueries: [{ propertyName: "treeView", first: true, predicate: TreeViewComponent, descendants: true }, { propertyName: "columnsList", first: true, predicate: ["columnsChiplist"], descendants: true }, { propertyName: "rowsList", first: true, predicate: ["rowsChiplist"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div 
             class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
             [ngClass]="{
@@ -2567,7 +2734,8 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             </div>
         </div>
    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "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"] }, { kind: "directive", type: ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { kind: "directive", type: CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { kind: "component", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarSettings", "selected", "removable", "removeIcon", "removeSvgIcon", "hasMenu", "menuIcon", "menuSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "menuToggle", "contentClick"] }, { kind: "directive", type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }, { kind: "component", type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex", "isMeasureField", "anchor"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivotgrid-configurator',
@@ -2810,6 +2978,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * The event data for the ExpandChangeEvent
  */
 class ExpandChangeEvent extends PreventableEvent {
+    /**
+     * The current row axes configuration, resulting from the end user interaction.
+     */
+    rowAxes;
+    /**
+     * The current column axes configuration, resulting from the end user interaction.
+     */
+    columnAxes;
+    /**
+     * The measure axes configuration.
+     */
+    measureAxes;
     /**
      * @hidden
      */
@@ -2823,6 +3003,26 @@ class ExpandChangeEvent extends PreventableEvent {
  * The event data for the ConfigurationChangeEvent
  */
 class ConfigurationChangeEvent extends PreventableEvent {
+    /**
+     * The current row axes configuration, resulting from the end user interaction.
+     */
+    rowAxes;
+    /**
+     * The current column axes configuration, resulting from the end user interaction.
+     */
+    columnAxes;
+    /**
+     * The measure axes configuration.
+     */
+    measureAxes;
+    /**
+     * The sorting configuration.
+     */
+    sort;
+    /**
+     * The filtering configuration.
+     */
+    filter;
     /**
      * @hidden
      */
@@ -2837,41 +3037,49 @@ class ConfigurationChangeEvent extends PreventableEvent {
  * A directive which binds the PivotGrid to an array of objects.
  */
 class PivotBaseBindingDirective {
+    dataService;
+    zone;
+    /**
+     * Represents the column axes configuration of the PivotGrid.
+     */
+    columnAxes = [];
+    /**
+     * Represents the row axes configuration of the PivotGrid.
+     */
+    rowAxes = [];
+    /**
+     * Represents the measure axes configuration of the PivotGrid.
+     */
+    measureAxes = [];
+    /**
+     * Represents the initial sorted state of the PivotGrid.
+     */
+    sort = [];
+    /**
+     * Represents the initial filtered state of the PivotGrid.
+     */
+    filter;
+    /**
+     * 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.
+     */
+    expandChange = new EventEmitter();
+    /**
+     * Fires when the Configurator Apply button is pressed. The event is preventable.
+     * If you prevent the event, the PivotGrid will not be rerendered with the new state, resulting from the configuration changes, applied through the configurator interface.
+     */
+    configurationChange = new EventEmitter();
+    /**
+     * Fires each time when new data is loaded and transformed to show aggregated values.
+     * The event fires upon initialization and on user interaction that changes the state of the PivotGrid.
+     */
+    dataLoaded = new EventEmitter();
+    dataState;
+    configuratorFields;
+    subs = new Subscription();
     constructor(dataService, zone) {
         this.dataService = dataService;
         this.zone = zone;
-        /**
-         * Represents the column axes configuration of the PivotGrid.
-         */
-        this.columnAxes = [];
-        /**
-         * Represents the row axes configuration of the PivotGrid.
-         */
-        this.rowAxes = [];
-        /**
-         * 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.
-         */
-        this.expandChange = new EventEmitter();
-        /**
-         * Fires when the Configurator Apply button is pressed. The event is preventable.
-         * If you prevent the event, the PivotGrid will not be rerendered with the new state, resulting from the configuration changes, applied through the configurator interface.
-         */
-        this.configurationChange = new EventEmitter();
-        /**
-         * Fires each time when new data is loaded and transformed to show aggregated values.
-         * The event fires upon initialization and on user interaction that changes the state of the PivotGrid.
-         */
-        this.dataLoaded = new EventEmitter();
-        this.subs = new Subscription();
     }
     ngOnInit() {
         this.dataService.state = new PivotGridState(this.columnAxes, this.rowAxes, this.measureAxes, this.sort, this.filter);
@@ -2944,10 +3152,10 @@ class PivotBaseBindingDirective {
         this[axes] = newHeaders;
         this.loadData(this.dataService.state);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotBaseBindingDirective, deps: [{ token: PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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 });
 }
-PivotBaseBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotBaseBindingDirective, deps: [{ token: PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-PivotBaseBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: PivotBaseBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotBaseBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-base-binding-directive'
@@ -2978,10 +3186,21 @@ const stringSeparator = '&';
  * A directive which binds the PivotGrid to local data ([see example]({% slug directives_databinding_local_pivotgrid %})).
  */
 class PivotLocalBindingDirective extends PivotBaseBindingDirective {
+    /**
+     * The array of data which will be used to populate the PivotGrid.
+     */
+    data;
+    /**
+     * Represents the dimensions object of the PivotGrid.
+     */
+    dimensions;
+    /**
+     * Represents the measures collection of the PivotGrid.
+     */
+    measures;
+    type = 'local';
     constructor(dataService, zone) {
         super(dataService, zone);
-        this.type = 'local';
-        this.createAxisSettings = (key) => ({ key, ...this.dimensions[key] });
     }
     ngOnChanges(changes) {
         if (anyChanged(['data', 'dimensions', 'columnAxes', 'rowAxes', 'measureAxes', 'measures'], changes)) {
@@ -3018,13 +3237,14 @@ class PivotLocalBindingDirective extends PivotBaseBindingDirective {
         });
         this.updateDataServiceFields();
     }
+    createAxisSettings = (key) => ({ key, ...this.dimensions[key] });
     getRootAxes(axes) {
         return Array.from(rootFields(axes).keys()).join(stringSeparator);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotLocalBindingDirective, deps: [{ token: PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PivotLocalBindingDirective, isStandalone: true, selector: "[kendoPivotLocalBinding]", inputs: { data: ["kendoPivotLocalBinding", "data"], dimensions: "dimensions", measures: "measures" }, exportAs: ["kendoPivotLocalBinding"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-PivotLocalBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotLocalBindingDirective, deps: [{ token: PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-PivotLocalBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PivotLocalBindingDirective, isStandalone: true, selector: "[kendoPivotLocalBinding]", inputs: { data: ["kendoPivotLocalBinding", "data"], dimensions: "dimensions", measures: "measures" }, exportAs: ["kendoPivotLocalBinding"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotLocalBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotLocalBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPivotLocalBinding]',
@@ -3044,9 +3264,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * A directive which binds the PivotGrid to data using an Online Analytical Processing (OLAP) service ([see example]({% slug directives_databinding_remote_pivotgrid %})).
  */
 class PivotOLAPBindingDirective extends PivotBaseBindingDirective {
+    /**
+     * The OLAP service endpoint where the data is processed and retrieved to render the pivot table.
+     */
+    url;
+    /**
+     * The cube name that is used to retrieve data for the pivot table rendering.
+     */
+    cube;
+    /**
+     * The database name that is used to retrieve the data from the specified connection string.
+     */
+    catalog;
+    type = 'olap';
     constructor(dataService, zone) {
         super(dataService, zone);
-        this.type = 'olap';
     }
     ngOnChanges(changes) {
         if (anyChanged(['url', 'cube', 'catalog', 'columnAxes', 'rowAxes', 'measureAxes'], changes)) {
@@ -3187,10 +3419,10 @@ class PivotOLAPBindingDirective extends PivotBaseBindingDirective {
         };
         return fetchDiscover({ url: this.url }, options);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotOLAPBindingDirective, deps: [{ token: PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PivotOLAPBindingDirective, isStandalone: true, selector: "[kendoPivotOLAPBinding]", inputs: { url: "url", cube: "cube", catalog: "catalog" }, exportAs: ["kendoPivotOLAPBinding"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-PivotOLAPBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotOLAPBindingDirective, deps: [{ token: PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-PivotOLAPBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PivotOLAPBindingDirective, isStandalone: true, selector: "[kendoPivotOLAPBinding]", inputs: { url: "url", cube: "cube", catalog: "catalog" }, exportAs: ["kendoPivotOLAPBinding"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotOLAPBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotOLAPBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPivotOLAPBinding]',
@@ -3209,10 +3441,207 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class PivotGridMessages extends ComponentMessages {
+    /**
+     * The text content of the filter item in the column and row fields menu.
+     */
+    fieldMenuFilterItemLabel;
+    /**
+     * The text content of the sort ascending item in the column and row fields menu.
+     */
+    fieldMenuSortAscendingItemLabel;
+    /**
+     * The text content of the sort descending item in the column and row fields menu.
+     */
+    fieldMenuSortDescendingItemLabel;
+    /**
+     * The label of the filter input.
+     *
+     * The filter input label consists of a two-part message - the name(s) of the fields and a localizable string.
+     * For fields named '[Geography][City]', the default label will be 'Geography City Filter'.
+     *
+     * To allow reordering the field name(s) and the localizable part, the filterInputLabel accepts a string with a
+     * placeholder for the fields - e.g. 'filter for {fields}'. The '{fields}' placeholder will be replaced
+     * internally with the current field(s) name(s), and the resulting label will be rendered as 'filter for Geography City'.
+     *
+     * @example
+     *
+     * ```ts-no-run
+     *      <kendo-pivotgrid>
+     *          <kendo-pivotgrid-messages
+     *              filterInputLabel="filter for {fields}"
+     *          >
+     *          </kendo-pivotgrid-messages>
+     *      </kendo-pivotgrid>
+     *  ```
+     */
+    filterInputLabel;
+    /**
+     * The label of the filter operators DropDownList.
+     *
+     * The label consists of a two-part message - the name(s) of the fields and a localizable string.
+     * For fields named '[Geography][City]', the default label will be 'Geography City Filter Operators'.
+     *
+     * To allow reordering the field name(s) and the localizable part, the filterMenuOperatorsDropDownLabel accepts a string with a
+     * placeholder for the fields - e.g. 'filter operators for {fields}'. The '{fields}' placeholder will be replaced
+     * internally with the current field(s) name(s), and the resulting label will be rendered as 'filter operators for Geography City'.
+     *
+     * @example
+     *
+     * ```ts-no-run
+     *      <kendo-pivotgrid>
+     *          <kendo-pivotgrid-messages
+     *              filterMenuOperatorsDropDownLabel="filter operators for {fields}"
+     *          >
+     *          </kendo-pivotgrid-messages>
+     *      </kendo-pivotgrid>
+     *  ```
+     */
+    filterOperatorsDropDownLabel;
+    /**
+     * The text of the `Equal` (**Is equal to**) filter operator.
+     */
+    filterEqOperator;
+    /**
+     * The text of the `NotEqual` (**Is not equal to**) filter operator.
+     */
+    filterNotEqOperator;
+    /**
+     * The text of the `IsNull` (**Is null**) filter operator.
+     */
+    filterIsNullOperator;
+    /**
+     * The text of the `IsNotNull` (**Is not null**) filter operator.
+     */
+    filterIsNotNullOperator;
+    /**
+     * The text of the `IsEmpty` (**Is empty**) filter operator.
+     */
+    filterIsEmptyOperator;
+    /**
+     * The text of the `IsNotEmpty` (**Is not empty**) filter operator.
+     */
+    filterIsNotEmptyOperator;
+    /**
+     * The text of the `StartsWith` (**Starts with**) filter operator.
+     */
+    filterStartsWithOperator;
+    /**
+     * The text of the `Contains` (**Contains**) filter operator.
+     */
+    filterContainsOperator;
+    /**
+     * The text of the `DoesNotContain` (**Does not contain**) filter operator.
+     */
+    filterNotContainsOperator;
+    /**
+     * The text of the `EndsWith` (**Ends with**) string filter operator.
+     */
+    filterEndsWithOperator;
+    /**
+     * The text of the **Filter** button.
+     */
+    filterFilterButton;
+    /**
+     * The text of the **Clear filter** button.
+     */
+    filterClearButton;
+    /**
+     * The loading text.
+     *
+     * > The `loading` property is part of the accessibility support of the PivotGrid.
+     * Its value is detectable by screen readers and is not otherwise visible.
+     */
+    loading;
+    /**
+     * The value of the aria-label attribute placed on the PivotGrid focusable empty cell element.
+     */
+    emptyCellLabel;
+    /**
+     * The text content of the button that opens and closes the PivotGrid configurator.
+     */
+    configuratorButtonText;
+    /**
+     * The text content of the PivotGrid configurator title element.
+     */
+    configuratorHeaderText;
+    /**
+     * The text content of the PivotGrid configurator fields section title element.
+     */
+    configuratorFieldsText;
+    /**
+     * The text content of the PivotGrid configurator columns section title element.
+     */
+    configuratorColumnsText;
+    /**
+     * The text content of the PivotGrid configurator rows section title element.
+     */
+    configuratorRowsText;
+    /**
+     * The text content of the PivotGrid configurator values section title element.
+     */
+    configuratorValuesText;
+    /**
+     * The text content of the PivotGrid configurator Cancel button.
+     */
+    configuratorCancelButtonText;
+    /**
+     * The text content of the PivotGrid configurator Apply button.
+     */
+    configuratorApplyButtonText;
+    /**
+     * The text content of the PivotGrid configurator empty rows container.
+     */
+    configuratorEmptyRowsText;
+    /**
+     * The text content of the PivotGrid configurator empty columns container.
+     */
+    configuratorEmptyColumnsText;
+    /**
+     * The text content of the PivotGrid configurator empty measures container.
+     */
+    configuratorEmptyMeasuresText;
+    /**
+     * The text content of the Move to Columns item in the column and row fields menu.
+     */
+    fieldMenuMoveToColumnsItem;
+    /**
+     * The text content of the Move to Rows item in the column and row fields menu.
+     */
+    fieldMenuMoveToRowsItem;
+    /**
+     * The text content of the Move as previous item in the column, row, and value fields menu.
+     */
+    fieldMenuMovePreviousItem;
+    /**
+     * The text content of the Move as next item in the column, row, and value fields menu.
+     */
+    fieldMenuMoveNextItem;
+    /**
+     * The title of the chip menu icon.
+     *
+     * The title consists of a two-part message - the name of the chip and a localizable string.
+     * For a field named 'Product', the default title will be 'Product Field Menu'.
+     *
+     * To allow reordering the field name and the localizable part, the chipMenu accepts a string with a
+     * placeholder for the chip name - e.g. 'chip for {fieldName}'. The '{fieldName}' placeholder will be replaced
+     * internally with the current chip name, and the resulting title will be rendered as 'Product Field Menu'.
+     *
+     * @example
+     *
+     * ```ts-no-run
+     *      <kendo-pivotgrid>
+     *          <kendo-pivotgrid-messages
+     *              chipMenuIconTitle="'{fieldName} Field Menu'"
+     *          >
+     *          </kendo-pivotgrid-messages>
+     *      </kendo-pivotgrid>
+     *  ```
+     */
+    chipMenuIconTitle;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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", fieldMenuMoveToColumnsItem: "fieldMenuMoveToColumnsItem", fieldMenuMoveToRowsItem: "fieldMenuMoveToRowsItem", fieldMenuMovePreviousItem: "fieldMenuMovePreviousItem", fieldMenuMoveNextItem: "fieldMenuMoveNextItem", chipMenuIconTitle: "chipMenuIconTitle" }, usesInheritance: true, ngImport: i0 });
 }
-PivotGridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-PivotGridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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", fieldMenuMoveToColumnsItem: "fieldMenuMoveToColumnsItem", fieldMenuMoveToRowsItem: "fieldMenuMoveToRowsItem", fieldMenuMovePreviousItem: "fieldMenuMovePreviousItem", fieldMenuMoveNextItem: "fieldMenuMoveNextItem", chipMenuIconTitle: "chipMenuIconTitle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridMessages, decorators: [{
             type: Directive
         }], propDecorators: { fieldMenuFilterItemLabel: [{
                 type: Input
@@ -3291,6 +3720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ([see example]({% slug globalization_pivotgrid %}#toc-custom-messages)).
  */
 class CustomMessagesComponent extends PivotGridMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -3298,15 +3728,15 @@ class CustomMessagesComponent extends PivotGridMessages {
     get override() {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-pivotgrid-messages", providers: [
+            {
+                provide: PivotGridMessages,
+                useExisting: forwardRef(() => CustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-pivotgrid-messages", providers: [
-        {
-            provide: PivotGridMessages,
-            useExisting: forwardRef(() => CustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -3325,19 +3755,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class LocalizedMessagesDirective extends PivotGridMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoPivotGridLocalizedMessages]", providers: [
+            {
+                provide: PivotGridMessages,
+                useExisting: forwardRef(() => LocalizedMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoPivotGridLocalizedMessages]", providers: [
-        {
-            provide: PivotGridMessages,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -3358,8 +3789,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729855326,
-    version: '17.0.0-develop.20',
+    publishDate: 1730103769,
+    version: '17.0.0-develop.22',
     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'
 };
 
@@ -3386,13 +3817,14 @@ const packageMetadata = {
  * ```
  */
 class CellTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridCellTemplate]", ngImport: i0 });
 }
-CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPivotGridCellTemplate]',
@@ -3422,13 +3854,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class ValueCellTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValueCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ValueCellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridValueCellTemplate]", ngImport: i0 });
 }
-ValueCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValueCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ValueCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ValueCellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridValueCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValueCellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValueCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPivotGridValueCellTemplate]',
@@ -3459,13 +3892,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class RowHeaderCellTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowHeaderCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RowHeaderCellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridRowHeaderCellTemplate]", ngImport: i0 });
 }
-RowHeaderCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RowHeaderCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-RowHeaderCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: RowHeaderCellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridRowHeaderCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RowHeaderCellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowHeaderCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPivotGridRowHeaderCellTemplate]',
@@ -3496,13 +3930,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class ColumnHeaderCellTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHeaderCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnHeaderCellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridColumnHeaderCellTemplate]", ngImport: i0 });
 }
-ColumnHeaderCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnHeaderCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnHeaderCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ColumnHeaderCellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridColumnHeaderCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnHeaderCellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHeaderCellTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPivotGridColumnHeaderCellTemplate]',
@@ -3514,53 +3949,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class ScrollableTable {
+    element;
+    handlers;
+    options;
+    startRow = 0;
+    endRow;
+    startCol = 0;
+    endCol;
+    renderedRows;
+    renderedCols;
+    total;
+    totalCols;
+    rtl;
+    visibleRows;
+    visibleCols;
+    lastKnownScrollPosition = { top: 0, left: 0 };
+    offsetFirst = 0;
+    stretcher;
+    rect;
     constructor(element, handlers, options) {
         this.element = element;
         this.handlers = handlers;
         this.options = options;
-        this.startRow = 0;
-        this.startCol = 0;
-        this.lastKnownScrollPosition = { top: 0, left: 0 };
-        this.offsetFirst = 0;
-        this.scrollHandler = (e) => {
-            const verticalDir = this.element.scrollTop - this.lastKnownScrollPosition.top;
-            const horizontalDir = Math.abs(this.element.scrollLeft) - this.lastKnownScrollPosition.left;
-            if (this.options.rowVirtualization) {
-                if (verticalDir > 0) {
-                    if (this.element.scrollTop > (this.renderedRows * this.options.itemHeight + this.offsetFirst - this.rect.height)) {
-                        this.startRow = Math.floor(this.element.scrollTop / this.options.itemHeight);
-                        this.rowVirtualizationUpdate();
-                    }
-                }
-                else {
-                    if (this.element.scrollTop <= this.offsetFirst) {
-                        this.startRow = Math.max(0, Math.ceil(this.element.scrollTop / this.options.itemHeight) - Math.ceil(this.options.renderedRows / 3));
-                        this.rowVirtualizationUpdate();
-                    }
-                }
-            }
-            if (this.options.columnVirtualization) {
-                if (horizontalDir > 0) {
-                    if (Math.abs(this.element.scrollLeft) - (Math.max(this.startCol - 1, 0) * (this.options.colWidth || 200)) > (this.options.colWidth || 200)) {
-                        this.startCol = Math.min(Math.max(Math.floor(Math.abs(this.element.scrollLeft) / this.options.itemWidth) - 1, 0), this.totalCols - this.renderedCols);
-                        this.handlers.onScroll();
-                    }
-                }
-                else {
-                    if (Math.abs(this.element.scrollLeft) <= (this.startCol + 1) * (this.options.colWidth || 200)) {
-                        this.startCol = Math.min(Math.max(Math.floor(Math.abs(this.element.scrollLeft) / this.options.itemWidth) - 1, 0), this.totalCols - this.renderedCols);
-                        this.handlers.onScroll();
-                    }
-                }
-            }
-            this.lastKnownScrollPosition = {
-                top: this.element.scrollTop,
-                left: Math.abs(this.element.scrollLeft)
-            };
-        };
-        this.scrollEndHandler = () => {
-            this.handlers.onScrollEnd();
-        };
         this.initialize();
     }
     onNewData(recalculateSize = false) {
@@ -3603,6 +4013,45 @@ class ScrollableTable {
         this.element.addEventListener('scroll', this.scrollHandler);
         this.element.addEventListener('scrollend', this.scrollEndHandler);
     }
+    scrollHandler = (e) => {
+        const verticalDir = this.element.scrollTop - this.lastKnownScrollPosition.top;
+        const horizontalDir = Math.abs(this.element.scrollLeft) - this.lastKnownScrollPosition.left;
+        if (this.options.rowVirtualization) {
+            if (verticalDir > 0) {
+                if (this.element.scrollTop > (this.renderedRows * this.options.itemHeight + this.offsetFirst - this.rect.height)) {
+                    this.startRow = Math.floor(this.element.scrollTop / this.options.itemHeight);
+                    this.rowVirtualizationUpdate();
+                }
+            }
+            else {
+                if (this.element.scrollTop <= this.offsetFirst) {
+                    this.startRow = Math.max(0, Math.ceil(this.element.scrollTop / this.options.itemHeight) - Math.ceil(this.options.renderedRows / 3));
+                    this.rowVirtualizationUpdate();
+                }
+            }
+        }
+        if (this.options.columnVirtualization) {
+            if (horizontalDir > 0) {
+                if (Math.abs(this.element.scrollLeft) - (Math.max(this.startCol - 1, 0) * (this.options.colWidth || 200)) > (this.options.colWidth || 200)) {
+                    this.startCol = Math.min(Math.max(Math.floor(Math.abs(this.element.scrollLeft) / this.options.itemWidth) - 1, 0), this.totalCols - this.renderedCols);
+                    this.handlers.onScroll();
+                }
+            }
+            else {
+                if (Math.abs(this.element.scrollLeft) <= (this.startCol + 1) * (this.options.colWidth || 200)) {
+                    this.startCol = Math.min(Math.max(Math.floor(Math.abs(this.element.scrollLeft) / this.options.itemWidth) - 1, 0), this.totalCols - this.renderedCols);
+                    this.handlers.onScroll();
+                }
+            }
+        }
+        this.lastKnownScrollPosition = {
+            top: this.element.scrollTop,
+            left: Math.abs(this.element.scrollLeft)
+        };
+    };
+    scrollEndHandler = () => {
+        this.handlers.onScrollEnd();
+    };
     recalculateSize() {
         const totalHeight = this.total * this.options.itemHeight;
         const totalWidth = this.totalCols * this.options.itemWidth;
@@ -3625,21 +4074,18 @@ class ScrollableTable {
  * @hidden
  */
 class PivotGridCellDirective {
-    constructor(hostEl, renderer, dataService) {
-        this.hostEl = hostEl;
-        this.renderer = renderer;
-        this.dataService = dataService;
-        this.cellClass = true;
-        this.chevronUpSVGIcon = chevronUpIcon;
-        this.chevronDownSVGIcon = chevronDownIcon;
-        this.handleClick = () => {
-            this.dataService.expandedStateChange.emit({
-                action: this.expanded ? 'collapse' : 'expand',
-                cell: this.kendoPivotGridCell,
-                tableType: this.tableType
-            });
-        };
-    }
+    hostEl;
+    renderer;
+    dataService;
+    cellClass = true;
+    kendoPivotGridCell;
+    tableType;
+    rowIndex;
+    colIndex;
+    customCellTemplate;
+    valueCellTemplate;
+    rowHeaderCellTemplate;
+    columnHeaderCellTemplate;
     get isNotProvidedCellTemplatePerType() {
         return (this.tableType === 'values' && !this.valueCellTemplate)
             || (this.tableType === 'rowHeader' && !this.rowHeaderCellTemplate)
@@ -3648,6 +4094,13 @@ class PivotGridCellDirective {
     get expanded() {
         return (this.kendoPivotGridCell?.hasChildren && this.kendoPivotGridCell.children.length > 0) || false;
     }
+    chevronUpSVGIcon = chevronUpIcon;
+    chevronDownSVGIcon = chevronDownIcon;
+    constructor(hostEl, renderer, dataService) {
+        this.hostEl = hostEl;
+        this.renderer = renderer;
+        this.dataService = dataService;
+    }
     ngOnInit() {
         const nativeElement = this.hostEl.nativeElement;
         this.renderer.setAttribute(nativeElement, 'rowspan', this.kendoPivotGridCell.rowSpan || 1);
@@ -3667,9 +4120,15 @@ class PivotGridCellDirective {
             }
         }
     }
-}
-PivotGridCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridCellDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotGridCellDirective, isStandalone: true, selector: "[kendoPivotGridCell]", inputs: { kendoPivotGridCell: "kendoPivotGridCell", tableType: "tableType", rowIndex: "rowIndex", colIndex: "colIndex", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate" }, host: { properties: { "class.k-pivotgrid-cell": "this.cellClass" } }, ngImport: i0, template: `
+    handleClick = () => {
+        this.dataService.expandedStateChange.emit({
+            action: this.expanded ? 'collapse' : 'expand',
+            cell: this.kendoPivotGridCell,
+            tableType: this.tableType
+        });
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridCellDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PivotGridCellDirective, isStandalone: true, selector: "[kendoPivotGridCell]", inputs: { kendoPivotGridCell: "kendoPivotGridCell", tableType: "tableType", rowIndex: "rowIndex", colIndex: "colIndex", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate" }, host: { properties: { "class.k-pivotgrid-cell": "this.cellClass" } }, ngImport: i0, template: `
             <kendo-icon-wrapper
                 *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
                 aria-hidden="true"
@@ -3730,7 +4189,8 @@ PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
             </span>
         `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridCellDirective, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridCellDirective, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -3824,13 +4284,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class PivotGridScrollService {
-    constructor() {
-        this.virtualScrolling = false;
-    }
+    virtualScrolling = false;
+    pivotGrid;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridScrollService });
 }
-PivotGridScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PivotGridScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridScrollService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridScrollService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridScrollService, decorators: [{
             type: Injectable
         }] });
 
@@ -3838,61 +4297,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class PivotGridTableComponent {
+    host;
+    dataService;
+    localization;
+    zone;
+    scrollService;
+    headerItems;
+    rows;
+    renderedRows;
+    renderedCols;
+    totalRows;
+    startRowIndex = 0;
+    startColIndex = 0;
+    rtl = false;
+    tableType;
+    colWidth;
+    customCellTemplate;
+    valueCellTemplate;
+    rowHeaderCellTemplate;
+    columnHeaderCellTemplate;
+    scrollableSettings;
+    get pivotGridId() {
+        return `kendo-pivotgrid-${this.dataService.pivotGridId}-`;
+    }
+    get columnVirtualization() {
+        return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'row';
+    }
+    get rowVirtualization() {
+        return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'column';
+    }
+    subs = new Subscription();
+    scrollable;
     constructor(host, dataService, localization, zone, scrollService) {
         this.host = host;
         this.dataService = dataService;
         this.localization = localization;
         this.zone = zone;
         this.scrollService = scrollService;
-        this.startRowIndex = 0;
-        this.startColIndex = 0;
-        this.rtl = false;
-        this.subs = new Subscription();
-        this.colsUpdateCallback = (cols) => {
-            this.renderedCols = Math.min(cols.length, this.scrollableSettings?.columns);
-            this.renderedCols && this.scrollable && (this.scrollable.totalCols = cols.length);
-            (this.scrollableSettings && this.scrollableSettings.type !== 'row') && this.scrollable?.onNewData(true);
-            this.headerItems = cols;
-            isDocumentAvailable() && !this.scrollable && this.tableType === 'values' && (this.columnVirtualization || this.rowVirtualization) && this.initScrollable();
-        };
-        this.initScrollable = () => {
-            this.scrollable = new ScrollableTable(this.host.nativeElement, {
-                onScroll: () => {
-                    this.startRowIndex = this.scrollable.startRow;
-                    this.startColIndex = this.scrollable.startCol;
-                    this.renderedRows = this.rows.slice(this.startRowIndex, this.startRowIndex + this.scrollableSettings.rows);
-                    this.scrollable.renderedRows = this.renderedRows.length;
-                    this.scrollable.renderedCols = this.renderedCols;
-                },
-                onScrollEnd: () => {
-                    matchAriaAttributes(this.host.nativeElement.closest('.k-pivotgrid'));
-                }
-            }, {
-                itemHeight: this.scrollableSettings.rowHeight,
-                itemWidth: this.colWidth || 200,
-                total: this.totalRows,
-                totalCols: this.headerItems.length,
-                renderedRows: this.scrollableSettings.rows,
-                renderedCols: this.scrollableSettings.columns,
-                columnVirtualization: this.columnVirtualization,
-                rowVirtualization: this.rowVirtualization,
-                rtl: this.rtl
-            });
-        };
         this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
             this.scrollable && (this.scrollable.rtl = rtl);
         }));
     }
-    get pivotGridId() {
-        return `kendo-pivotgrid-${this.dataService.pivotGridId}-`;
-    }
-    get columnVirtualization() {
-        return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'row';
-    }
-    get rowVirtualization() {
-        return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'column';
-    }
     ngOnInit() {
         this.subs.add(this.dataService[`${this.tableType}Rows`].subscribe(rows => {
             this.rows = rows;
@@ -3914,6 +4360,37 @@ class PivotGridTableComponent {
         this.subs.unsubscribe();
         this.scrollable?.destroy();
     }
+    colsUpdateCallback = (cols) => {
+        this.renderedCols = Math.min(cols.length, this.scrollableSettings?.columns);
+        this.renderedCols && this.scrollable && (this.scrollable.totalCols = cols.length);
+        (this.scrollableSettings && this.scrollableSettings.type !== 'row') && this.scrollable?.onNewData(true);
+        this.headerItems = cols;
+        isDocumentAvailable() && !this.scrollable && this.tableType === 'values' && (this.columnVirtualization || this.rowVirtualization) && this.initScrollable();
+    };
+    initScrollable = () => {
+        this.scrollable = new ScrollableTable(this.host.nativeElement, {
+            onScroll: () => {
+                this.startRowIndex = this.scrollable.startRow;
+                this.startColIndex = this.scrollable.startCol;
+                this.renderedRows = this.rows.slice(this.startRowIndex, this.startRowIndex + this.scrollableSettings.rows);
+                this.scrollable.renderedRows = this.renderedRows.length;
+                this.scrollable.renderedCols = this.renderedCols;
+            },
+            onScrollEnd: () => {
+                matchAriaAttributes(this.host.nativeElement.closest('.k-pivotgrid'));
+            }
+        }, {
+            itemHeight: this.scrollableSettings.rowHeight,
+            itemWidth: this.colWidth || 200,
+            total: this.totalRows,
+            totalCols: this.headerItems.length,
+            renderedRows: this.scrollableSettings.rows,
+            renderedCols: this.scrollableSettings.columns,
+            columnVirtualization: this.columnVirtualization,
+            rowVirtualization: this.rowVirtualization,
+            rtl: this.rtl
+        });
+    };
     initScrollableKeyboardNavigation() {
         const pivotGrid = this.scrollService.pivotGrid;
         this.host.nativeElement.addEventListener('keydown', (e) => {
@@ -3996,9 +4473,8 @@ class PivotGridTableComponent {
             }
         }, true);
     }
-}
-PivotGridTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: i0.ElementRef }, { token: PivotGridDataService }, { token: i1$1.LocalizationService }, { token: i0.NgZone }, { token: PivotGridScrollService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotGridTableComponent, isStandalone: true, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate", scrollableSettings: "scrollableSettings" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: i0.ElementRef }, { token: PivotGridDataService }, { token: i1$1.LocalizationService }, { token: i0.NgZone }, { token: PivotGridScrollService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PivotGridTableComponent, isStandalone: true, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate", scrollableSettings: "scrollableSettings" }, ngImport: i0, template: `
         <table
             class="k-pivotgrid-table"
             role="presentation"
@@ -4047,7 +4523,8 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             </tbody>
         </table>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridTableComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridTableComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivotgrid-table',
@@ -4154,66 +4631,13 @@ const DEFAULT_CONFIGURATOR_SETTINGS = {
  * Represents the Kendo UI PivotGrid component for Angular.
  */
 class PivotGridComponent {
-    constructor(hostEl, zone, dataService, localization, renderer, _scrollbarWidthService, scrollService) {
-        this.hostEl = hostEl;
-        this.zone = zone;
-        this.dataService = dataService;
-        this.localization = localization;
-        this.renderer = renderer;
-        this.scrollService = scrollService;
-        this.hostClass = true;
-        /**
-         * Specify the width of the column header and data cells. Value is treated as pixels [(see example)]({% slug appearance_pivotgrid %}#toc-column-headers-width).
-         *
-         * @default 200
-         */
-        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;
-        /**
-         * @hidden
-         */
-        this.gearSVGIcon = gearIcon;
-        this.resizeObservers = [];
-        this._loaderSettings = DEFAULT_LOADER_SETTINGS;
-        this._virtualScrolling = normalizeVirtualSettings(false);
-        this.subs = new Subscription();
-        this.rtl = false;
-        this.resizeContainer = (axis, element) => {
-            const isRows = axis === 'Rows';
-            const table = this.table.nativeElement;
-            const size = isRows ? 'offsetHeight' : 'offsetWidth';
-            table.style[`gridTemplate${axis}`] = '';
-            table.style[`gridTemplate${axis}`] = `${element[size]}px 1fr`;
-        };
-        this.handleScroll = (event) => {
-            if (event.target === this.valuesTable.nativeElement) {
-                syncScroll(event.target, [
-                    this.rowHeadersTable.nativeElement,
-                    this.colHeadersTable.nativeElement
-                ]);
-            }
-            else if (event.target.closest('.k-pivotgrid-row-headers')) {
-                event.preventDefault();
-                syncWheel(event, [this.valuesTable.nativeElement, this.rowHeadersTable.nativeElement], 'scrollTop', 'Y');
-            }
-            else if (event.target.closest('.k-pivotgrid-column-headers')) {
-                event.preventDefault();
-                syncWheel(event, [this.valuesTable.nativeElement, this.colHeadersTable.nativeElement], 'scrollLeft', 'X');
-            }
-        };
-        validatePackage(packageMetadata);
-        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        }));
-        dataService.wrapper = this.hostEl.nativeElement;
-        this.scrollService.pivotGrid = this;
-    }
+    hostEl;
+    zone;
+    dataService;
+    localization;
+    renderer;
+    scrollService;
+    hostClass = true;
     get rightPositionClass() {
         return !this.configuratorSettings || this.configuratorSettings.position === 'right';
     }
@@ -4229,6 +4653,15 @@ class PivotGridComponent {
     get dir() {
         return this.direction;
     }
+    colHeadersTable;
+    rowHeadersTable;
+    valuesTable;
+    table;
+    configuratorWrapper;
+    customCellTemplate;
+    valueCellTemplate;
+    rowHeaderCellTemplate;
+    columnHeaderCellTemplate;
     /**
      * Specify the type, size and color of the PivotGrid's loader.
      *
@@ -4249,6 +4682,10 @@ class PivotGridComponent {
     get loadingText() {
         return this.localization.get('loading');
     }
+    /**
+     * Specifies whether the axes configurator should be displayed.
+     */
+    configurator;
     /**
      * Sets the virtualization options of the component. By default the virtual scrolling functionality is disabled.
      *
@@ -4264,12 +4701,54 @@ class PivotGridComponent {
     get configuratorSettings() {
         return this.configurator && Object.assign({}, DEFAULT_CONFIGURATOR_SETTINGS, this.configurator);
     }
+    /**
+     * Specify the width of the column header and data cells. Value is treated as pixels [(see example)]({% slug appearance_pivotgrid %}#toc-column-headers-width).
+     *
+     * @default 200
+     */
+    columnHeadersWidth = 200;
+    /**
+     * If set to true, the user can use dedicated shortcuts to interact with the PivotGrid. By default, navigation is disabled.
+     *
+     * @default false
+     */
+    navigable = false;
     /**
      * Holds the displayed aggregated PivotGrid values.
      */
     get aggregateData() {
         return cloneArray(this.dataService.aggregateData);
     }
+    /**
+     * @hidden
+     */
+    gearSVGIcon = gearIcon;
+    loading;
+    showConfigurator;
+    configuratorNavigation;
+    resizeObservers = [];
+    _loaderSettings = DEFAULT_LOADER_SETTINGS;
+    _virtualScrolling = normalizeVirtualSettings(false);
+    subs = new Subscription();
+    rtl = false;
+    direction;
+    navigation;
+    navigationSubs;
+    constructor(hostEl, zone, dataService, localization, renderer, _scrollbarWidthService, scrollService) {
+        this.hostEl = hostEl;
+        this.zone = zone;
+        this.dataService = dataService;
+        this.localization = localization;
+        this.renderer = renderer;
+        this.scrollService = scrollService;
+        validatePackage(packageMetadata);
+        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        }));
+        dataService.wrapper = this.hostEl.nativeElement;
+        this.scrollService.pivotGrid = this;
+    }
     ngAfterViewInit() {
         if (isDocumentAvailable()) {
             this.zone.runOutsideAngular(() => {
@@ -4335,6 +4814,29 @@ class PivotGridComponent {
             }
         }
     }
+    resizeContainer = (axis, element) => {
+        const isRows = axis === 'Rows';
+        const table = this.table.nativeElement;
+        const size = isRows ? 'offsetHeight' : 'offsetWidth';
+        table.style[`gridTemplate${axis}`] = '';
+        table.style[`gridTemplate${axis}`] = `${element[size]}px 1fr`;
+    };
+    handleScroll = (event) => {
+        if (event.target === this.valuesTable.nativeElement) {
+            syncScroll(event.target, [
+                this.rowHeadersTable.nativeElement,
+                this.colHeadersTable.nativeElement
+            ]);
+        }
+        else if (event.target.closest('.k-pivotgrid-row-headers')) {
+            event.preventDefault();
+            syncWheel(event, [this.valuesTable.nativeElement, this.rowHeadersTable.nativeElement], 'scrollTop', 'Y');
+        }
+        else if (event.target.closest('.k-pivotgrid-column-headers')) {
+            event.preventDefault();
+            syncWheel(event, [this.valuesTable.nativeElement, this.colHeadersTable.nativeElement], 'scrollLeft', 'X');
+        }
+    };
     /**
      * @hidden
      */
@@ -4377,18 +4879,17 @@ class PivotGridComponent {
             this.configuratorNavigation.stop();
         }
     }
-}
-PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }, { token: i1$1.LocalizationService }, { token: i0.Renderer2 }, { token: i1$4.ScrollbarWidthService }, { token: PivotGridScrollService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotGridComponent, isStandalone: true, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", configurator: "configurator", virtualScrolling: "virtualScrolling", 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" } }, providers: [
-        PivotGridDataService,
-        LocalizationService,
-        PivotLocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.pivotgrid'
-        },
-        PivotGridScrollService
-    ], queries: [{ propertyName: "customCellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "valueCellTemplate", first: true, predicate: ValueCellTemplateDirective, descendants: true }, { propertyName: "rowHeaderCellTemplate", first: true, predicate: RowHeaderCellTemplateDirective, descendants: true }, { propertyName: "columnHeaderCellTemplate", first: true, predicate: ColumnHeaderCellTemplateDirective, descendants: true }], 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 }, { propertyName: "configuratorWrapper", first: true, predicate: ["configurator"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }, { token: i1$1.LocalizationService }, { token: i0.Renderer2 }, { token: i1$4.ScrollbarWidthService }, { token: PivotGridScrollService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PivotGridComponent, isStandalone: true, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", configurator: "configurator", virtualScrolling: "virtualScrolling", 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" } }, providers: [
+            PivotGridDataService,
+            LocalizationService,
+            PivotLocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.pivotgrid'
+            },
+            PivotGridScrollService
+        ], queries: [{ propertyName: "customCellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "valueCellTemplate", first: true, predicate: ValueCellTemplateDirective, descendants: true }, { propertyName: "rowHeaderCellTemplate", first: true, predicate: RowHeaderCellTemplateDirective, descendants: true }, { propertyName: "columnHeaderCellTemplate", first: true, predicate: ColumnHeaderCellTemplateDirective, descendants: true }], 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 }, { propertyName: "configuratorWrapper", first: true, predicate: ["configurator"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoPivotGridLocalizedMessages
         i18n-loading="kendo.pivotgrid.loading|The loading text"
         loading="Loading"
@@ -4547,7 +5048,8 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             </span>
         </div>
    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { kind: "component", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate", "scrollableSettings"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { kind: "component", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivotgrid',
@@ -4868,19 +5370,19 @@ const KENDO_PIVOTGRID = [
  * ```
  */
 class PivotGridModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PivotGridModule, imports: [ChipMenuItemComponent, ChipMenuSortComponent, ChipMenuComponent, ChipMenuFilterComponent, ChipMenuItemContentTemplateDirective, FilterMenuContainerComponent, StringFilterMenuComponent, FilterMenuDropDownListDirective, ChipMenuContainerComponent, ChipMenuItemDirective, ChipMenuReorderComponent, PivotGridComponent, PivotGridTableComponent, PivotGridConfiguratorComponent, PivotGridCellDirective, PivotLocalBindingDirective, PivotOLAPBindingDirective, DraggableChipDirective, DropTargetDirective, LocalizedMessagesDirective, CustomMessagesComponent, ChipKeyboardNavigationDirective, CellTemplateDirective, ValueCellTemplateDirective, RowHeaderCellTemplateDirective, ColumnHeaderCellTemplateDirective, FormsModule, ReactiveFormsModule], exports: [PivotGridComponent, PivotGridTableComponent, PivotGridCellDirective, PivotLocalBindingDirective, PivotOLAPBindingDirective, CustomMessagesComponent, CellTemplateDirective, ValueCellTemplateDirective, RowHeaderCellTemplateDirective, ColumnHeaderCellTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridModule, providers: [
+            IconsService,
+            PopupService,
+            ResizeBatchService,
+            DialogContainerService,
+            DialogService,
+            WindowService,
+            WindowContainerService
+        ], imports: [ChipMenuItemComponent, ChipMenuSortComponent, ChipMenuComponent, ChipMenuFilterComponent, FilterMenuContainerComponent, StringFilterMenuComponent, ChipMenuReorderComponent, PivotGridComponent, PivotGridTableComponent, PivotGridConfiguratorComponent, PivotGridCellDirective, FormsModule, ReactiveFormsModule] });
 }
-PivotGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PivotGridModule, imports: [ChipMenuItemComponent, ChipMenuSortComponent, ChipMenuComponent, ChipMenuFilterComponent, ChipMenuItemContentTemplateDirective, FilterMenuContainerComponent, StringFilterMenuComponent, FilterMenuDropDownListDirective, ChipMenuContainerComponent, ChipMenuItemDirective, ChipMenuReorderComponent, PivotGridComponent, PivotGridTableComponent, PivotGridConfiguratorComponent, PivotGridCellDirective, PivotLocalBindingDirective, PivotOLAPBindingDirective, DraggableChipDirective, DropTargetDirective, LocalizedMessagesDirective, CustomMessagesComponent, ChipKeyboardNavigationDirective, CellTemplateDirective, ValueCellTemplateDirective, RowHeaderCellTemplateDirective, ColumnHeaderCellTemplateDirective, FormsModule, ReactiveFormsModule], exports: [PivotGridComponent, PivotGridTableComponent, PivotGridCellDirective, PivotLocalBindingDirective, PivotOLAPBindingDirective, CustomMessagesComponent, CellTemplateDirective, ValueCellTemplateDirective, RowHeaderCellTemplateDirective, ColumnHeaderCellTemplateDirective] });
-PivotGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridModule, providers: [
-        IconsService,
-        PopupService,
-        ResizeBatchService,
-        DialogContainerService,
-        DialogService,
-        WindowService,
-        WindowContainerService
-    ], imports: [ChipMenuItemComponent, ChipMenuSortComponent, ChipMenuComponent, ChipMenuFilterComponent, FilterMenuContainerComponent, StringFilterMenuComponent, ChipMenuContainerComponent, ChipMenuReorderComponent, PivotGridComponent, PivotGridTableComponent, PivotGridConfiguratorComponent, PivotGridCellDirective, CustomMessagesComponent, FormsModule, ReactiveFormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_PIVOTGRID_CHIPMENU_DECLARATIONS, ...KENDO_PIVOTGRID_DECLARATIONS, FormsModule, ReactiveFormsModule],