@progress/kendo-angular-filter 24.0.0-develop.8 → 24.0.0

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: 1777363309,
-    version: '24.0.0-develop.8',
+    publishDate: 1779273617,
+    version: '24.0.0',
     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);
@@ -1116,6 +1202,9 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
         else {
             this.operators = this.getDefaultOperators(filter.editor);
         }
+        if (filter.operatorTemplate) {
+            return;
+        }
         if (!this.currentItem.operator) {
             this.currentItem.operator = this.operators[0].value;
         }
@@ -1136,9 +1225,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 +1238,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 +1263,7 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
                   [currentItem]="currentItem"
                   [operators]="operators"
                   [editorType]="getEditorType()"
+                  [operatorTemplate]="operatorTemplate"
                   (valueChange)="onOperatorChange($event);">
                 </kendo-filter-expression-operators>
               </div>
@@ -1189,9 +1287,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 +1306,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 +1320,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 +1345,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 +1369,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 +1390,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 +1571,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 +1936,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 +2101,7 @@ class FilterComponent {
     filterFieldsSubscription;
     _value = { filters: [], logic: 'and' };
     filterFields;
+    fieldTemplate;
     _filterItems;
     get filterItems() {
         return this._filterItems.toArray();
@@ -1974,6 +2125,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 +2145,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 +2278,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 +2568,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 +2619,9 @@ const KENDO_FILTER = [
     FilterComponent,
     FilterFieldComponent,
     CustomMessagesComponent,
-    FilterValueEditorTemplateDirective
+    FilterValueEditorTemplateDirective,
+    FilterOperatorTemplateDirective,
+    FilterFieldsTemplateDirective
 ];
 
 // IMPORTANT: NgModule export kept for backwards compatibility
@@ -2498,7 +2658,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 +2718,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>;
 }

package/filter-expression.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 { ElementRef, OnInit, Renderer2, TemplateRef } from '@angular/core';
+import { DoCheck, ElementRef, OnInit, Renderer2, TemplateRef } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { CompositeFilterDescriptor, FilterDescriptor } from '@progress/kendo-data-query';
 import { SVGIcon } from '@progress/kendo-svg-icons';
@@ -14,7 +14,7 @@ import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare class FilterExpressionComponent extends BaseFilterRowComponent implements OnInit {
+export declare class FilterExpressionComponent extends BaseFilterRowComponent implements OnInit, DoCheck {
     private filterService;
     /**
      * @hidden
@@ -27,13 +27,18 @@ export declare class FilterExpressionComponent extends BaseFilterRowComponent im
     editorType: FilterEditor;
     isEditorDisabled: boolean;
     editorTemplate: TemplateRef<any>;
+    operatorTemplate: TemplateRef<any>;
     editorFormat: string | DateFormat | NumberFormat;
+    get availableFilters(): FilterExpression[];
+    private _previousField;
+    get fieldTemplate(): TemplateRef<any>;
     private get currentFilterExpression();
     get numericEditorFormat(): string | NumberFormat;
     get dateEditorFormat(): string | DateFormat;
     private isNumberFormat;
     private isDateFormat;
     constructor(filterService: FilterService, element: ElementRef, navigationService: NavigationService, localization: LocalizationService, renderer: Renderer2);
+    ngDoCheck(): void;
     ngOnInit(): void;
     normalizeOperators(filterEditor: FilterEditor, operators: FilterOperator[]): {
         text: string;
@@ -46,11 +51,10 @@ export declare class FilterExpressionComponent extends BaseFilterRowComponent im
         value: string;
     }[];
     getEditorType(): FilterEditor;
-    getFilters(): FilterExpression[];
     removeFilterExpression(): void;
     private setOperators;
     onOperatorChange(value: string): void;
-    setEditorTemplate(): void;
+    setTemplates(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterExpressionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FilterExpressionComponent, "kendo-filter-expression", never, { "currentItem": { "alias": "currentItem"; "required": false; }; }, {}, never, never, true, never>;
 }

package/filter-field.component.d.ts

@@ -3,7 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { DateFormat, FilterEditor, FilterOperator, NumberFormat } from './model/filter-expression';
-import { FilterValueEditorTemplateDirective } from './templates/value-editor.template';
+import { FilterValueEditorTemplateDirective } from './templates/value-editor-template.directive';
+import { FilterOperatorTemplateDirective } from './templates/operator-template.directive';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Filter Field component for Angular](https://www.telerik.com/kendo-angular-ui/components/filter/api/filterfieldcomponent).
@@ -73,6 +74,10 @@ export declare class FilterFieldComponent {
      * @hidden
      */
     editorTemplate: FilterValueEditorTemplateDirective;
+    /**
+     * @hidden
+     */
+    operatorTemplate: FilterOperatorTemplateDirective;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterFieldComponent, "kendo-filter-field", never, { "field": { "alias": "field"; "required": false; }; "title": { "alias": "title"; "required": false; }; "editor": { "alias": "editor"; "required": false; }; "operators": { "alias": "operators"; "required": false; }; "editorFormat": { "alias": "editorFormat"; "required": false; }; }, {}, ["editorTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterFieldComponent, "kendo-filter-field", never, { "field": { "alias": "field"; "required": false; }; "title": { "alias": "title"; "required": false; }; "editor": { "alias": "editor"; "required": false; }; "operators": { "alias": "operators"; "required": false; }; "editorFormat": { "alias": "editorFormat"; "required": false; }; }, {}, ["editorTemplate", "operatorTemplate"], never, true, never>;
 }

package/filter.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 { OnInit, EventEmitter, ElementRef, Renderer2 } from '@angular/core';
+import { AfterContentInit, ElementRef, EventEmitter, OnInit, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { FilterService } from './filter.service';
 import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
@@ -48,7 +48,7 @@ import * as i0 from "@angular/core";
  * @remarks
  * Supported children components are: {@link CustomMessagesComponent}, {@link FilterFieldComponent}.
  */
-export declare class FilterComponent implements OnInit, OnDestroy {
+export declare class FilterComponent implements OnInit, AfterContentInit, OnDestroy {
     private filterService;
     private localization;
     private cdr;
@@ -87,11 +87,13 @@ export declare class FilterComponent implements OnInit, OnDestroy {
     private filterFieldsSubscription;
     private _value;
     private filterFields;
+    private fieldTemplate;
     private _filterItems;
     get filterItems(): FilterItem[];
     get toolbarElement(): HTMLElement;
     constructor(filterService: FilterService, localization: LocalizationService, cdr: ChangeDetectorRef, element: ElementRef, navigationService: NavigationService, renderer: Renderer2);
     ngOnInit(): void;
+    ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private filterFieldsChanged;
@@ -120,5 +122,5 @@ export declare class FilterComponent implements OnInit, OnDestroy {
      */
     private filtersTypeChanged;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterComponent, "kendo-filter", never, { "filters": { "alias": "filters"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, ["filterFields"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterComponent, "kendo-filter", never, { "filters": { "alias": "filters"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, ["fieldTemplate", "filterFields"], never, true, never>;
 }

package/filter.module.d.ts

@@ -6,7 +6,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "./filter.component";
 import * as i2 from "./filter-field.component";
 import * as i3 from "./localization/custom-messages.component";
-import * as i4 from "./templates/value-editor.template";
+import * as i4 from "./templates/value-editor-template.directive";
+import * as i5 from "./templates/operator-template.directive";
+import * as i6 from "./templates/field-template.directive";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Filter component.
@@ -40,6 +42,6 @@ import * as i4 from "./templates/value-editor.template";
  */
 export declare class FilterModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FilterModule, never, [typeof i1.FilterComponent, typeof i2.FilterFieldComponent, typeof i3.CustomMessagesComponent, typeof i4.FilterValueEditorTemplateDirective], [typeof i1.FilterComponent, typeof i2.FilterFieldComponent, typeof i3.CustomMessagesComponent, typeof i4.FilterValueEditorTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FilterModule, never, [typeof i1.FilterComponent, typeof i2.FilterFieldComponent, typeof i3.CustomMessagesComponent, typeof i4.FilterValueEditorTemplateDirective, typeof i5.FilterOperatorTemplateDirective, typeof i6.FilterFieldsTemplateDirective], [typeof i1.FilterComponent, typeof i2.FilterFieldComponent, typeof i3.CustomMessagesComponent, typeof i4.FilterValueEditorTemplateDirective, typeof i5.FilterOperatorTemplateDirective, typeof i6.FilterFieldsTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FilterModule>;
 }

package/filter.service.d.ts

@@ -2,6 +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 { TemplateRef } from '@angular/core';
 import { CompositeFilterDescriptor, FilterDescriptor } from '@progress/kendo-data-query';
 import { FilterExpression } from './model/filter-expression';
 import * as i0 from "@angular/core";
@@ -11,6 +12,7 @@ import * as i0 from "@angular/core";
 export declare class FilterService {
     normalizedValue: CompositeFilterDescriptor;
     filters: FilterExpression[];
+    fieldTemplate: TemplateRef<any> | null;
     addFilterGroup(item: CompositeFilterDescriptor): void;
     addFilterExpression(item: CompositeFilterDescriptor): void;
     remove(item: CompositeFilterDescriptor | FilterDescriptor, positionIndex: number, parentItem?: CompositeFilterDescriptor): void;

package/index.d.ts

@@ -16,6 +16,8 @@ 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';
+export { FilterValueEditorTemplateDirective } from './templates/value-editor-template.directive';
+export { FilterOperatorTemplateDirective } from './templates/operator-template.directive';
+export { FilterFieldsTemplateDirective } from './templates/field-template.directive';
 export { FilterOperator, FilterEditor } from './model/filter-expression';
 export * from './directives';

package/model/filter-expression.d.ts

@@ -78,6 +78,12 @@ export interface FilterExpression {
      * Specifies a template for the expression value editor input.
      */
     editorTemplate?: TemplateRef<any>;
+    /**
+     * Specifies a custom template for the operator dropdown.
+     * When set, the default operator DropDownList is replaced with the provided template.
+     * The template receives the current [`FilterDescriptor`](slug:api_kendo-data-query_filterdescriptor) as implicit context.
+     */
+    operatorTemplate?: TemplateRef<any>;
     /**
      * Specifies the user-defined filter `editor` format that will be used.
      * See the [Filter editor formats documentation](https://www.telerik.com/kendo-angular-ui/components/filter/filter-editors-format).

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1777363309,
-  "version": "24.0.0-develop.8",
+  "publishDate": 1779273617,
+  "version": "24.0.0",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-filter",
-  "version": "24.0.0-develop.8",
+  "version": "24.0.0",
   "description": "Kendo UI Angular Filter",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -17,7 +17,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1777363309,
+      "publishDate": 1779273617,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -28,20 +28,20 @@
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-data-query": "^1.7.3",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-buttons": "24.0.0-develop.8",
-    "@progress/kendo-angular-common": "24.0.0-develop.8",
-    "@progress/kendo-angular-dateinputs": "24.0.0-develop.8",
-    "@progress/kendo-angular-dropdowns": "24.0.0-develop.8",
-    "@progress/kendo-angular-inputs": "24.0.0-develop.8",
-    "@progress/kendo-angular-intl": "24.0.0-develop.8",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.8",
-    "@progress/kendo-angular-icons": "24.0.0-develop.8",
-    "@progress/kendo-angular-label": "24.0.0-develop.8",
+    "@progress/kendo-angular-buttons": "24.0.0",
+    "@progress/kendo-angular-common": "24.0.0",
+    "@progress/kendo-angular-dateinputs": "24.0.0",
+    "@progress/kendo-angular-dropdowns": "24.0.0",
+    "@progress/kendo-angular-inputs": "24.0.0",
+    "@progress/kendo-angular-intl": "24.0.0",
+    "@progress/kendo-angular-l10n": "24.0.0",
+    "@progress/kendo-angular-icons": "24.0.0",
+    "@progress/kendo-angular-label": "24.0.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.8"
+    "@progress/kendo-angular-schematics": "24.0.0"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-filter.mjs",

package/schematics/ngAdd/index.js

@@ -9,12 +9,12 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'FilterModule', package: 'filter', peerDependencies: {
             // peer deps of the dropdowns
-            '@progress/kendo-angular-treeview': '24.0.0-develop.8',
-            '@progress/kendo-angular-popup': '24.0.0-develop.8',
-            '@progress/kendo-angular-navigation': '24.0.0-develop.8',
+            '@progress/kendo-angular-treeview': '24.0.0',
+            '@progress/kendo-angular-popup': '24.0.0',
+            '@progress/kendo-angular-navigation': '24.0.0',
             // peer dependency of kendo-angular-inputs
             '@progress/kendo-drawing': '^1.16.0',
-            '@progress/kendo-angular-dialog': '24.0.0-develop.8',
+            '@progress/kendo-angular-dialog': '24.0.0',
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^4.0.0'
         } });

package/templates/field-template.directive.d.ts

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2026 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * 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`—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"`—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>
+ * ```
+ */
+export declare class FilterFieldsTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilterFieldsTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FilterFieldsTemplateDirective, "[kendoFilterFieldsTemplate]", never, {}, {}, never, never, true, never>;
+}

package/templates/operator-template.directive.d.ts

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2026 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * 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>
+ * ```
+ */
+export declare class FilterOperatorTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilterOperatorTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FilterOperatorTemplateDirective, "[kendoFilterOperatorTemplate]", never, {}, {}, never, never, true, never>;
+}