@progress/kendo-angular-filter 24.0.0-develop.3 → 24.0.0-develop.31

package/directives.d.ts

@@ -5,8 +5,10 @@
 import { FilterFieldComponent } from "./filter-field.component";
 import { FilterComponent } from "./filter.component";
 import { CustomMessagesComponent } from "./localization/custom-messages.component";
-import { FilterValueEditorTemplateDirective } from "./templates/value-editor.template";
+import { FilterValueEditorTemplateDirective } from "./templates/value-editor-template.directive";
+import { FilterOperatorTemplateDirective } from "./templates/operator-template.directive";
+import { FilterFieldsTemplateDirective } from "./templates/field-template.directive";
 /**
 * Utility array that contains all `@progress/kendo-angular-filter` related components and directives
 */
-export declare const KENDO_FILTER: readonly [typeof FilterComponent, typeof FilterFieldComponent, typeof CustomMessagesComponent, typeof FilterValueEditorTemplateDirective];
+export declare const KENDO_FILTER: readonly [typeof FilterComponent, typeof FilterFieldComponent, typeof CustomMessagesComponent, typeof FilterValueEditorTemplateDirective, typeof FilterOperatorTemplateDirective, typeof FilterFieldsTemplateDirective];

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

@@ -7,13 +7,13 @@ import { Injectable, Directive, ContentChild, Input, Component, EventEmitter, Ou
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Keys, TemplateContextDirective, normalizeKeys, ResizeBatchService } from '@progress/kendo-angular-common';
+import { Keys, normalizeKeys, ResizeBatchService } from '@progress/kendo-angular-common';
 import { xIcon, filterAddGroupIcon, filterAddExpressionIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { DatePickerComponent, DatePickerCustomMessagesComponent, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, TimePickerDOMService, HoursService, MinutesService, SecondsService, MillisecondsService, DayPeriodService } from '@progress/kendo-angular-dateinputs';
 import { DropDownListComponent, ValueTemplateDirective, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
 import { NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, TextBoxComponent } from '@progress/kendo-angular-inputs';
-import { NgClass } from '@angular/common';
+import { NgTemplateOutlet, NgClass } from '@angular/common';
 import { IconsService } from '@progress/kendo-angular-icons';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { DialogContainerService, DialogService, WindowService, WindowContainerService, NavigationService as NavigationService$1 } from '@progress/kendo-angular-dialog';
@@ -24,6 +24,7 @@ import { DialogContainerService, DialogService, WindowService, WindowContainerSe
 class FilterService {
     normalizedValue = { logic: 'and', filters: [] };
     filters = [];
+    fieldTemplate = null;
     addFilterGroup(item) {
         const filterGroup = { logic: 'and', filters: [] };
         item.filters.push(filterGroup);
@@ -231,8 +232,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1776940655,
-    version: '24.0.0-develop.3',
+    publishDate: 1778841844,
+    version: '24.0.0-develop.31',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -263,6 +264,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+/**
+ * Replaces the default operator DropDownList in the Filter component with a custom template.
+ * Apply it to an `ng-template` inside a `kendo-filter-field` element.
+ *
+ * The template context provides the following field:
+ *
+ * - `let-filter`—The [filter descriptor](slug:api_kendo-data-query_filterdescriptor) for the current row. Set its `operator` property when the user selects a new operator.
+ *
+ * @example
+ * ```html
+ * <kendo-filter>
+ *   <kendo-filter-field field="name" editor="string">
+ *     <ng-template kendoFilterOperatorTemplate let-filter>
+ *       <kendo-combobox
+ *           [data]="customOperators"
+ *           textField="text"
+ *           valueField="value"
+ *           [valuePrimitive]="true"
+ *           [value]="filter.operator"
+ *           (valueChange)="filter.operator = $event">
+ *       </kendo-combobox>
+ *     </ng-template>
+ *   </kendo-filter-field>
+ * </kendo-filter>
+ * ```
+ */
+class FilterOperatorTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterOperatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: FilterOperatorTemplateDirective, isStandalone: true, selector: "[kendoFilterOperatorTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterOperatorTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoFilterOperatorTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 /**
  * Represents the [Kendo UI Filter Field component for Angular](https://www.telerik.com/kendo-angular-ui/components/filter/api/filterfieldcomponent).
  * Used to declare filter expressions for the Filter component.
@@ -340,8 +383,12 @@ class FilterFieldComponent {
      * @hidden
      */
     editorTemplate;
+    /**
+     * @hidden
+     */
+    operatorTemplate;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FilterFieldComponent, isStandalone: true, selector: "kendo-filter-field", inputs: { field: "field", title: "title", editor: "editor", operators: "operators", editorFormat: "editorFormat" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: FilterValueEditorTemplateDirective, descendants: true }], ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FilterFieldComponent, isStandalone: true, selector: "kendo-filter-field", inputs: { field: "field", title: "title", editor: "editor", operators: "operators", editorFormat: "editorFormat" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: FilterValueEditorTemplateDirective, descendants: true }, { propertyName: "operatorTemplate", first: true, predicate: FilterOperatorTemplateDirective, descendants: true }], ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterFieldComponent, decorators: [{
             type: Component,
@@ -363,6 +410,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], editorTemplate: [{
                 type: ContentChild,
                 args: [FilterValueEditorTemplateDirective]
+            }], operatorTemplate: [{
+                type: ContentChild,
+                args: [FilterOperatorTemplateDirective]
             }] } });
 
 /**
@@ -901,6 +951,7 @@ class FilterExpressionOperatorsComponent {
     editorType;
     valueChange = new EventEmitter();
     operators = [];
+    operatorTemplate;
     constructor(localization) {
         this.localization = localization;
     }
@@ -914,53 +965,67 @@ class FilterExpressionOperatorsComponent {
         this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterExpressionOperatorsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FilterExpressionOperatorsComponent, isStandalone: true, selector: "kendo-filter-expression-operators", inputs: { currentItem: "currentItem", editorType: "editorType", operators: "operators" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
-        <kendo-dropdownlist
-            [tabindex]="-1"
-            [kendoAriaLabelValue]="messageFor('filterOperatorAriaLabel')"
-            [data]="operators"
-            [title]="messageFor('filterExpressionOperators')"
-            [(value)]="currentItem.operator"
-            (valueChange)="operatorValueChange($event)"
-            [valuePrimitive]="true"
-            textField="text"
-            valueField="value"
-        >
-            <ng-template kendoDropDownListValueTemplate let-dataItem>
-                <span>{{ getOperator(dataItem.value) }}</span>
-            </ng-template>
-            <ng-template kendoDropDownListItemTemplate let-dataItem>
-                <span>{{ getOperator(dataItem.value) }}</span>
-            </ng-template>
-        </kendo-dropdownlist>
-    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "directive", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: FilterExpressionOperatorsComponent, isStandalone: true, selector: "kendo-filter-expression-operators", inputs: { currentItem: "currentItem", editorType: "editorType", operators: "operators", operatorTemplate: "operatorTemplate" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+        @if (operatorTemplate) {
+            <ng-container
+                [ngTemplateOutlet]="operatorTemplate"
+                [ngTemplateOutletContext]="{$implicit: currentItem}">
+            </ng-container>
+        } @else {
+            <kendo-dropdownlist
+                [tabindex]="-1"
+                [kendoAriaLabelValue]="messageFor('filterOperatorAriaLabel')"
+                [data]="operators"
+                [title]="messageFor('filterExpressionOperators')"
+                [(value)]="currentItem.operator"
+                (valueChange)="operatorValueChange($event)"
+                [valuePrimitive]="true"
+                textField="text"
+                valueField="value"
+            >
+                <ng-template kendoDropDownListValueTemplate let-dataItem>
+                    <span>{{ getOperator(dataItem.value) }}</span>
+                </ng-template>
+                <ng-template kendoDropDownListItemTemplate let-dataItem>
+                    <span>{{ getOperator(dataItem.value) }}</span>
+                </ng-template>
+            </kendo-dropdownlist>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "directive", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterExpressionOperatorsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "kendo-filter-expression-operators",
                     template: `
-        <kendo-dropdownlist
-            [tabindex]="-1"
-            [kendoAriaLabelValue]="messageFor('filterOperatorAriaLabel')"
-            [data]="operators"
-            [title]="messageFor('filterExpressionOperators')"
-            [(value)]="currentItem.operator"
-            (valueChange)="operatorValueChange($event)"
-            [valuePrimitive]="true"
-            textField="text"
-            valueField="value"
-        >
-            <ng-template kendoDropDownListValueTemplate let-dataItem>
-                <span>{{ getOperator(dataItem.value) }}</span>
-            </ng-template>
-            <ng-template kendoDropDownListItemTemplate let-dataItem>
-                <span>{{ getOperator(dataItem.value) }}</span>
-            </ng-template>
-        </kendo-dropdownlist>
+        @if (operatorTemplate) {
+            <ng-container
+                [ngTemplateOutlet]="operatorTemplate"
+                [ngTemplateOutletContext]="{$implicit: currentItem}">
+            </ng-container>
+        } @else {
+            <kendo-dropdownlist
+                [tabindex]="-1"
+                [kendoAriaLabelValue]="messageFor('filterOperatorAriaLabel')"
+                [data]="operators"
+                [title]="messageFor('filterExpressionOperators')"
+                [(value)]="currentItem.operator"
+                (valueChange)="operatorValueChange($event)"
+                [valuePrimitive]="true"
+                textField="text"
+                valueField="value"
+            >
+                <ng-template kendoDropDownListValueTemplate let-dataItem>
+                    <span>{{ getOperator(dataItem.value) }}</span>
+                </ng-template>
+                <ng-template kendoDropDownListItemTemplate let-dataItem>
+                    <span>{{ getOperator(dataItem.value) }}</span>
+                </ng-template>
+            </kendo-dropdownlist>
+        }
     `,
                     standalone: true,
-                    imports: [DropDownListComponent, AriaLabelValueDirective, ValueTemplateDirective, ItemTemplateDirective]
+                    imports: [DropDownListComponent, AriaLabelValueDirective, ValueTemplateDirective, ItemTemplateDirective, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { currentItem: [{
                 type: Input
@@ -970,6 +1035,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }], operators: [{
                 type: Input
+            }], operatorTemplate: [{
+                type: Input
             }] } });
 
 /**
@@ -988,7 +1055,15 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
     editorType;
     isEditorDisabled = false;
     editorTemplate;
+    operatorTemplate;
     editorFormat;
+    get availableFilters() {
+        return this.filterService.filters || [];
+    }
+    _previousField;
+    get fieldTemplate() {
+        return this.filterService.fieldTemplate;
+    }
     get currentFilterExpression() {
         return this.getFilterExpressionByField(this.currentItem.field);
     }
@@ -1032,7 +1107,21 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
         super(element, navigationService, localization, renderer);
         this.filterService = filterService;
     }
+    ngDoCheck() {
+        if (this.fieldTemplate && this.currentItem.field !== this._previousField) {
+            if (!this.currentItem.field) {
+                this.currentItem.field = this._previousField;
+                return;
+            }
+            const previousField = this._previousField;
+            this._previousField = this.currentItem.field;
+            if (previousField !== undefined) {
+                this.filterValueChange(this.currentItem.field);
+            }
+        }
+    }
     ngOnInit() {
+        this._previousField = this.currentItem.field;
         this.isEditorDisabled = nullOperators.indexOf(this.currentItem.operator) >= 0;
         const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
         if (this.currentItem.field) {
@@ -1049,7 +1138,7 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
             }
             this.setOperators(defaultFilter);
         }
-        this.setEditorTemplate();
+        this.setTemplates();
     }
     normalizeOperators(filterEditor, operators) {
         const result = [];
@@ -1075,7 +1164,7 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
         this.navigationService.currentToolbarItemChildrenIndex = 0;
         this.currentItem.value = null;
         this.currentItem.field = value;
-        this.setEditorTemplate();
+        this.setTemplates();
         const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
         this.setOperators(foundFilter);
         this.editorFormat = foundFilter.editorFormat;
@@ -1097,9 +1186,6 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
         const filterExpression = this.filterService.filters.find((filterExpression) => filterExpression.field === this.currentItem.field);
         return filterExpression?.editor;
     }
-    getFilters() {
-        return this.filterService.filters || [];
-    }
     removeFilterExpression() {
         this.filterService.remove(this.currentItem, this.index);
         this.valueChange.emit(true);
@@ -1136,9 +1222,10 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
             this.isEditorDisabled = false;
         }
     }
-    setEditorTemplate() {
+    setTemplates() {
         const filterExpression = this.filterService.filters.find((filter) => filter.field === this.currentItem.field);
         this.editorTemplate = filterExpression?.editorTemplate;
+        this.operatorTemplate = filterExpression?.operatorTemplate;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterExpressionComponent, deps: [{ token: FilterService }, { token: i0.ElementRef }, { token: NavigationService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: FilterExpressionComponent, isStandalone: true, selector: "kendo-filter-expression", inputs: { currentItem: "currentItem" }, providers: [{
@@ -1148,17 +1235,24 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
         <div class="k-filter-toolbar">
           <div class="k-toolbar k-toolbar-md k-toolbar-solid" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
             <div class="k-filter-field k-toolbar-item" >
-              <kendo-dropdownlist
-                [tabindex]="-1"
-                [kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
-                [title]="messageFor('filterExpressionFilters')"
-                [data]="getFilters()"
-                textField="title"
-                valueField="field"
-                [value]="currentItem.field"
-                [valuePrimitive]="true"
-                (valueChange)="filterValueChange($event)">
-              </kendo-dropdownlist>
+              @if (fieldTemplate) {
+                <ng-container
+                  [ngTemplateOutlet]="fieldTemplate"
+                  [ngTemplateOutletContext]="{$implicit: currentItem, filters: availableFilters}">
+                </ng-container>
+              } @else {
+                <kendo-dropdownlist
+                  [tabindex]="-1"
+                  [kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
+                  [title]="messageFor('filterExpressionFilters')"
+                  [data]="availableFilters"
+                  textField="title"
+                  valueField="field"
+                  [value]="currentItem.field"
+                  [valuePrimitive]="true"
+                  (valueChange)="filterValueChange($event)">
+                </kendo-dropdownlist>
+              }
             </div>
             @if (!isBoolean) {
               <div class="k-filter-operator k-toolbar-item" >
@@ -1166,6 +1260,7 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
                   [currentItem]="currentItem"
                   [operators]="operators"
                   [editorType]="getEditorType()"
+                  [operatorTemplate]="operatorTemplate"
                   (valueChange)="onOperatorChange($event);">
                 </kendo-filter-expression-operators>
               </div>
@@ -1189,9 +1284,10 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
                 }
               }
               @if (editorTemplate) {
-                <ng-template
-                  [templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
-                </ng-template>
+                <ng-container
+                  [ngTemplateOutlet]="editorTemplate"
+                  [ngTemplateOutletContext]="{$implicit: currentItem}">
+                </ng-container>
               }
             </div>
 
@@ -1207,7 +1303,7 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
             </button>
           </div>
         </div>
-        `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "component", type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "editorType", "operators"], outputs: ["valueChange"] }, { kind: "component", type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { kind: "component", type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { kind: "component", type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { kind: "component", type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "component", type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "editorType", "operators", "operatorTemplate"], outputs: ["valueChange"] }, { kind: "component", type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { kind: "component", type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { kind: "component", type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { kind: "component", type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterExpressionComponent, decorators: [{
             type: Component,
@@ -1221,17 +1317,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         <div class="k-filter-toolbar">
           <div class="k-toolbar k-toolbar-md k-toolbar-solid" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
             <div class="k-filter-field k-toolbar-item" >
-              <kendo-dropdownlist
-                [tabindex]="-1"
-                [kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
-                [title]="messageFor('filterExpressionFilters')"
-                [data]="getFilters()"
-                textField="title"
-                valueField="field"
-                [value]="currentItem.field"
-                [valuePrimitive]="true"
-                (valueChange)="filterValueChange($event)">
-              </kendo-dropdownlist>
+              @if (fieldTemplate) {
+                <ng-container
+                  [ngTemplateOutlet]="fieldTemplate"
+                  [ngTemplateOutletContext]="{$implicit: currentItem, filters: availableFilters}">
+                </ng-container>
+              } @else {
+                <kendo-dropdownlist
+                  [tabindex]="-1"
+                  [kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
+                  [title]="messageFor('filterExpressionFilters')"
+                  [data]="availableFilters"
+                  textField="title"
+                  valueField="field"
+                  [value]="currentItem.field"
+                  [valuePrimitive]="true"
+                  (valueChange)="filterValueChange($event)">
+                </kendo-dropdownlist>
+              }
             </div>
             @if (!isBoolean) {
               <div class="k-filter-operator k-toolbar-item" >
@@ -1239,6 +1342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                   [currentItem]="currentItem"
                   [operators]="operators"
                   [editorType]="getEditorType()"
+                  [operatorTemplate]="operatorTemplate"
                   (valueChange)="onOperatorChange($event);">
                 </kendo-filter-expression-operators>
               </div>
@@ -1262,9 +1366,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }
               }
               @if (editorTemplate) {
-                <ng-template
-                  [templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
-                </ng-template>
+                <ng-container
+                  [ngTemplateOutlet]="editorTemplate"
+                  [ngTemplateOutletContext]="{$implicit: currentItem}">
+                </ng-container>
               }
             </div>
 
@@ -1282,7 +1387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         </div>
         `,
                     standalone: true,
-                    imports: [DropDownListComponent, AriaLabelValueDirective, FilterExpressionOperatorsComponent, FilterTextEditorComponent, FilterNumericEditorComponent, FilterBooleanEditorComponent, FilterDateEditorComponent, TemplateContextDirective, ButtonComponent]
+                    imports: [DropDownListComponent, AriaLabelValueDirective, FilterExpressionOperatorsComponent, FilterTextEditorComponent, FilterNumericEditorComponent, FilterBooleanEditorComponent, FilterDateEditorComponent, NgTemplateOutlet, ButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: FilterService }, { type: i0.ElementRef }, { type: NavigationService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }], propDecorators: { currentItem: [{
                 type: Input
@@ -1463,7 +1568,7 @@ class FilterGroupComponent extends BaseFilterRowComponent {
             }
           </ul>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: ["currentItem"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: ["currentItem"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterGroupComponent, decorators: [{
             type: Component,
@@ -1828,6 +1933,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }] });
 
+/**
+ * Replaces the default field selector DropDownList in the Filter component with a custom template.
+ * Apply it to an `ng-template` that is a direct child of a `kendo-filter` element.
+ *
+ * The template context provides the following fields:
+ *
+ * - `let-currentItem`&mdash;The [filter descriptor](slug:api_kendo-data-query_filterdescriptor) for the current row. Set its `field` property to change the selected field. The component detects the change and updates the value, operator list, and editor type automatically.
+ * - `let-filters="filters"`&mdash;The list of available [`FilterExpression`](slug:api_filter_filterexpression) items.
+ *
+ * @example
+ * ```html
+ * <kendo-filter>
+ *   <ng-template kendoFilterFieldsTemplate let-currentItem let-filters="filters">
+ *     <kendo-dropdownlist
+ *         [data]="filters"
+ *         textField="title"
+ *         valueField="field"
+ *         [valuePrimitive]="true"
+ *         [value]="currentItem.field"
+ *         (valueChange)="currentItem.field = $event">
+ *     </kendo-dropdownlist>
+ *   </ng-template>
+ *   <kendo-filter-field field="name" editor="string"></kendo-filter-field>
+ * </kendo-filter>
+ * ```
+ */
+class FilterFieldsTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterFieldsTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: FilterFieldsTemplateDirective, isStandalone: true, selector: "[kendoFilterFieldsTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterFieldsTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoFilterFieldsTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 /**
  * Represents the [Kendo UI Filter component for Angular](https://www.telerik.com/kendo-angular-ui/components/filter).
  * The Filter component enables users to define and apply complex filter criteria.
@@ -1951,6 +2098,7 @@ class FilterComponent {
     filterFieldsSubscription;
     _value = { filters: [], logic: 'and' };
     filterFields;
+    fieldTemplate;
     _filterItems;
     get filterItems() {
         return this._filterItems.toArray();
@@ -1974,6 +2122,9 @@ class FilterComponent {
             this.cdr.detectChanges();
         });
     }
+    ngAfterContentInit() {
+        this.filterService.fieldTemplate = this.fieldTemplate?.templateRef ?? null;
+    }
     ngAfterViewInit() {
         this.filterFieldsChanged();
         this.filterFieldsSubscription = this.filterFields.changes.subscribe(this.filterFieldsChanged.bind(this));
@@ -1991,7 +2142,8 @@ class FilterComponent {
             this.filters = this.filterFields.map((filterField) => ({
                 ...filterField,
                 title: filterField.title,
-                editorTemplate: filterField.editorTemplate?.templateRef
+                editorTemplate: filterField.editorTemplate?.templateRef,
+                operatorTemplate: filterField.operatorTemplate?.templateRef
             }));
         }
         if (this.filters.length === 0) {
@@ -2123,7 +2275,7 @@ class FilterComponent {
             },
             FilterService,
             NavigationService
-        ], queries: [{ propertyName: "filterFields", predicate: FilterFieldComponent }], viewQueries: [{ propertyName: "_filterItems", predicate: FilterItem, descendants: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "fieldTemplate", first: true, predicate: FilterFieldsTemplateDirective, descendants: true }, { propertyName: "filterFields", predicate: FilterFieldComponent }], viewQueries: [{ propertyName: "_filterItems", predicate: FilterItem, descendants: true }], ngImport: i0, template: `
         <ng-container kendoFilterLocalizedMessages
             i18n-editorDateTodayText="kendo.filter.editorDateTodayText|The text of the Today button of the Date editor"
             editorDateTodayText="Today"
@@ -2413,6 +2565,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], filterFields: [{
                 type: ContentChildren,
                 args: [FilterFieldComponent]
+            }], fieldTemplate: [{
+                type: ContentChild,
+                args: [FilterFieldsTemplateDirective]
             }], _filterItems: [{
                 type: ViewChildren,
                 args: [FilterItem]
@@ -2461,7 +2616,9 @@ const KENDO_FILTER = [
     FilterComponent,
     FilterFieldComponent,
     CustomMessagesComponent,
-    FilterValueEditorTemplateDirective
+    FilterValueEditorTemplateDirective,
+    FilterOperatorTemplateDirective,
+    FilterFieldsTemplateDirective
 ];
 
 // IMPORTANT: NgModule export kept for backwards compatibility
@@ -2498,7 +2655,7 @@ const KENDO_FILTER = [
  */
 class FilterModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: FilterModule, imports: [FilterComponent, FilterFieldComponent, CustomMessagesComponent, FilterValueEditorTemplateDirective], exports: [FilterComponent, FilterFieldComponent, CustomMessagesComponent, FilterValueEditorTemplateDirective] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: FilterModule, imports: [FilterComponent, FilterFieldComponent, CustomMessagesComponent, FilterValueEditorTemplateDirective, FilterOperatorTemplateDirective, FilterFieldsTemplateDirective], exports: [FilterComponent, FilterFieldComponent, CustomMessagesComponent, FilterValueEditorTemplateDirective, FilterOperatorTemplateDirective, FilterFieldsTemplateDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterModule, providers: [
             // InputsModule providers
             IconsService,
@@ -2558,5 +2715,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AriaLabelValueDirective, CustomMessagesComponent, FilterBooleanEditorComponent, FilterComponent, FilterDateEditorComponent, FilterExpressionComponent, FilterExpressionOperatorsComponent, FilterFieldComponent, FilterGroupComponent, FilterModule, FilterNumericEditorComponent, FilterTextEditorComponent, FilterValueEditorTemplateDirective, KENDO_FILTER, LocalizedMessagesDirective };
+export { AriaLabelValueDirective, CustomMessagesComponent, FilterBooleanEditorComponent, FilterComponent, FilterDateEditorComponent, FilterExpressionComponent, FilterExpressionOperatorsComponent, FilterFieldComponent, FilterFieldsTemplateDirective, FilterGroupComponent, FilterModule, FilterNumericEditorComponent, FilterOperatorTemplateDirective, FilterTextEditorComponent, FilterValueEditorTemplateDirective, KENDO_FILTER, LocalizedMessagesDirective };
 

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

@@ -2,7 +2,7 @@
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, TemplateRef } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { FilterDescriptor } from '@progress/kendo-data-query';
 import { FilterEditor, FilterOperator } from './model/filter-expression';
@@ -19,10 +19,11 @@ export declare class FilterExpressionOperatorsComponent {
         text: string;
         value: string;
     }[];
+    operatorTemplate: TemplateRef<any>;
     constructor(localization: LocalizationService);
     messageFor(key: string): string;
     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": { "alias": "currentItem"; "required": false; }; "editorType": { "alias": "editorType"; "required": false; }; "operators": { "alias": "operators"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterExpressionOperatorsComponent, "kendo-filter-expression-operators", never, { "currentItem": { "alias": "currentItem"; "required": false; }; "editorType": { "alias": "editorType"; "required": false; }; "operators": { "alias": "operators"; "required": false; }; "operatorTemplate": { "alias": "operatorTemplate"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }