@progress/kendo-angular-filter 2.0.1-dev.202205171237 → 2.0.1-dev.202205191247

package/fesm2015/kendo-angular-filter.js

@@ -7,11 +7,11 @@ import { Injectable, Directive, Input, EventEmitter, Component, Output, forwardR
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i3 from '@progress/kendo-angular-dropdowns';
+import * as i2 from '@progress/kendo-angular-dropdowns';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
-import * as i3$1 from '@progress/kendo-angular-inputs';
+import * as i2$1 from '@progress/kendo-angular-inputs';
 import { InputsModule } from '@progress/kendo-angular-inputs';
-import * as i3$2 from '@progress/kendo-angular-dateinputs';
+import * as i2$2 from '@progress/kendo-angular-dateinputs';
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 import * as i10 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -24,9 +24,7 @@ import { LabelModule } from '@progress/kendo-angular-label';
  */
 class FilterService {
     constructor() {
-        this.value = { filters: [], logic: 'or' };
         this.filters = [];
-        this.isEditorDisabled = false;
     }
     addFilterGroup(item) {
         let filterGroup = { logic: 'or', filters: [] };
@@ -38,7 +36,7 @@ class FilterService {
     }
     remove(item, positionIndex, parentItem) {
         if (!parentItem) {
-            parentItem = this.value;
+            parentItem = this.normalizedValue;
         }
         if (item === parentItem) {
             parentItem.filters = [];
@@ -202,7 +200,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-filter',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1652791009,
+    publishDate: 1652964392,
     version: '',
     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'
 };
@@ -234,8 +232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @hidden
  */
 class FilterExpressionOperatorsComponent {
-    constructor(filterService, localization) {
-        this.filterService = filterService;
+    constructor(localization) {
         this.localization = localization;
         this.valueChange = new EventEmitter();
         this.operators = [];
@@ -243,13 +240,15 @@ class FilterExpressionOperatorsComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
+    getOperator(operatorValue) {
+        return this.messageFor(getKeyByValue(defaultOperators[this.editorType], operatorValue));
+    }
     operatorValueChange(value) {
-        this.valueChange.emit();
-        this.filterService.isEditorDisabled = nullOperators.indexOf(value) >= 0;
+        this.valueChange.emit(value);
     }
 }
-FilterExpressionOperatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionOperatorsComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FilterExpressionOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: { currentItem: "currentItem", operators: "operators" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+FilterExpressionOperatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionOperatorsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterExpressionOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: { currentItem: "currentItem", editorType: "editorType", operators: "operators" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
         <kendo-dropdownlist
             [kendoAriaLabelValue]="messageFor('filterOperatorAriaLabel')"
             [data]="operators"
@@ -259,13 +258,19 @@ FilterExpressionOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersio
             [valuePrimitive]="true"
             textField="text"
             valueField="value"
-            >
+        >
+            <ng-template kendoDropDownListValueTemplate let-dataItem>
+                {{ getOperator(dataItem.value) }}
+            </ng-template>
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                {{ getOperator(dataItem.value) }}
+            </ng-template>
         </kendo-dropdownlist>
-  `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+    `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { type: i2.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { type: i2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionOperatorsComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-filter-expression-operators',
+                    selector: "kendo-filter-expression-operators",
                     template: `
         <kendo-dropdownlist
             [kendoAriaLabelValue]="messageFor('filterOperatorAriaLabel')"
@@ -276,11 +281,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [valuePrimitive]="true"
             textField="text"
             valueField="value"
-            >
+        >
+            <ng-template kendoDropDownListValueTemplate let-dataItem>
+                {{ getOperator(dataItem.value) }}
+            </ng-template>
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                {{ getOperator(dataItem.value) }}
+            </ng-template>
         </kendo-dropdownlist>
-  `
+    `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }]; }, propDecorators: { currentItem: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], editorType: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -292,32 +305,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @hidden
  */
 class FilterTextEditorComponent {
-    constructor(localization, filterService) {
+    constructor(localization) {
         this.localization = localization;
-        this.filterService = filterService;
         this.valueChange = new EventEmitter();
     }
-    isDisabled() {
-        const isDisabled = this.filterService.isEditorDisabled;
-        if (isDisabled) {
-            this.currentItem.value = null;
-        }
-        return isDisabled;
-    }
     messageFor(key) {
         return this.localization.get(key);
     }
 }
-FilterTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterTextEditorComponent, deps: [{ token: i1.LocalizationService }, { token: FilterService }], target: i0.ɵɵFactoryTarget.Component });
-FilterTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: { currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+FilterTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterTextEditorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: { currentItem: "currentItem", isDisabled: "isDisabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
         <kendo-textbox
             [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
             class="k-filter-toolbar-item k-filter-value"
             [(value)]="currentItem.value"
             (valueChange)="valueChange.emit()"
-            [disabled]="isDisabled()">
+            [disabled]="isDisabled">
         </kendo-textbox>
-  `, isInline: true, components: [{ type: i3$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+  `, isInline: true, components: [{ type: i2$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterTextEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -328,11 +333,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             class="k-filter-toolbar-item k-filter-value"
             [(value)]="currentItem.value"
             (valueChange)="valueChange.emit()"
-            [disabled]="isDisabled()">
+            [disabled]="isDisabled">
         </kendo-textbox>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: FilterService }]; }, propDecorators: { currentItem: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], isDisabled: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -342,36 +349,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @hidden
  */
 class FilterNumericEditorComponent {
-    constructor(localization, filterService) {
+    constructor(localization) {
         this.localization = localization;
-        this.filterService = filterService;
         this.valueChange = new EventEmitter();
     }
     messageFor(key) {
         return this.localization.get(key);
     }
-    isDisabled() {
-        const isDisabled = this.filterService.isEditorDisabled;
-        if (isDisabled) {
-            this.currentItem.value = null;
-        }
-        return isDisabled;
-    }
 }
-FilterNumericEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterNumericEditorComponent, deps: [{ token: i1.LocalizationService }, { token: FilterService }], target: i0.ɵɵFactoryTarget.Component });
-FilterNumericEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: { currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+FilterNumericEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterNumericEditorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterNumericEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: { currentItem: "currentItem", isDisabled: "isDisabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
         <kendo-numerictextbox
             [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
             class="k-filter-toolbar-item k-filter-value"
             [(value)]="currentItem.value"
             (valueChange)="valueChange.emit()"
-            [disabled]="isDisabled()">
+            [disabled]="isDisabled">
             <kendo-numerictextbox-messages
                 [increment]="messageFor('editorNumericIncrement')"
                 [decrement]="messageFor('editorNumericDecrement')">
             </kendo-numerictextbox-messages>
         </kendo-numerictextbox>
-  `, isInline: true, components: [{ type: i3$1.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i3$1.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+  `, isInline: true, components: [{ type: i2$1.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i2$1.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterNumericEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -382,7 +381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             class="k-filter-toolbar-item k-filter-value"
             [(value)]="currentItem.value"
             (valueChange)="valueChange.emit()"
-            [disabled]="isDisabled()">
+            [disabled]="isDisabled">
             <kendo-numerictextbox-messages
                 [increment]="messageFor('editorNumericIncrement')"
                 [decrement]="messageFor('editorNumericDecrement')">
@@ -390,7 +389,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </kendo-numerictextbox>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: FilterService }]; }, propDecorators: { currentItem: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], isDisabled: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -446,7 +447,7 @@ FilterBooleanEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
         valueField="value"
         >
     </kendo-dropdownlist>
-  `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+  `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterBooleanEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -476,36 +477,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @hidden
  */
 class FilterDateEditorComponent {
-    constructor(localization, filterService) {
+    constructor(localization) {
         this.localization = localization;
-        this.filterService = filterService;
         this.valueChange = new EventEmitter();
     }
     messageFor(key) {
         return this.localization.get(key);
     }
-    isDisabled() {
-        const isDisabled = this.filterService.isEditorDisabled;
-        if (isDisabled) {
-            this.currentItem.value = null;
-        }
-        return isDisabled;
-    }
 }
-FilterDateEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDateEditorComponent, deps: [{ token: i1.LocalizationService }, { token: FilterService }], target: i0.ɵɵFactoryTarget.Component });
-FilterDateEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: { currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+FilterDateEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDateEditorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterDateEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: { currentItem: "currentItem", isDisabled: "isDisabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
         <kendo-datepicker
             [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
             class="k-filter-toolbar-item k-filter-value"
             [(value)]="currentItem.value"
             (valueChange)="valueChange.emit()"
-            [disabled]="isDisabled()">
+            [disabled]="isDisabled">
             <kendo-datepicker-messages
                 [toggle]="messageFor('editorDateToggleText')"
                 [today]="messageFor('editorDateTodayText')">
             </kendo-datepicker-messages>
         </kendo-datepicker>
-  `, isInline: true, components: [{ type: i3$2.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i3$2.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+  `, isInline: true, components: [{ type: i2$2.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i2$2.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDateEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -516,7 +509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             class="k-filter-toolbar-item k-filter-value"
             [(value)]="currentItem.value"
             (valueChange)="valueChange.emit()"
-            [disabled]="isDisabled()">
+            [disabled]="isDisabled">
             <kendo-datepicker-messages
                 [toggle]="messageFor('editorDateToggleText')"
                 [today]="messageFor('editorDateTodayText')">
@@ -524,7 +517,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </kendo-datepicker>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: FilterService }]; }, propDecorators: { currentItem: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], isDisabled: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -545,6 +540,7 @@ class FilterExpressionComponent {
         this.isEditorDisabled = false;
     }
     ngOnInit() {
+        this.isEditorDisabled = nullOperators.indexOf(this.currentItem.operator) >= 0;
         this.filters = this.filterService.filters;
         const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
         if (this.currentItem.field) {
@@ -633,6 +629,16 @@ class FilterExpressionComponent {
             }
         }
     }
+    onOperatorChange(value) {
+        this.valueChange.emit();
+        if (nullOperators.indexOf(value) >= 0) {
+            this.currentItem.value = null;
+            this.isEditorDisabled = true;
+        }
+        else {
+            this.isEditorDisabled = false;
+        }
+    }
 }
 FilterExpressionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: { index: "index", currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
@@ -654,15 +660,16 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                     <kendo-filter-expression-operators
                         [currentItem]="currentItem"
                         [operators]="operators"
-                        (valueChange)="valueChange.emit();">
+                        [editorType]="getEditorType()"
+                        (valueChange)="onOperatorChange($event);">
                     </kendo-filter-expression-operators>
                 </div>
 
                 <ng-container [ngSwitch]="getEditorType()">
-                    <kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
-                    <kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
+                    <kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
+                    <kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
                     <kendo-filter-boolean-editor *ngSwitchCase="'boolean'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-boolean-editor>
-                    <kendo-filter-date-editor *ngSwitchCase="'date'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
+                    <kendo-filter-date-editor *ngSwitchCase="'date'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
                 </ng-container>
 
                 <div class="k-filter-toolbar-item">
@@ -676,7 +683,7 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 </div>
             </div>
         </div>
-  `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "operators"], outputs: ["valueChange"] }, { type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem"], outputs: ["valueChange"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i11.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+  `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "editorType", "operators"], outputs: ["valueChange"] }, { type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i11.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionComponent, decorators: [{
             type: Component,
             args: [{
@@ -700,15 +707,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     <kendo-filter-expression-operators
                         [currentItem]="currentItem"
                         [operators]="operators"
-                        (valueChange)="valueChange.emit();">
+                        [editorType]="getEditorType()"
+                        (valueChange)="onOperatorChange($event);">
                     </kendo-filter-expression-operators>
                 </div>
 
                 <ng-container [ngSwitch]="getEditorType()">
-                    <kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
-                    <kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
+                    <kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
+                    <kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
                     <kendo-filter-boolean-editor *ngSwitchCase="'boolean'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-boolean-editor>
-                    <kendo-filter-date-editor *ngSwitchCase="'date'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
+                    <kendo-filter-date-editor *ngSwitchCase="'date'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
                 </ng-container>
 
                 <div class="k-filter-toolbar-item">
@@ -766,6 +774,9 @@ class FilterGroupComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
+    getOperator(operatorValue) {
+        return this.messageFor(getKeyByValue(logicOperators, operatorValue));
+    }
     selectedChange(logicOperator) {
         if (this.currentItem.logic !== logicOperator) {
             this.currentItem.logic = logicOperator;
@@ -799,7 +810,7 @@ FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                     [title]="operator.text"
                     (click)="selectedChange(operator.value)"
                     >
-                    {{operator.text}}
+                    {{getOperator(operator.value)}}
                   </button>
               </div>
             </div>
@@ -867,7 +878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [title]="operator.text"
                     (click)="selectedChange(operator.value)"
                     >
-                    {{operator.text}}
+                    {{getOperator(operator.value)}}
                   </button>
               </div>
             </div>
@@ -1086,6 +1097,7 @@ class FilterComponent {
          * That is each time a Filter Group or Filter Expression is added, removed, or updated.
          */
         this.valueChange = new EventEmitter();
+        this._value = { filters: [], logic: 'and' };
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
     }
@@ -1103,6 +1115,7 @@ class FilterComponent {
             }
             return clonedFilter;
         });
+        this.setValue(this.value);
     }
     get filters() {
         return this.filterService.filters;
@@ -1112,11 +1125,11 @@ class FilterComponent {
      */
     set value(value) {
         const clonedValue = JSON.parse(JSON.stringify(value));
-        this.normalizeValue(clonedValue);
-        this.filterService.value = clonedValue;
+        this._value = clonedValue;
+        this.setValue(this.value);
     }
     get value() {
-        return this.filterService.value;
+        return this._value;
     }
     ngOnInit() {
         if (this.filters.length === 0) {
@@ -1136,13 +1149,13 @@ class FilterComponent {
      * @hidden
      */
     getCurrentFilter() {
-        return this.value;
+        return this.filterService.normalizedValue;
     }
     /**
      * @hidden
      */
     onValueChange() {
-        this.valueChange.emit(this.filterService.value);
+        this.valueChange.emit(this.filterService.normalizedValue);
     }
     normalizeFilter(filterDescriptor) {
         const foundFilter = this.filterService.filters.find((filter) => filter.field === filterDescriptor.field);
@@ -1164,9 +1177,19 @@ class FilterComponent {
         if (!isPresent(filterDescriptor.value)) {
             filterDescriptor.value = null;
         }
+        if (nullOperators.indexOf(filterDescriptor.operator) >= 0) {
+            filterDescriptor.value = null;
+        }
+    }
+    setValue(items) {
+        this.normalizeValue(items);
+        this.filterService.normalizedValue = items;
     }
-    normalizeValue(item) {
-        item.filters.forEach((item) => {
+    normalizeValue(items) {
+        if (!this.filterService.filters.length) {
+            return;
+        }
+        items.filters.forEach((item) => {
             if (item.filters) {
                 this.normalizeValue(item);
             }
@@ -1309,7 +1332,7 @@ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 </li>
             </ul>
         </div>
-`, isInline: true, components: [{ type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["index", "currentItem"], outputs: ["valueChange"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]" }] });
+    `, isInline: true, components: [{ type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["index", "currentItem"], outputs: ["valueChange"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -1447,7 +1470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 </li>
             </ul>
         </div>
-`
+    `
                 }]
         }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { direction: [{
                 type: HostBinding,

package/filter-expression-operators.component.d.ts

@@ -5,23 +5,24 @@
 import { EventEmitter } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { FilterDescriptor } from '@progress/kendo-data-query';
-import { FilterService } from './filter.service';
+import { FilterEditor, FilterOperator } from './model/filter-expression';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export declare class FilterExpressionOperatorsComponent {
-    private filterService;
     private localization;
     currentItem: FilterDescriptor;
-    valueChange: EventEmitter<void>;
+    editorType: FilterEditor;
+    valueChange: EventEmitter<FilterOperator>;
     operators: {
         text: string;
         value: string;
     }[];
-    constructor(filterService: FilterService, localization: LocalizationService);
+    constructor(localization: LocalizationService);
     messageFor(key: string): string;
-    operatorValueChange(value: string): void;
+    getOperator(operatorValue: FilterOperator): string;
+    operatorValueChange(value: FilterOperator): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterExpressionOperatorsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterExpressionOperatorsComponent, "kendo-filter-expression-operators", never, { "currentItem": "currentItem"; "operators": "operators"; }, { "valueChange": "valueChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterExpressionOperatorsComponent, "kendo-filter-expression-operators", never, { "currentItem": "currentItem"; "editorType": "editorType"; "operators": "operators"; }, { "valueChange": "valueChange"; }, never, never>;
 }

package/filter-expression.component.d.ts

@@ -23,8 +23,8 @@ export declare class FilterExpressionComponent implements OnInit, OnDestroy {
     operators: any[];
     filters: FilterExpression[];
     isBoolean: boolean;
-    isEditorDisabled: boolean;
     editorType: FilterEditor;
+    isEditorDisabled: boolean;
     private localizationSubscription;
     constructor(filterService: FilterService, localization: LocalizationService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
@@ -43,6 +43,7 @@ export declare class FilterExpressionComponent implements OnInit, OnDestroy {
     getEditorType(): FilterEditor;
     removeFilterExpression(): void;
     private setOperators;
+    onOperatorChange(value: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterExpressionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FilterExpressionComponent, "kendo-filter-expression", never, { "index": "index"; "currentItem": "currentItem"; }, { "valueChange": "valueChange"; }, never, never>;
 }

package/filter-group.component.d.ts

@@ -32,6 +32,7 @@ export declare class FilterGroupComponent implements OnInit, OnDestroy {
         value: 'and' | 'or';
     }[];
     messageFor(key: string): string;
+    getOperator(operatorValue: 'and' | 'or'): string;
     selectedChange(logicOperator: 'or' | 'and'): void;
     addFilterExpression(): void;
     addFilterGroup(): void;

package/filter.component.d.ts

@@ -64,6 +64,7 @@ export declare class FilterComponent implements OnInit, OnDestroy {
      */
     valueChange: EventEmitter<CompositeFilterDescriptor>;
     private localizationSubscription;
+    private _value;
     constructor(filterService: FilterService, localization: LocalizationService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -76,6 +77,7 @@ export declare class FilterComponent implements OnInit, OnDestroy {
      */
     onValueChange(): void;
     private normalizeFilter;
+    private setValue;
     private normalizeValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FilterComponent, "kendo-filter", never, { "filters": "filters"; "value": "value"; }, { "valueChange": "valueChange"; }, never, never>;

package/filter.service.d.ts

@@ -9,9 +9,8 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export declare class FilterService {
-    value: CompositeFilterDescriptor;
+    normalizedValue: CompositeFilterDescriptor;
     filters: FilterExpression[];
-    isEditorDisabled: boolean;
     addFilterGroup(item: CompositeFilterDescriptor): void;
     addFilterExpression(item: CompositeFilterDescriptor): void;
     remove(item: CompositeFilterDescriptor | FilterDescriptor, positionIndex: number, parentItem?: CompositeFilterDescriptor): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-filter",
-  "version": "2.0.1-dev.202205171237",
+  "version": "2.0.1-dev.202205191247",
   "description": "Kendo UI Angular Filter",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

package/util.d.ts

@@ -2,6 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { FilterOperator } from "./model/filter-expression";
 /**
  * @hidden
  */
@@ -41,10 +42,7 @@ export declare const isArray: Function;
 /**
  * @hidden
  */
-export declare const getKeyByValue: (object: object, value: "eq" | "neq" | "gt" | "gte" | "lt" | "lte" | "isnull" | "isnotnull" | "contains" | "doesnotcontain" | "startswith" | "endswidth" | "isempty" | "isnotempty" | {
-    text: string;
-    value: string;
-}) => string;
+export declare const getKeyByValue: (object: object, value: FilterOperator | "and" | "or") => string;
 /**
  * @hidden
  */