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

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,

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

@@ -4,7 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, EventEmitter, Output, ViewChild } from '@angular/core';
 import { filterBy } from '@progress/kendo-data-query';
-import { NgFor, NgIf } from '@angular/common';
 import { CheckBoxComponent, TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { searchIcon } from '@progress/kendo-svg-icons';
@@ -233,75 +232,87 @@ export class MultiCheckboxFilterComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiCheckboxFilterComponent, deps: [{ token: i1.ContextService }, { token: i2.LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MultiCheckboxFilterComponent, isStandalone: true, selector: "kendo-grid-multicheckbox-filter", inputs: { column: "column" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: FilterInputDirective, descendants: true }], ngImport: i0, template: `
-        <kendo-textbox *ngIf="normalizedFilterVariant.search"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MultiCheckboxFilterComponent, isStandalone: true, selector: "kendo-grid-multicheckbox-filter", inputs: { column: "column" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: FilterInputDirective, descendants: true }], ngImport: i0, template: `
+        @if (normalizedFilterVariant.search) {
+          <kendo-textbox
             kendoFilterInput
             class="k-searchbox"
             [placeholder]="messageFor('multiCheckboxFilterSearchPlaceholder')">
             <ng-template kendoTextBoxPrefixTemplate>
-                <kendo-icon-wrapper innerCssClass="k-input-icon" name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
+              <kendo-icon-wrapper innerCssClass="k-input-icon" name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
             </ng-template>
-        </kendo-textbox>
+          </kendo-textbox>
+        }
         <ul class="k-reset k-multicheck-wrap">
-            <li class="k-item k-check-all-wrap" *ngIf="showSelectAll">
-                <label class="k-label k-checkbox-label" role="option">
-                    <kendo-checkbox
-                        [checkedState]="selectAllChecked"
-                        (checkedStateChange)="handleCheckBoxChange($event, null, true)">
-                    </kendo-checkbox>
-                    <span>{{ messageFor('multiCheckboxFilterSelectAllLabel') }}</span>
-                </label>
+          @if (showSelectAll) {
+            <li class="k-item k-check-all-wrap">
+              <label class="k-label k-checkbox-label" role="option">
+                <kendo-checkbox
+                  [checkedState]="selectAllChecked"
+                  (checkedStateChange)="handleCheckBoxChange($event, null, true)">
+                </kendo-checkbox>
+                <span>{{ messageFor('multiCheckboxFilterSelectAllLabel') }}</span>
+              </label>
             </li>
-            <li class="k-item" *ngFor="let item of listData">
-                <label class="k-label k-checkbox-label" role="option">
-                    <kendo-checkbox
-                        [checkedState]="isItemSelected(item)"
-                        (checkedStateChange)="handleCheckBoxChange($event, item)">
-                    </kendo-checkbox>
-                    <span>{{ item | format: column.format }}</span>
-                </label>
+          }
+          @for (item of listData; track item) {
+            <li class="k-item">
+              <label class="k-label k-checkbox-label" role="option">
+                <kendo-checkbox
+                  [checkedState]="isItemSelected(item)"
+                  (checkedStateChange)="handleCheckBoxChange($event, item)">
+                </kendo-checkbox>
+                <span>{{ item | format: column.format }}</span>
+              </label>
             </li>
+          }
         </ul>
         <div class="k-filter-selected-items">{{selectedItemsMessage}}</div>
-    `, 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: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "pipe", type: FormatPipe, name: "format" }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "pipe", type: FormatPipe, name: "format" }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiCheckboxFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-multicheckbox-filter',
                     template: `
-        <kendo-textbox *ngIf="normalizedFilterVariant.search"
+        @if (normalizedFilterVariant.search) {
+          <kendo-textbox
             kendoFilterInput
             class="k-searchbox"
             [placeholder]="messageFor('multiCheckboxFilterSearchPlaceholder')">
             <ng-template kendoTextBoxPrefixTemplate>
-                <kendo-icon-wrapper innerCssClass="k-input-icon" name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
+              <kendo-icon-wrapper innerCssClass="k-input-icon" name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
             </ng-template>
-        </kendo-textbox>
+          </kendo-textbox>
+        }
         <ul class="k-reset k-multicheck-wrap">
-            <li class="k-item k-check-all-wrap" *ngIf="showSelectAll">
-                <label class="k-label k-checkbox-label" role="option">
-                    <kendo-checkbox
-                        [checkedState]="selectAllChecked"
-                        (checkedStateChange)="handleCheckBoxChange($event, null, true)">
-                    </kendo-checkbox>
-                    <span>{{ messageFor('multiCheckboxFilterSelectAllLabel') }}</span>
-                </label>
+          @if (showSelectAll) {
+            <li class="k-item k-check-all-wrap">
+              <label class="k-label k-checkbox-label" role="option">
+                <kendo-checkbox
+                  [checkedState]="selectAllChecked"
+                  (checkedStateChange)="handleCheckBoxChange($event, null, true)">
+                </kendo-checkbox>
+                <span>{{ messageFor('multiCheckboxFilterSelectAllLabel') }}</span>
+              </label>
             </li>
-            <li class="k-item" *ngFor="let item of listData">
-                <label class="k-label k-checkbox-label" role="option">
-                    <kendo-checkbox
-                        [checkedState]="isItemSelected(item)"
-                        (checkedStateChange)="handleCheckBoxChange($event, item)">
-                    </kendo-checkbox>
-                    <span>{{ item | format: column.format }}</span>
-                </label>
+          }
+          @for (item of listData; track item) {
+            <li class="k-item">
+              <label class="k-label k-checkbox-label" role="option">
+                <kendo-checkbox
+                  [checkedState]="isItemSelected(item)"
+                  (checkedStateChange)="handleCheckBoxChange($event, item)">
+                </kendo-checkbox>
+                <span>{{ item | format: column.format }}</span>
+              </label>
             </li>
+          }
         </ul>
         <div class="k-filter-selected-items">{{selectedItemsMessage}}</div>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgFor, NgIf, CheckBoxComponent, TextBoxComponent, TextBoxPrefixTemplateDirective, IconWrapperComponent, FormatPipe, FilterInputDirective]
+                    imports: [CheckBoxComponent, TextBoxComponent, TextBoxPrefixTemplateDirective, IconWrapperComponent, FormatPipe, FilterInputDirective]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }, { type: i2.LocalDataChangesService }], propDecorators: { column: [{
                 type: Input