@progress/kendo-angular-filter 2.0.1-dev.202205190755 → 2.1.0-dev.202206150812

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, Directive, Component, Input, ContentChild, 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,10 +24,11 @@ import { LabelModule } from '@progress/kendo-angular-label';
  */
 class FilterService {
     constructor() {
+        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) {
@@ -200,11 +201,86 @@ const packageMetadata = {
     name: '@progress/kendo-angular-filter',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1652946928,
+    publishDate: 1655280742,
     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'
 };
 
+class FilterValueEditorTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+FilterValueEditorTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterValueEditorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FilterValueEditorTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FilterValueEditorTemplateDirective, selector: "[kendoFilterValueEditorTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterValueEditorTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoFilterValueEditorTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * 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" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: FilterValueEditorTemplateDirective, descendants: true }], 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
+            }], editorTemplate: [{
+                type: ContentChild,
+                args: [FilterValueEditorTemplateDirective]
+            }] } });
+
 /**
  * @hidden
  */
@@ -234,18 +310,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"
@@ -256,8 +335,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: [{
@@ -273,15 +358,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
             }] } });
 
 /**
@@ -300,7 +393,6 @@ FilterTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0"
 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">
@@ -313,7 +405,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <kendo-textbox
             [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-            class="k-filter-toolbar-item k-filter-value"
             [(value)]="currentItem.value"
             (valueChange)="valueChange.emit()"
             [disabled]="isDisabled">
@@ -344,7 +435,6 @@ FilterNumericEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0
 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">
@@ -361,7 +451,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <kendo-numerictextbox
             [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-            class="k-filter-toolbar-item k-filter-value"
             [(value)]="currentItem.value"
             (valueChange)="valueChange.emit()"
             [disabled]="isDisabled">
@@ -420,7 +509,6 @@ FilterBooleanEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0
 FilterBooleanEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: { currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
     <kendo-dropdownlist
         [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-        class="k-filter-toolbar-item k-filter-value"
         [(value)]="currentItem.value"
         (valueChange)="valueChange.emit()"
         [data]="items"
@@ -438,7 +526,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
     <kendo-dropdownlist
         [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-        class="k-filter-toolbar-item k-filter-value"
         [(value)]="currentItem.value"
         (valueChange)="valueChange.emit()"
         [data]="items"
@@ -472,7 +559,6 @@ FilterDateEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0"
 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">
@@ -489,7 +575,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <kendo-datepicker
             [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-            class="k-filter-toolbar-item k-filter-value"
             [(value)]="currentItem.value"
             (valueChange)="valueChange.emit()"
             [disabled]="isDisabled">
@@ -534,6 +619,7 @@ class FilterExpressionComponent {
             this.currentItem.field = this.filterService.filters[0].field;
             this.setOperators(defaultFilter);
         }
+        this.setEditorTemplate();
         this.localizationSubscription = this.localization.changes.subscribe(() => {
             this.setOperators(foundFilter || defaultFilter);
             this.cdr.detectChanges();
@@ -569,6 +655,7 @@ class FilterExpressionComponent {
     filterValueChange(value) {
         this.currentItem.value = null;
         this.currentItem.field = value;
+        this.setEditorTemplate();
         const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
         this.setOperators(foundFilter);
         this.valueChange.emit();
@@ -622,6 +709,12 @@ class FilterExpressionComponent {
             this.isEditorDisabled = false;
         }
     }
+    setEditorTemplate() {
+        let filterExpression = this.filterService.filters.find((filter) => filter.field === this.currentItem.field);
+        if (filterExpression.editorTemplate) {
+            this.editorTemplate = filterExpression.editorTemplate;
+        }
+    }
 }
 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: `
@@ -643,16 +736,24 @@ 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>
 
-                <ng-container [ngSwitch]="getEditorType()">
-                    <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" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
-                </ng-container>
+                <div class="k-filter-toolbar-item k-filter-value">
+                    <ng-container *ngIf="!editorTemplate" [ngSwitch]="getEditorType()">
+                        <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" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
+                    </ng-container>
+                    <ng-container *ngIf="editorTemplate">
+                        <ng-template
+                            [templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
+                        </ng-template>
+                    </ng-container>
+                </div>
 
                 <div class="k-filter-toolbar-item">
                     <button
@@ -665,7 +766,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.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { 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: [{
@@ -689,16 +790,24 @@ 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>
 
-                <ng-container [ngSwitch]="getEditorType()">
-                    <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" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
-                </ng-container>
+                <div class="k-filter-toolbar-item k-filter-value">
+                    <ng-container *ngIf="!editorTemplate" [ngSwitch]="getEditorType()">
+                        <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" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
+                    </ng-container>
+                    <ng-container *ngIf="editorTemplate">
+                        <ng-template
+                            [templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
+                        </ng-template>
+                    </ng-container>
+                </div>
 
                 <div class="k-filter-toolbar-item">
                     <button
@@ -755,6 +864,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;
@@ -788,7 +900,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>
@@ -856,7 +968,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>
@@ -1083,17 +1195,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;
-        });
-        this.setValue(this.value);
     }
     get filters() {
         return this.filterService.filters;
@@ -1104,20 +1215,30 @@ class FilterComponent {
     set value(value) {
         const clonedValue = JSON.parse(JSON.stringify(value));
         this._value = clonedValue;
-        this.setValue(this.value);
+        if (this.filters.length > 0) {
+            this.setValue(this.value);
+        }
     }
     get 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) => {
+                var _a;
+                return (Object.assign(Object.assign({}, filterField), { editorTemplate: (_a = filterField.editorTemplate) === null || _a === void 0 ? void 0 : _a.templateRef }));
+            });
+        }
+        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();
@@ -1143,6 +1264,9 @@ class FilterComponent {
         if (isDevMode() && foundFilter.editor === 'boolean' && (!filterDescriptor.value && filterDescriptor.value !== false)) {
             console.warn(`Provide a value for the boolean '${filterDescriptor.field}' user-defined filter as the operator is always set to 'eq'.`);
         }
+        if (isDevMode() && foundFilter.editor === 'boolean' && filterDescriptor.operator !== 'eq') {
+            console.warn(`The operator of the boolean '${filterDescriptor.field}' user-defined filter is always set to 'eq'.`);
+        }
         if (filterDescriptor.operator && foundFilter.operators && !foundFilter.operators.some(operator => operator === filterDescriptor.operator)) {
             throw new Error(`The user-defined filter with field '${filterDescriptor.field}' is missing the '${filterDescriptor.operator}' operator.`);
         }
@@ -1185,7 +1309,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"
@@ -1459,6 +1583,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], filterFields: [{
+                type: ContentChildren,
+                args: [FilterFieldComponent]
             }] } });
 
 /**
@@ -1578,7 +1705,9 @@ FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FilterDateEditorComponent,
         LocalizedMessagesDirective,
         CustomMessagesComponent,
-        AriaLabelValueDirective], imports: [SharedModule], exports: [FilterComponent,
+        AriaLabelValueDirective,
+        FilterFieldComponent,
+        FilterValueEditorTemplateDirective], imports: [SharedModule], exports: [FilterComponent,
         FilterNumericEditorComponent,
         FilterTextEditorComponent,
         FilterExpressionComponent,
@@ -1588,7 +1717,9 @@ FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FilterDateEditorComponent,
         LocalizedMessagesDirective,
         CustomMessagesComponent,
-        AriaLabelValueDirective] });
+        AriaLabelValueDirective,
+        FilterFieldComponent,
+        FilterValueEditorTemplateDirective] });
 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,
@@ -1604,7 +1735,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FilterDateEditorComponent,
                         LocalizedMessagesDirective,
                         CustomMessagesComponent,
-                        AriaLabelValueDirective
+                        AriaLabelValueDirective,
+                        FilterFieldComponent,
+                        FilterValueEditorTemplateDirective
                     ],
                     exports: [FilterComponent,
                         FilterNumericEditorComponent,
@@ -1616,7 +1749,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FilterDateEditorComponent,
                         LocalizedMessagesDirective,
                         CustomMessagesComponent,
-                        AriaLabelValueDirective]
+                        AriaLabelValueDirective,
+                        FilterFieldComponent,
+                        FilterValueEditorTemplateDirective]
                 }]
         }] });
 
@@ -1624,5 +1759,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, FilterValueEditorTemplateDirective, LocalizedMessagesDirective };
 

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

@@ -5,6 +5,7 @@
 import { EventEmitter } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { FilterDescriptor } from '@progress/kendo-data-query';
+import { FilterEditor, FilterOperator } from './model/filter-expression';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -12,14 +13,16 @@ import * as i0 from "@angular/core";
 export declare class FilterExpressionOperatorsComponent {
     private localization;
     currentItem: FilterDescriptor;
+    editorType: FilterEditor;
+    valueChange: EventEmitter<FilterOperator>;
     operators: {
         text: string;
         value: string;
     }[];
-    valueChange: EventEmitter<string>;
     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

@@ -2,7 +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 { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
 import { FilterDescriptor } from '@progress/kendo-data-query';
@@ -25,6 +25,7 @@ export declare class FilterExpressionComponent implements OnInit, OnDestroy {
     isBoolean: boolean;
     editorType: FilterEditor;
     isEditorDisabled: boolean;
+    editorTemplate: TemplateRef<any>;
     private localizationSubscription;
     constructor(filterService: FilterService, localization: LocalizationService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
@@ -44,6 +45,7 @@ export declare class FilterExpressionComponent implements OnInit, OnDestroy {
     removeFilterExpression(): void;
     private setOperators;
     onOperatorChange(value: string): void;
+    setEditorTemplate(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterExpressionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FilterExpressionComponent, "kendo-filter-expression", never, { "index": "index"; "currentItem": "currentItem"; }, { "valueChange": "valueChange"; }, never, never>;
 }