@progress/kendo-angular-pivotgrid 17.0.0-develop.9 → 17.0.1-develop.1

package/{esm2020 → esm2022}/localization/localized-messages.directive.mjs

@@ -11,19 +11,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export 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.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.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: [

package/esm2022/localization/messages.mjs

@@ -0,0 +1,284 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { ComponentMessages } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridMessages, decorators: [{
+            type: Directive
+        }], propDecorators: { fieldMenuFilterItemLabel: [{
+                type: Input
+            }], fieldMenuSortAscendingItemLabel: [{
+                type: Input
+            }], fieldMenuSortDescendingItemLabel: [{
+                type: Input
+            }], filterInputLabel: [{
+                type: Input
+            }], filterOperatorsDropDownLabel: [{
+                type: Input
+            }], filterEqOperator: [{
+                type: Input
+            }], filterNotEqOperator: [{
+                type: Input
+            }], filterIsNullOperator: [{
+                type: Input
+            }], filterIsNotNullOperator: [{
+                type: Input
+            }], filterIsEmptyOperator: [{
+                type: Input
+            }], filterIsNotEmptyOperator: [{
+                type: Input
+            }], filterStartsWithOperator: [{
+                type: Input
+            }], filterContainsOperator: [{
+                type: Input
+            }], filterNotContainsOperator: [{
+                type: Input
+            }], filterEndsWithOperator: [{
+                type: Input
+            }], filterFilterButton: [{
+                type: Input
+            }], filterClearButton: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], emptyCellLabel: [{
+                type: Input
+            }], configuratorButtonText: [{
+                type: Input
+            }], configuratorHeaderText: [{
+                type: Input
+            }], configuratorFieldsText: [{
+                type: Input
+            }], configuratorColumnsText: [{
+                type: Input
+            }], configuratorRowsText: [{
+                type: Input
+            }], configuratorValuesText: [{
+                type: Input
+            }], configuratorCancelButtonText: [{
+                type: Input
+            }], configuratorApplyButtonText: [{
+                type: Input
+            }], configuratorEmptyRowsText: [{
+                type: Input
+            }], configuratorEmptyColumnsText: [{
+                type: Input
+            }], configuratorEmptyMeasuresText: [{
+                type: Input
+            }], fieldMenuMoveToColumnsItem: [{
+                type: Input
+            }], fieldMenuMoveToRowsItem: [{
+                type: Input
+            }], fieldMenuMovePreviousItem: [{
+                type: Input
+            }], fieldMenuMoveNextItem: [{
+                type: Input
+            }], chipMenuIconTitle: [{
+                type: Input
+            }] } });

package/{esm2020 → esm2022}/localization/pivot-localization.service.mjs

@@ -12,6 +12,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * Needed to keep the Pivot's LocalizationService reference and be able to use it inside the ChipList component.
  */
 export class PivotLocalizationService {
+    localization;
     constructor(localization) {
         this.localization = localization;
     }
@@ -21,9 +22,9 @@ export 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.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.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.LocalizationService }]; } });

package/{esm2020 → esm2022}/models/configuration-change-event.mjs

@@ -7,6 +7,26 @@ import { PreventableEvent } from "@progress/kendo-angular-common";
  * The event data for the ConfigurationChangeEvent
  */
 export 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
      */

package/{esm2020 → esm2022}/models/configurator-settings.mjs

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

package/{esm2020 → esm2022}/models/expanded-change-event.mjs

@@ -7,6 +7,18 @@ import { PreventableEvent } from "@progress/kendo-angular-common";
  * The event data for the ExpandChangeEvent
  */
 export 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
      */

package/{esm2020 → esm2022}/package-metadata.mjs

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

package/{esm2020 → esm2022}/pivotgrid.component.mjs

@@ -44,66 +44,13 @@ const DEFAULT_CONFIGURATOR_SETTINGS = {
  * Represents the Kendo UI PivotGrid component for Angular.
  */
 export class PivotGridComponent {
-    constructor(hostEl, zone, dataService, localization, renderer, _scrollbarWidthService, scrollService) {
-        this.hostEl = hostEl;
-        this.zone = zone;
-        this.dataService = dataService;
-        this.localization = localization;
-        this.renderer = renderer;
-        this.scrollService = scrollService;
-        this.hostClass = true;
-        /**
-         * Specify the width of the column header and data cells. Value is treated as pixels [(see example)]({% slug appearance_pivotgrid %}#toc-column-headers-width).
-         *
-         * @default 200
-         */
-        this.columnHeadersWidth = 200;
-        /**
-         * If set to true, the user can use dedicated shortcuts to interact with the PivotGrid. By default, navigation is disabled.
-         *
-         * @default false
-         */
-        this.navigable = false;
-        /**
-         * @hidden
-         */
-        this.gearSVGIcon = gearIcon;
-        this.resizeObservers = [];
-        this._loaderSettings = DEFAULT_LOADER_SETTINGS;
-        this._virtualScrolling = normalizeVirtualSettings(false);
-        this.subs = new Subscription();
-        this.rtl = false;
-        this.resizeContainer = (axis, element) => {
-            const isRows = axis === 'Rows';
-            const table = this.table.nativeElement;
-            const size = isRows ? 'offsetHeight' : 'offsetWidth';
-            table.style[`gridTemplate${axis}`] = '';
-            table.style[`gridTemplate${axis}`] = `${element[size]}px 1fr`;
-        };
-        this.handleScroll = (event) => {
-            if (event.target === this.valuesTable.nativeElement) {
-                syncScroll(event.target, [
-                    this.rowHeadersTable.nativeElement,
-                    this.colHeadersTable.nativeElement
-                ]);
-            }
-            else if (event.target.closest('.k-pivotgrid-row-headers')) {
-                event.preventDefault();
-                syncWheel(event, [this.valuesTable.nativeElement, this.rowHeadersTable.nativeElement], 'scrollTop', 'Y');
-            }
-            else if (event.target.closest('.k-pivotgrid-column-headers')) {
-                event.preventDefault();
-                syncWheel(event, [this.valuesTable.nativeElement, this.colHeadersTable.nativeElement], 'scrollLeft', 'X');
-            }
-        };
-        validatePackage(packageMetadata);
-        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        }));
-        dataService.wrapper = this.hostEl.nativeElement;
-        this.scrollService.pivotGrid = this;
-    }
+    hostEl;
+    zone;
+    dataService;
+    localization;
+    renderer;
+    scrollService;
+    hostClass = true;
     get rightPositionClass() {
         return !this.configuratorSettings || this.configuratorSettings.position === 'right';
     }
@@ -119,6 +66,15 @@ export 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.
      *
@@ -139,6 +95,10 @@ export 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.
      *
@@ -154,12 +114,54 @@ export 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(() => {
@@ -225,6 +227,29 @@ export 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
      */
@@ -267,18 +292,17 @@ export 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: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i3.ScrollbarWidthService }, { token: i4.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: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i3.ScrollbarWidthService }, { token: i4.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"
@@ -437,7 +461,8 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             </span>
         </div>
    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { kind: "component", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate", "scrollableSettings"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { kind: "component", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivotgrid',