@progress/kendo-angular-filter 2.0.1-dev.202205171507 → 2.1.0-dev.202206081432

package/esm2015/filter.component.js

@@ -2,12 +2,13 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, Output, EventEmitter, HostBinding, isDevMode } from '@angular/core';
+import { Component, Input, Output, EventEmitter, HostBinding, isDevMode, ContentChildren } from '@angular/core';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { FilterService } from './filter.service';
-import { isArray, nullOperators, isPresent } from './util';
+import { nullOperators, isPresent } from './util';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
+import { FilterFieldComponent } from './filter-field.component';
 import * as i0 from "@angular/core";
 import * as i1 from "./filter.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -55,6 +56,7 @@ export 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';
     }
@@ -62,16 +64,16 @@ export class FilterComponent {
      * Specifies the available user-defined filters. At least one filter should be provided.
      */
     set filters(_filters) {
-        if (isDevMode() && (!isArray(_filters) || _filters.length === 0)) {
-            throw new Error(`Pass at least one user-defined filter through the [filters] input property. See http://www.telerik.com/kendo-angular-ui/components/filter/#data-binding`);
+        if (_filters.length > 0) {
+            this.filterService.filters = _filters.map(filterExpression => {
+                let clonedFilter = Object.assign({}, filterExpression);
+                if (!clonedFilter.title) {
+                    clonedFilter.title = clonedFilter.field;
+                }
+                return clonedFilter;
+            });
+            this.setValue(this.value);
         }
-        this.filterService.filters = _filters.map(filterExpression => {
-            let clonedFilter = Object.assign({}, filterExpression);
-            if (!clonedFilter.title) {
-                clonedFilter.title = clonedFilter.field;
-            }
-            return clonedFilter;
-        });
     }
     get filters() {
         return this.filterService.filters;
@@ -81,21 +83,28 @@ export class FilterComponent {
      */
     set value(value) {
         const clonedValue = JSON.parse(JSON.stringify(value));
-        this.normalizeValue(clonedValue);
-        this.filterService.value = clonedValue;
+        this._value = clonedValue;
+        if (this.filters.length > 0) {
+            this.setValue(this.value);
+        }
     }
     get value() {
-        return this.filterService.value;
+        return this._value;
     }
     ngOnInit() {
-        if (this.filters.length === 0) {
-            throw new Error(`Pass at least one user-defined filter through the [filters] input property. See http://www.telerik.com/kendo-angular-ui/components/filter/#data-binding`);
-        }
         this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.detectChanges();
         });
     }
+    ngAfterViewChecked() {
+        if (this.filterFields && this.filterFields.length > 0) {
+            this.filters = this.filterFields.map((filterField) => filterField);
+        }
+        if (this.filters.length === 0) {
+            throw new Error(`Pass at least one user-defined filter through the [filters] input property or nest kendo-filter-field components. See http://www.telerik.com/kendo-angular-ui/components/filter/#data-binding`);
+        }
+    }
     ngOnDestroy() {
         if (this.localizationSubscription) {
             this.localizationSubscription.unsubscribe();
@@ -105,13 +114,13 @@ export 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);
@@ -137,8 +146,15 @@ export class FilterComponent {
             filterDescriptor.value = null;
         }
     }
-    normalizeValue(item) {
-        item.filters.forEach((item) => {
+    setValue(items) {
+        this.normalizeValue(items);
+        this.filterService.normalizedValue = items;
+    }
+    normalizeValue(items) {
+        if (!this.filterService.filters.length) {
+            return;
+        }
+        items.filters.forEach((item) => {
             if (item.filters) {
                 this.normalizeValue(item);
             }
@@ -156,7 +172,7 @@ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             useValue: 'kendo.filter'
         },
         FilterService
-    ], ngImport: i0, template: `
+    ], queries: [{ propertyName: "filterFields", predicate: FilterFieldComponent }], ngImport: i0, template: `
         <ng-container kendoFilterLocalizedMessages
             i18n-editorDateTodayText="kendo.filter.editorDateTodayText|The text of the Today button of the Date editor"
             editorDateTodayText="Today"
@@ -281,7 +297,7 @@ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 </li>
             </ul>
         </div>
-`, isInline: true, components: [{ type: i3.FilterGroupComponent, selector: "kendo-filter-group", inputs: ["index", "currentItem"], outputs: ["valueChange"] }], directives: [{ type: i4.LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]" }] });
+    `, isInline: true, components: [{ type: i3.FilterGroupComponent, selector: "kendo-filter-group", inputs: ["index", "currentItem"], outputs: ["valueChange"] }], directives: [{ type: i4.LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -419,7 +435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 </li>
             </ul>
         </div>
-`
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { direction: [{
                 type: HostBinding,
@@ -430,4 +446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], filterFields: [{
+                type: ContentChildren,
+                args: [FilterFieldComponent]
             }] } });

package/esm2015/filter.module.js

@@ -10,6 +10,7 @@ import { FilterNumericEditorComponent } from './editors/numeric-editor.component
 import { FilterTextEditorComponent } from './editors/text-editor.component';
 import { FilterExpressionOperatorsComponent } from './filter-expression-operators.component';
 import { FilterExpressionComponent } from './filter-expression.component';
+import { FilterFieldComponent } from './filter-field.component';
 import { FilterGroupComponent } from './filter-group.component';
 import { FilterComponent } from './filter.component';
 import { CustomMessagesComponent } from './localization/custom-messages.component';
@@ -60,7 +61,8 @@ FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FilterDateEditorComponent,
         LocalizedMessagesDirective,
         CustomMessagesComponent,
-        AriaLabelValueDirective], imports: [SharedModule], exports: [FilterComponent,
+        AriaLabelValueDirective,
+        FilterFieldComponent], imports: [SharedModule], exports: [FilterComponent,
         FilterNumericEditorComponent,
         FilterTextEditorComponent,
         FilterExpressionComponent,
@@ -70,7 +72,8 @@ FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FilterDateEditorComponent,
         LocalizedMessagesDirective,
         CustomMessagesComponent,
-        AriaLabelValueDirective] });
+        AriaLabelValueDirective,
+        FilterFieldComponent] });
 FilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterModule, imports: [[SharedModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterModule, decorators: [{
             type: NgModule,
@@ -86,7 +89,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FilterDateEditorComponent,
                         LocalizedMessagesDirective,
                         CustomMessagesComponent,
-                        AriaLabelValueDirective
+                        AriaLabelValueDirective,
+                        FilterFieldComponent
                     ],
                     exports: [FilterComponent,
                         FilterNumericEditorComponent,
@@ -98,6 +102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FilterDateEditorComponent,
                         LocalizedMessagesDirective,
                         CustomMessagesComponent,
-                        AriaLabelValueDirective]
+                        AriaLabelValueDirective,
+                        FilterFieldComponent]
                 }]
         }] });

package/esm2015/filter.service.js

@@ -9,11 +9,11 @@ import * as i0 from "@angular/core";
  */
 export class FilterService {
     constructor() {
-        this.value = { filters: [], logic: 'or' };
+        this.normalizedValue = { logic: 'and', filters: [] };
         this.filters = [];
     }
     addFilterGroup(item) {
-        let filterGroup = { logic: 'or', filters: [] };
+        let filterGroup = { logic: 'and', filters: [] };
         item.filters.push(filterGroup);
     }
     addFilterExpression(item) {
@@ -22,7 +22,7 @@ export class FilterService {
     }
     remove(item, positionIndex, parentItem) {
         if (!parentItem) {
-            parentItem = this.value;
+            parentItem = this.normalizedValue;
         }
         if (item === parentItem) {
             parentItem.filters = [];

package/esm2015/main.js

@@ -14,3 +14,4 @@ export { FilterExpressionOperatorsComponent } from './filter-expression-operator
 export { FilterExpressionComponent } from './filter-expression.component';
 export { CustomMessagesComponent } from './localization/custom-messages.component';
 export { LocalizedMessagesDirective } from './localization/localized-messages.directive';
+export { FilterFieldComponent } from './filter-field.component';

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-filter',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1652799999,
+    publishDate: 1654698725,
     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'
 };

package/fesm2015/kendo-angular-filter.js

@@ -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, Input, EventEmitter, Component, Output, forwardRef, isDevMode, HostBinding, NgModule } from '@angular/core';
+import { Injectable, Component, Input, Directive, EventEmitter, Output, forwardRef, isDevMode, HostBinding, ContentChildren, 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';
@@ -24,11 +24,11 @@ import { LabelModule } from '@progress/kendo-angular-label';
  */
 class FilterService {
     constructor() {
-        this.value = { filters: [], logic: 'or' };
+        this.normalizedValue = { logic: 'and', filters: [] };
         this.filters = [];
     }
     addFilterGroup(item) {
-        let filterGroup = { logic: 'or', filters: [] };
+        let filterGroup = { logic: 'and', filters: [] };
         item.filters.push(filterGroup);
     }
     addFilterExpression(item) {
@@ -37,7 +37,7 @@ class FilterService {
     }
     remove(item, positionIndex, parentItem) {
         if (!parentItem) {
-            parentItem = this.value;
+            parentItem = this.normalizedValue;
         }
         if (item === parentItem) {
             parentItem.filters = [];
@@ -201,11 +201,69 @@ const packageMetadata = {
     name: '@progress/kendo-angular-filter',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1652799999,
+    publishDate: 1654698725,
     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'
 };
 
+/**
+ * Represents the [Kendo UI Filter Field component for Angular]({% slug api_filter_filterfieldcomponent %}).
+ * The Filter Field component can be used to add Filter Expressions declaratively.
+ * @example
+ * ```
+ *   @Component({
+ *       selector: 'my-app',
+ *       template: `
+ *          <kendo-filter (valueChange)="onValueChange($event)">
+ *              <kendo-filter-field field="country" editor="string" [operators]="['neq', 'eq', 'contains']"></kendo-filter-field>
+ *              <kendo-filter-field field="budget" editor="number"></kendo-filter-field>
+ *              <kendo-filter-field field="discontinued" title="Discontinued" editor="boolean"></kendo-filter-field>
+ *              <kendo-filter-field field="ordered on" title="Ordered on" editor="date"></kendo-filter-field>
+ *          <kendo-filter>
+ *       `
+ *   })
+ *   export class AppComponent {
+ *      onValueChange(e: CompositeFilterDescriptor){
+ *          console.log(e)
+ *      }
+ *  }
+ * ```
+ */
+class FilterFieldComponent {
+    /**
+     * 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;
+        }
+        else {
+            this._title = this.field;
+        }
+    }
+    get title() {
+        return this._title;
+    }
+}
+FilterFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterFieldComponent, selector: "kendo-filter-field", inputs: { field: "field", title: "title", editor: "editor", operators: "operators" }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-field',
+                    template: ``
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], editor: [{
+                type: Input
+            }], operators: [{
+                type: Input
+            }] } });
+
 /**
  * @hidden
  */
@@ -235,18 +293,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class FilterExpressionOperatorsComponent {
     constructor(localization) {
         this.localization = localization;
-        this.operators = [];
         this.valueChange = new EventEmitter();
+        this.operators = [];
     }
     messageFor(key) {
         return this.localization.get(key);
     }
+    getOperator(operatorValue) {
+        return this.messageFor(getKeyByValue(defaultOperators[this.editorType], operatorValue));
+    }
     operatorValueChange(value) {
         this.valueChange.emit(value);
     }
 }
 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", operators: "operators" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+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"
@@ -257,8 +318,14 @@ FilterExpressionOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersio
             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: 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"] }] });
+    `, 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: [{
@@ -274,15 +341,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             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: i1.LocalizationService }]; }, propDecorators: { currentItem: [{
                 type: Input
-            }], operators: [{
+            }], editorType: [{
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], operators: [{
+                type: Input
             }] } });
 
 /**
@@ -644,6 +719,7 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                     <kendo-filter-expression-operators
                         [currentItem]="currentItem"
                         [operators]="operators"
+                        [editorType]="getEditorType()"
                         (valueChange)="onOperatorChange($event);">
                     </kendo-filter-expression-operators>
                 </div>
@@ -666,7 +742,7 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 </div>
             </div>
         </div>
-  `, 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", "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"] }] });
+  `, 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: [{
@@ -690,6 +766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     <kendo-filter-expression-operators
                         [currentItem]="currentItem"
                         [operators]="operators"
+                        [editorType]="getEditorType()"
                         (valueChange)="onOperatorChange($event);">
                     </kendo-filter-expression-operators>
                 </div>
@@ -756,6 +833,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;
@@ -789,7 +869,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>
@@ -857,7 +937,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>
@@ -1076,6 +1156,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';
     }
@@ -1083,16 +1164,16 @@ class FilterComponent {
      * Specifies the available user-defined filters. At least one filter should be provided.
      */
     set filters(_filters) {
-        if (isDevMode() && (!isArray(_filters) || _filters.length === 0)) {
-            throw new Error(`Pass at least one user-defined filter through the [filters] input property. See http://www.telerik.com/kendo-angular-ui/components/filter/#data-binding`);
+        if (_filters.length > 0) {
+            this.filterService.filters = _filters.map(filterExpression => {
+                let clonedFilter = Object.assign({}, filterExpression);
+                if (!clonedFilter.title) {
+                    clonedFilter.title = clonedFilter.field;
+                }
+                return clonedFilter;
+            });
+            this.setValue(this.value);
         }
-        this.filterService.filters = _filters.map(filterExpression => {
-            let clonedFilter = Object.assign({}, filterExpression);
-            if (!clonedFilter.title) {
-                clonedFilter.title = clonedFilter.field;
-            }
-            return clonedFilter;
-        });
     }
     get filters() {
         return this.filterService.filters;
@@ -1102,21 +1183,28 @@ class FilterComponent {
      */
     set value(value) {
         const clonedValue = JSON.parse(JSON.stringify(value));
-        this.normalizeValue(clonedValue);
-        this.filterService.value = clonedValue;
+        this._value = clonedValue;
+        if (this.filters.length > 0) {
+            this.setValue(this.value);
+        }
     }
     get value() {
-        return this.filterService.value;
+        return this._value;
     }
     ngOnInit() {
-        if (this.filters.length === 0) {
-            throw new Error(`Pass at least one user-defined filter through the [filters] input property. See http://www.telerik.com/kendo-angular-ui/components/filter/#data-binding`);
-        }
         this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.detectChanges();
         });
     }
+    ngAfterViewChecked() {
+        if (this.filterFields && this.filterFields.length > 0) {
+            this.filters = this.filterFields.map((filterField) => filterField);
+        }
+        if (this.filters.length === 0) {
+            throw new Error(`Pass at least one user-defined filter through the [filters] input property or nest kendo-filter-field components. See http://www.telerik.com/kendo-angular-ui/components/filter/#data-binding`);
+        }
+    }
     ngOnDestroy() {
         if (this.localizationSubscription) {
             this.localizationSubscription.unsubscribe();
@@ -1126,13 +1214,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);
@@ -1158,8 +1246,15 @@ class FilterComponent {
             filterDescriptor.value = null;
         }
     }
-    normalizeValue(item) {
-        item.filters.forEach((item) => {
+    setValue(items) {
+        this.normalizeValue(items);
+        this.filterService.normalizedValue = items;
+    }
+    normalizeValue(items) {
+        if (!this.filterService.filters.length) {
+            return;
+        }
+        items.filters.forEach((item) => {
             if (item.filters) {
                 this.normalizeValue(item);
             }
@@ -1177,7 +1272,7 @@ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             useValue: 'kendo.filter'
         },
         FilterService
-    ], ngImport: i0, template: `
+    ], queries: [{ propertyName: "filterFields", predicate: FilterFieldComponent }], ngImport: i0, template: `
         <ng-container kendoFilterLocalizedMessages
             i18n-editorDateTodayText="kendo.filter.editorDateTodayText|The text of the Today button of the Date editor"
             editorDateTodayText="Today"
@@ -1302,7 +1397,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: [{
@@ -1440,7 +1535,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,
@@ -1451,6 +1546,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], filterFields: [{
+                type: ContentChildren,
+                args: [FilterFieldComponent]
             }] } });
 
 /**
@@ -1570,7 +1668,8 @@ FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FilterDateEditorComponent,
         LocalizedMessagesDirective,
         CustomMessagesComponent,
-        AriaLabelValueDirective], imports: [SharedModule], exports: [FilterComponent,
+        AriaLabelValueDirective,
+        FilterFieldComponent], imports: [SharedModule], exports: [FilterComponent,
         FilterNumericEditorComponent,
         FilterTextEditorComponent,
         FilterExpressionComponent,
@@ -1580,7 +1679,8 @@ FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FilterDateEditorComponent,
         LocalizedMessagesDirective,
         CustomMessagesComponent,
-        AriaLabelValueDirective] });
+        AriaLabelValueDirective,
+        FilterFieldComponent] });
 FilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterModule, imports: [[SharedModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterModule, decorators: [{
             type: NgModule,
@@ -1596,7 +1696,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FilterDateEditorComponent,
                         LocalizedMessagesDirective,
                         CustomMessagesComponent,
-                        AriaLabelValueDirective
+                        AriaLabelValueDirective,
+                        FilterFieldComponent
                     ],
                     exports: [FilterComponent,
                         FilterNumericEditorComponent,
@@ -1608,7 +1709,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FilterDateEditorComponent,
                         LocalizedMessagesDirective,
                         CustomMessagesComponent,
-                        AriaLabelValueDirective]
+                        AriaLabelValueDirective,
+                        FilterFieldComponent]
                 }]
         }] });
 
@@ -1616,5 +1718,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AriaLabelValueDirective, CustomMessagesComponent, FilterBooleanEditorComponent, FilterComponent, FilterDateEditorComponent, FilterExpressionComponent, FilterExpressionOperatorsComponent, FilterGroupComponent, FilterModule, FilterNumericEditorComponent, FilterTextEditorComponent, LocalizedMessagesDirective };
+export { AriaLabelValueDirective, CustomMessagesComponent, FilterBooleanEditorComponent, FilterComponent, FilterDateEditorComponent, FilterExpressionComponent, FilterExpressionOperatorsComponent, FilterFieldComponent, FilterGroupComponent, FilterModule, FilterNumericEditorComponent, FilterTextEditorComponent, LocalizedMessagesDirective };