@progress/kendo-angular-grid 21.1.1-develop.2 → 21.2.0-develop.10

package/esm2022/filtering/menu/filter-menu-container.component.mjs

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { MenuTabbingService } from './menu-tabbing.service';
 import { Component, Input, SkipSelf, Output, EventEmitter, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
+import { isCompositeFilterDescriptor } from "@progress/kendo-data-query";
 import { ColumnComponent } from "../../columns/column.component";
 import { FilterService } from "../filter.service";
 import { removeFilter, filtersByField } from "../base-filter-cell.component";
@@ -11,7 +12,7 @@ import { isPresent, isNullOrEmptyString } from "../../utils";
 import { cloneFilters } from '../../common/filter-descriptor-differ';
 import { ContextService } from '../../common/provider.service';
 import { FilterMenuHostDirective } from './filter-menu-host.directive';
-import { NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgClass } from '@angular/common';
+import { NgTemplateOutlet, NgClass } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { AdaptiveGridService } from '../../common/adaptiveness.service';
 import { MultiCheckboxFilterComponent } from '../multicheckbox-filter.component';
@@ -32,9 +33,23 @@ const isNoValueOperator = operator => (operator === "isnull"
  * @hidden
  */
 export const validFilters = ({ value, operator }) => !isNullOrEmptyString(value) || isNoValueOperator(operator);
-const trimFilters = filter => {
-    filter.filters = filter.filters.filter(validFilters);
-    return filter;
+const trimFilters = (filter) => {
+    const trimComposite = (node) => {
+        const trimmed = [];
+        for (const f of node.filters || []) {
+            if (isCompositeFilterDescriptor(f)) {
+                const child = trimComposite(f);
+                if (child.filters.length) {
+                    trimmed.push(child);
+                }
+            }
+            else if (validFilters(f)) {
+                trimmed.push(f);
+            }
+        }
+        return { logic: node.logic || 'and', filters: trimmed };
+    };
+    return trimComposite(filter);
 };
 const findParent = (filters, field, parent) => {
     return filters.reduce((acc, filter) => {
@@ -266,55 +281,59 @@ export class FilterMenuContainerComponent {
         return eq(checkboxFilter, gridFilter);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.FilterService, skipSelf: true }, { token: i1.FilterService }, { token: i2.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3.MenuTabbingService }, { token: i4.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FilterMenuContainerComponent, isStandalone: true, selector: "kendo-grid-filter-menu-container", inputs: { column: "column", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", filter: "filter", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterMenuContainerComponent, isStandalone: true, selector: "kendo-grid-filter-menu-container", inputs: { column: "column", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", filter: "filter", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
             FilterService,
             MenuTabbingService
         ], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }], ngImport: i0, template: `
         <form (submit)="submit()" (reset)="reset()"
-            class="k-filter-menu"
-            [ngClass]="{'k-popup k-group k-reset': isMultiFilter && !ctx.grid?.isActionSheetExpanded}">
-            <div class="k-filter-menu-container">
-                <ng-container [ngSwitch]="hasTemplate">
-                    <ng-container *ngSwitchCase="false">
-                        <ng-container *ngIf="!isMultiFilter; else multiFilter"
-                            kendoFilterMenuHost
-                            [filterService]="childService"
-                            [column]="column"
-                            [filter]="childFilter"
-                            [menuTabbingService]="menuTabbingService">
-                        </ng-container>
-                        <ng-template #multiFilter>
-                            <kendo-grid-multicheckbox-filter style="display: contents;" [column]="column" (filterChange)="onCheckboxFilterChange($event)"></kendo-grid-multicheckbox-filter>
-                        </ng-template>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="true">
-                        <ng-template
-                            *ngIf="column.filterMenuTemplateRef"
-                            [ngTemplateOutlet]="column.filterMenuTemplateRef"
-                            [ngTemplateOutletContext]="templateContext"
-                            >
-                        </ng-template>
-                    </ng-container>
-                </ng-container>
-                <div *ngIf="!ctx.grid?.isActionSheetExpanded" [ngClass]="actionsClass">
-                    <button #filterButton kendoButton
-                        themeColor="primary"
-                        type="submit"
-                        [ngClass]="{'k-button-rectangle': !isMultiFilter}"
-                        [disabled]="disabled"
-                        [icon]="getButtonIcon('filter', 'icon')"
-                        [svgIcon]="getButtonIcon('filter', 'svgIcon')"
-                        (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
-                    <button #resetButton kendoButton
-                        type="reset"
-                        [ngClass]="{'k-button-rectangle': !isMultiFilter}"
-                        [icon]="getButtonIcon('reset', 'icon')"
-                        [svgIcon]="getButtonIcon('reset', 'svgIcon')"
-                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
-                </div>
-            </div>
+          class="k-filter-menu"
+          [ngClass]="{'k-popup k-group k-reset': isMultiFilter && !ctx.grid?.isActionSheetExpanded}">
+          <div class="k-filter-menu-container">
+            @switch (hasTemplate) {
+              @case (false) {
+                @if (!isMultiFilter) {
+                  <ng-container
+                    kendoFilterMenuHost
+                    [filterService]="childService"
+                    [column]="column"
+                    [filter]="childFilter"
+                    [menuTabbingService]="menuTabbingService">
+                  </ng-container>
+                } @else {
+                  <kendo-grid-multicheckbox-filter style="display: contents;" [column]="column" (filterChange)="onCheckboxFilterChange($event)"></kendo-grid-multicheckbox-filter>
+                }
+              }
+              @case (true) {
+                @if (column.filterMenuTemplateRef) {
+                  <ng-template
+                    [ngTemplateOutlet]="column.filterMenuTemplateRef"
+                    [ngTemplateOutletContext]="templateContext"
+                    >
+                  </ng-template>
+                }
+              }
+            }
+            @if (!ctx.grid?.isActionSheetExpanded) {
+              <div [ngClass]="actionsClass">
+                <button #filterButton kendoButton
+                  themeColor="primary"
+                  type="submit"
+                  [ngClass]="{'k-button-rectangle': !isMultiFilter}"
+                  [disabled]="disabled"
+                  [icon]="getButtonIcon('filter', 'icon')"
+                  [svgIcon]="getButtonIcon('filter', 'svgIcon')"
+                (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                <button #resetButton kendoButton
+                  type="reset"
+                  [ngClass]="{'k-button-rectangle': !isMultiFilter}"
+                  [icon]="getButtonIcon('reset', 'icon')"
+                  [svgIcon]="getButtonIcon('reset', 'svgIcon')"
+                (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
+              </div>
+            }
+          </div>
         </form>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MultiCheckboxFilterComponent, selector: "kendo-grid-multicheckbox-filter", inputs: ["column"], outputs: ["filterChange"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MultiCheckboxFilterComponent, selector: "kendo-grid-multicheckbox-filter", inputs: ["column"], outputs: ["filterChange"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
             type: Component,
@@ -326,52 +345,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-grid-filter-menu-container',
                     template: `
         <form (submit)="submit()" (reset)="reset()"
-            class="k-filter-menu"
-            [ngClass]="{'k-popup k-group k-reset': isMultiFilter && !ctx.grid?.isActionSheetExpanded}">
-            <div class="k-filter-menu-container">
-                <ng-container [ngSwitch]="hasTemplate">
-                    <ng-container *ngSwitchCase="false">
-                        <ng-container *ngIf="!isMultiFilter; else multiFilter"
-                            kendoFilterMenuHost
-                            [filterService]="childService"
-                            [column]="column"
-                            [filter]="childFilter"
-                            [menuTabbingService]="menuTabbingService">
-                        </ng-container>
-                        <ng-template #multiFilter>
-                            <kendo-grid-multicheckbox-filter style="display: contents;" [column]="column" (filterChange)="onCheckboxFilterChange($event)"></kendo-grid-multicheckbox-filter>
-                        </ng-template>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="true">
-                        <ng-template
-                            *ngIf="column.filterMenuTemplateRef"
-                            [ngTemplateOutlet]="column.filterMenuTemplateRef"
-                            [ngTemplateOutletContext]="templateContext"
-                            >
-                        </ng-template>
-                    </ng-container>
-                </ng-container>
-                <div *ngIf="!ctx.grid?.isActionSheetExpanded" [ngClass]="actionsClass">
-                    <button #filterButton kendoButton
-                        themeColor="primary"
-                        type="submit"
-                        [ngClass]="{'k-button-rectangle': !isMultiFilter}"
-                        [disabled]="disabled"
-                        [icon]="getButtonIcon('filter', 'icon')"
-                        [svgIcon]="getButtonIcon('filter', 'svgIcon')"
-                        (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
-                    <button #resetButton kendoButton
-                        type="reset"
-                        [ngClass]="{'k-button-rectangle': !isMultiFilter}"
-                        [icon]="getButtonIcon('reset', 'icon')"
-                        [svgIcon]="getButtonIcon('reset', 'svgIcon')"
-                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
-                </div>
-            </div>
+          class="k-filter-menu"
+          [ngClass]="{'k-popup k-group k-reset': isMultiFilter && !ctx.grid?.isActionSheetExpanded}">
+          <div class="k-filter-menu-container">
+            @switch (hasTemplate) {
+              @case (false) {
+                @if (!isMultiFilter) {
+                  <ng-container
+                    kendoFilterMenuHost
+                    [filterService]="childService"
+                    [column]="column"
+                    [filter]="childFilter"
+                    [menuTabbingService]="menuTabbingService">
+                  </ng-container>
+                } @else {
+                  <kendo-grid-multicheckbox-filter style="display: contents;" [column]="column" (filterChange)="onCheckboxFilterChange($event)"></kendo-grid-multicheckbox-filter>
+                }
+              }
+              @case (true) {
+                @if (column.filterMenuTemplateRef) {
+                  <ng-template
+                    [ngTemplateOutlet]="column.filterMenuTemplateRef"
+                    [ngTemplateOutletContext]="templateContext"
+                    >
+                  </ng-template>
+                }
+              }
+            }
+            @if (!ctx.grid?.isActionSheetExpanded) {
+              <div [ngClass]="actionsClass">
+                <button #filterButton kendoButton
+                  themeColor="primary"
+                  type="submit"
+                  [ngClass]="{'k-button-rectangle': !isMultiFilter}"
+                  [disabled]="disabled"
+                  [icon]="getButtonIcon('filter', 'icon')"
+                  [svgIcon]="getButtonIcon('filter', 'svgIcon')"
+                (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                <button #resetButton kendoButton
+                  type="reset"
+                  [ngClass]="{'k-button-rectangle': !isMultiFilter}"
+                  [icon]="getButtonIcon('reset', 'icon')"
+                  [svgIcon]="getButtonIcon('reset', 'svgIcon')"
+                (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
+              </div>
+            }
+          </div>
         </form>
-    `,
+        `,
                     standalone: true,
-                    imports: [FormsModule, NgSwitch, NgSwitchCase, FilterMenuHostDirective, NgIf, NgTemplateOutlet, NgClass, MultiCheckboxFilterComponent, ButtonComponent]
+                    imports: [FormsModule, FilterMenuHostDirective, NgTemplateOutlet, NgClass, MultiCheckboxFilterComponent, ButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.FilterService, decorators: [{
                     type: SkipSelf

package/esm2022/filtering/menu/numeric-filter-menu.component.mjs

@@ -9,7 +9,6 @@ import { setFilter, logicOperators } from '../base-filter-cell.component';
 import { MenuTabbingService } from './menu-tabbing.service';
 import { ContextService } from '../../common/provider.service';
 import { FilterMenuDropDownListDirective } from './filter-menu-dropdownlist.directive';
-import { NgIf } from '@angular/common';
 import { NumericFilterMenuInputComponent } from './numeric-filter-menu-input.component';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import { replaceMessagePlaceholder } from '@progress/kendo-angular-common';
@@ -99,26 +98,26 @@ export class NumericFilterMenuComponent extends NumericFilterComponent {
         super.localizationChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumericFilterMenuComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NumericFilterMenuComponent, isStandalone: true, selector: "kendo-grid-numeric-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", filterDelay: "filterDelay", placeholder: "placeholder", extraPlaceholder: "extraPlaceholder", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NumericFilterMenuComponent, isStandalone: true, selector: "kendo-grid-numeric-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", filterDelay: "filterDelay", placeholder: "placeholder", extraPlaceholder: "extraPlaceholder", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-numeric-filter-menu-input
-            [currentFilter]="firstFilter"
-            [operators]="operators"
-            [filterService]="filterService"
-            [column]="column"
-            [filter]="filter"
-            [filterDelay]="filterDelay"
-            [format]="format"
-            [decimals]="decimals"
-            [spinners]="spinners"
-            [min]="min"
-            [max]="max"
-            [step]="step"
-            [menuTabbingService]="menuTabbingService"
-            [isFirstDropDown]="true"
-            [placeholder]="placeholder">
+          [currentFilter]="firstFilter"
+          [operators]="operators"
+          [filterService]="filterService"
+          [column]="column"
+          [filter]="filter"
+          [filterDelay]="filterDelay"
+          [format]="format"
+          [decimals]="decimals"
+          [spinners]="spinners"
+          [min]="min"
+          [max]="max"
+          [step]="step"
+          [menuTabbingService]="menuTabbingService"
+          [isFirstDropDown]="true"
+          [placeholder]="placeholder">
         </kendo-grid-numeric-filter-menu-input>
-        <kendo-dropdownlist
-            *ngIf="extra"
+        @if (extra) {
+          <kendo-dropdownlist
             kendoFilterMenuDropDown
             [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
             [adaptiveMode]="ctx.grid?.adaptiveMode"
@@ -131,9 +130,10 @@ export class NumericFilterMenuComponent extends NumericFilterComponent {
             [value]="filter?.logic"
             textField="text"
             valueField="value">
-        </kendo-dropdownlist>
-        <kendo-grid-numeric-filter-menu-input
-            *ngIf="extra"
+          </kendo-dropdownlist>
+        }
+        @if (extra) {
+          <kendo-grid-numeric-filter-menu-input
             [operators]="operators"
             [currentFilter]="secondFilter"
             [filterService]="filterService"
@@ -147,8 +147,9 @@ export class NumericFilterMenuComponent extends NumericFilterComponent {
             [step]="step"
             [menuTabbingService]="menuTabbingService"
             [placeholder]="extraPlaceholder">
-        </kendo-grid-numeric-filter-menu-input>
-    `, isInline: true, dependencies: [{ kind: "component", type: NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format", "placeholder"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+          </kendo-grid-numeric-filter-menu-input>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format", "placeholder"] }, { 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: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumericFilterMenuComponent, decorators: [{
             type: Component,
@@ -156,24 +157,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-grid-numeric-filter-menu',
                     template: `
         <kendo-grid-numeric-filter-menu-input
-            [currentFilter]="firstFilter"
-            [operators]="operators"
-            [filterService]="filterService"
-            [column]="column"
-            [filter]="filter"
-            [filterDelay]="filterDelay"
-            [format]="format"
-            [decimals]="decimals"
-            [spinners]="spinners"
-            [min]="min"
-            [max]="max"
-            [step]="step"
-            [menuTabbingService]="menuTabbingService"
-            [isFirstDropDown]="true"
-            [placeholder]="placeholder">
+          [currentFilter]="firstFilter"
+          [operators]="operators"
+          [filterService]="filterService"
+          [column]="column"
+          [filter]="filter"
+          [filterDelay]="filterDelay"
+          [format]="format"
+          [decimals]="decimals"
+          [spinners]="spinners"
+          [min]="min"
+          [max]="max"
+          [step]="step"
+          [menuTabbingService]="menuTabbingService"
+          [isFirstDropDown]="true"
+          [placeholder]="placeholder">
         </kendo-grid-numeric-filter-menu-input>
-        <kendo-dropdownlist
-            *ngIf="extra"
+        @if (extra) {
+          <kendo-dropdownlist
             kendoFilterMenuDropDown
             [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
             [adaptiveMode]="ctx.grid?.adaptiveMode"
@@ -186,9 +187,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [value]="filter?.logic"
             textField="text"
             valueField="value">
-        </kendo-dropdownlist>
-        <kendo-grid-numeric-filter-menu-input
-            *ngIf="extra"
+          </kendo-dropdownlist>
+        }
+        @if (extra) {
+          <kendo-grid-numeric-filter-menu-input
             [operators]="operators"
             [currentFilter]="secondFilter"
             [filterService]="filterService"
@@ -202,10 +204,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [step]="step"
             [menuTabbingService]="menuTabbingService"
             [placeholder]="extraPlaceholder">
-        </kendo-grid-numeric-filter-menu-input>
-    `,
+          </kendo-grid-numeric-filter-menu-input>
+        }
+        `,
                     standalone: true,
-                    imports: [NumericFilterMenuInputComponent, NgIf, DropDownListComponent, FilterMenuDropDownListDirective]
+                    imports: [NumericFilterMenuInputComponent, DropDownListComponent, FilterMenuDropDownListDirective]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }], propDecorators: { hostClasses: [{
                 type: HostBinding,

package/esm2022/filtering/menu/string-filter-menu.component.mjs

@@ -9,7 +9,6 @@ import { FilterService } from '../filter.service';
 import { setFilter, logicOperators } from '../base-filter-cell.component';
 import { ContextService } from '../../common/provider.service';
 import { FilterMenuDropDownListDirective } from './filter-menu-dropdownlist.directive';
-import { NgIf } from '@angular/common';
 import { StringFilterMenuInputComponent } from './string-filter-menu-input.component';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import { replaceMessagePlaceholder } from '@progress/kendo-angular-common';
@@ -97,19 +96,19 @@ export class StringFilterMenuComponent extends StringFilterComponent {
         super.localizationChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StringFilterMenuComponent, isStandalone: true, selector: "kendo-grid-string-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", placeholder: "placeholder", extraPlaceholder: "extraPlaceholder", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StringFilterMenuComponent, isStandalone: true, selector: "kendo-grid-string-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", placeholder: "placeholder", extraPlaceholder: "extraPlaceholder", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-string-filter-menu-input
-            [currentFilter]="firstFilter"
-            [operators]="operators"
-            [filterService]="filterService"
-            [column]="column"
-            [filter]="filter"
-            [isFirstDropDown]="true"
-            [placeholder]="placeholder"
-            [menuTabbingService]="menuTabbingService">
+          [currentFilter]="firstFilter"
+          [operators]="operators"
+          [filterService]="filterService"
+          [column]="column"
+          [filter]="filter"
+          [isFirstDropDown]="true"
+          [placeholder]="placeholder"
+          [menuTabbingService]="menuTabbingService">
         </kendo-grid-string-filter-menu-input>
-        <kendo-dropdownlist
-            *ngIf="extra"
+        @if (extra) {
+          <kendo-dropdownlist
             kendoFilterMenuDropDown
             [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
             [adaptiveMode]="ctx.grid?.adaptiveMode"
@@ -121,9 +120,10 @@ export class StringFilterMenuComponent extends StringFilterComponent {
             [value]="filter?.logic"
             textField="text"
             valueField="value">
-        </kendo-dropdownlist>
-        <kendo-grid-string-filter-menu-input
-            *ngIf="extra"
+          </kendo-dropdownlist>
+        }
+        @if (extra) {
+          <kendo-grid-string-filter-menu-input
             [operators]="operators"
             [currentFilter]="secondFilter"
             [filterService]="filterService"
@@ -131,8 +131,9 @@ export class StringFilterMenuComponent extends StringFilterComponent {
             [filter]="filter"
             [placeholder]="extraPlaceholder"
             [menuTabbingService]="menuTabbingService">
-        </kendo-grid-string-filter-menu-input>
-    `, isInline: true, dependencies: [{ kind: "component", type: StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService", "placeholder"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+          </kendo-grid-string-filter-menu-input>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService", "placeholder"] }, { 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: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
             type: Component,
@@ -140,17 +141,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-grid-string-filter-menu',
                     template: `
         <kendo-grid-string-filter-menu-input
-            [currentFilter]="firstFilter"
-            [operators]="operators"
-            [filterService]="filterService"
-            [column]="column"
-            [filter]="filter"
-            [isFirstDropDown]="true"
-            [placeholder]="placeholder"
-            [menuTabbingService]="menuTabbingService">
+          [currentFilter]="firstFilter"
+          [operators]="operators"
+          [filterService]="filterService"
+          [column]="column"
+          [filter]="filter"
+          [isFirstDropDown]="true"
+          [placeholder]="placeholder"
+          [menuTabbingService]="menuTabbingService">
         </kendo-grid-string-filter-menu-input>
-        <kendo-dropdownlist
-            *ngIf="extra"
+        @if (extra) {
+          <kendo-dropdownlist
             kendoFilterMenuDropDown
             [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
             [adaptiveMode]="ctx.grid?.adaptiveMode"
@@ -162,9 +163,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [value]="filter?.logic"
             textField="text"
             valueField="value">
-        </kendo-dropdownlist>
-        <kendo-grid-string-filter-menu-input
-            *ngIf="extra"
+          </kendo-dropdownlist>
+        }
+        @if (extra) {
+          <kendo-grid-string-filter-menu-input
             [operators]="operators"
             [currentFilter]="secondFilter"
             [filterService]="filterService"
@@ -172,10 +174,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [filter]="filter"
             [placeholder]="extraPlaceholder"
             [menuTabbingService]="menuTabbingService">
-        </kendo-grid-string-filter-menu-input>
-    `,
+          </kendo-grid-string-filter-menu-input>
+        }
+        `,
                     standalone: true,
-                    imports: [StringFilterMenuInputComponent, NgIf, DropDownListComponent, FilterMenuDropDownListDirective]
+                    imports: [StringFilterMenuInputComponent, DropDownListComponent, FilterMenuDropDownListDirective]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }], propDecorators: { hostClasses: [{
                 type: HostBinding,