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

package/esm2022/filtering/filter-row.component.mjs

@@ -8,7 +8,7 @@ import { DetailTemplateDirective } from '../rendering/details/detail-template.di
 import { ContextService } from '../common/provider.service';
 import { LogicalCellDirective } from '../navigation/logical-cell.directive';
 import { FilterCellComponent } from './cell/filter-cell.component';
-import { NgFor, NgIf, NgStyle, NgClass } from '@angular/common';
+import { NgStyle, NgClass } from '@angular/common';
 import { replaceMessagePlaceholder } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
@@ -47,63 +47,71 @@ export class FilterRowComponent {
         return this.ctx.grid?.isStacked;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterRowComponent, deps: [{ token: i1.ContextService }, { token: i2.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FilterRowComponent, isStandalone: true, selector: "[kendoGridFilterRow]", inputs: { columns: "columns", filter: "filter", groups: "groups", detailTemplate: "detailTemplate", logicalRowIndex: "logicalRowIndex", lockedColumnsCount: "lockedColumnsCount" }, host: { properties: { "class.k-filter-row": "this.filterRowClass" } }, ngImport: i0, template: `
-        <td
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterRowComponent, isStandalone: true, selector: "[kendoGridFilterRow]", inputs: { columns: "columns", filter: "filter", groups: "groups", detailTemplate: "detailTemplate", logicalRowIndex: "logicalRowIndex", lockedColumnsCount: "lockedColumnsCount" }, host: { properties: { "class.k-filter-row": "this.filterRowClass" } }, ngImport: i0, template: `
+        @for (g of groups; track g) {
+          <td
             class="k-table-td k-group-cell k-table-group-td"
-            *ngFor="let g of groups"
             role="presentation">
-        </td>
-        <td
+          </td>
+        }
+        @if (detailTemplate?.templateRef && !isStacked) {
+          <td
             class="k-table-td k-hierarchy-cell"
-            *ngIf="detailTemplate?.templateRef && !isStacked"
             role="presentation">
-        </td>
-        <td *ngFor="let column of columns; let columnIndex = index"
+          </td>
+        }
+        @for (column of columns; track column; let columnIndex = $index) {
+          <td
             class="k-table-td"
             [class.k-grid-header-sticky]="column.sticky"
             [ngStyle]="addStickyStyles(column)"
             [ngClass]="column.filterClass"
             [attr.aria-label]="filterLabel($any(column))"
             kendoGridFilterCell
-                [column]="$any(column)"
-                [filter]="filter"
+            [column]="$any(column)"
+            [filter]="filter"
             kendoGridLogicalCell
-                [logicalRowIndex]="logicalRowIndex"
-                [logicalColIndex]="getLogicalColIndex(columnIndex)"
-      ></td>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FilterCellComponent, selector: "[kendoGridFilterCell]", inputs: ["column", "filter", "size"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+            [logicalRowIndex]="logicalRowIndex"
+            [logicalColIndex]="getLogicalColIndex(columnIndex)"
+          ></td>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: FilterCellComponent, selector: "[kendoGridFilterCell]", inputs: ["column", "filter", "size"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoGridFilterRow]',
                     template: `
-        <td
+        @for (g of groups; track g) {
+          <td
             class="k-table-td k-group-cell k-table-group-td"
-            *ngFor="let g of groups"
             role="presentation">
-        </td>
-        <td
+          </td>
+        }
+        @if (detailTemplate?.templateRef && !isStacked) {
+          <td
             class="k-table-td k-hierarchy-cell"
-            *ngIf="detailTemplate?.templateRef && !isStacked"
             role="presentation">
-        </td>
-        <td *ngFor="let column of columns; let columnIndex = index"
+          </td>
+        }
+        @for (column of columns; track column; let columnIndex = $index) {
+          <td
             class="k-table-td"
             [class.k-grid-header-sticky]="column.sticky"
             [ngStyle]="addStickyStyles(column)"
             [ngClass]="column.filterClass"
             [attr.aria-label]="filterLabel($any(column))"
             kendoGridFilterCell
-                [column]="$any(column)"
-                [filter]="filter"
+            [column]="$any(column)"
+            [filter]="filter"
             kendoGridLogicalCell
-                [logicalRowIndex]="logicalRowIndex"
-                [logicalColIndex]="getLogicalColIndex(columnIndex)"
-      ></td>
-    `,
+            [logicalRowIndex]="logicalRowIndex"
+            [logicalColIndex]="getLogicalColIndex(columnIndex)"
+          ></td>
+        }
+        `,
                     standalone: true,
-                    imports: [NgFor, NgIf, FilterCellComponent, LogicalCellDirective, NgStyle, NgClass]
+                    imports: [FilterCellComponent, LogicalCellDirective, NgStyle, NgClass]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }, { type: i2.ColumnInfoService }], propDecorators: { columns: [{
                 type: Input

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

@@ -9,7 +9,6 @@ import { guid, replaceMessagePlaceholder } from '@progress/kendo-angular-common'
 import { BooleanFilterRadioButtonDirective } from './filter-radio-button.directive';
 import { MenuTabbingService } from './menu-tabbing.service';
 import { ContextService } from '../../common/provider.service';
-import { NgFor } from '@angular/common';
 import { RadioButtonComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/provider.service";
@@ -105,24 +104,26 @@ export class BooleanFilterMenuComponent extends BooleanFilterComponent {
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BooleanFilterMenuComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BooleanFilterMenuComponent, isStandalone: true, selector: "kendo-grid-boolean-filter-menu", inputs: { filter: "filter", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, viewQueries: [{ propertyName: "radioButtons", predicate: BooleanFilterRadioButtonDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BooleanFilterMenuComponent, isStandalone: true, selector: "kendo-grid-boolean-filter-menu", inputs: { filter: "filter", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, viewQueries: [{ propertyName: "radioButtons", predicate: BooleanFilterRadioButtonDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ul class="k-radio-list k-reset">
-            <li *ngFor="let item of items">
-                <kendo-radiobutton
-                    kendoFilterMenuRadioButton
-                    [columnLabel]="columnLabel"
-                    #input
-                    [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
-                    [name]="idPrefix"
-                    [checked]="isSelected(item.value)"
-                    [attr.id]="radioId(item.value)"
-                    (change)="onChange(item.value, input)"
-                    (keydown.shift.tab)="onShiftTab($event)"
-                ></kendo-radiobutton>
-                <label class="k-radio-label" [attr.for]="input.focusableId">{{item.text}}</label>
+          @for (item of items; track item) {
+            <li>
+              <kendo-radiobutton
+                kendoFilterMenuRadioButton
+                [columnLabel]="columnLabel"
+                #input
+                [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
+                [name]="idPrefix"
+                [checked]="isSelected(item.value)"
+                [attr.id]="radioId(item.value)"
+                (change)="onChange(item.value, input)"
+                (keydown.shift.tab)="onShiftTab($event)"
+              ></kendo-radiobutton>
+              <label class="k-radio-label" [attr.for]="input.focusableId">{{item.text}}</label>
             </li>
+          }
         </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: RadioButtonComponent, selector: "kendo-radiobutton", inputs: ["checked"], outputs: ["checkedChange"], exportAs: ["kendoRadioButton"] }, { kind: "directive", type: BooleanFilterRadioButtonDirective, selector: "[kendoFilterMenuRadioButton]", inputs: ["columnLabel"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: RadioButtonComponent, selector: "kendo-radiobutton", inputs: ["checked"], outputs: ["checkedChange"], exportAs: ["kendoRadioButton"] }, { kind: "directive", type: BooleanFilterRadioButtonDirective, selector: "[kendoFilterMenuRadioButton]", inputs: ["columnLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BooleanFilterMenuComponent, decorators: [{
             type: Component,
@@ -130,24 +131,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-grid-boolean-filter-menu',
                     template: `
         <ul class="k-radio-list k-reset">
-            <li *ngFor="let item of items">
-                <kendo-radiobutton
-                    kendoFilterMenuRadioButton
-                    [columnLabel]="columnLabel"
-                    #input
-                    [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
-                    [name]="idPrefix"
-                    [checked]="isSelected(item.value)"
-                    [attr.id]="radioId(item.value)"
-                    (change)="onChange(item.value, input)"
-                    (keydown.shift.tab)="onShiftTab($event)"
-                ></kendo-radiobutton>
-                <label class="k-radio-label" [attr.for]="input.focusableId">{{item.text}}</label>
+          @for (item of items; track item) {
+            <li>
+              <kendo-radiobutton
+                kendoFilterMenuRadioButton
+                [columnLabel]="columnLabel"
+                #input
+                [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
+                [name]="idPrefix"
+                [checked]="isSelected(item.value)"
+                [attr.id]="radioId(item.value)"
+                (change)="onChange(item.value, input)"
+                (keydown.shift.tab)="onShiftTab($event)"
+              ></kendo-radiobutton>
+              <label class="k-radio-label" [attr.for]="input.focusableId">{{item.text}}</label>
             </li>
+          }
         </ul>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgFor, RadioButtonComponent, BooleanFilterRadioButtonDirective]
+                    imports: [RadioButtonComponent, BooleanFilterRadioButtonDirective]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }], propDecorators: { hostClasses: [{
                 type: HostBinding,

package/esm2022/filtering/menu/date-filter-menu-input.component.mjs

@@ -7,7 +7,7 @@ import { Component, Input } from '@angular/core';
 import { ColumnComponent } from "../../columns/column.component";
 import { FilterService } from '../filter.service';
 import { SinglePopupService } from '../../common/single-popup.service';
-import { filter } from 'rxjs/operators';
+import { take } from 'rxjs/operators';
 import { DatePickerComponent, DatePickerCustomMessagesComponent } from '@progress/kendo-angular-dateinputs';
 import { ContextService } from '../../common/provider.service';
 import { FilterInputDirective } from '../filter-input.directive';
@@ -49,9 +49,12 @@ export class DateFilterMenuInputComponent {
             this.subscription.unsubscribe();
         }
     }
-    open(picker) {
+    open() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
         this.subscription = this.popupService.onClose
-            .pipe(filter(() => picker.isActive))
+            .pipe(take(1))
             .subscribe(e => e.preventDefault());
     }
     messageFor(key) {
@@ -74,13 +77,12 @@ export class DateFilterMenuInputComponent {
             [isFirstDropDown]="isFirstDropDown"
             [menuTabbingService]="menuTabbingService">
             <kendo-datepicker
-                #picker
                 kendoFilterInput
                 [adaptiveMode]="ctx.grid?.adaptiveMode"
                 [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
-                (open)="open(picker)"
+                (open)="open()"
                 [value]="currentFilter?.value"
                 [placeholder]="placeholder"
                 [formatPlaceholder]="formatPlaceholder"
@@ -114,13 +116,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [isFirstDropDown]="isFirstDropDown"
             [menuTabbingService]="menuTabbingService">
             <kendo-datepicker
-                #picker
                 kendoFilterInput
                 [adaptiveMode]="ctx.grid?.adaptiveMode"
                 [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
-                (open)="open(picker)"
+                (open)="open()"
                 [value]="currentFilter?.value"
                 [placeholder]="placeholder"
                 [formatPlaceholder]="formatPlaceholder"

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

@@ -9,7 +9,6 @@ import { DateFilterComponent } from '../date-filter.component';
 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 { DateFilterMenuInputComponent } from './date-filter-menu-input.component';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import { replaceMessagePlaceholder } from '@progress/kendo-angular-common';
@@ -81,27 +80,27 @@ export class DateFilterMenuComponent extends DateFilterComponent {
         super.localizationChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateFilterMenuComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DateFilterMenuComponent, isStandalone: true, selector: "kendo-grid-date-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", 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: DateFilterMenuComponent, isStandalone: true, selector: "kendo-grid-date-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-date-filter-menu-input
-            [currentFilter]="firstFilter"
-            [operators]="operators"
-            [filterService]="filterService"
-            [column]="column"
-            [filter]="filter"
-            [activeView]="activeView"
-            [bottomView]="bottomView"
-            [topView]="topView"
-            [format]="format"
-            [formatPlaceholder]="formatPlaceholder"
-            [placeholder]="placeholder"
-            [min]="min"
-            [max]="max"
-            [weekNumber]="weekNumber"
-            [isFirstDropDown]="true"
-            [menuTabbingService]="menuTabbingService">
+          [currentFilter]="firstFilter"
+          [operators]="operators"
+          [filterService]="filterService"
+          [column]="column"
+          [filter]="filter"
+          [activeView]="activeView"
+          [bottomView]="bottomView"
+          [topView]="topView"
+          [format]="format"
+          [formatPlaceholder]="formatPlaceholder"
+          [placeholder]="placeholder"
+          [min]="min"
+          [max]="max"
+          [weekNumber]="weekNumber"
+          [isFirstDropDown]="true"
+          [menuTabbingService]="menuTabbingService">
         </kendo-grid-date-filter-menu-input>
-        <kendo-dropdownlist
-            *ngIf="extra"
+        @if (extra) {
+          <kendo-dropdownlist
             kendoFilterMenuDropDown
             [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
             [adaptiveMode]="ctx.grid?.adaptiveMode"
@@ -114,9 +113,10 @@ export class DateFilterMenuComponent extends DateFilterComponent {
             [value]="filter?.logic"
             textField="text"
             valueField="value">
-        </kendo-dropdownlist>
-        <kendo-grid-date-filter-menu-input
-            *ngIf="extra"
+          </kendo-dropdownlist>
+        }
+        @if (extra) {
+          <kendo-grid-date-filter-menu-input
             [operators]="operators"
             [currentFilter]="secondFilter"
             [filterService]="filterService"
@@ -132,8 +132,9 @@ export class DateFilterMenuComponent extends DateFilterComponent {
             [max]="max"
             [weekNumber]="weekNumber"
             [menuTabbingService]="menuTabbingService">
-        </kendo-grid-date-filter-menu-input>
-    `, isInline: true, dependencies: [{ kind: "component", type: DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { 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-date-filter-menu-input>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { 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: DateFilterMenuComponent, decorators: [{
             type: Component,
@@ -141,25 +142,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-grid-date-filter-menu',
                     template: `
         <kendo-grid-date-filter-menu-input
-            [currentFilter]="firstFilter"
-            [operators]="operators"
-            [filterService]="filterService"
-            [column]="column"
-            [filter]="filter"
-            [activeView]="activeView"
-            [bottomView]="bottomView"
-            [topView]="topView"
-            [format]="format"
-            [formatPlaceholder]="formatPlaceholder"
-            [placeholder]="placeholder"
-            [min]="min"
-            [max]="max"
-            [weekNumber]="weekNumber"
-            [isFirstDropDown]="true"
-            [menuTabbingService]="menuTabbingService">
+          [currentFilter]="firstFilter"
+          [operators]="operators"
+          [filterService]="filterService"
+          [column]="column"
+          [filter]="filter"
+          [activeView]="activeView"
+          [bottomView]="bottomView"
+          [topView]="topView"
+          [format]="format"
+          [formatPlaceholder]="formatPlaceholder"
+          [placeholder]="placeholder"
+          [min]="min"
+          [max]="max"
+          [weekNumber]="weekNumber"
+          [isFirstDropDown]="true"
+          [menuTabbingService]="menuTabbingService">
         </kendo-grid-date-filter-menu-input>
-        <kendo-dropdownlist
-            *ngIf="extra"
+        @if (extra) {
+          <kendo-dropdownlist
             kendoFilterMenuDropDown
             [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
             [adaptiveMode]="ctx.grid?.adaptiveMode"
@@ -172,9 +173,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [value]="filter?.logic"
             textField="text"
             valueField="value">
-        </kendo-dropdownlist>
-        <kendo-grid-date-filter-menu-input
-            *ngIf="extra"
+          </kendo-dropdownlist>
+        }
+        @if (extra) {
+          <kendo-grid-date-filter-menu-input
             [operators]="operators"
             [currentFilter]="secondFilter"
             [filterService]="filterService"
@@ -190,10 +192,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [max]="max"
             [weekNumber]="weekNumber"
             [menuTabbingService]="menuTabbingService">
-        </kendo-grid-date-filter-menu-input>
-    `,
+          </kendo-grid-date-filter-menu-input>
+        }
+        `,
                     standalone: true,
-                    imports: [DateFilterMenuInputComponent, NgIf, DropDownListComponent, FilterMenuDropDownListDirective]
+                    imports: [DateFilterMenuInputComponent, DropDownListComponent, FilterMenuDropDownListDirective]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }], propDecorators: { hostClasses: [{
                 type: HostBinding,