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

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";
@@ -63,17 +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;
-        });
-        this.setValue(this.value);
     }
     get filters() {
         return this.filterService.filters;
@@ -84,20 +84,30 @@ export 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();
@@ -123,6 +133,9 @@ export 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.`);
         }
@@ -165,7 +178,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"
@@ -439,4 +452,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,11 +10,13 @@ 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';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 import { SharedModule } from './shared.module';
+import { FilterValueEditorTemplateDirective } from './templates/value-editor.template';
 import * as i0 from "@angular/core";
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
@@ -60,7 +62,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,
@@ -70,7 +74,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,
@@ -86,7 +92,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FilterDateEditorComponent,
                         LocalizedMessagesDirective,
                         CustomMessagesComponent,
-                        AriaLabelValueDirective
+                        AriaLabelValueDirective,
+                        FilterFieldComponent,
+                        FilterValueEditorTemplateDirective
                     ],
                     exports: [FilterComponent,
                         FilterNumericEditorComponent,
@@ -98,6 +106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FilterDateEditorComponent,
                         LocalizedMessagesDirective,
                         CustomMessagesComponent,
-                        AriaLabelValueDirective]
+                        AriaLabelValueDirective,
+                        FilterFieldComponent,
+                        FilterValueEditorTemplateDirective]
                 }]
         }] });

package/esm2015/filter.service.js

@@ -9,10 +9,11 @@ import * as i0 from "@angular/core";
  */
 export 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) {

package/esm2015/main.js

@@ -14,3 +14,5 @@ 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';
+export { FilterValueEditorTemplateDirective } from './templates/value-editor.template';

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: 1652964392,
+    publishDate: 1655825197,
     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/esm2015/templates/value-editor.template.js

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+export 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 }]; } });

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: 1652964392,
+    publishDate: 1655825197,
     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
  */
@@ -317,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">
@@ -330,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">
@@ -361,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">
@@ -378,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">
@@ -437,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"
@@ -455,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"
@@ -489,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">
@@ -506,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">
@@ -551,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();
@@ -586,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();
@@ -639,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: `
@@ -665,12 +741,19 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                     </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
@@ -683,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", "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"] }] });
+  `, 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: [{
@@ -712,12 +795,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     </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
@@ -1105,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;
@@ -1126,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();
@@ -1165,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.`);
         }
@@ -1207,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"
@@ -1481,6 +1583,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], filterFields: [{
+                type: ContentChildren,
+                args: [FilterFieldComponent]
             }] } });
 
 /**
@@ -1600,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,
@@ -1610,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,
@@ -1626,7 +1735,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FilterDateEditorComponent,
                         LocalizedMessagesDirective,
                         CustomMessagesComponent,
-                        AriaLabelValueDirective
+                        AriaLabelValueDirective,
+                        FilterFieldComponent,
+                        FilterValueEditorTemplateDirective
                     ],
                     exports: [FilterComponent,
                         FilterNumericEditorComponent,
@@ -1638,7 +1749,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FilterDateEditorComponent,
                         LocalizedMessagesDirective,
                         CustomMessagesComponent,
-                        AriaLabelValueDirective]
+                        AriaLabelValueDirective,
+                        FilterFieldComponent,
+                        FilterValueEditorTemplateDirective]
                 }]
         }] });
 
@@ -1646,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 };