@progress/kendo-angular-filter 25.1.0-develop.3 → 25.1.0-develop.5

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, Directive, ContentChild, Input, Component, EventEmitter, Output, isDevMode, forwardRef, ViewChildren, ContentChildren, HostBinding, HostListener, NgModule } from '@angular/core';
+import { signal, Injectable, Directive, ContentChild, Input, Component, EventEmitter, Output, afterNextRender, ChangeDetectionStrategy, isDevMode, forwardRef, ViewChildren, ContentChildren, HostBinding, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -22,9 +22,15 @@ import { DialogContainerService, DialogService, WindowService, WindowContainerSe
  * @hidden
  */
 class FilterService {
-    normalizedValue = { logic: 'and', filters: [] };
-    filters = [];
-    fieldTemplate = null;
+    _normalizedValue = signal({ logic: 'and', filters: [] }, ...(ngDevMode ? [{ debugName: "_normalizedValue" }] : []));
+    _filters = signal([], ...(ngDevMode ? [{ debugName: "_filters" }] : []));
+    _fieldTemplate = signal(null, ...(ngDevMode ? [{ debugName: "_fieldTemplate" }] : []));
+    set normalizedValue(value) { this._normalizedValue.set(value); }
+    get normalizedValue() { return this._normalizedValue(); }
+    set filters(value) { this._filters.set(value); }
+    get filters() { return this._filters(); }
+    set fieldTemplate(value) { this._fieldTemplate.set(value); }
+    get fieldTemplate() { return this._fieldTemplate(); }
     addFilterGroup(item) {
         const filterGroup = { logic: 'and', filters: [] };
         item.filters.push(filterGroup);
@@ -232,8 +238,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1787037087,
-    version: '25.1.0-develop.3',
+    publishDate: 1787151369,
+    version: '25.1.0-develop.5',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -324,28 +330,37 @@ class FilterFieldComponent {
     /**
      * Specifies the `field` that will be used by the user-defined filter.
      */
-    field;
+    set field(value) {
+        this._field.set(value);
+    }
+    get field() {
+        return this._field();
+    }
     /**
      * Specifies the `title` text that will be displayed by the user-defined filter.
      * If the `title` isn't set, the value passed to `field` is used.
      */
     set title(_title) {
         if (_title) {
-            this._title = _title;
+            this._title.set(_title);
         }
         else {
-            this._title = this.field;
+            this._title.set(this.field);
         }
     }
     get title() {
-        return this._title;
+        return this._title();
     }
-    _title;
     /**
      * Specifies the user-defined filter `editor` type that will be used.
      * The available options are 'string', 'number', 'boolean', and 'date'.
      */
-    editor;
+    set editor(value) {
+        this._editor.set(value);
+    }
+    get editor() {
+        return this._editor();
+    }
     /**
      * Specifies the operators that will be available in the order of providing them.
      * If no operators are provided, default operators are used for each filter type.
@@ -374,11 +389,26 @@ class FilterFieldComponent {
      *
      * The boolean operator is always set to `eq`
      */
-    operators;
+    set operators(value) {
+        this._operators.set(value);
+    }
+    get operators() {
+        return this._operators();
+    }
     /**
      * Specifies the user-defined filter `editor` format that will be used. ([see example](https://www.telerik.com/kendo-angular-ui/components/filter/filter-editors-format))
      */
-    editorFormat;
+    set editorFormat(value) {
+        this._editorFormat.set(value);
+    }
+    get editorFormat() {
+        return this._editorFormat();
+    }
+    _field = signal(undefined, ...(ngDevMode ? [{ debugName: "_field" }] : []));
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _editor = signal(undefined, ...(ngDevMode ? [{ debugName: "_editor" }] : []));
+    _operators = signal(undefined, ...(ngDevMode ? [{ debugName: "_operators" }] : []));
+    _editorFormat = signal(undefined, ...(ngDevMode ? [{ debugName: "_editorFormat" }] : []));
     /**
      * @hidden
      */
@@ -591,7 +621,13 @@ class BaseFilterRowComponent {
     navigationService;
     localization;
     renderer;
-    index;
+    set index(value) {
+        this._index.set(value);
+    }
+    get index() {
+        return this._index();
+    }
+    _index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : []));
     valueChange = new EventEmitter();
     constructor(element, navigationService, localization, renderer) {
         this.element = element;
@@ -654,16 +690,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
 class AriaLabelValueDirective {
     hostElement;
     renderer;
-    ariaLabel;
-    constructor(hostElement, renderer) {
+    injector;
+    set ariaLabel(value) {
+        this._ariaLabel.set(value);
+    }
+    get ariaLabel() {
+        return this._ariaLabel();
+    }
+    _ariaLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_ariaLabel" }] : []));
+    constructor(hostElement, renderer, injector) {
         this.hostElement = hostElement;
         this.renderer = renderer;
+        this.injector = injector;
     }
     ngOnInit() {
-        const target = this.hostElement.nativeElement.querySelector('input') || this.hostElement.nativeElement;
-        this.renderer.setAttribute(target, 'aria-label', this.ariaLabel);
+        afterNextRender(() => {
+            const target = this.hostElement.nativeElement.querySelector('input') || this.hostElement.nativeElement;
+            this.renderer.setAttribute(target, 'aria-label', this.ariaLabel);
+        }, { injector: this.injector });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AriaLabelValueDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AriaLabelValueDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: AriaLabelValueDirective, isStandalone: true, selector: "[kendoAriaLabelValue]", inputs: { ariaLabel: ["kendoAriaLabelValue", "ariaLabel"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AriaLabelValueDirective, decorators: [{
@@ -672,7 +718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     selector: '[kendoAriaLabelValue]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { ariaLabel: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }], propDecorators: { ariaLabel: [{
                 type: Input,
                 args: ['kendoAriaLabelValue']
             }] } });
@@ -682,10 +728,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class FilterDateEditorComponent {
     localization;
-    currentItem;
-    isDisabled;
-    format;
+    set currentItem(value) {
+        this._currentItem.set(value);
+    }
+    get currentItem() {
+        return this._currentItem();
+    }
+    set isDisabled(value) {
+        this._isDisabled.set(value);
+    }
+    get isDisabled() {
+        return this._isDisabled();
+    }
+    set format(value) {
+        this._format.set(value);
+    }
+    get format() {
+        return this._format();
+    }
     valueChange = new EventEmitter();
+    _currentItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentItem" }] : []));
+    _isDisabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
+    _format = signal(undefined, ...(ngDevMode ? [{ debugName: "_format" }] : []));
     constructor(localization) {
         this.localization = localization;
     }
@@ -710,12 +774,13 @@ class FilterDateEditorComponent {
                 [today]="messageFor('editorDateTodayText')">
             </kendo-datepicker-messages>
         </kendo-datepicker>
-  `, isInline: true, dependencies: [{ kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterDateEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-filter-date-editor',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <kendo-datepicker
             [tabindex]="-1"
@@ -748,8 +813,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class FilterBooleanEditorComponent {
     localization;
-    currentItem;
+    cdr;
+    set currentItem(value) {
+        this._currentItem.set(value);
+    }
+    get currentItem() {
+        return this._currentItem();
+    }
     valueChange = new EventEmitter();
+    _currentItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentItem" }] : []));
     get items() {
         return [
             { text: this.getBooleanText(true), value: true },
@@ -759,8 +831,9 @@ class FilterBooleanEditorComponent {
     get defaultItem() {
         return { text: this.getBooleanText(null), value: null };
     }
-    constructor(localization) {
+    constructor(localization, cdr) {
         this.localization = localization;
+        this.cdr = cdr;
     }
     messageFor(key) {
         return this.localization.get(key);
@@ -778,7 +851,7 @@ class FilterBooleanEditorComponent {
         this.currentItem.value = value;
         this.valueChange.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterBooleanEditorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterBooleanEditorComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: FilterBooleanEditorComponent, isStandalone: true, selector: "kendo-filter-boolean-editor", inputs: { currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
     <kendo-dropdownlist
         [tabindex]="-1"
@@ -793,12 +866,13 @@ class FilterBooleanEditorComponent {
         <ng-template kendoDropDownListValueTemplate let-dataItem>{{ getBooleanText(dataItem.value) }}</ng-template>
         <ng-template kendoDropDownListItemTemplate let-dataItem>{{ getBooleanText(dataItem.value) }}</ng-template>
     </kendo-dropdownlist>
-  `, isInline: true, dependencies: [{ 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: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "directive", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }] });
+  `, isInline: true, dependencies: [{ 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: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "directive", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterBooleanEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-filter-boolean-editor',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <kendo-dropdownlist
         [tabindex]="-1"
@@ -817,7 +891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     standalone: true,
                     imports: [DropDownListComponent, AriaLabelValueDirective, ValueTemplateDirective, ItemTemplateDirective]
                 }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { currentItem: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { currentItem: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -828,10 +902,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class FilterNumericEditorComponent {
     localization;
-    currentItem;
-    isDisabled;
-    format;
+    set currentItem(value) {
+        this._currentItem.set(value);
+    }
+    get currentItem() {
+        return this._currentItem();
+    }
+    set isDisabled(value) {
+        this._isDisabled.set(value);
+    }
+    get isDisabled() {
+        return this._isDisabled();
+    }
+    set format(value) {
+        this._format.set(value);
+    }
+    get format() {
+        return this._format();
+    }
     valueChange = new EventEmitter();
+    _currentItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentItem" }] : []));
+    _isDisabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
+    _format = signal(undefined, ...(ngDevMode ? [{ debugName: "_format" }] : []));
     constructor(localization) {
         this.localization = localization;
     }
@@ -856,12 +948,13 @@ class FilterNumericEditorComponent {
                 [decrement]="messageFor('editorNumericDecrement')">
             </kendo-numerictextbox-messages>
         </kendo-numerictextbox>
-  `, isInline: true, dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "component", type: NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "component", type: NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterNumericEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-filter-numeric-editor',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <kendo-numerictextbox
             [tabindex]="-1"
@@ -894,9 +987,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class FilterTextEditorComponent {
     localization;
-    currentItem;
-    isDisabled;
+    set currentItem(value) {
+        this._currentItem.set(value);
+    }
+    get currentItem() {
+        return this._currentItem();
+    }
+    set isDisabled(value) {
+        this._isDisabled.set(value);
+    }
+    get isDisabled() {
+        return this._isDisabled();
+    }
     valueChange = new EventEmitter();
+    _currentItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentItem" }] : []));
+    _isDisabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
     constructor(localization) {
         this.localization = localization;
     }
@@ -916,12 +1021,13 @@ class FilterTextEditorComponent {
             (valueChange)="onValueChange($event)"
             [disabled]="isDisabled">
         </kendo-textbox>
-  `, isInline: true, dependencies: [{ kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterTextEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-filter-text-editor',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <kendo-textbox
             [tabindex]="-1"
@@ -947,11 +1053,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class FilterExpressionOperatorsComponent {
     localization;
-    currentItem;
-    editorType;
+    set currentItem(value) {
+        this._currentItem.set(value);
+    }
+    get currentItem() {
+        return this._currentItem();
+    }
+    set editorType(value) {
+        this._editorType.set(value);
+    }
+    get editorType() {
+        return this._editorType();
+    }
     valueChange = new EventEmitter();
-    operators = [];
-    operatorTemplate;
+    set operators(value) {
+        this._operators.set(value);
+    }
+    get operators() {
+        return this._operators();
+    }
+    set operatorTemplate(value) {
+        this._operatorTemplate.set(value);
+    }
+    get operatorTemplate() {
+        return this._operatorTemplate();
+    }
+    _currentItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentItem" }] : []));
+    _editorType = signal(undefined, ...(ngDevMode ? [{ debugName: "_editorType" }] : []));
+    _operators = signal([], ...(ngDevMode ? [{ debugName: "_operators" }] : []));
+    _operatorTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_operatorTemplate" }] : []));
     constructor(localization) {
         this.localization = localization;
     }
@@ -991,12 +1121,13 @@ class FilterExpressionOperatorsComponent {
                 </ng-template>
             </kendo-dropdownlist>
         }
-    `, isInline: true, dependencies: [{ 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: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "directive", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    `, isInline: true, dependencies: [{ 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: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "directive", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterExpressionOperatorsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "kendo-filter-expression-operators",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         @if (operatorTemplate) {
             <ng-container
@@ -1044,23 +1175,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class FilterExpressionComponent extends BaseFilterRowComponent {
     filterService;
+    cdr;
     /**
      * @hidden
      */
     xIcon = xIcon;
     static ngAcceptInputType_currentItem;
-    currentItem;
-    operators = [];
-    isBoolean = false;
+    set currentItem(value) {
+        const previousField = this._currentItem()?.field;
+        this._currentItem.set(value);
+        if (value) {
+            this._previousField = value.field;
+            if (this._initialized && value.field && value.field !== previousField) {
+                this.applyFieldChange(value.field);
+            }
+        }
+    }
+    get currentItem() {
+        return this._currentItem();
+    }
+    set operators(v) {
+        this._operators.set(v);
+    }
+    get operators() {
+        return this._operators();
+    }
+    set isBoolean(v) {
+        this._isBoolean.set(v);
+    }
+    get isBoolean() {
+        return this._isBoolean();
+    }
     editorType;
-    isEditorDisabled = false;
-    editorTemplate;
-    operatorTemplate;
-    editorFormat;
+    set isEditorDisabled(v) {
+        this._isEditorDisabled.set(v);
+    }
+    get isEditorDisabled() {
+        return this._isEditorDisabled();
+    }
+    set editorTemplate(v) {
+        this._editorTemplate.set(v);
+    }
+    get editorTemplate() {
+        return this._editorTemplate();
+    }
+    set operatorTemplate(v) {
+        this._operatorTemplate.set(v);
+    }
+    get operatorTemplate() {
+        return this._operatorTemplate();
+    }
+    set editorFormat(v) {
+        this._editorFormat.set(v);
+    }
+    get editorFormat() {
+        return this._editorFormat();
+    }
     get availableFilters() {
         return this.filterService.filters || [];
     }
-    _previousField;
     get fieldTemplate() {
         return this.filterService.fieldTemplate;
     }
@@ -1081,6 +1254,15 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
         }
         return this.editorFormat;
     }
+    _previousField;
+    _initialized = false;
+    _currentItem = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentItem" }] : []));
+    _operators = signal([], ...(ngDevMode ? [{ debugName: "_operators" }] : []));
+    _isBoolean = signal(false, ...(ngDevMode ? [{ debugName: "_isBoolean" }] : []));
+    _isEditorDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isEditorDisabled" }] : []));
+    _editorTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_editorTemplate" }] : []));
+    _operatorTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_operatorTemplate" }] : []));
+    _editorFormat = signal(undefined, ...(ngDevMode ? [{ debugName: "_editorFormat" }] : []));
     isNumberFormat(obj) {
         if (isDevMode() && obj &&
             (obj['currency'] ||
@@ -1103,20 +1285,17 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
             return false;
         }
     }
-    constructor(filterService, element, navigationService, localization, renderer) {
+    constructor(filterService, element, navigationService, localization, renderer, cdr) {
         super(element, navigationService, localization, renderer);
         this.filterService = filterService;
+        this.cdr = cdr;
     }
     ngDoCheck() {
-        if (this.fieldTemplate && this.currentItem.field !== this._previousField) {
-            if (!this.currentItem.field) {
-                this.currentItem.field = this._previousField;
-                return;
-            }
-            const previousField = this._previousField;
-            this._previousField = this.currentItem.field;
-            if (previousField !== undefined) {
-                this.filterValueChange(this.currentItem.field);
+        if (this.fieldTemplate && this.currentItem) {
+            const currentField = this.currentItem.field;
+            if (currentField && currentField !== this._previousField) {
+                this._previousField = currentField;
+                this.filterValueChange(currentField);
             }
         }
     }
@@ -1139,6 +1318,7 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
             this.setOperators(defaultFilter);
         }
         this.setTemplates();
+        this._initialized = true;
     }
     normalizeOperators(filterEditor, operators) {
         const result = [];
@@ -1162,13 +1342,20 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
     filterValueChange(value) {
         this.navigationService.currentToolbarItemIndex = this.itemNumber;
         this.navigationService.currentToolbarItemChildrenIndex = 0;
-        this.currentItem.value = null;
         this.currentItem.field = value;
+        this.applyFieldChange(value);
+        this.valueChange.emit();
+    }
+    applyFieldChange(field) {
+        const current = this._currentItem();
+        current.value = null;
+        this._currentItem.set({ ...current });
+        this._previousField = field;
         this.setTemplates();
-        const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
+        const foundFilter = this.getFilterExpressionByField(field);
         this.setOperators(foundFilter);
-        this.editorFormat = foundFilter.editorFormat;
-        this.valueChange.emit();
+        this.editorFormat = foundFilter?.editorFormat;
+        this.cdr.markForCheck();
     }
     getDefaultOperators(operatorsType) {
         switch (operatorsType) {
@@ -1230,7 +1417,7 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
         this.editorTemplate = filterExpression?.editorTemplate;
         this.operatorTemplate = filterExpression?.operatorTemplate;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterExpressionComponent, deps: [{ token: FilterService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterExpressionComponent, deps: [{ token: FilterService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FilterExpressionComponent, isStandalone: true, selector: "kendo-filter-expression", inputs: { currentItem: "currentItem" }, providers: [{
                 provide: FilterItem,
                 useExisting: forwardRef(() => FilterExpressionComponent)
@@ -1307,7 +1494,7 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
             </button>
           </div>
         </div>
-        `, isInline: true, dependencies: [{ 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: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "component", type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "editorType", "operators", "operatorTemplate"], outputs: ["valueChange"] }, { kind: "component", type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { kind: "component", type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { kind: "component", type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { kind: "component", type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "component", type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "editorType", "operators", "operatorTemplate"], outputs: ["valueChange"] }, { kind: "component", type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { kind: "component", type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { kind: "component", type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { kind: "component", type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.27", ngImport: i0, type: FilterExpressionComponent, decorators: [{
             type: Component,
@@ -1317,6 +1504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                             useExisting: forwardRef(() => FilterExpressionComponent)
                         }],
                     selector: 'kendo-filter-expression',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <div class="k-filter-toolbar">
           <div class="k-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
@@ -1394,7 +1582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     standalone: true,
                     imports: [DropDownListComponent, AriaLabelValueDirective, FilterExpressionOperatorsComponent, FilterTextEditorComponent, FilterNumericEditorComponent, FilterBooleanEditorComponent, FilterDateEditorComponent, NgTemplateOutlet, ButtonComponent]
                 }]
-        }], ctorParameters: () => [{ type: FilterService }, { type: i0.ElementRef }, { type: NavigationService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }], propDecorators: { currentItem: [{
+        }], ctorParameters: () => [{ type: FilterService }, { type: i0.ElementRef }, { type: NavigationService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { currentItem: [{
                 type: Input
             }] } });
 
@@ -1429,15 +1617,21 @@ class FilterGroupComponent extends BaseFilterRowComponent {
             // due to tracking by index, the filters should first be set to [] so that all rerender afterwards
             const filtersCopy = this.currentItem.filters;
             this.currentItem.filters = [];
-            this.cdr.detectChanges();
+            this.cdr.detectChanges(); // Needed: forces @for track-by-index reset before restoring filters
             this.currentItem.filters = filtersCopy;
         }
         this.valueChange.emit(isRemoveOperation);
     }
-    currentItem = {
+    set currentItem(value) {
+        this._currentItem.set(value);
+    }
+    get currentItem() {
+        return this._currentItem();
+    }
+    _currentItem = signal({
         logic: 'or',
         filters: []
-    };
+    }, ...(ngDevMode ? [{ debugName: "_currentItem" }] : []));
     /**
      * @hidden
      */
@@ -1472,7 +1666,7 @@ class FilterGroupComponent extends BaseFilterRowComponent {
     }
     removeFilterGroup() {
         this.filterService.remove(this.currentItem, this.index);
-        this.cdr.detectChanges();
+        this.cdr.detectChanges(); // Needed: re-renders template after filter structure mutation before emitting valueChange
         this.valueChange.emit(true);
     }
     onMouseDown(event) {
@@ -1573,7 +1767,7 @@ class FilterGroupComponent extends BaseFilterRowComponent {
             }
           </ul>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }, { 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: ["currentItem"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }, { 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: ["currentItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterGroupComponent, decorators: [{
             type: Component,
@@ -1583,6 +1777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                             useExisting: forwardRef(() => FilterGroupComponent)
                         }],
                     selector: 'kendo-filter-group',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         <div class="k-filter-toolbar">
           <div class="k-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
@@ -1678,147 +1873,327 @@ class Messages extends ComponentMessages {
     /**
      * The text of the Filter Expression `operators` drop down title.
      */
-    filterExpressionOperators;
+    set filterExpressionOperators(value) {
+        this._filterExpressionOperators.set(value);
+    }
+    get filterExpressionOperators() {
+        return this._filterExpressionOperators();
+    }
     /**
      * The text of the Filter Expression 'fields' drop down title.
      */
-    filterExpressionFilters;
+    set filterExpressionFilters(value) {
+        this._filterExpressionFilters.set(value);
+    }
+    get filterExpressionFilters() {
+        return this._filterExpressionFilters();
+    }
     /**
      * The text of the `Remove Expression` button.
      */
-    remove;
+    set remove(value) {
+        this._remove.set(value);
+    }
+    get remove() {
+        return this._remove();
+    }
     /**
      * The text of the Filter Group `Add Group` button.
      */
-    addGroup;
+    set addGroup(value) {
+        this._addGroup.set(value);
+    }
+    get addGroup() {
+        return this._addGroup();
+    }
     /**
      * The text of the Filter Group `Add Filter` button.
      */
-    addFilter;
+    set addFilter(value) {
+        this._addFilter.set(value);
+    }
+    get addFilter() {
+        return this._addFilter();
+    }
     /**
      * The text of the `And` Filter Group logic.
      */
-    filterAndLogic;
+    set filterAndLogic(value) {
+        this._filterAndLogic.set(value);
+    }
+    get filterAndLogic() {
+        return this._filterAndLogic();
+    }
     /**
      * The text of the `Or` Filter Group logic.
      */
-    filterOrLogic;
+    set filterOrLogic(value) {
+        this._filterOrLogic.set(value);
+    }
+    get filterOrLogic() {
+        return this._filterOrLogic();
+    }
     /**
      * The text of the `Equal` (**Is equal to**) Filter Expression operator.
      */
-    filterEqOperator;
+    set filterEqOperator(value) {
+        this._filterEqOperator.set(value);
+    }
+    get filterEqOperator() {
+        return this._filterEqOperator();
+    }
     /**
      * The text of the `NotEqual` (**Is not equal to**) Filter Expression operator.
      */
-    filterNotEqOperator;
+    set filterNotEqOperator(value) {
+        this._filterNotEqOperator.set(value);
+    }
+    get filterNotEqOperator() {
+        return this._filterNotEqOperator();
+    }
     /**
      * The text of the `IsNull` (**Is null**) Filter Expression operator.
      */
-    filterIsNullOperator;
+    set filterIsNullOperator(value) {
+        this._filterIsNullOperator.set(value);
+    }
+    get filterIsNullOperator() {
+        return this._filterIsNullOperator();
+    }
     /**
      * The text of the `IsNotNull` (**Is not null**) Filter Expression operator.
      */
-    filterIsNotNullOperator;
+    set filterIsNotNullOperator(value) {
+        this._filterIsNotNullOperator.set(value);
+    }
+    get filterIsNotNullOperator() {
+        return this._filterIsNotNullOperator();
+    }
     /**
      * The text of the `IsEmpty` (**Is empty**) Filter Expression operator.
      */
-    filterIsEmptyOperator;
+    set filterIsEmptyOperator(value) {
+        this._filterIsEmptyOperator.set(value);
+    }
+    get filterIsEmptyOperator() {
+        return this._filterIsEmptyOperator();
+    }
     /**
      * The text of the `IsNotEmpty` (**Is not empty**) Filter Expression operator.
      */
-    filterIsNotEmptyOperator;
+    set filterIsNotEmptyOperator(value) {
+        this._filterIsNotEmptyOperator.set(value);
+    }
+    get filterIsNotEmptyOperator() {
+        return this._filterIsNotEmptyOperator();
+    }
     /**
      * The text of the `StartsWith` (**Starts with**) Filter Expression operator.
      */
-    filterStartsWithOperator;
+    set filterStartsWithOperator(value) {
+        this._filterStartsWithOperator.set(value);
+    }
+    get filterStartsWithOperator() {
+        return this._filterStartsWithOperator();
+    }
     /**
      * The text of the `Contains` (**Contains**) Filter Expression operator.
      */
-    filterContainsOperator;
+    set filterContainsOperator(value) {
+        this._filterContainsOperator.set(value);
+    }
+    get filterContainsOperator() {
+        return this._filterContainsOperator();
+    }
     /**
      * The text of the `DoesNotContain` (**Does not contain**) Filter Expression operator.
      */
-    filterNotContainsOperator;
+    set filterNotContainsOperator(value) {
+        this._filterNotContainsOperator.set(value);
+    }
+    get filterNotContainsOperator() {
+        return this._filterNotContainsOperator();
+    }
     /**
      * The text of the `EndsWith` (**Ends with**) string Filter Expression operator.
      */
-    filterEndsWithOperator;
+    set filterEndsWithOperator(value) {
+        this._filterEndsWithOperator.set(value);
+    }
+    get filterEndsWithOperator() {
+        return this._filterEndsWithOperator();
+    }
     /**
      * The text of the `GreaterOrEqualTo` (**Is greater than or equal to**) numeric Filter Expression operator.
      */
-    filterGteOperator;
+    set filterGteOperator(value) {
+        this._filterGteOperator.set(value);
+    }
+    get filterGteOperator() {
+        return this._filterGteOperator();
+    }
     /**
      * The text of the `Greater` (**Is greater than**) numeric Filter Expression operator.
      */
-    filterGtOperator;
+    set filterGtOperator(value) {
+        this._filterGtOperator.set(value);
+    }
+    get filterGtOperator() {
+        return this._filterGtOperator();
+    }
     /**
      * The text of the `LessOrEqualTo` (**Is less than or equal to**) numeric Filter Expression operator.
      */
-    filterLteOperator;
+    set filterLteOperator(value) {
+        this._filterLteOperator.set(value);
+    }
+    get filterLteOperator() {
+        return this._filterLteOperator();
+    }
     /**
      * The text of the `Less` (**Is less than**) numeric Filter Expression operator.
      */
-    filterLtOperator;
+    set filterLtOperator(value) {
+        this._filterLtOperator.set(value);
+    }
+    get filterLtOperator() {
+        return this._filterLtOperator();
+    }
     /**
      * The text of the `IsTrue` boolean Filter Expression option.
      */
-    filterIsTrue;
+    set filterIsTrue(value) {
+        this._filterIsTrue.set(value);
+    }
+    get filterIsTrue() {
+        return this._filterIsTrue();
+    }
     /**
      * The text of the `IsFalse` boolean Filter Expression option.
      */
-    filterIsFalse;
+    set filterIsFalse(value) {
+        this._filterIsFalse.set(value);
+    }
+    get filterIsFalse() {
+        return this._filterIsFalse();
+    }
     /**
      * The text of the `(All)` boolean Filter Expression option.
      */
-    filterBooleanAll;
+    set filterBooleanAll(value) {
+        this._filterBooleanAll.set(value);
+    }
+    get filterBooleanAll() {
+        return this._filterBooleanAll();
+    }
     /**
      * The text of the `AfterOrEqualTo` (**Is after or equal to**) date Filter Expression operator.
      */
-    filterAfterOrEqualOperator;
+    set filterAfterOrEqualOperator(value) {
+        this._filterAfterOrEqualOperator.set(value);
+    }
+    get filterAfterOrEqualOperator() {
+        return this._filterAfterOrEqualOperator();
+    }
     /**
      * The text of the `After` (**Is after**) date Filter Expression operator.
      */
-    filterAfterOperator;
+    set filterAfterOperator(value) {
+        this._filterAfterOperator.set(value);
+    }
+    get filterAfterOperator() {
+        return this._filterAfterOperator();
+    }
     /**
      * The text of the `Before` (**Is before**) date Filter Expression operator.
      */
-    filterBeforeOperator;
+    set filterBeforeOperator(value) {
+        this._filterBeforeOperator.set(value);
+    }
+    get filterBeforeOperator() {
+        return this._filterBeforeOperator();
+    }
     /**
      * The text of the `BeforeOrEqualTo` (**Is before or equal to**) date Filter Expression operator.
      */
-    filterBeforeOrEqualOperator;
+    set filterBeforeOrEqualOperator(value) {
+        this._filterBeforeOrEqualOperator.set(value);
+    }
+    get filterBeforeOrEqualOperator() {
+        return this._filterBeforeOrEqualOperator();
+    }
     /**
      * The title of the Decrement button of the Filter Expression numeric editor.
      */
-    editorNumericDecrement;
+    set editorNumericDecrement(value) {
+        this._editorNumericDecrement.set(value);
+    }
+    get editorNumericDecrement() {
+        return this._editorNumericDecrement();
+    }
     /**
      * The title of the Increment button of the Filter Expression numeric editor.
      */
-    editorNumericIncrement;
+    set editorNumericIncrement(value) {
+        this._editorNumericIncrement.set(value);
+    }
+    get editorNumericIncrement() {
+        return this._editorNumericIncrement();
+    }
     /**
      * The text of the Today button of the Filter Expression date editor.
      */
-    editorDateTodayText;
+    set editorDateTodayText(value) {
+        this._editorDateTodayText.set(value);
+    }
+    get editorDateTodayText() {
+        return this._editorDateTodayText();
+    }
     /**
      * The title of the Toggle button of the Filter Expression date editor.
      */
-    editorDateToggleText;
+    set editorDateToggleText(value) {
+        this._editorDateToggleText.set(value);
+    }
+    get editorDateToggleText() {
+        return this._editorDateToggleText();
+    }
     /**
      * The text of the filter field aria label.
      */
-    filterFieldAriaLabel;
+    set filterFieldAriaLabel(value) {
+        this._filterFieldAriaLabel.set(value);
+    }
+    get filterFieldAriaLabel() {
+        return this._filterFieldAriaLabel();
+    }
     /**
      * The text of the filter operator aria label.
      */
-    filterOperatorAriaLabel;
+    set filterOperatorAriaLabel(value) {
+        this._filterOperatorAriaLabel.set(value);
+    }
+    get filterOperatorAriaLabel() {
+        return this._filterOperatorAriaLabel();
+    }
     /**
      * The text of the filter value aria label.
      */
-    filterValueAriaLabel;
+    set filterValueAriaLabel(value) {
+        this._filterValueAriaLabel.set(value);
+    }
+    get filterValueAriaLabel() {
+        return this._filterValueAriaLabel();
+    }
     /**
      * The text of the filter row aria label.
      */
-    filterToolbarAriaLabel;
+    set filterToolbarAriaLabel(value) {
+        this._filterToolbarAriaLabel.set(value);
+    }
+    get filterToolbarAriaLabel() {
+        return this._filterToolbarAriaLabel();
+    }
     /**
      * The text of the Remove Group button.
      */
@@ -1826,7 +2201,49 @@ class Messages extends ComponentMessages {
     /**
      * The text of the filter toolbar aria label.
      */
-    filterComponentAriaLabel;
+    set filterComponentAriaLabel(value) {
+        this._filterComponentAriaLabel.set(value);
+    }
+    get filterComponentAriaLabel() {
+        return this._filterComponentAriaLabel();
+    }
+    _filterExpressionOperators = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterExpressionOperators" }] : []));
+    _filterExpressionFilters = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterExpressionFilters" }] : []));
+    _remove = signal(undefined, ...(ngDevMode ? [{ debugName: "_remove" }] : []));
+    _addGroup = signal(undefined, ...(ngDevMode ? [{ debugName: "_addGroup" }] : []));
+    _addFilter = signal(undefined, ...(ngDevMode ? [{ debugName: "_addFilter" }] : []));
+    _filterAndLogic = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterAndLogic" }] : []));
+    _filterOrLogic = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterOrLogic" }] : []));
+    _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" }] : []));
+    _filterGteOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterGteOperator" }] : []));
+    _filterGtOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterGtOperator" }] : []));
+    _filterLteOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterLteOperator" }] : []));
+    _filterLtOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterLtOperator" }] : []));
+    _filterIsTrue = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterIsTrue" }] : []));
+    _filterIsFalse = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterIsFalse" }] : []));
+    _filterBooleanAll = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterBooleanAll" }] : []));
+    _filterAfterOrEqualOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterAfterOrEqualOperator" }] : []));
+    _filterAfterOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterAfterOperator" }] : []));
+    _filterBeforeOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterBeforeOperator" }] : []));
+    _filterBeforeOrEqualOperator = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterBeforeOrEqualOperator" }] : []));
+    _editorNumericDecrement = signal(undefined, ...(ngDevMode ? [{ debugName: "_editorNumericDecrement" }] : []));
+    _editorNumericIncrement = signal(undefined, ...(ngDevMode ? [{ debugName: "_editorNumericIncrement" }] : []));
+    _editorDateTodayText = signal(undefined, ...(ngDevMode ? [{ debugName: "_editorDateTodayText" }] : []));
+    _editorDateToggleText = signal(undefined, ...(ngDevMode ? [{ debugName: "_editorDateToggleText" }] : []));
+    _filterFieldAriaLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterFieldAriaLabel" }] : []));
+    _filterOperatorAriaLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterOperatorAriaLabel" }] : []));
+    _filterValueAriaLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterValueAriaLabel" }] : []));
+    _filterToolbarAriaLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterToolbarAriaLabel" }] : []));
+    _filterComponentAriaLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterComponentAriaLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, selector: "[kendoFilterMessages]", inputs: { filterExpressionOperators: "filterExpressionOperators", filterExpressionFilters: "filterExpressionFilters", remove: "remove", addGroup: "addGroup", addFilter: "addFilter", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", editorNumericDecrement: "editorNumericDecrement", editorNumericIncrement: "editorNumericIncrement", editorDateTodayText: "editorDateTodayText", editorDateToggleText: "editorDateToggleText", filterFieldAriaLabel: "filterFieldAriaLabel", filterOperatorAriaLabel: "filterOperatorAriaLabel", filterValueAriaLabel: "filterValueAriaLabel", filterToolbarAriaLabel: "filterToolbarAriaLabel", removeGroup: "removeGroup", filterComponentAriaLabel: "filterComponentAriaLabel" }, usesInheritance: true, ngImport: i0 });
 }
@@ -2069,18 +2486,20 @@ class FilterComponent {
      */
     set filters(_filters) {
         if (_filters.length > 0) {
-            this.filterService.filters = _filters.map(filterExpression => {
+            const mapped = _filters.map(filterExpression => {
                 const clonedFilter = Object.assign({}, filterExpression);
                 if (!clonedFilter.title) {
                     clonedFilter.title = clonedFilter.field;
                 }
                 return clonedFilter;
             });
+            this._filters.set(mapped);
+            this.filterService.filters = this._filters();
             this.setValue(this.value);
         }
     }
     get filters() {
-        return this.filterService.filters;
+        return this._filters();
     }
     /**
      * Sets the initial `value` of the Filter component.
@@ -2088,17 +2507,17 @@ class FilterComponent {
     set value(value) {
         const clonedValue = structuredClone(value);
         if (this.filtersTypeChanged(this.value, clonedValue)) {
-            // due to tracking group items by index, the filters should first be set to [] when the value is changed programmatically
-            this.currentFilter.filters = [];
-            this.cdr.detectChanges();
+            // Resets @for track-by-index so Angular destroys+recreates child components before restoring filters
+            this._currentFilter.set({ ...this._currentFilter(), filters: [] });
+            this.cdr.detectChanges(); // Needed: forces @for track-by-index reset before restoring filters
         }
-        this._value = clonedValue;
+        this._value.set(clonedValue);
         if (this.filters.length > 0) {
-            this.setValue(this.value);
+            this.setValue(this._value());
         }
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * Fires every time the Filter component value is updated.
@@ -2107,7 +2526,8 @@ class FilterComponent {
     valueChange = new EventEmitter();
     localizationSubscription;
     filterFieldsSubscription;
-    _value = { filters: [], logic: 'and' };
+    _value = signal({ filters: [], logic: 'and' }, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _filters = signal([], ...(ngDevMode ? [{ debugName: "_filters" }] : []));
     filterFields;
     fieldTemplate;
     _filterItems;
@@ -2130,7 +2550,7 @@ class FilterComponent {
     ngOnInit() {
         this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
         });
     }
     ngAfterContentInit() {
@@ -2151,8 +2571,11 @@ class FilterComponent {
     filterFieldsChanged() {
         if (this.filterFields && this.filterFields.length > 0) {
             this.filters = this.filterFields.map((filterField) => ({
-                ...filterField,
-                title: filterField.title,
+                field: filterField.field,
+                title: filterField.title || filterField.field,
+                editor: filterField.editor,
+                operators: filterField.operators,
+                editorFormat: filterField.editorFormat,
                 editorTemplate: filterField.editorTemplate?.templateRef,
                 operatorTemplate: filterField.operatorTemplate?.templateRef
             }));
@@ -2167,24 +2590,24 @@ class FilterComponent {
             this.renderer.setAttribute(firstElement, 'tabindex', '0');
         }
     }
-    _currentFilter = { logic: 'and', filters: [] };
+    _currentFilter = signal({ logic: 'and', filters: [] }, ...(ngDevMode ? [{ debugName: "_currentFilter" }] : []));
     /**
      * @hidden
      */
     get currentFilter() {
-        return this._currentFilter;
+        return this._currentFilter();
     }
     /**
      * @hidden
      */
     set currentFilter(value) {
-        this._currentFilter = value;
+        this._currentFilter.set(value);
     }
     /**
      * @hidden
      */
     onValueChange(isRemoveOperation) {
-        this.cdr.detectChanges();
+        this.cdr.detectChanges(); // Needed: re-renders template with mutated filter structure (plain object mutation, not signal)
         this.valueChange.emit(this.filterService.normalizedValue);
         this.navigationService.reset(this.filterItems);
         if (isRemoveOperation) {
@@ -2232,7 +2655,7 @@ class FilterComponent {
         this.normalizeValue(items);
         this.filterService.normalizedValue = items;
         this.currentFilter = items;
-        this.cdr.detectChanges();
+        this.cdr.detectChanges(); // Needed: populates filterItems ViewChildren synchronously before reset() reads them
         this.navigationService.reset(this.filterItems);
     }
     normalizeValue(items) {
@@ -2415,7 +2838,7 @@ class FilterComponent {
                 </li>
             </ul>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]" }, { kind: "component", type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]" }, { kind: "component", type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -2560,6 +2983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
             </ul>
         </div>
     `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
                     imports: [LocalizedMessagesDirective, FilterGroupComponent]
                 }]
@@ -2624,7 +3048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     ],
                     selector: 'kendo-filter-messages',
                     template: ``,
-                    standalone: true
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }] });