@progress/kendo-angular-pivotgrid 25.2.1-develop.1 → 25.3.0-develop.2

package/fesm2022/progress-kendo-angular-pivotgrid.mjs

@@ -3,13 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Directive, Input, Injectable, HostBinding, ContentChildren, Component, isDevMode, forwardRef, ViewChild, Optional, ContentChild, ElementRef, NgModule } from '@angular/core';
+import { EventEmitter, Output, Directive, Input, afterNextRender, Injectable, signal, HostBinding, ContentChildren, ChangeDetectionStrategy, Component, isDevMode, forwardRef, ViewChild, Optional, computed, ContentChild, ElementRef, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-buttons';
 import { ButtonComponent, ChipListComponent, ChipComponent } from '@progress/kendo-angular-buttons';
 import * as i1$4 from '@progress/kendo-angular-common';
 import { normalizeKeys, Keys, isDocumentAvailable, replaceMessagePlaceholder, PreventableEvent, DraggableDirective, hasObservers, anyChanged, EventsOutsideAngularDirective, TemplateContextDirective, isChanged, KENDO_WEBMCP_HOST, provideComponentName, ResizeBatchService } from '@progress/kendo-angular-common';
 import { Subscription, BehaviorSubject, Subject, from, of, fromEvent } from 'rxjs';
-import { take, tap, mergeMap, merge } from 'rxjs/operators';
 import { toTree, toRows, toColumns, toData, configuratorReducer, PIVOT_CONFIGURATOR_ACTION, HEADERS_ACTION, headersReducer, createFlatSchemaDimensions, createDataTree, createLocalDataState, rootFields, fetchData, createDataState, fetchDiscover, addKPI, buildKPIMeasures, PivotGridNavigation, ConfiguratorNavigation } from '@progress/kendo-pivotgrid-common';
 export { AggregateType, averageAggregate, countAggregate, createAggregate, maxAggregate, minAggregate, sumAggregate } from '@progress/kendo-pivotgrid-common';
 import { filterIcon, columnsIcon, rowsIcon, arrowLeftIcon, arrowRightIcon, sortAscSmallIcon, sortDescSmallIcon, moreVerticalIcon, chevronUpIcon, chevronDownIcon, gearIcon } from '@progress/kendo-svg-icons';
@@ -26,6 +25,7 @@ import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icon
 import * as i1$3 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { TreeViewComponent, ExpandDirective, CheckDirective } from '@progress/kendo-angular-treeview';
+import { tap, mergeMap, merge } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { LoaderComponent } from '@progress/kendo-angular-indicators';
 import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
@@ -409,7 +409,7 @@ let nextPivotGridId = 0;
  * @hidden
  */
 class PivotGridDataService {
-    ngZone;
+    injector;
     expandedStateChange = new EventEmitter();
     configuratorFieldChange = new EventEmitter();
     expandedFieldChange = new EventEmitter();
@@ -429,8 +429,8 @@ class PivotGridDataService {
     valuesRows = new BehaviorSubject([]);
     loading = new BehaviorSubject(false);
     pivotGridId;
-    constructor(ngZone) {
-        this.ngZone = ngZone;
+    constructor(injector) {
+        this.injector = injector;
         this.pivotGridId = nextPivotGridId++;
     }
     fields = new BehaviorSubject([]);
@@ -448,19 +448,16 @@ class PivotGridDataService {
         this.rowHeaderRows.next(rowHeaderRows);
         this.valuesRows.next(toData((this.normalizedData || []).slice(), columnHeaderLeaves, rowHeaderLeaves, columnHeaderBreadth, rowHeaderDepth));
         if (isDocumentAvailable()) {
-            this.ngZone.runOutsideAngular(() => {
-                // needed because all tables need to be rendered in accordance with the new settings
-                // before applying the required DOM attributes
-                setTimeout(() => matchAriaAttributes(this.wrapper));
-            });
+            // Waits for the tables to re-render with the new settings before applying the required DOM attributes.
+            afterNextRender(() => matchAriaAttributes(this.wrapper), { injector: this.injector });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PivotGridDataService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PivotGridDataService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PivotGridDataService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PivotGridDataService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { expandedStateChange: [{
+        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { expandedStateChange: [{
                 type: Output
             }], configuratorFieldChange: [{
                 type: Output
@@ -492,7 +489,7 @@ class PivotGridState {
 class ConfiguratorService {
     dataService;
     configuratorInstance;
-    state;
+    state = signal(undefined, ...(ngDevMode ? [{ debugName: "state" }] : []));
     draggedElement;
     dropTargetElement;
     cueContainer;
@@ -503,21 +500,25 @@ class ConfiguratorService {
         this.dataService = dataService;
     }
     parseConfiguratorState(action) {
+        if (!this.dataService.state) {
+            return;
+        }
+        const currentState = this.state() || {};
         const newState = configuratorReducer({
             filter: this.dataService.state.filter,
             sort: this.dataService.state.sort,
             rowAxes: this.dataService.state.rowAxes,
             columnAxes: this.dataService.state.columnAxes,
             measureAxes: this.dataService.state.measureAxes,
-            dragItem: this.state.dragItem,
-            dropDirection: this.state.dropDirection,
-            dropTarget: this.state.dropTarget,
-            dropZone: this.state.dropZone
+            dragItem: currentState.dragItem,
+            dropDirection: currentState.dropDirection,
+            dropTarget: currentState.dropTarget,
+            dropZone: currentState.dropZone
         }, action);
         Object.keys(newState).forEach(key => newState[key] === undefined && delete newState[key]);
-        this.state = { ...this.state, ...newState };
-        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);
+        this.state.set({ ...currentState, ...newState });
+        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: "20.3.30", ngImport: i0, type: ConfiguratorService, deps: [{ token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ConfiguratorService });
@@ -580,12 +581,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  */
 class ChipMenuContainerComponent {
     service;
-    ngZone;
+    injector;
     chipMenuItems;
     hostClass = true;
-    constructor(service, ngZone) {
+    constructor(service, injector) {
         this.service = service;
-        this.ngZone = ngZone;
+        this.injector = injector;
     }
     ngAfterViewInit() {
         if (!this.chipMenuItems.length) {
@@ -593,12 +594,12 @@ class ChipMenuContainerComponent {
         }
         this.chipMenuItems.first.isFirst = true;
         this.chipMenuItems.last.isLast = true;
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.service.menuTabbingService.firstFocusable.focus());
+        afterNextRender(() => this.service.menuTabbingService.firstFocusable.focus(), { injector: this.injector });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ChipMenuContainerComponent, deps: [{ token: ChipMenuService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ChipMenuContainerComponent, deps: [{ token: ChipMenuService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", 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 });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ChipMenuContainerComponent, decorators: [{
             type: Component,
@@ -607,9 +608,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     template: `
         <ng-content></ng-content>
     `,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: ChipMenuService }, { type: i0.NgZone }], propDecorators: { chipMenuItems: [{
+        }], ctorParameters: () => [{ type: ChipMenuService }, { type: i0.Injector }], propDecorators: { chipMenuItems: [{
                 type: ContentChildren,
                 args: [ChipMenuItemDirective, { descendants: true }]
             }], hostClass: [{
@@ -648,8 +650,14 @@ class ChipMenuItemBase {
      * Represents the ChipMenuService class.
      * Requires a mandatory input.
      */
-    service;
+    set service(value) {
+        this._service.set(value);
+    }
+    get service() {
+        return this._service();
+    }
     hostClass = true;
+    _service = signal(undefined, ...(ngDevMode ? [{ debugName: "_service" }] : []));
     ngOnInit() {
         if (isDevMode() && !this.service) {
             throw new Error('The service input of the host chip menu components (e.g. ChipMenuSortComponent) is mandatory.');
@@ -659,13 +667,14 @@ class ChipMenuItemBase {
         this.service.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ChipMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: ChipMenuItemBase, isStandalone: true, selector: "kendo-pivot-chip-menu-item-base", inputs: { service: "service" }, host: { properties: { "class.k-columnmenu-item-wrapper": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: ChipMenuItemBase, isStandalone: true, selector: "kendo-pivot-chip-menu-item-base", inputs: { service: "service" }, host: { properties: { "class.k-columnmenu-item-wrapper": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ChipMenuItemBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivot-chip-menu-item-base',
-                    template: ``
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { service: [{
                 type: Input
@@ -679,7 +688,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  */
 class FilterMenuDropDownListDirective {
     host;
-    filterMenuDropDownLabel;
+    set filterMenuDropDownLabel(value) {
+        this._filterMenuDropDownLabel.set(value);
+    }
+    get filterMenuDropDownLabel() {
+        return this._filterMenuDropDownLabel();
+    }
+    _filterMenuDropDownLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterMenuDropDownLabel" }] : []));
     constructor(host) {
         this.host = host;
     }
@@ -741,14 +756,26 @@ class StringFilterMenuComponent {
     /**
      * The field with which the filter is associated.
      */
-    chip;
-    menuTabbingService;
+    set chip(value) {
+        this._chip.set(value);
+    }
+    get chip() {
+        return this._chip();
+    }
+    set menuTabbingService(value) {
+        this._menuTabbingService.set(value);
+    }
+    get menuTabbingService() {
+        return this._menuTabbingService();
+    }
     operators;
     filterFormGroup;
     get currentFilter() {
-        const filterValue = this.configuratorService.state.filter?.filter(x => x.field === this.chip.name.toString());
+        const filterValue = this.configuratorService.state().filter?.filter(x => x.field === this.chip.name.toString());
         return filterValue && filterValue[0];
     }
+    _chip = signal(undefined, ...(ngDevMode ? [{ debugName: "_chip" }] : []));
+    _menuTabbingService = signal(undefined, ...(ngDevMode ? [{ debugName: "_menuTabbingService" }] : []));
     subscription = new Subscription();
     constructor(localization, configuratorService, fb) {
         this.localization = localization;
@@ -803,7 +830,7 @@ class StringFilterMenuComponent {
                     formControlName="value"
                 />
         </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", "adaptiveTitle", "adaptiveSubtitle", "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"] }] });
+    `, 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", "adaptiveTitle", "adaptiveSubtitle", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
             type: Component,
@@ -832,7 +859,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         </ng-container>
     `,
                     standalone: true,
-                    imports: [ReactiveFormsModule, DropDownListComponent, FilterMenuDropDownListDirective, TextBoxDirective]
+                    imports: [ReactiveFormsModule, DropDownListComponent, FilterMenuDropDownListDirective, TextBoxDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: PivotLocalizationService }, { type: ConfiguratorService }, { type: i3.FormBuilder }], propDecorators: { chip: [{
                 type: Input
@@ -857,12 +885,36 @@ class FilterMenuContainerComponent {
     /**
      * The field with which the filter is associated.
      */
-    chip;
-    isExpanded;
-    menuTabbingService;
-    actionsClass = 'k-action-buttons k-button-group';
+    set chip(value) {
+        this._chip.set(value);
+    }
+    get chip() {
+        return this._chip();
+    }
+    set isExpanded(value) {
+        this._isExpanded.set(value);
+    }
+    get isExpanded() {
+        return this._isExpanded();
+    }
+    set menuTabbingService(value) {
+        this._menuTabbingService.set(value);
+    }
+    get menuTabbingService() {
+        return this._menuTabbingService();
+    }
+    set actionsClass(value) {
+        this._actionsClass.set(value);
+    }
+    get actionsClass() {
+        return this._actionsClass();
+    }
     filterDescriptorValue;
     filterMenuComponent;
+    _chip = signal(undefined, ...(ngDevMode ? [{ debugName: "_chip" }] : []));
+    _isExpanded = signal(undefined, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : []));
+    _menuTabbingService = signal(undefined, ...(ngDevMode ? [{ debugName: "_menuTabbingService" }] : []));
+    _actionsClass = signal('k-action-buttons k-button-group', ...(ngDevMode ? [{ debugName: "_actionsClass" }] : []));
     constructor(localization, cd, menuTabbingService, configuratorService) {
         this.localization = localization;
         this.cd = cd;
@@ -876,7 +928,7 @@ class FilterMenuContainerComponent {
         return !(this.filterDescriptorValue && validFilter(this.filterDescriptorValue));
     }
     get clearDisabled() {
-        const hasPersistedFilter = !!this.configuratorService.state.filter?.some(descriptor => descriptor.field === this.chip.name.toString());
+        const hasPersistedFilter = !!this.configuratorService.state().filter?.some(descriptor => descriptor.field === this.chip.name.toString());
         const hasPendingValue = !!this.filterDescriptorValue && (hasFieldValue(this.filterDescriptorValue.operator) || hasFieldValue(this.filterDescriptorValue.value));
         return !hasPersistedFilter && !hasPendingValue;
     }
@@ -885,10 +937,10 @@ class FilterMenuContainerComponent {
             field: this.chip.name.toString(),
             ...this.filterDescriptorValue
         };
-        const payload = !this.configuratorService.state.filter ?
+        const payload = !this.configuratorService.state().filter ?
             [filterDescriptor] :
             [
-                ...this.configuratorService.state.filter.filter(descriptor => descriptor.field !== filterDescriptor.field),
+                ...this.configuratorService.state().filter.filter(descriptor => descriptor.field !== filterDescriptor.field),
                 filterDescriptor
             ];
         this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setFilter, payload: payload });
@@ -900,7 +952,7 @@ class FilterMenuContainerComponent {
         if (this.clearDisabled) {
             return;
         }
-        const currentFilters = this.configuratorService.state.filter || [];
+        const currentFilters = this.configuratorService.state().filter || [];
         const filters = currentFilters.filter(descriptor => descriptor.field !== this.chip.name.toString());
         this.filterMenuComponent?.filterFormGroup.setValue({ operator: '', value: '' });
         this.filterDescriptorValue = { operator: '', value: '' };
@@ -955,7 +1007,7 @@ class FilterMenuContainerComponent {
                 </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]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, 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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
             type: Component,
@@ -996,7 +1048,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         </form>
     `,
                     standalone: true,
-                    imports: [ReactiveFormsModule, FormsModule, StringFilterMenuComponent, NgClass, ButtonComponent]
+                    imports: [ReactiveFormsModule, FormsModule, StringFilterMenuComponent, NgClass, ButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: PivotLocalizationService }, { type: i0.ChangeDetectorRef }, { type: MenuTabbingService }, { type: ConfiguratorService }], propDecorators: { close: [{
                 type: Output
@@ -1058,43 +1111,76 @@ class ChipMenuItemComponent {
      * Specifies the name of the [font icon](https://www.telerik.com/kendo-angular-ui/components/styling/icons#icons-list)
      * that will be rendered for the item.
      */
-    icon;
+    set icon(value) {
+        this._icon.set(value);
+    }
+    get icon() {
+        return this._icon();
+    }
     /**
      * Defines an SVGIcon to be rendered for the column menu items.
      * The input can take either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
-    svgIcon;
+    set svgIcon(value) {
+        this._svgIcon.set(value);
+    }
+    get svgIcon() {
+        return this._svgIcon();
+    }
     /**
      * Specifies the item text.
      */
-    text;
+    set text(value) {
+        this._text.set(value);
+    }
+    get text() {
+        return this._text();
+    }
     /**
      * Specifies if the item is selected.
      */
-    selected;
+    set selected(value) {
+        this._selected.set(value);
+    }
+    get selected() {
+        return this._selected();
+    }
     /**
      * Specifies if the item is expanded.
      */
-    expanded;
+    set expanded(value) {
+        this._expanded.set(value);
+    }
+    get expanded() {
+        return this._expanded();
+    }
     /**
      * Specified if the item is disabled
      */
-    disabled;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     contentTemplate;
     get iconClass() {
         return `k-i-${this.icon}`;
     }
-    contentState = 'collapsed';
-    ngOnChanges(changes) {
-        if (changes.expanded) {
-            this.updateContentState();
-        }
+    get contentState() {
+        return this._contentState();
     }
+    _icon = signal(undefined, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _text = signal(undefined, ...(ngDevMode ? [{ debugName: "_text" }] : []));
+    _selected = signal(undefined, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
+    _expanded = signal(undefined, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
+    _disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _contentState = computed(() => this._expanded() ? 'expanded' : 'collapsed', ...(ngDevMode ? [{ debugName: "_contentState" }] : []));
     onClick(e) {
         this.itemClick.emit(e);
         if (this.contentTemplate) {
             this.expanded = !this.expanded;
-            this.updateContentState();
             if (this.expanded) {
                 this.expand.emit();
             }
@@ -1103,11 +1189,8 @@ class ChipMenuItemComponent {
             }
         }
     }
-    updateContentState() {
-        this.contentState = this.expanded ? 'expanded' : 'collapsed';
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ChipMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", 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 }], ngImport: i0, template: `
         <div
             class="k-columnmenu-item"
             (click)="onClick($event)"
@@ -1153,7 +1236,7 @@ class ChipMenuItemComponent {
                     }))
                 ])
             ])
-        ] });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ChipMenuItemComponent, decorators: [{
             type: Component,
@@ -1208,7 +1291,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         }
     `,
                     standalone: true,
-                    imports: [IconWrapperComponent, NgTemplateOutlet]
+                    imports: [IconWrapperComponent, NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { itemClick: [{
                 type: Output
@@ -1250,13 +1334,25 @@ class ChipMenuFilterComponent extends ChipMenuItemBase {
     /**
      * Holds current field information.
      */
-    chip;
+    set chip(value) {
+        this._chip.set(value);
+    }
+    get chip() {
+        return this._chip();
+    }
     /**
      * Specifies if the content is expanded.
      */
-    expanded = false;
+    set expanded(value) {
+        this._expanded.set(value);
+    }
+    get expanded() {
+        return this._expanded();
+    }
     actionsClass = 'k-columnmenu-actions';
     filterSVGIcon = filterIcon;
+    _chip = signal(undefined, ...(ngDevMode ? [{ debugName: "_chip" }] : []));
+    _expanded = signal(false, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
     constructor(localization) {
         super();
         this.localization = localization;
@@ -1296,7 +1392,7 @@ class ChipMenuFilterComponent extends ChipMenuItemBase {
                 </kendo-pivot-filter-menu-container>
             </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", "isExpanded", "menuTabbingService", "actionsClass"], outputs: ["close"] }] });
+    `, 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", "isExpanded", "menuTabbingService", "actionsClass"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ChipMenuFilterComponent, decorators: [{
             type: Component,
@@ -1324,7 +1420,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         </kendo-pivot-chipmenu-item>
     `,
                     standalone: true,
-                    imports: [ChipMenuItemComponent, ChipMenuItemContentTemplateDirective, FilterMenuContainerComponent]
+                    imports: [ChipMenuItemComponent, ChipMenuItemContentTemplateDirective, FilterMenuContainerComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: PivotLocalizationService }], propDecorators: { expand: [{
                 type: Output
@@ -1348,29 +1445,35 @@ class ChipMenuReorderComponent extends ChipMenuItemBase {
     dataService;
     cdr;
     ngZone;
-    chip;
+    set chip(value) {
+        this._chip.set(value);
+    }
+    get chip() {
+        return this._chip();
+    }
     columnsIcon = columnsIcon;
     rowsIcon = rowsIcon;
     arrowLeftIcon = arrowLeftIcon;
     arrowRightIcon = arrowRightIcon;
     rtl = false;
+    _chip = signal(undefined, ...(ngDevMode ? [{ debugName: "_chip" }] : []));
     get isColumnsField() {
-        return this.configuratorService.state.columnAxes.some(item => item === this.chip);
+        return this.configuratorService.state().columnAxes.some(item => item === this.chip);
     }
     get isRowsField() {
-        return this.configuratorService.state.rowAxes.some(item => item === this.chip);
+        return this.configuratorService.state().rowAxes.some(item => item === this.chip);
     }
     get isMeasureField() {
-        return this.configuratorService.state.measureAxes.some(item => item === this.chip);
+        return this.configuratorService.state().measureAxes.some(item => item === this.chip);
     }
     get isFirst() {
-        const state = this.configuratorService.state;
+        const state = this.configuratorService.state();
         return this.isColumnsField && state.columnAxes[0] === this.chip ||
             this.isRowsField && state.rowAxes[0] === this.chip ||
             this.isMeasureField && state.measureAxes[0] === this.chip;
     }
     get isLast() {
-        const state = this.configuratorService.state;
+        const state = this.configuratorService.state();
         return this.isColumnsField && state.columnAxes[state.columnAxes.length - 1] === this.chip ||
             this.isRowsField && state.rowAxes[state.rowAxes.length - 1] === this.chip ||
             this.isMeasureField && state.measureAxes[state.measureAxes.length - 1] === this.chip;
@@ -1397,7 +1500,7 @@ class ChipMenuReorderComponent extends ChipMenuItemBase {
         if (isDisabled) {
             return;
         }
-        const currentState = this.configuratorService.state;
+        const currentState = this.configuratorService.state();
         switch (target) {
             case 'columns':
                 {
@@ -1472,7 +1575,7 @@ class ChipMenuReorderComponent extends ChipMenuItemBase {
           [svgIcon]="rtl ? arrowLeftIcon : arrowRightIcon"
           (itemClick)="move($event, 'next')">
         </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"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded", "disabled"], outputs: ["itemClick", "expand", "collapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ChipMenuReorderComponent, decorators: [{
             type: Component,
@@ -1513,7 +1616,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         </kendo-pivot-chipmenu-item>
         `,
                     standalone: true,
-                    imports: [ChipMenuItemComponent]
+                    imports: [ChipMenuItemComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: PivotLocalizationService }, { type: i0.Renderer2 }, { type: ConfiguratorService }, { type: PivotGridDataService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { chip: [{
                 type: Input
@@ -1529,9 +1633,15 @@ class ChipMenuSortComponent extends ChipMenuItemBase {
     localization;
     renderer;
     configuratorService;
-    chip;
+    set chip(value) {
+        this._chip.set(value);
+    }
+    get chip() {
+        return this._chip();
+    }
     sortAscSVGIcon = sortAscSmallIcon;
     sortDescSVGIcon = sortDescSmallIcon;
+    _chip = signal(undefined, ...(ngDevMode ? [{ debugName: "_chip" }] : []));
     constructor(localization, renderer, configuratorService) {
         super();
         this.localization = localization;
@@ -1555,7 +1665,7 @@ class ChipMenuSortComponent extends ChipMenuItemBase {
     toggleSort(dir) {
         const field = this.chip.name.toString();
         const descriptor = this.descriptor;
-        const sort = this.configuratorService.state.sort.filter(s => s.field !== field);
+        const sort = this.configuratorService.state().sort.filter(s => s.field !== field);
         if (!descriptor || descriptor.dir !== dir) {
             sort.push({ field, dir });
         }
@@ -1563,7 +1673,7 @@ class ChipMenuSortComponent extends ChipMenuItemBase {
         this.close();
     }
     get descriptor() {
-        return [].concat(this.configuratorService.state.sort || []).find(s => s.field === this.chip.name.toString());
+        return [].concat(this.configuratorService.state().sort || []).find(s => s.field === this.chip.name.toString());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", 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: "20.3.30", type: ChipMenuSortComponent, isStandalone: true, selector: "kendo-pivot-chipmenu-sort", inputs: { chip: "chip" }, usesInheritance: true, ngImport: i0, template: `
@@ -1581,7 +1691,7 @@ class ChipMenuSortComponent extends ChipMenuItemBase {
             (itemClick)="toggleSort('desc')"
             [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"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded", "disabled"], outputs: ["itemClick", "expand", "collapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ChipMenuSortComponent, decorators: [{
             type: Component,
@@ -1604,7 +1714,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         </kendo-pivot-chipmenu-item>
     `,
                     standalone: true,
-                    imports: [ChipMenuItemComponent]
+                    imports: [ChipMenuItemComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: PivotLocalizationService }, { type: i0.Renderer2 }, { type: ConfiguratorService }], propDecorators: { chip: [{
                 type: Input
@@ -1748,14 +1859,38 @@ class ChipMenuComponent {
     /**
      * The Configurator field instance to control with the menu.
      */
-    chip;
-    tabIndex = '-1';
-    isMeasureField = false;
-    anchor;
+    set chip(value) {
+        this._chip.set(value);
+    }
+    get chip() {
+        return this._chip();
+    }
+    set tabIndex(value) {
+        this._tabIndex.set(value);
+    }
+    get tabIndex() {
+        return this._tabIndex();
+    }
+    set isMeasureField(value) {
+        this._isMeasureField.set(value);
+    }
+    get isMeasureField() {
+        return this._isMeasureField();
+    }
+    set anchor(value) {
+        this._anchor.set(value);
+    }
+    get anchor() {
+        return this._anchor();
+    }
     template;
     menuItemSVGIcon = moreVerticalIcon;
     popupRef;
     closeSubscription;
+    _chip = signal(undefined, ...(ngDevMode ? [{ debugName: "_chip" }] : []));
+    _tabIndex = signal('-1', ...(ngDevMode ? [{ debugName: "_tabIndex" }] : []));
+    _isMeasureField = signal(false, ...(ngDevMode ? [{ debugName: "_isMeasureField" }] : []));
+    _anchor = signal(undefined, ...(ngDevMode ? [{ debugName: "_anchor" }] : []));
     constructor(popupService, localization, service, renderer) {
         this.popupService = popupService;
         this.localization = localization;
@@ -1824,7 +1959,7 @@ class ChipMenuComponent {
             [service]="service"></kendo-pivot-chipmenu-reorder>
           </kendo-pivot-chipmenu-container>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { 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"], outputs: ["expand", "collapse"] }, { kind: "component", type: ChipMenuReorderComponent, selector: "kendo-pivot-chipmenu-reorder", inputs: ["chip"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { 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"], outputs: ["expand", "collapse"] }, { kind: "component", type: ChipMenuReorderComponent, selector: "kendo-pivot-chipmenu-reorder", inputs: ["chip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ChipMenuComponent, decorators: [{
             type: Component,
@@ -1864,7 +1999,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         </ng-template>
         `,
                     standalone: true,
-                    imports: [ChipMenuContainerComponent, ChipMenuSortComponent, ChipMenuItemDirective, ChipMenuFilterComponent, ChipMenuReorderComponent]
+                    imports: [ChipMenuContainerComponent, ChipMenuSortComponent, ChipMenuItemDirective, ChipMenuFilterComponent, ChipMenuReorderComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: SinglePopupService }, { type: PivotLocalizationService }, { type: ChipMenuService }, { type: i0.Renderer2 }], propDecorators: { chip: [{
                 type: Input
@@ -1973,10 +2109,22 @@ class DraggableChipDirective {
         return this.drag ? 'none' : undefined;
     }
     touchActions = 'none';
-    item;
+    set item(value) {
+        this._item.set(value);
+    }
+    get item() {
+        return this._item();
+    }
     initialX = {};
     initialY = {};
-    drag;
+    _item = signal(undefined, ...(ngDevMode ? [{ debugName: "_item" }] : []));
+    get drag() {
+        return this._drag();
+    }
+    set drag(value) {
+        this._drag.set(value);
+    }
+    _drag = signal(false, ...(ngDevMode ? [{ debugName: "_drag" }] : []));
     invalidTarget = false;
     subs = new Subscription();
     constructor(draggable, element, zone, service, cue, renderer) {
@@ -2031,19 +2179,14 @@ class DraggableChipDirective {
             this.zone.runOutsideAngular(() => {
                 this.drag = false;
                 this.invalidTarget = false;
-                if (this.service.state.dragItem) {
+                if (this.service.state().dragItem) {
                     const element = this.element.nativeElement;
                     if (isDocumentAvailable()) {
                         this.renderer.removeStyle(element, 'transform');
                         this.cue.remove(this.service.cueContainer);
                     }
                     this.service.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.drop, payload: this.item });
-                    this.service.state.dragItem = null;
-                    this.service.state.dropDirection = null;
-                    this.service.state.dropTarget = null;
-                    this.service.state.dropZone = null;
-                    this.renderer.removeStyle(element, 'z-index');
-                    this.service.draggedElement = null;
+                    this.service.state.update(s => ({ ...s, dragItem: null, dropDirection: null, dropTarget: null, dropZone: null }));
                     if (this.service.dropTargetElement) {
                         this.renderer.removeStyle(this.service.dropTargetElement, 'cursor');
                         this.service.dropTargetElement = null;
@@ -2085,8 +2228,20 @@ class DropTargetDirective {
     cue;
     renderer;
     zone;
-    item;
-    axes;
+    set item(value) {
+        this._item.set(value);
+    }
+    get item() {
+        return this._item();
+    }
+    set axes(value) {
+        this._axes.set(value);
+    }
+    get axes() {
+        return this._axes();
+    }
+    _item = signal(undefined, ...(ngDevMode ? [{ debugName: "_item" }] : []));
+    _axes = signal(undefined, ...(ngDevMode ? [{ debugName: "_axes" }] : []));
     elementType;
     elementSectionType;
     targetElement;
@@ -2112,7 +2267,7 @@ class DropTargetDirective {
     }
     handleMouseEnter(event) {
         this.zone.runOutsideAngular(() => {
-            if (this.configuratorService.state.dragItem) {
+            if (this.configuratorService.state().dragItem) {
                 this.configuratorService.dropTargetElement = this.element.nativeElement;
                 if (this.configuratorService.draggedElement && !this.isDropAllowed(this.configuratorService.draggedElement.fromSection)) {
                     return;
@@ -2129,7 +2284,7 @@ class DropTargetDirective {
     handleMouseMove(event) {
         this.zone.runOutsideAngular(() => {
             event.stopImmediatePropagation();
-            if (this.configuratorService.state.dragItem) {
+            if (this.configuratorService.state().dragItem) {
                 if (this.configuratorService.draggedElement && !this.isDropAllowed(this.configuratorService.draggedElement.fromSection)) {
                     this.renderer.setStyle(this.element.nativeElement, 'cursor', 'not-allowed');
                     return;
@@ -2146,7 +2301,7 @@ class DropTargetDirective {
                         const x = event.clientX - rect.left;
                         const direction = x < rect.width / 2 ? 'before' : 'after';
                         this.cue.show(direction, this.configuratorService.cueContainer, this.targetElement);
-                        if (direction !== this.configuratorService.state.dropDirection) {
+                        if (direction !== this.configuratorService.state().dropDirection) {
                             this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropDirection, payload: direction });
                         }
                         break;
@@ -2161,7 +2316,7 @@ class DropTargetDirective {
                             const nextChip = this.getNextChip(draggedElement);
                             if (!nextChip) {
                                 this.cue.show('before', this.configuratorService.cueContainer, draggedElement);
-                                if (this.configuratorService.state.dropDirection !== 'before') {
+                                if (this.configuratorService.state().dropDirection !== 'before') {
                                     this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropDirection, payload: 'before' });
                                 }
                                 return;
@@ -2176,7 +2331,7 @@ class DropTargetDirective {
                                 return;
                             }
                         }
-                        if (this.configuratorService.state.dropDirection !== 'after') {
+                        if (this.configuratorService.state().dropDirection !== 'after') {
                             this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropDirection, payload: 'after' });
                         }
                         this.cue.show('after', this.configuratorService.cueContainer, this.targetElement);
@@ -2198,7 +2353,7 @@ class DropTargetDirective {
             if (this.elementType === 'chip') {
                 return;
             }
-            if (this.configuratorService.state.dragItem) {
+            if (this.configuratorService.state().dragItem) {
                 this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropZone, payload: null });
             }
         });
@@ -2268,18 +2423,54 @@ class PivotGridConfiguratorComponent {
     get headerTextId() {
         return `k-pivotgrid-${this.dataService.pivotGridId}-configurator-header`;
     }
-    orientation = 'vertical';
-    sort = new Array();
-    filter;
-    navigation;
+    set orientation(value) {
+        this._orientation.set(value);
+        this.configuratorService.orientation = value;
+    }
+    get orientation() {
+        return this._orientation();
+    }
+    set sort(value) {
+        this._sort.set(value);
+    }
+    get sort() {
+        return this._sort();
+    }
+    set filter(value) {
+        this._filter.set(value);
+    }
+    get filter() {
+        return this._filter();
+    }
+    set navigation(value) {
+        this._navigation.set(value);
+    }
+    get navigation() {
+        return this._navigation();
+    }
     close = new EventEmitter();
     treeView;
     columnsList;
     rowsList;
     originalState;
-    state;
-    fields;
-    checked = [];
+    set state(value) {
+        this._state.set(value);
+    }
+    get state() {
+        return this._state();
+    }
+    set fields(value) {
+        this._fields.set(value);
+    }
+    get fields() {
+        return this._fields();
+    }
+    set checked(value) {
+        this._checked.set(value);
+    }
+    get checked() {
+        return this._checked();
+    }
     get isHorizontal() {
         return this.orientation === 'horizontal';
     }
@@ -2289,6 +2480,13 @@ class PivotGridConfiguratorComponent {
         return hasNoValues && hasNoRowsOrColumns;
     }
     subs = new Subscription();
+    _orientation = signal('vertical', ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
+    _sort = signal(new Array(), ...(ngDevMode ? [{ debugName: "_sort" }] : []));
+    _filter = signal(undefined, ...(ngDevMode ? [{ debugName: "_filter" }] : []));
+    _navigation = signal(undefined, ...(ngDevMode ? [{ debugName: "_navigation" }] : []));
+    _state = signal(undefined, ...(ngDevMode ? [{ debugName: "_state" }] : []));
+    _fields = signal(undefined, ...(ngDevMode ? [{ debugName: "_fields" }] : []));
+    _checked = signal([], ...(ngDevMode ? [{ debugName: "_checked" }] : []));
     /**
      * A function which determines if a specific node has child nodes.
      */
@@ -2336,11 +2534,6 @@ class PivotGridConfiguratorComponent {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
-    ngOnChanges(changes) {
-        if (changes['orientation']) {
-            this.configuratorService.orientation = this.orientation;
-        }
-    }
     getName(name) {
         return name.toString();
     }
@@ -2355,7 +2548,8 @@ class PivotGridConfiguratorComponent {
             sort: state.sort,
             filter: state.filter
         };
-        this.state = this.configuratorService.state = state;
+        this.state = state;
+        this.configuratorService.state.set(state);
         this.cdr.detectChanges();
     }
     onReorder(ev, name, item) {
@@ -2557,7 +2751,7 @@ class PivotGridConfiguratorComponent {
             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: `
+        ], 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 }], ngImport: i0, template: `
         <div
             class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
             [ngClass]="{
@@ -2775,7 +2969,7 @@ class PivotGridConfiguratorComponent {
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()" [disabled]="isApplyDisabled" [attr.aria-disabled]="isApplyDisabled || null">{{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", "loadMoreButtonRole", "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: 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: ["orientation", "selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { 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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+   `, 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", "loadMoreButtonRole", "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: 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: ["orientation", "selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { 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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
             type: Component,
@@ -3010,7 +3204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         NgClass, NgStyle, TreeViewComponent, ExpandDirective, CheckDirective,
                         NgTemplateOutlet, DropTargetDirective, ChipListComponent, ChipComponent, DraggableChipDirective,
                         DraggableDirective, ChipKeyboardNavigationDirective, ChipMenuComponent, ButtonComponent
-                    ]
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: PivotGridDataService }, { type: i1$1.LocalizationService }, { type: ConfiguratorService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -3110,23 +3305,48 @@ class PivotBaseBindingDirective {
     /**
      * Defines the column axes configuration of the PivotGrid.
      */
-    columnAxes = [];
+    set columnAxes(value) {
+        this._columnAxes.set(value);
+    }
+    get columnAxes() {
+        return this._columnAxes();
+    }
     /**
      * Defines the row axes configuration of the PivotGrid.
      */
-    rowAxes = [];
+    set rowAxes(value) {
+        this._rowAxes.set(value);
+    }
+    get rowAxes() {
+        return this._rowAxes();
+    }
     /**
      * Defines the measure axes configuration of the PivotGrid.
      */
-    measureAxes = [];
+    set measureAxes(value) {
+        this._measureAxes.set(value);
+    }
+    get measureAxes() {
+        return this._measureAxes();
+    }
     /**
      * Sets the initial sorted state of the PivotGrid.
      */
-    sort = [];
+    set sort(value) {
+        this._sort.set(value);
+    }
+    get sort() {
+        return this._sort();
+    }
     /**
      * Sets the initial filtered state of the PivotGrid.
      */
-    filter;
+    set filter(value) {
+        this._filter.set(value);
+    }
+    get filter() {
+        return this._filter();
+    }
     /**
      * Fires each time a row or column header gets expanded or collapsed by the user.
      *
@@ -3148,6 +3368,11 @@ class PivotBaseBindingDirective {
     dataState;
     configuratorFields;
     subs = new Subscription();
+    _columnAxes = signal([], ...(ngDevMode ? [{ debugName: "_columnAxes" }] : []));
+    _rowAxes = signal([], ...(ngDevMode ? [{ debugName: "_rowAxes" }] : []));
+    _measureAxes = signal([], ...(ngDevMode ? [{ debugName: "_measureAxes" }] : []));
+    _sort = signal([], ...(ngDevMode ? [{ debugName: "_sort" }] : []));
+    _filter = signal(undefined, ...(ngDevMode ? [{ debugName: "_filter" }] : []));
     constructor(dataService, zone) {
         this.dataService = dataService;
         this.zone = zone;
@@ -3276,16 +3501,34 @@ class PivotLocalBindingDirective extends PivotBaseBindingDirective {
     /**
      * Contains the array of data which will be used to populate the PivotGrid.
      */
-    data;
+    set data(value) {
+        this._data.set(value);
+    }
+    get data() {
+        return this._data();
+    }
     /**
      * Defines the dimensions object of the PivotGrid.
      */
-    dimensions;
+    set dimensions(value) {
+        this._dimensions.set(value);
+    }
+    get dimensions() {
+        return this._dimensions();
+    }
     /**
      * Contains the measures collection of the PivotGrid.
      */
-    measures;
+    set measures(value) {
+        this._measures.set(value);
+    }
+    get measures() {
+        return this._measures();
+    }
     type = 'local';
+    _data = signal(undefined, ...(ngDevMode ? [{ debugName: "_data" }] : []));
+    _dimensions = signal(undefined, ...(ngDevMode ? [{ debugName: "_dimensions" }] : []));
+    _measures = signal(undefined, ...(ngDevMode ? [{ debugName: "_measures" }] : []));
     constructor(dataService, zone) {
         super(dataService, zone);
     }
@@ -3377,16 +3620,34 @@ class PivotOLAPBindingDirective extends PivotBaseBindingDirective {
     /**
      * Defines the OLAP service endpoint where the data is processed and retrieved to render the pivot table.
      */
-    url;
+    set url(value) {
+        this._url.set(value);
+    }
+    get url() {
+        return this._url();
+    }
     /**
      * Sets the cube name that is used to retrieve data for the pivot table rendering.
      */
-    cube;
+    set cube(value) {
+        this._cube.set(value);
+    }
+    get cube() {
+        return this._cube();
+    }
     /**
      * Sets the database name that is used to retrieve the data from the specified connection string.
      */
-    catalog;
+    set catalog(value) {
+        this._catalog.set(value);
+    }
+    get catalog() {
+        return this._catalog();
+    }
     type = 'olap';
+    _url = signal(undefined, ...(ngDevMode ? [{ debugName: "_url" }] : []));
+    _cube = signal(undefined, ...(ngDevMode ? [{ debugName: "_cube" }] : []));
+    _catalog = signal(undefined, ...(ngDevMode ? [{ debugName: "_catalog" }] : []));
     constructor(dataService, zone) {
         super(dataService, zone);
     }
@@ -3554,15 +3815,30 @@ class PivotGridMessages extends ComponentMessages {
     /**
      * Sets the text content of the filter item in the column and row fields menu.
      */
-    fieldMenuFilterItemLabel;
+    set fieldMenuFilterItemLabel(value) {
+        this._fieldMenuFilterItemLabel.set(value);
+    }
+    get fieldMenuFilterItemLabel() {
+        return this._fieldMenuFilterItemLabel();
+    }
     /**
      * Specifies the text content of the sort ascending item in the column and row fields menu.
      */
-    fieldMenuSortAscendingItemLabel;
+    set fieldMenuSortAscendingItemLabel(value) {
+        this._fieldMenuSortAscendingItemLabel.set(value);
+    }
+    get fieldMenuSortAscendingItemLabel() {
+        return this._fieldMenuSortAscendingItemLabel();
+    }
     /**
      * Sets the text content of the sort descending item in the column and row fields menu.
      */
-    fieldMenuSortDescendingItemLabel;
+    set fieldMenuSortDescendingItemLabel(value) {
+        this._fieldMenuSortDescendingItemLabel.set(value);
+    }
+    get fieldMenuSortDescendingItemLabel() {
+        return this._fieldMenuSortDescendingItemLabel();
+    }
     /**
      * Defines the label of the filter input.
      *
@@ -3572,7 +3848,12 @@ class PivotGridMessages extends ComponentMessages {
     * You can reorder the parts using `'[[fields]]'` as a placeholder. The `'[[fields]]'` placeholder will get replaced
     * with the field name(s). For example, `'filter for [[fields]]'` will become `'filter for Geography City'`.
      */
-    filterInputLabel;
+    set filterInputLabel(value) {
+        this._filterInputLabel.set(value);
+    }
+    get filterInputLabel() {
+        return this._filterInputLabel();
+    }
     /**
      * Specifies the label of the filter operators DropDownList.
      *
@@ -3582,126 +3863,276 @@ class PivotGridMessages extends ComponentMessages {
     * You can reorder the parts using `'[[fields]]'` as a placeholder. The `'[[fields]]'` placeholder will get replaced
     * with the field name(s). For example, `'filter operators for [[fields]]'` will become `'filter operators for Geography City'`.
      */
-    filterOperatorsDropDownLabel;
+    set filterOperatorsDropDownLabel(value) {
+        this._filterOperatorsDropDownLabel.set(value);
+    }
+    get filterOperatorsDropDownLabel() {
+        return this._filterOperatorsDropDownLabel();
+    }
     /**
      * Sets the text of the `Equal` (**Is equal to**) filter operator.
      */
-    filterEqOperator;
+    set filterEqOperator(value) {
+        this._filterEqOperator.set(value);
+    }
+    get filterEqOperator() {
+        return this._filterEqOperator();
+    }
     /**
      * Specifies the text of the `NotEqual` (**Is not equal to**) filter operator.
      */
-    filterNotEqOperator;
+    set filterNotEqOperator(value) {
+        this._filterNotEqOperator.set(value);
+    }
+    get filterNotEqOperator() {
+        return this._filterNotEqOperator();
+    }
     /**
      * Specifies the text of the `IsNull` (**Is null**) filter operator.
      */
-    filterIsNullOperator;
+    set filterIsNullOperator(value) {
+        this._filterIsNullOperator.set(value);
+    }
+    get filterIsNullOperator() {
+        return this._filterIsNullOperator();
+    }
     /**
      * Sets the text of the `IsNotNull` (**Is not null**) filter operator.
      */
-    filterIsNotNullOperator;
+    set filterIsNotNullOperator(value) {
+        this._filterIsNotNullOperator.set(value);
+    }
+    get filterIsNotNullOperator() {
+        return this._filterIsNotNullOperator();
+    }
     /**
      * Specifies the text of the `IsEmpty` (**Is empty**) filter operator.
      */
-    filterIsEmptyOperator;
+    set filterIsEmptyOperator(value) {
+        this._filterIsEmptyOperator.set(value);
+    }
+    get filterIsEmptyOperator() {
+        return this._filterIsEmptyOperator();
+    }
     /**
      * Specifies the text of the `IsNotEmpty` (**Is not empty**) filter operator.
      */
-    filterIsNotEmptyOperator;
+    set filterIsNotEmptyOperator(value) {
+        this._filterIsNotEmptyOperator.set(value);
+    }
+    get filterIsNotEmptyOperator() {
+        return this._filterIsNotEmptyOperator();
+    }
     /**
      * Sets the text of the `StartsWith` (**Starts with**) filter operator.
      */
-    filterStartsWithOperator;
+    set filterStartsWithOperator(value) {
+        this._filterStartsWithOperator.set(value);
+    }
+    get filterStartsWithOperator() {
+        return this._filterStartsWithOperator();
+    }
     /**
      * Sets the text of the `Contains` (**Contains**) filter operator.
      */
-    filterContainsOperator;
+    set filterContainsOperator(value) {
+        this._filterContainsOperator.set(value);
+    }
+    get filterContainsOperator() {
+        return this._filterContainsOperator();
+    }
     /**
      * Specifies the text of the `DoesNotContain` (**Does not contain**) filter operator.
      */
-    filterNotContainsOperator;
+    set filterNotContainsOperator(value) {
+        this._filterNotContainsOperator.set(value);
+    }
+    get filterNotContainsOperator() {
+        return this._filterNotContainsOperator();
+    }
     /**
      * Specifies the text of the `EndsWith` (**Ends with**) string filter operator.
      */
-    filterEndsWithOperator;
+    set filterEndsWithOperator(value) {
+        this._filterEndsWithOperator.set(value);
+    }
+    get filterEndsWithOperator() {
+        return this._filterEndsWithOperator();
+    }
     /**
      * Sets the text of the **Filter** button.
      */
-    filterFilterButton;
+    set filterFilterButton(value) {
+        this._filterFilterButton.set(value);
+    }
+    get filterFilterButton() {
+        return this._filterFilterButton();
+    }
     /**
      * Sets the text of the **Clear filter** button.
      */
-    filterClearButton;
+    set filterClearButton(value) {
+        this._filterClearButton.set(value);
+    }
+    get filterClearButton() {
+        return this._filterClearButton();
+    }
     /**
      * Specifies 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 visible otherwise.
      */
-    loading;
+    set loading(value) {
+        this._loading.set(value);
+    }
+    get loading() {
+        return this._loading();
+    }
     /**
      * Specifies the value of the aria-label attribute placed on the PivotGrid focusable empty cell element.
      */
-    emptyCellLabel;
+    set emptyCellLabel(value) {
+        this._emptyCellLabel.set(value);
+    }
+    get emptyCellLabel() {
+        return this._emptyCellLabel();
+    }
     /**
      * Sets the text content of the button that opens and closes the PivotGrid configurator.
      */
-    configuratorButtonText;
+    set configuratorButtonText(value) {
+        this._configuratorButtonText.set(value);
+    }
+    get configuratorButtonText() {
+        return this._configuratorButtonText();
+    }
     /**
      * Sets the text content of the PivotGrid configurator title element.
      */
-    configuratorHeaderText;
+    set configuratorHeaderText(value) {
+        this._configuratorHeaderText.set(value);
+    }
+    get configuratorHeaderText() {
+        return this._configuratorHeaderText();
+    }
     /**
      * Sets the text content of the PivotGrid configurator fields section title element.
      */
-    configuratorFieldsText;
+    set configuratorFieldsText(value) {
+        this._configuratorFieldsText.set(value);
+    }
+    get configuratorFieldsText() {
+        return this._configuratorFieldsText();
+    }
     /**
      * Sets the text content of the PivotGrid configurator columns section title element.
      */
-    configuratorColumnsText;
+    set configuratorColumnsText(value) {
+        this._configuratorColumnsText.set(value);
+    }
+    get configuratorColumnsText() {
+        return this._configuratorColumnsText();
+    }
     /**
      * Specifies the text content of the PivotGrid configurator rows section title element.
      */
-    configuratorRowsText;
+    set configuratorRowsText(value) {
+        this._configuratorRowsText.set(value);
+    }
+    get configuratorRowsText() {
+        return this._configuratorRowsText();
+    }
     /**
      * Specifies the text content of the PivotGrid configurator values section title element.
      */
-    configuratorValuesText;
+    set configuratorValuesText(value) {
+        this._configuratorValuesText.set(value);
+    }
+    get configuratorValuesText() {
+        return this._configuratorValuesText();
+    }
     /**
      * Sets the text content of the PivotGrid configurator **Cancel** button.
      */
-    configuratorCancelButtonText;
+    set configuratorCancelButtonText(value) {
+        this._configuratorCancelButtonText.set(value);
+    }
+    get configuratorCancelButtonText() {
+        return this._configuratorCancelButtonText();
+    }
     /**
      * Specifies the text content of the PivotGrid configurator **Apply** button.
      */
-    configuratorApplyButtonText;
+    set configuratorApplyButtonText(value) {
+        this._configuratorApplyButtonText.set(value);
+    }
+    get configuratorApplyButtonText() {
+        return this._configuratorApplyButtonText();
+    }
     /**
      * Sets the text content of the PivotGrid configurator empty rows container.
      */
-    configuratorEmptyRowsText;
+    set configuratorEmptyRowsText(value) {
+        this._configuratorEmptyRowsText.set(value);
+    }
+    get configuratorEmptyRowsText() {
+        return this._configuratorEmptyRowsText();
+    }
     /**
      * Sets the text content of the PivotGrid configurator empty columns container.
      */
-    configuratorEmptyColumnsText;
+    set configuratorEmptyColumnsText(value) {
+        this._configuratorEmptyColumnsText.set(value);
+    }
+    get configuratorEmptyColumnsText() {
+        return this._configuratorEmptyColumnsText();
+    }
     /**
      * Sets the text content of the PivotGrid configurator empty measures container.
      */
-    configuratorEmptyMeasuresText;
+    set configuratorEmptyMeasuresText(value) {
+        this._configuratorEmptyMeasuresText.set(value);
+    }
+    get configuratorEmptyMeasuresText() {
+        return this._configuratorEmptyMeasuresText();
+    }
     /**
      * Sets the text content of the **Move to Columns** item in the column and row fields menu.
      */
-    fieldMenuMoveToColumnsItem;
+    set fieldMenuMoveToColumnsItem(value) {
+        this._fieldMenuMoveToColumnsItem.set(value);
+    }
+    get fieldMenuMoveToColumnsItem() {
+        return this._fieldMenuMoveToColumnsItem();
+    }
     /**
      * Specifies the text content of the **Move to Rows** item in the column and row fields menu.
      */
-    fieldMenuMoveToRowsItem;
+    set fieldMenuMoveToRowsItem(value) {
+        this._fieldMenuMoveToRowsItem.set(value);
+    }
+    get fieldMenuMoveToRowsItem() {
+        return this._fieldMenuMoveToRowsItem();
+    }
     /**
      * Specifies the text content of the **Move as previous** item in the column, row, and value fields menu.
      */
-    fieldMenuMovePreviousItem;
+    set fieldMenuMovePreviousItem(value) {
+        this._fieldMenuMovePreviousItem.set(value);
+    }
+    get fieldMenuMovePreviousItem() {
+        return this._fieldMenuMovePreviousItem();
+    }
     /**
      * Specifies the text content of the **Move as next** item in the column, row, and value fields menu.
      */
-    fieldMenuMoveNextItem;
+    set fieldMenuMoveNextItem(value) {
+        this._fieldMenuMoveNextItem.set(value);
+    }
+    get fieldMenuMoveNextItem() {
+        return this._fieldMenuMoveNextItem();
+    }
     /**
      * Controls the title of the chip menu icon.
      *
@@ -3711,15 +4142,67 @@ class PivotGridMessages extends ComponentMessages {
     * You can reorder the parts using `'[[fieldName]]'` as a placeholder. The `'[[fieldName]]'` placeholder will get replaced
     * with the current chip name. For example, `'chip for [[fieldName]]'` will become `'chip for Product Field Menu'`.
      */
-    chipMenuIconTitle;
+    set chipMenuIconTitle(value) {
+        this._chipMenuIconTitle.set(value);
+    }
+    get chipMenuIconTitle() {
+        return this._chipMenuIconTitle();
+    }
     /**
      * The text content of the PivotGrid configurator fields TreeView Measures node
      */
-    configuratorMeasuresText;
+    set configuratorMeasuresText(value) {
+        this._configuratorMeasuresText.set(value);
+    }
+    get configuratorMeasuresText() {
+        return this._configuratorMeasuresText();
+    }
     /**
      * Sets the accessible label for the chip list sections in the PivotGrid configurator.
      */
-    configuratorChipListLabel;
+    set configuratorChipListLabel(value) {
+        this._configuratorChipListLabel.set(value);
+    }
+    get configuratorChipListLabel() {
+        return this._configuratorChipListLabel();
+    }
+    _fieldMenuFilterItemLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_fieldMenuFilterItemLabel" }] : []));
+    _fieldMenuSortAscendingItemLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_fieldMenuSortAscendingItemLabel" }] : []));
+    _fieldMenuSortDescendingItemLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_fieldMenuSortDescendingItemLabel" }] : []));
+    _filterInputLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterInputLabel" }] : []));
+    _filterOperatorsDropDownLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterOperatorsDropDownLabel" }] : []));
+    _filterEqOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterEqOperator" }] : []));
+    _filterNotEqOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterNotEqOperator" }] : []));
+    _filterIsNullOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterIsNullOperator" }] : []));
+    _filterIsNotNullOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterIsNotNullOperator" }] : []));
+    _filterIsEmptyOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterIsEmptyOperator" }] : []));
+    _filterIsNotEmptyOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterIsNotEmptyOperator" }] : []));
+    _filterStartsWithOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterStartsWithOperator" }] : []));
+    _filterContainsOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterContainsOperator" }] : []));
+    _filterNotContainsOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterNotContainsOperator" }] : []));
+    _filterEndsWithOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterEndsWithOperator" }] : []));
+    _filterFilterButton = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterFilterButton" }] : []));
+    _filterClearButton = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterClearButton" }] : []));
+    _loading = signal(undefined, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _emptyCellLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_emptyCellLabel" }] : []));
+    _configuratorButtonText = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorButtonText" }] : []));
+    _configuratorHeaderText = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorHeaderText" }] : []));
+    _configuratorFieldsText = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorFieldsText" }] : []));
+    _configuratorColumnsText = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorColumnsText" }] : []));
+    _configuratorRowsText = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorRowsText" }] : []));
+    _configuratorValuesText = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorValuesText" }] : []));
+    _configuratorCancelButtonText = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorCancelButtonText" }] : []));
+    _configuratorApplyButtonText = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorApplyButtonText" }] : []));
+    _configuratorEmptyRowsText = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorEmptyRowsText" }] : []));
+    _configuratorEmptyColumnsText = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorEmptyColumnsText" }] : []));
+    _configuratorEmptyMeasuresText = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorEmptyMeasuresText" }] : []));
+    _fieldMenuMoveToColumnsItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_fieldMenuMoveToColumnsItem" }] : []));
+    _fieldMenuMoveToRowsItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_fieldMenuMoveToRowsItem" }] : []));
+    _fieldMenuMovePreviousItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_fieldMenuMovePreviousItem" }] : []));
+    _fieldMenuMoveNextItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_fieldMenuMoveNextItem" }] : []));
+    _chipMenuIconTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_chipMenuIconTitle" }] : []));
+    _configuratorMeasuresText = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorMeasuresText" }] : []));
+    _configuratorChipListLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorChipListLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PivotGridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: PivotGridMessages, isStandalone: true, 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", configuratorMeasuresText: "configuratorMeasuresText", configuratorChipListLabel: "configuratorChipListLabel" }, usesInheritance: true, ngImport: i0 });
 }
@@ -3889,8 +4372,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1790323637,
-    version: '25.2.1-develop.1',
+    publishDate: 1790761580,
+    version: '25.3.0-develop.2',
     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'
 };
 
@@ -4182,14 +4665,54 @@ class PivotGridCellDirective {
     renderer;
     dataService;
     cellClass = true;
-    kendoPivotGridCell;
-    tableType;
-    rowIndex;
-    colIndex;
-    customCellTemplate;
-    valueCellTemplate;
-    rowHeaderCellTemplate;
-    columnHeaderCellTemplate;
+    set kendoPivotGridCell(value) {
+        this._kendoPivotGridCell.set(value);
+    }
+    get kendoPivotGridCell() {
+        return this._kendoPivotGridCell();
+    }
+    set tableType(value) {
+        this._tableType.set(value);
+    }
+    get tableType() {
+        return this._tableType();
+    }
+    set rowIndex(value) {
+        this._rowIndex.set(value);
+    }
+    get rowIndex() {
+        return this._rowIndex();
+    }
+    set colIndex(value) {
+        this._colIndex.set(value);
+    }
+    get colIndex() {
+        return this._colIndex();
+    }
+    set customCellTemplate(value) {
+        this._customCellTemplate.set(value);
+    }
+    get customCellTemplate() {
+        return this._customCellTemplate();
+    }
+    set valueCellTemplate(value) {
+        this._valueCellTemplate.set(value);
+    }
+    get valueCellTemplate() {
+        return this._valueCellTemplate();
+    }
+    set rowHeaderCellTemplate(value) {
+        this._rowHeaderCellTemplate.set(value);
+    }
+    get rowHeaderCellTemplate() {
+        return this._rowHeaderCellTemplate();
+    }
+    set columnHeaderCellTemplate(value) {
+        this._columnHeaderCellTemplate.set(value);
+    }
+    get columnHeaderCellTemplate() {
+        return this._columnHeaderCellTemplate();
+    }
     get isNotProvidedCellTemplatePerType() {
         return (this.tableType === 'values' && !this.valueCellTemplate)
             || (this.tableType === 'rowHeader' && !this.rowHeaderCellTemplate)
@@ -4198,8 +4721,20 @@ class PivotGridCellDirective {
     get expanded() {
         return (this.kendoPivotGridCell?.hasChildren && this.kendoPivotGridCell?.children?.length > 0) || false;
     }
+    get cellText() {
+        const value = this.kendoPivotGridCell?.data ? this.kendoPivotGridCell.data.fmtValue : this.kendoPivotGridCell?.caption;
+        return value === undefined || value === null || value === '' ? '\u200B' : value;
+    }
     chevronUpSVGIcon = chevronUpIcon;
     chevronDownSVGIcon = chevronDownIcon;
+    _kendoPivotGridCell = signal(undefined, ...(ngDevMode ? [{ debugName: "_kendoPivotGridCell" }] : []));
+    _tableType = signal(undefined, ...(ngDevMode ? [{ debugName: "_tableType" }] : []));
+    _rowIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "_rowIndex" }] : []));
+    _colIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "_colIndex" }] : []));
+    _customCellTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_customCellTemplate" }] : []));
+    _valueCellTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_valueCellTemplate" }] : []));
+    _rowHeaderCellTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_rowHeaderCellTemplate" }] : []));
+    _columnHeaderCellTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_columnHeaderCellTemplate" }] : []));
     constructor(hostEl, renderer, dataService) {
         this.hostEl = hostEl;
         this.renderer = renderer;
@@ -4299,10 +4834,10 @@ class PivotGridCellDirective {
             <!--default cell content-->
             @if (!customCellTemplate && isNotProvidedCellTemplatePerType) {
               <span [ngClass]="{'k-pivotgrid-header-title': !kendoPivotGridCell.data, 'k-pivotgrid-content': kendoPivotGridCell.data}">
-                {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
+                {{ cellText }}
               </span>
             }
-            `, isInline: true, dependencies: [{ 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"] }] });
+            `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PivotGridCellDirective, decorators: [{
             type: Component,
@@ -4376,12 +4911,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
             <!--default cell content-->
             @if (!customCellTemplate && isNotProvidedCellTemplatePerType) {
               <span [ngClass]="{'k-pivotgrid-header-title': !kendoPivotGridCell.data, 'k-pivotgrid-content': kendoPivotGridCell.data}">
-                {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
+                {{ cellText }}
               </span>
             }
             `,
                     standalone: true,
-                    imports: [IconWrapperComponent, EventsOutsideAngularDirective, TemplateContextDirective, NgClass]
+                    imports: [IconWrapperComponent, EventsOutsideAngularDirective, TemplateContextDirective, NgClass],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PivotGridDataService }], propDecorators: { cellClass: [{
                 type: HostBinding,
@@ -4427,25 +4963,70 @@ class PivotGridTableComponent {
     zone;
     scrollService;
     hostRole = 'none';
-    headerItems;
-    rows;
-    renderedRows;
-    renderedCols;
+    get headerItems() {
+        return this._headerItems();
+    }
+    get rows() {
+        return this._rows();
+    }
+    get renderedRows() {
+        return this._renderedRows();
+    }
+    get renderedCols() {
+        return this._renderedCols();
+    }
     totalRows;
-    startRowIndex = 0;
-    startColIndex = 0;
-    rtl = false;
-    itemIdCounter = 0;
-    itemIdMap = new WeakMap();
-    rowIdMap = new WeakMap();
-    cellIdMap = new WeakMap();
-    tableType;
-    colWidth;
-    customCellTemplate;
-    valueCellTemplate;
-    rowHeaderCellTemplate;
-    columnHeaderCellTemplate;
-    scrollableSettings;
+    get startRowIndex() {
+        return this._startRowIndex();
+    }
+    get startColIndex() {
+        return this._startColIndex();
+    }
+    get rtl() {
+        return this._rtl();
+    }
+    set tableType(value) {
+        this._tableType.set(value);
+    }
+    get tableType() {
+        return this._tableType();
+    }
+    set colWidth(value) {
+        this._colWidth.set(value);
+    }
+    get colWidth() {
+        return this._colWidth();
+    }
+    set customCellTemplate(value) {
+        this._customCellTemplate.set(value);
+    }
+    get customCellTemplate() {
+        return this._customCellTemplate();
+    }
+    set valueCellTemplate(value) {
+        this._valueCellTemplate.set(value);
+    }
+    get valueCellTemplate() {
+        return this._valueCellTemplate();
+    }
+    set rowHeaderCellTemplate(value) {
+        this._rowHeaderCellTemplate.set(value);
+    }
+    get rowHeaderCellTemplate() {
+        return this._rowHeaderCellTemplate();
+    }
+    set columnHeaderCellTemplate(value) {
+        this._columnHeaderCellTemplate.set(value);
+    }
+    get columnHeaderCellTemplate() {
+        return this._columnHeaderCellTemplate();
+    }
+    set scrollableSettings(value) {
+        this._scrollableSettings.set(value);
+    }
+    get scrollableSettings() {
+        return this._scrollableSettings();
+    }
     get pivotGridId() {
         return `kendo-pivotgrid-${this.dataService.pivotGridId}-`;
     }
@@ -4455,6 +5036,24 @@ class PivotGridTableComponent {
     get rowVirtualization() {
         return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'column';
     }
+    itemIdCounter = 0;
+    itemIdMap = new WeakMap();
+    rowIdMap = new WeakMap();
+    cellIdMap = new WeakMap();
+    _headerItems = signal(undefined, ...(ngDevMode ? [{ debugName: "_headerItems" }] : []));
+    _rows = signal(undefined, ...(ngDevMode ? [{ debugName: "_rows" }] : []));
+    _renderedRows = signal(undefined, ...(ngDevMode ? [{ debugName: "_renderedRows" }] : []));
+    _renderedCols = signal(undefined, ...(ngDevMode ? [{ debugName: "_renderedCols" }] : []));
+    _startRowIndex = signal(0, ...(ngDevMode ? [{ debugName: "_startRowIndex" }] : []));
+    _startColIndex = signal(0, ...(ngDevMode ? [{ debugName: "_startColIndex" }] : []));
+    _rtl = signal(false, ...(ngDevMode ? [{ debugName: "_rtl" }] : []));
+    _tableType = signal(undefined, ...(ngDevMode ? [{ debugName: "_tableType" }] : []));
+    _colWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_colWidth" }] : []));
+    _customCellTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_customCellTemplate" }] : []));
+    _valueCellTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_valueCellTemplate" }] : []));
+    _rowHeaderCellTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_rowHeaderCellTemplate" }] : []));
+    _columnHeaderCellTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_columnHeaderCellTemplate" }] : []));
+    _scrollableSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_scrollableSettings" }] : []));
     subs = new Subscription();
     scrollable;
     constructor(host, dataService, localization, zone, scrollService) {
@@ -4464,14 +5063,14 @@ class PivotGridTableComponent {
         this.zone = zone;
         this.scrollService = scrollService;
         this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
+            this._rtl.set(rtl);
             this.scrollable && (this.scrollable.rtl = rtl);
         }));
     }
     ngOnInit() {
         this.subs.add(this.dataService[`${this.tableType}Rows`].subscribe(rows => {
-            this.rows = rows;
-            this.renderedRows = this.scrollableSettings ? rows.slice(this.startRowIndex, this.startRowIndex + this.scrollableSettings.rows) : rows;
+            this._rows.set(rows);
+            this._renderedRows.set(this.scrollableSettings ? rows.slice(this.startRowIndex, this.startRowIndex + this.scrollableSettings.rows) : rows);
             this.totalRows && this.totalRows !== rows.length && this.scrollable && (this.scrollable.total = rows.length);
             this.scrollable && this.scrollable.onNewData(this.totalRows && this.totalRows !== rows.length);
             this.totalRows = rows.length;
@@ -4529,18 +5128,18 @@ class PivotGridTableComponent {
         return `cell-${index + this.startColIndex}-obj${objectId}`;
     }
     colsUpdateCallback = (cols) => {
-        this.renderedCols = Math.min(cols.length, this.scrollableSettings?.columns);
+        this._renderedCols.set(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;
+        this._headerItems.set(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._startRowIndex.set(this.scrollable.startRow);
+                this._startColIndex.set(this.scrollable.startCol);
+                this._renderedRows.set(this.rows.slice(this.startRowIndex, this.startRowIndex + this.scrollableSettings.rows));
                 this.scrollable.renderedRows = this.renderedRows.length;
                 this.scrollable.renderedCols = this.renderedCols;
             },
@@ -4700,7 +5299,7 @@ class PivotGridTableComponent {
           }
         </tbody>
         </table>
-        `, isInline: true, dependencies: [{ kind: "component", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PivotGridTableComponent, decorators: [{
             type: Component,
@@ -4765,7 +5364,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         </table>
         `,
                     standalone: true,
-                    imports: [PivotGridCellDirective, NgStyle]
+                    imports: [PivotGridCellDirective, NgStyle],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: PivotGridDataService }, { type: i1$1.LocalizationService }, { type: i0.NgZone }, { type: PivotGridScrollService }], propDecorators: { hostRole: [{
                 type: HostBinding,
@@ -4844,6 +5444,7 @@ class PivotGridComponent {
     localization;
     renderer;
     scrollService;
+    cdr;
     hostClass = true;
     get rightPositionClass() {
         return !this.configuratorSettings || this.configuratorSettings.position === 'right';
@@ -4858,7 +5459,7 @@ class PivotGridComponent {
         return this.configuratorSettings?.position === 'top';
     }
     get dir() {
-        return this.direction;
+        return this._direction();
     }
     colHeadersTable;
     rowHeadersTable;
@@ -4873,10 +5474,10 @@ class PivotGridComponent {
      * Sets the type, size, and color of the PivotGrid loader.
      */
     set loaderSettings(settings) {
-        this._loaderSettings = Object.assign({}, DEFAULT_LOADER_SETTINGS, settings);
+        this._loaderSettings.set(Object.assign({}, DEFAULT_LOADER_SETTINGS, settings));
     }
     get loaderSettings() {
-        return this._loaderSettings;
+        return this._loaderSettings();
     }
     /**
      * @hidden
@@ -4889,28 +5490,38 @@ class PivotGridComponent {
      *
      * @default false
      */
-    configurator;
+    set configurator(value) {
+        this._configurator.set(value);
+    }
+    get configurator() {
+        return this._configurator();
+    }
     /**
      * Sets the virtualization options of the component. By default, the virtual scrolling functionality is disabled.
      *
      * @default false
      */
     set virtualScrolling(value) {
-        this._virtualScrolling = normalizeVirtualSettings(value);
+        this._virtualScrolling.set(normalizeVirtualSettings(value));
         this.scrollService.virtualScrolling = !!value;
     }
     get virtualScrolling() {
-        return this._virtualScrolling;
+        return this._virtualScrolling();
     }
     get configuratorSettings() {
-        return this.configurator && Object.assign({}, DEFAULT_CONFIGURATOR_SETTINGS, this.configurator);
+        return this._configuratorSettings();
     }
     /**
      * Sets the width of the column header and data cells. The provided value is treated in pixels [(see example)](https://www.telerik.com/kendo-angular-ui/components/pivotgrid/appearance#column-headers-width).
      *
      * @default 200
      */
-    columnHeadersWidth = 200;
+    set columnHeadersWidth(value) {
+        this._columnHeadersWidth.set(value);
+    }
+    get columnHeadersWidth() {
+        return this._columnHeadersWidth();
+    }
     /**
      * Specifies whether the keyboard navigation is enabled. When enabled, you can use keyboard shortcuts to interact with the PivotGrid.
      * Set to `false` to disable navigation and include the PivotGrid content in the normal tab sequence.
@@ -4920,7 +5531,12 @@ class PivotGridComponent {
      * @remarks
      * This property is related to accessibility.
      */
-    navigable = true;
+    set navigable(value) {
+        this._navigable.set(value);
+    }
+    get navigable() {
+        return this._navigable();
+    }
     /**
      * Gets the aggregated PivotGrid values that are displayed.
      */
@@ -4931,28 +5547,48 @@ class PivotGridComponent {
      * @hidden
      */
     gearSVGIcon = gearIcon;
-    loading;
-    showConfigurator;
-    configuratorNavigation;
+    set loading(value) {
+        this._loading.set(value);
+    }
+    get loading() {
+        return this._loading();
+    }
+    set showConfigurator(value) {
+        this._showConfigurator.set(value);
+    }
+    get showConfigurator() {
+        return this._showConfigurator();
+    }
+    get configuratorNavigation() {
+        return this._configuratorNavigation();
+    }
+    navigation;
     resizeObservers = [];
-    _loaderSettings = DEFAULT_LOADER_SETTINGS;
-    _virtualScrolling = normalizeVirtualSettings(false);
+    _loaderSettings = signal(DEFAULT_LOADER_SETTINGS, ...(ngDevMode ? [{ debugName: "_loaderSettings" }] : []));
+    _virtualScrolling = signal(normalizeVirtualSettings(false), ...(ngDevMode ? [{ debugName: "_virtualScrolling" }] : []));
+    _configurator = signal(undefined, ...(ngDevMode ? [{ debugName: "_configurator" }] : []));
+    _columnHeadersWidth = signal(200, ...(ngDevMode ? [{ debugName: "_columnHeadersWidth" }] : []));
+    _navigable = signal(true, ...(ngDevMode ? [{ debugName: "_navigable" }] : []));
+    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _showConfigurator = signal(false, ...(ngDevMode ? [{ debugName: "_showConfigurator" }] : []));
+    _configuratorNavigation = signal(undefined, ...(ngDevMode ? [{ debugName: "_configuratorNavigation" }] : []));
+    _direction = signal(undefined, ...(ngDevMode ? [{ debugName: "_direction" }] : []));
+    _configuratorSettings = computed(() => this._configurator() && Object.assign({}, DEFAULT_CONFIGURATOR_SETTINGS, this._configurator()), ...(ngDevMode ? [{ debugName: "_configuratorSettings" }] : []));
     subs = new Subscription();
     rtl = false;
-    direction;
-    navigation;
     navigationSubs;
-    constructor(hostEl, zone, dataService, localization, renderer, _scrollbarService, scrollService) {
+    constructor(hostEl, zone, dataService, localization, renderer, _scrollbarService, scrollService, cdr) {
         this.hostEl = hostEl;
         this.zone = zone;
         this.dataService = dataService;
         this.localization = localization;
         this.renderer = renderer;
         this.scrollService = scrollService;
+        this.cdr = cdr;
         validatePackage(packageMetadata);
         this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
+            this._direction.set(this.rtl ? 'rtl' : 'ltr');
         }));
         dataService.wrapper = this.hostEl.nativeElement;
         this.scrollService.pivotGrid = this;
@@ -4978,7 +5614,8 @@ class PivotGridComponent {
         }
     }
     ngAfterContentInit() {
-        this.subs.add(this.dataService.loading.subscribe(state => this.loading = state));
+        this.subs.add(this.dataService.loading.subscribe(state => this._loading.set(state)));
+        this.subs.add(this.dataService.valuesRows.subscribe(() => this.cdr.markForCheck()));
     }
     ngOnChanges(changes) {
         if (isChanged('navigable', changes)) {
@@ -5005,7 +5642,7 @@ class PivotGridComponent {
      * @hidden
      */
     toggleConfigurator() {
-        this.showConfigurator = !this.showConfigurator;
+        this._showConfigurator.set(!this._showConfigurator());
         if (!this.navigable) {
             return;
         }
@@ -5073,10 +5710,14 @@ class PivotGridComponent {
         }
     }
     initConfiguratorNavigation() {
+        if (!this.configuratorWrapper) {
+            return;
+        }
         this.stopConfiguratorNavigation();
-        this.configuratorNavigation = new ConfiguratorNavigation({ tabIndex: 0 });
-        this.configuratorNavigation.start(this.configuratorWrapper.nativeElement);
-        this.configuratorNavigation.first.setAttribute('tabindex', '0');
+        const configuratorNavigation = new ConfiguratorNavigation({ tabIndex: 0 });
+        configuratorNavigation.start(this.configuratorWrapper.nativeElement);
+        configuratorNavigation.first.setAttribute('tabindex', '0');
+        this._configuratorNavigation.set(configuratorNavigation);
     }
     stopConfiguratorNavigation() {
         if (this.configuratorNavigation) {
@@ -5087,7 +5728,7 @@ class PivotGridComponent {
             this.configuratorNavigation.stop();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }, { token: i1$1.LocalizationService }, { token: i0.Renderer2 }, { token: i1$4.ScrollbarService }, { token: PivotGridScrollService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }, { token: i1$1.LocalizationService }, { token: i0.Renderer2 }, { token: i1$4.ScrollbarService }, { token: PivotGridScrollService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", 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,
@@ -5268,7 +5909,7 @@ class PivotGridComponent {
           </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: "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"] }] });
+        `, 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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
@@ -5457,9 +6098,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         }
         `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, PivotGridTableComponent, LoaderComponent, PivotGridConfiguratorComponent, IconWrapperComponent]
+                    imports: [LocalizedMessagesDirective, PivotGridTableComponent, LoaderComponent, PivotGridConfiguratorComponent, IconWrapperComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i1$1.LocalizationService }, { type: i0.Renderer2 }, { type: i1$4.ScrollbarService }, { type: PivotGridScrollService }], propDecorators: { hostClass: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i1$1.LocalizationService }, { type: i0.Renderer2 }, { type: i1$4.ScrollbarService }, { type: PivotGridScrollService }, { type: i0.ChangeDetectorRef }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-d-flex']
             }, {