@progress/kendo-angular-pivotgrid 17.0.0-develop.4 → 17.0.0-develop.41

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

@@ -20,12 +20,12 @@ import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$2 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
-import { TextBoxDirective, CheckBoxDirective } from '@progress/kendo-angular-inputs';
+import { TextBoxDirective, CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import * as i1$3 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { TreeViewComponent, ExpandDirective, NodeTemplateDirective } from '@progress/kendo-angular-treeview';
+import { TreeViewComponent, ExpandDirective, CheckDirective, NodeTemplateDirective } from '@progress/kendo-angular-treeview';
 import { validatePackage } from '@progress/kendo-licensing';
 import { LoaderComponent } from '@progress/kendo-angular-indicators';
 import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
@@ -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">
@@ -883,8 +950,9 @@ FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                 </div>
             </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], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
+    `, 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: "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,57 +1749,59 @@ 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() {
         this.close();
         this.closeSubscription.unsubscribe();
     }
-    toggle(e, template) {
-        if (e) {
-            e.preventDefault();
-            e.stopImmediatePropagation();
+    toggle(e) {
+        if (e?.originalEvent) {
+            e.originalEvent.preventDefault();
+            e.originalEvent.stopImmediatePropagation();
         }
-        const anchor = this.anchor.nativeElement;
-        this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
+        const anchorElement = this.anchor.element.nativeElement;
+        this.popupRef = this.popupService.open(anchorElement, this.template, this.popupRef, POPUP_CLASS);
         this.popupRef && this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
         if (!this.popupRef) {
-            anchor.focus();
+            anchorElement.focus();
         }
     }
     close() {
         this.popupService.destroy();
         this.popupRef = null;
-        this.anchor.nativeElement.closest('.k-chip').focus();
+        this.anchor.element.nativeElement.closest('.k-chip').focus();
     }
     get chipMenuTitle() {
         const localizationMsg = this.localization.get('chipMenuIconTitle') || '';
         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" }, providers: [
-        ChipMenuService,
-        MenuTabbingService
-    ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
-        <kendo-icon-wrapper
-            #anchor
-            name="more-vertical"
-            [svgIcon]="menuItemSVGIcon"
-            (click)="toggle($event, template)"
-            [tabindex]="tabIndex"
-            [attr.title]="chipMenuTitle"
-        >
-        </kendo-icon-wrapper>
+    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()"
@@ -1705,8 +1830,9 @@ ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                     [service]="service"></kendo-pivot-chipmenu-reorder>
             </kendo-pivot-chipmenu-container>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: [{
+    `, 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: "16.2.12", ngImport: i0, type: ChipMenuComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -1715,15 +1841,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     ],
                     selector: 'kendo-pivot-chip-menu',
                     template: `
-        <kendo-icon-wrapper
-            #anchor
-            name="more-vertical"
-            [svgIcon]="menuItemSVGIcon"
-            (click)="toggle($event, template)"
-            [tabindex]="tabIndex"
-            [attr.title]="chipMenuTitle"
-        >
-        </kendo-icon-wrapper>
         <ng-template #template>
             <kendo-pivot-chipmenu-container
                 (keydown.escape)="close()"
@@ -1763,8 +1880,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], isMeasureField: [{
                 type: Input
             }], anchor: [{
+                type: Input
+            }], template: [{
                 type: ViewChild,
-                args: ['anchor', { static: true, read: ElementRef }]
+                args: ['template', { static: true }]
             }] } });
 
 /**
@@ -1784,6 +1903,7 @@ const append = (element, container) => {
  * @hidden
  */
 class DropCueService {
+    dom;
     create() {
         this.dom = document.createElement('span');
         const wrapper = document.createElement('div');
@@ -1827,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
         }] });
 
@@ -1838,22 +1958,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class DraggableChipDirective {
-    constructor(draggable, element, zone, service, cue, renderer, cdr) {
+    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;
         this.zone = zone;
         this.service = service;
         this.cue = cue;
         this.renderer = renderer;
-        this.cdr = cdr;
-        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
@@ -1923,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 }, { token: i0.ChangeDetectorRef }], 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]',
@@ -1934,7 +2061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$4.DraggableDirective, decorators: [{
                     type: Optional
-                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: ConfiguratorService }, { type: DropCueService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pointerEvents: [{
+                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: ConfiguratorService }, { type: DropCueService }, { type: i0.Renderer2 }]; }, propDecorators: { pointerEvents: [{
                 type: HostBinding,
                 args: ['style.pointerEvents']
             }], touchActions: [{
@@ -1948,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;
@@ -2096,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]',
@@ -2116,41 +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);
-        /**
-         * 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 => {
@@ -2287,16 +2428,9 @@ class PivotGridConfiguratorComponent {
         ].some((h) => (h === f.uniqueName || h === f.defaultHierarchy)));
         this.checked = checked;
     }
-    /**
-     * A function which determines if a specific node is checked/
-     */
-    isItemChecked(node) {
-        const res = this.checked.some(s => node.defaultHierarchy
-            ? s.defaultHierarchy === node.defaultHierarchy
-            : s.uniqueName === node.uniqueName)
-            || (node.children?.length && node.children?.every((c) => c.checked));
-        return res || null;
-    }
+    checkItemBy = (context) => {
+        return context.dataItem;
+    };
     /**
      * Determines if a checkbox should be rendered.
      */
@@ -2306,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)
@@ -2317,21 +2461,14 @@ class PivotGridConfiguratorComponent {
         const fields = event.children.map(item => item.dataItem);
         this.setChecked(fields);
     }
-    handleCheckedChange(event, item) {
-        if (event.target.checked) {
-            this.checked = [...this.checked, item];
-        }
-        else {
-            const itemIndex = this.checked.findIndex(checkedItem => checkedItem.uniqueName === item.uniqueName);
-            this.checked.splice(itemIndex, 1);
-        }
+    handleCheckedChange(event) {
+        const itemIndex = this.checked.findIndex(checkedItem => checkedItem.uniqueName === event.item.dataItem.uniqueName);
+        this.checked.splice(itemIndex, 1);
         const action = {
             type: 'PIVOT_CONFIGURATOR_ACTION_TOGGLE_SELECTION',
-            payload: item
+            payload: event.item.dataItem
         };
         this.configuratorService.parseConfiguratorState(action);
-        const closestItem = event.target.closest('.k-treeview-item');
-        this.zone.runOutsideAngular(() => setTimeout(() => closestItem.focus()));
     }
     onTreeViewSelect(ev) {
         const closestItem = ev.target.closest('.k-treeview-item');
@@ -2399,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]="{
@@ -2420,7 +2556,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             </div>
 
             <div class="k-pivotgrid-configurator-content">
-                <div class="k-form" [class.k-form-horizontal]="isHorizontal" role="form">
+                <div class="k-form k-form-md" [class.k-form-horizontal]="isHorizontal" [class.k-form-vertical]="!isHorizontal" role="form">
                     <div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
                         <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
@@ -2435,21 +2571,14 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                                     textField="caption"
                                     [children]="children"
                                     [hasChildren]="hasChildren"
+                                    kendoTreeViewCheckable
+                                    [hasCheckbox]="isSelectable"
+                                    [(checkedKeys)]="checked"
+                                    [checkBy]="checkItemBy"
+                                    (checkedChange)="handleCheckedChange($event)"
                                     kendoTreeViewExpandable
                                     (childrenLoaded)="handleChildrenLoaded($event)"
                                     (keydown.space)="onTreeViewSelect($event)">
-                                <ng-template kendoTreeViewNodeTemplate let-dataItem>
-                                    <input kendoCheckBox
-                                        *ngIf="isSelectable(dataItem)"
-                                        type="checkbox"
-                                        kendoCheckBox
-                                        tabindex="-1"
-                                        role="none"
-                                        aria-hidden="true"
-                                        [checked]="isItemChecked(dataItem)"
-                                        (change)="handleCheckedChange($event, dataItem)"/>
-                                    {{ dataItem.caption }}
-                                </ng-template>
                                 </kendo-treeview>
 
                             </div>
@@ -2467,8 +2596,10 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
 
                         <kendo-chiplist
                             *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
+                            [navigable]="false"
                             #columnsChiplist
                             kendoDropTarget
+                            class="k-column-fields"
                             axes="columnAxes"
                             [style.width.%]="100"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
@@ -2476,20 +2607,25 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         >
                             <ng-container *ngFor="let item of state.columnAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
+                                    #chip
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
                                     kendoChipKeyboardNavigation
                                     [item]="item"
+                                    [label]="getName(item.name)"
                                     axes="columnAxes"
-                                    rounded="full"
                                     [removable]="true"
+                                    [hasMenu]="true"
+                                    (menuToggle)="chipMenuColumns.toggle($event)"
                                     (remove)="onChipRemove($event, item, 'column')"
                                     (reorder)="onReorder($event, 'column', item)"
-                                >{{ getName(item.name) }}
+                                >
                                     <kendo-pivot-chip-menu
-                                        [chip]="item">
-                                    </kendo-pivot-chip-menu>
+                                        #chipMenuColumns
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                                 </kendo-chip>
                             </ng-container>
                         </kendo-chiplist>
@@ -2504,8 +2640,10 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
 
                         <kendo-chiplist
                             *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
+                            [navigable]="false"
                             #rowsChiplist
                             kendoDropTarget
+                            class="k-row-fields"
                             axes="rowAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
@@ -2513,22 +2651,25 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         >
                             <ng-container *ngFor="let item of state.rowAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
+                                    #chip
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
                                     kendoChipKeyboardNavigation
                                     [item]="item"
+                                    [label]="getName(item.name)"
                                     axes="rowAxes"
-                                    rounded="full"
                                     [removable]="true"
+                                    [hasMenu]="true"
+                                    (menuToggle)="chipMenuRows.toggle($event)"
                                     (remove)="onChipRemove($event, item, 'row')"
                                     (reorder)="onReorder($event, 'row', item)"
                                 >
-                                    {{ getName(item.name) }}
-    
                                     <kendo-pivot-chip-menu
-                                        [chip]="item">
-                                    </kendo-pivot-chip-menu>
+                                        #chipMenuRows
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                                 </kendo-chip>
                             </ng-container>
                         </kendo-chiplist>
@@ -2549,30 +2690,34 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
 
                         <kendo-chiplist
                             *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
+                            [navigable]="false"
                             kendoDropTarget
+                            class="k-filter-fields"
                             axes="measureAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                             [style.width.%]="100"
                         >
                             <kendo-chip *ngFor="let item of state.measureAxes"
+                                #chip
                                 kendoChipDraggable
                                 kendoDraggable
                                 kendoDropTarget
                                 kendoChipKeyboardNavigation
                                 [item]="item"
+                                [label]="getName(item.name)"
                                 axes="measureAxes"
-                                rounded="full"
                                 [removable]="true"
+                                [hasMenu]="true"
+                                (menuToggle)="chipMenuValues.toggle($event)"
                                 (remove)="onChipRemove($event, item, 'measure')"
                                 (reorder)="onReorder($event, 'measure', item)"
                                 >
-                                {{ getName(item.name) }}
-
-                                <kendo-pivot-chip-menu
-                                    [isMeasureField]="true"
-                                    [chip]="item">
-                                </kendo-pivot-chip-menu>
+                                    <kendo-pivot-chip-menu
+                                        #chipMenuValues
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                             </kendo-chip>
                         </kendo-chiplist>
 
@@ -2583,13 +2728,14 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                     
                 </div>
             </div>
-            <div class="k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end">
+            <div class="k-pivotgrid-configurator-actions k-actions k-actions-end k-actions-horizontal">
                 <button kendoButton type="button" (click)="handleReset()">{{messageFor('configuratorCancelButtonText')}}</button>
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </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: NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { 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", "avatarClass", "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"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
+   `, 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: "16.2.12", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivotgrid-configurator',
@@ -2613,7 +2759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             </div>
 
             <div class="k-pivotgrid-configurator-content">
-                <div class="k-form" [class.k-form-horizontal]="isHorizontal" role="form">
+                <div class="k-form k-form-md" [class.k-form-horizontal]="isHorizontal" [class.k-form-vertical]="!isHorizontal" role="form">
                     <div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
                         <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
@@ -2628,21 +2774,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                     textField="caption"
                                     [children]="children"
                                     [hasChildren]="hasChildren"
+                                    kendoTreeViewCheckable
+                                    [hasCheckbox]="isSelectable"
+                                    [(checkedKeys)]="checked"
+                                    [checkBy]="checkItemBy"
+                                    (checkedChange)="handleCheckedChange($event)"
                                     kendoTreeViewExpandable
                                     (childrenLoaded)="handleChildrenLoaded($event)"
                                     (keydown.space)="onTreeViewSelect($event)">
-                                <ng-template kendoTreeViewNodeTemplate let-dataItem>
-                                    <input kendoCheckBox
-                                        *ngIf="isSelectable(dataItem)"
-                                        type="checkbox"
-                                        kendoCheckBox
-                                        tabindex="-1"
-                                        role="none"
-                                        aria-hidden="true"
-                                        [checked]="isItemChecked(dataItem)"
-                                        (change)="handleCheckedChange($event, dataItem)"/>
-                                    {{ dataItem.caption }}
-                                </ng-template>
                                 </kendo-treeview>
 
                             </div>
@@ -2660,8 +2799,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
                         <kendo-chiplist
                             *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
+                            [navigable]="false"
                             #columnsChiplist
                             kendoDropTarget
+                            class="k-column-fields"
                             axes="columnAxes"
                             [style.width.%]="100"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
@@ -2669,20 +2810,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         >
                             <ng-container *ngFor="let item of state.columnAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
+                                    #chip
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
                                     kendoChipKeyboardNavigation
                                     [item]="item"
+                                    [label]="getName(item.name)"
                                     axes="columnAxes"
-                                    rounded="full"
                                     [removable]="true"
+                                    [hasMenu]="true"
+                                    (menuToggle)="chipMenuColumns.toggle($event)"
                                     (remove)="onChipRemove($event, item, 'column')"
                                     (reorder)="onReorder($event, 'column', item)"
-                                >{{ getName(item.name) }}
+                                >
                                     <kendo-pivot-chip-menu
-                                        [chip]="item">
-                                    </kendo-pivot-chip-menu>
+                                        #chipMenuColumns
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                                 </kendo-chip>
                             </ng-container>
                         </kendo-chiplist>
@@ -2697,8 +2843,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
                         <kendo-chiplist
                             *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
+                            [navigable]="false"
                             #rowsChiplist
                             kendoDropTarget
+                            class="k-row-fields"
                             axes="rowAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
@@ -2706,22 +2854,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         >
                             <ng-container *ngFor="let item of state.rowAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
+                                    #chip
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
                                     kendoChipKeyboardNavigation
                                     [item]="item"
+                                    [label]="getName(item.name)"
                                     axes="rowAxes"
-                                    rounded="full"
                                     [removable]="true"
+                                    [hasMenu]="true"
+                                    (menuToggle)="chipMenuRows.toggle($event)"
                                     (remove)="onChipRemove($event, item, 'row')"
                                     (reorder)="onReorder($event, 'row', item)"
                                 >
-                                    {{ getName(item.name) }}
-    
                                     <kendo-pivot-chip-menu
-                                        [chip]="item">
-                                    </kendo-pivot-chip-menu>
+                                        #chipMenuRows
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                                 </kendo-chip>
                             </ng-container>
                         </kendo-chiplist>
@@ -2742,30 +2893,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
                         <kendo-chiplist
                             *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
+                            [navigable]="false"
                             kendoDropTarget
+                            class="k-filter-fields"
                             axes="measureAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                             [style.width.%]="100"
                         >
                             <kendo-chip *ngFor="let item of state.measureAxes"
+                                #chip
                                 kendoChipDraggable
                                 kendoDraggable
                                 kendoDropTarget
                                 kendoChipKeyboardNavigation
                                 [item]="item"
+                                [label]="getName(item.name)"
                                 axes="measureAxes"
-                                rounded="full"
                                 [removable]="true"
+                                [hasMenu]="true"
+                                (menuToggle)="chipMenuValues.toggle($event)"
                                 (remove)="onChipRemove($event, item, 'measure')"
                                 (reorder)="onReorder($event, 'measure', item)"
                                 >
-                                {{ getName(item.name) }}
-
-                                <kendo-pivot-chip-menu
-                                    [isMeasureField]="true"
-                                    [chip]="item">
-                                </kendo-pivot-chip-menu>
+                                    <kendo-pivot-chip-menu
+                                        #chipMenuValues
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                             </kendo-chip>
                         </kendo-chiplist>
 
@@ -2776,7 +2931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     
                 </div>
             </div>
-            <div class="k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end">
+            <div class="k-pivotgrid-configurator-actions k-actions k-actions-end k-actions-horizontal">
                 <button kendoButton type="button" (click)="handleReset()">{{messageFor('configuratorCancelButtonText')}}</button>
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
@@ -2784,7 +2939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
    `,
                     standalone: true,
                     imports: [
-                        NgClass, NgStyle, TreeViewComponent, ExpandDirective, NodeTemplateDirective, NgIf, CheckBoxDirective,
+                        NgClass, NgStyle, TreeViewComponent, ExpandDirective, CheckDirective, NodeTemplateDirective, NgIf, CheckBoxComponent,
                         NgTemplateOutlet, DropTargetDirective, ChipListComponent, NgFor, ChipComponent, DraggableChipDirective,
                         DraggableDirective, ChipKeyboardNavigationDirective, ChipMenuComponent, ButtonComponent
                     ]
@@ -2823,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
      */
@@ -2836,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
      */
@@ -2850,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);
@@ -2957,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'
@@ -2991,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)) {
@@ -3031,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]',
@@ -3057,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)) {
@@ -3200,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]',
@@ -3222,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
@@ -3304,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;
@@ -3311,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: [
@@ -3338,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: [
@@ -3371,8 +3789,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728985397,
-    version: '17.0.0-develop.4',
+    publishDate: 1730818485,
+    version: '17.0.0-develop.41',
     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'
 };
 
@@ -3399,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]',
@@ -3435,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]',
@@ -3472,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]',
@@ -3509,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]',
@@ -3527,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) {
@@ -3616,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;
@@ -3638,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)
@@ -3661,14 +4094,22 @@ 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);
         this.renderer.setAttribute(nativeElement, 'colspan', this.kendoPivotGridCell.colSpan || 1);
         const classesToAdd = {
-            'k-pivotgrid-header-total': this.kendoPivotGridCell?.total || (this.tableType === 'values'
+            'k-pivotgrid-header-total': this.kendoPivotGridCell?.total,
+            'k-pivotgrid-total': this.tableType === 'values'
                 && (this.dataService.rowHeaderLeaves[this.rowIndex].total ||
-                    this.dataService.columnHeaderLeaves[this.colIndex].total)),
+                    this.dataService.columnHeaderLeaves[this.colIndex].total),
             'k-pivotgrid-header-root': this.kendoPivotGridCell?.levelNum === 0,
             'k-pivotgrid-expanded': this.kendoPivotGridCell?.hasChildren && this.kendoPivotGridCell.children.length,
             'k-first': this.colIndex > 0
@@ -3679,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"
@@ -3738,11 +4185,12 @@ PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 }">
             </ng-template>
             <!--default cell content-->
-            <span *ngIf="!customCellTemplate && isNotProvidedCellTemplatePerType">
+            <span *ngIf="!customCellTemplate && isNotProvidedCellTemplatePerType" [ngClass]="{'k-pivotgrid-header-title': !kendoPivotGridCell.data, 'k-pivotgrid-content': kendoPivotGridCell.data}">
                 {{ 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridCellDirective, decorators: [{
+        `, 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: "16.2.12", ngImport: i0, type: PivotGridCellDirective, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -3804,12 +4252,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }">
             </ng-template>
             <!--default cell content-->
-            <span *ngIf="!customCellTemplate && isNotProvidedCellTemplatePerType">
+            <span *ngIf="!customCellTemplate && isNotProvidedCellTemplatePerType" [ngClass]="{'k-pivotgrid-header-title': !kendoPivotGridCell.data, 'k-pivotgrid-content': kendoPivotGridCell.data}">
                 {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
             </span>
         `,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, EventsOutsideAngularDirective, TemplateContextDirective]
+                    imports: [NgIf, IconWrapperComponent, EventsOutsideAngularDirective, TemplateContextDirective, NgClass]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PivotGridDataService }]; }, propDecorators: { cellClass: [{
                 type: HostBinding,
@@ -3836,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
         }] });
 
@@ -3850,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;
@@ -3926,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) => {
@@ -4008,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"
@@ -4059,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',
@@ -4166,68 +4631,15 @@ 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?.position === 'right';
+        return !this.configuratorSettings || this.configuratorSettings.position === 'right';
     }
     get leftPositionClass() {
         return this.configuratorSettings?.position === 'left';
@@ -4241,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.
      *
@@ -4261,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.
      *
@@ -4276,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(() => {
@@ -4347,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
      */
@@ -4389,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"
@@ -4555,11 +5044,12 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             class="k-pivotgrid-configurator-button"
             aria-hidden="true"
             (click)="toggleConfigurator()">
-            <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" innerCssClass="k-color-inherit" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
+            <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
             </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',
@@ -4728,7 +5218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             class="k-pivotgrid-configurator-button"
             aria-hidden="true"
             (click)="toggleConfigurator()">
-            <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" innerCssClass="k-color-inherit" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
+            <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
             </span>
         </div>
    `,
@@ -4880,22 +5370,22 @@ 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], 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] });
 }
-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],
+                    imports: [...KENDO_PIVOTGRID_CHIPMENU_DECLARATIONS, ...KENDO_PIVOTGRID_DECLARATIONS],
                     exports: [...KENDO_PIVOTGRID],
                     providers: [
                         IconsService,