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

package/esm2022/rendering/toolbar/toolbar.component.mjs

@@ -5,7 +5,7 @@
 import { Component, Input, ElementRef, HostBinding, HostListener } from '@angular/core';
 import { closestInScope, isDocumentAvailable, isFocusable } from '@progress/kendo-angular-common';
 import { ContextService } from './../../common/provider.service';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./../../common/provider.service";
 /**
@@ -95,25 +95,27 @@ export class ToolbarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToolbarComponent, isStandalone: true, selector: "kendo-grid-toolbar", inputs: { position: "position", size: "size", navigable: "navigable" }, host: { listeners: { "click": "clickHandler($event)", "keydown.arrowleft": "arrowLeftListener($event)", "keydown.arrowright": "arrowRightListener($event)", "keydown.home": "homeKeyListener($event)", "keydown.end": "endKeyListener($event)" }, properties: { "attr.role": "this.role", "class.k-toolbar": "this.hostClasses", "class.k-grid-toolbar": "this.hostClasses", "class.k-toolbar-solid": "this.hostClasses", "class.k-toolbar-sm": "this.sizeSmallClass", "class.k-toolbar-md": "this.sizeMediumClass" } }, ngImport: i0, template: `
-        <ng-template
-            *ngIf="toolbarTemplateRef"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolbarComponent, isStandalone: true, selector: "kendo-grid-toolbar", inputs: { position: "position", size: "size", navigable: "navigable" }, host: { listeners: { "click": "clickHandler($event)", "keydown.arrowleft": "arrowLeftListener($event)", "keydown.arrowright": "arrowRightListener($event)", "keydown.home": "homeKeyListener($event)", "keydown.end": "endKeyListener($event)" }, properties: { "attr.role": "this.role", "class.k-toolbar": "this.hostClasses", "class.k-grid-toolbar": "this.hostClasses", "class.k-toolbar-solid": "this.hostClasses", "class.k-toolbar-sm": "this.sizeSmallClass", "class.k-toolbar-md": "this.sizeMediumClass" } }, ngImport: i0, template: `
+        @if (toolbarTemplateRef) {
+          <ng-template
             [ngTemplateOutlet]="toolbarTemplateRef"
-            [ngTemplateOutletContext]="context"></ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+          [ngTemplateOutletContext]="context"></ng-template>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-toolbar',
                     template: `
-        <ng-template
-            *ngIf="toolbarTemplateRef"
+        @if (toolbarTemplateRef) {
+          <ng-template
             [ngTemplateOutlet]="toolbarTemplateRef"
-            [ngTemplateOutletContext]="context"></ng-template>
-    `,
+          [ngTemplateOutletContext]="context"></ng-template>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet]
+                    imports: [NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }, { type: i0.ElementRef }], propDecorators: { role: [{
                 type: HostBinding,

package/esm2022/rendering/toolbar/tools/ai-assistant/ai-assistant.component.mjs

@@ -8,7 +8,6 @@ import { HttpClient, HttpRequest } from '@angular/common/http';
 import { ContextService } from './../../../../common/provider.service';
 import { ColumnInfoService } from './../../../../common/column-info.service';
 import { GridAIAssistantResponseSuccessEvent, GridAIAssistantResponseErrorEvent } from './models';
-import { NgIf } from '@angular/common';
 import { convertDateStringsInFilter, highlightBy } from './utils';
 import { isCheckboxColumn } from '../../../../columns/column-base';
 import { CommandColumnComponent } from '../../../../columns/command-column.component';
@@ -741,100 +740,108 @@ export class AiAssistantComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AiAssistantComponent, deps: [{ token: i1.HttpClient }, { token: i2.ContextService }, { token: i3.ColumnInfoService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AiAssistantComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "aiPrompt", first: true, predicate: AIPromptComponent, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AiAssistantComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "aiPrompt", first: true, predicate: AIPromptComponent, descendants: true }], ngImport: i0, template: `
         <kendo-aiprompt
-            #aiPrompt
-            [promptSuggestions]="aiPromptSettings?.promptSuggestions"
-            [showOutputRating]="aiPromptSettings?.showOutputRating"
-            [streaming]="streaming"
-            [speechToTextButton]="aiPromptSettings?.speechToTextButton"
-            [(activeView)]="activeView"
-            [generateButtonSVGIcon]="aiPromptSettings?.generateButtonSVGIcon"
-            [generateButtonIcon]="aiPromptSettings?.generateButtonIcon"
-            [disabledGenerateButton]="disabledGenerateButton || promptView.textAreaValue?.length === 0"
-            [promptOutputs]="aiPromptSettings?.promptOutputs"
-            [textAreaSettings]="aiPromptSettings?.textAreaSettings"
-            (promptRequest)="onPromptRequest($event)"
-            (promptRequestCancel)="cancelRequest()"
-            >
-            <kendo-aiprompt-prompt-view #promptView></kendo-aiprompt-prompt-view>
-            <kendo-aiprompt-output-view></kendo-aiprompt-output-view>
-            <ng-template *ngIf="streaming && aiPrompt.streaming" kendoAIPromptOutputTemplate let-output>
-                <div class="k-card">
-                    <div class="k-card-header">
-                        <div class="k-card-title">
-                            <span class="k-skeleton k-skeleton-text k-skeleton-pulse" [style.width.px]="200"></span>
-                        </div>
-                        <div class="k-card-subtitle">
-                            <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
-                        </div>
-                    </div>
-                    <div class="k-card-body">
-                        <span class="k-skeleton k-skeleton-rect k-skeleton-pulse" style="height: 80px;"></span>
-                    </div>
-                    <div class="k-card-actions">
-                        <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
-                    </div>
+          #aiPrompt
+          [promptSuggestions]="aiPromptSettings?.promptSuggestions"
+          [showOutputRating]="aiPromptSettings?.showOutputRating"
+          [streaming]="streaming"
+          [speechToTextButton]="aiPromptSettings?.speechToTextButton"
+          [(activeView)]="activeView"
+          [generateButtonSVGIcon]="aiPromptSettings?.generateButtonSVGIcon"
+          [generateButtonIcon]="aiPromptSettings?.generateButtonIcon"
+          [disabledGenerateButton]="disabledGenerateButton || promptView.textAreaValue?.length === 0"
+          [promptOutputs]="aiPromptSettings?.promptOutputs"
+          [textAreaSettings]="aiPromptSettings?.textAreaSettings"
+          (promptRequest)="onPromptRequest($event)"
+          (promptRequestCancel)="cancelRequest()"
+          >
+          <kendo-aiprompt-prompt-view #promptView></kendo-aiprompt-prompt-view>
+          <kendo-aiprompt-output-view></kendo-aiprompt-output-view>
+          @if (streaming && aiPrompt.streaming; as output) {
+            <ng-template kendoAIPromptOutputTemplate let-output>
+              <div class="k-card">
+                <div class="k-card-header">
+                  <div class="k-card-title">
+                    <span class="k-skeleton k-skeleton-text k-skeleton-pulse" [style.width.px]="200"></span>
+                  </div>
+                  <div class="k-card-subtitle">
+                    <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
+                  </div>
                 </div>
+                <div class="k-card-body">
+                  <span class="k-skeleton k-skeleton-rect k-skeleton-pulse" style="height: 80px;"></span>
+                </div>
+                <div class="k-card-actions">
+                  <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
+                </div>
+              </div>
             </ng-template>
-            <ng-template *ngIf="!(streaming && aiPrompt.streaming)" kendoAIPromptOutputBodyTemplate let-output>
-                <p>{{output.output}}</p>
+          }
+          @if (!(streaming && aiPrompt.streaming); as output) {
+            <ng-template kendoAIPromptOutputBodyTemplate let-output>
+              <p>{{output.output}}</p>
             </ng-template>
-            <kendo-aiprompt-messages
-                [generateOutput]="message('aiAssistantApplyButtonText')"
-            ></kendo-aiprompt-messages>
+          }
+          <kendo-aiprompt-messages
+            [generateOutput]="message('aiAssistantApplyButtonText')"
+          ></kendo-aiprompt-messages>
         </kendo-aiprompt>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AIPromptComponent, selector: "kendo-aiprompt", inputs: ["activeView", "promptCommands", "promptSuggestions", "promptOutputs", "showOutputRating", "streaming", "speechToTextButton", "textAreaSettings", "generateButtonSVGIcon", "generateButtonIcon", "disabledGenerateButton"], outputs: ["activeViewChange", "promptRequest", "commandExecute", "outputCopy", "outputRatingChange", "promptRequestCancel"], exportAs: ["kendoAIPrompt"] }, { kind: "component", type: AIPromptCustomMessagesComponent, selector: "kendo-aiprompt-messages" }, { kind: "component", type: PromptViewComponent, selector: "kendo-aiprompt-prompt-view" }, { kind: "component", type: OutputViewComponent, selector: "kendo-aiprompt-output-view" }, { kind: "directive", type: AIPromptOutputTemplateDirective, selector: "[kendoAIPromptOutputTemplate]" }, { kind: "directive", type: AIPromptOutputBodyTemplateDirective, selector: "[kendoAIPromptOutputBodyTemplate]" }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: AIPromptComponent, selector: "kendo-aiprompt", inputs: ["activeView", "promptCommands", "promptSuggestions", "promptOutputs", "showOutputRating", "streaming", "speechToTextButton", "textAreaSettings", "generateButtonSVGIcon", "generateButtonIcon", "disabledGenerateButton"], outputs: ["activeViewChange", "promptRequest", "commandExecute", "outputCopy", "outputRatingChange", "promptRequestCancel"], exportAs: ["kendoAIPrompt"] }, { kind: "component", type: AIPromptCustomMessagesComponent, selector: "kendo-aiprompt-messages" }, { kind: "component", type: PromptViewComponent, selector: "kendo-aiprompt-prompt-view" }, { kind: "component", type: OutputViewComponent, selector: "kendo-aiprompt-output-view" }, { kind: "directive", type: AIPromptOutputTemplateDirective, selector: "[kendoAIPromptOutputTemplate]" }, { kind: "directive", type: AIPromptOutputBodyTemplateDirective, selector: "[kendoAIPromptOutputBodyTemplate]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AiAssistantComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [NgIf, AIPromptComponent, AIPromptCustomMessagesComponent, PromptViewComponent, OutputViewComponent, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective],
+                    imports: [AIPromptComponent, AIPromptCustomMessagesComponent, PromptViewComponent, OutputViewComponent, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective],
                     template: `
         <kendo-aiprompt
-            #aiPrompt
-            [promptSuggestions]="aiPromptSettings?.promptSuggestions"
-            [showOutputRating]="aiPromptSettings?.showOutputRating"
-            [streaming]="streaming"
-            [speechToTextButton]="aiPromptSettings?.speechToTextButton"
-            [(activeView)]="activeView"
-            [generateButtonSVGIcon]="aiPromptSettings?.generateButtonSVGIcon"
-            [generateButtonIcon]="aiPromptSettings?.generateButtonIcon"
-            [disabledGenerateButton]="disabledGenerateButton || promptView.textAreaValue?.length === 0"
-            [promptOutputs]="aiPromptSettings?.promptOutputs"
-            [textAreaSettings]="aiPromptSettings?.textAreaSettings"
-            (promptRequest)="onPromptRequest($event)"
-            (promptRequestCancel)="cancelRequest()"
-            >
-            <kendo-aiprompt-prompt-view #promptView></kendo-aiprompt-prompt-view>
-            <kendo-aiprompt-output-view></kendo-aiprompt-output-view>
-            <ng-template *ngIf="streaming && aiPrompt.streaming" kendoAIPromptOutputTemplate let-output>
-                <div class="k-card">
-                    <div class="k-card-header">
-                        <div class="k-card-title">
-                            <span class="k-skeleton k-skeleton-text k-skeleton-pulse" [style.width.px]="200"></span>
-                        </div>
-                        <div class="k-card-subtitle">
-                            <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
-                        </div>
-                    </div>
-                    <div class="k-card-body">
-                        <span class="k-skeleton k-skeleton-rect k-skeleton-pulse" style="height: 80px;"></span>
-                    </div>
-                    <div class="k-card-actions">
-                        <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
-                    </div>
+          #aiPrompt
+          [promptSuggestions]="aiPromptSettings?.promptSuggestions"
+          [showOutputRating]="aiPromptSettings?.showOutputRating"
+          [streaming]="streaming"
+          [speechToTextButton]="aiPromptSettings?.speechToTextButton"
+          [(activeView)]="activeView"
+          [generateButtonSVGIcon]="aiPromptSettings?.generateButtonSVGIcon"
+          [generateButtonIcon]="aiPromptSettings?.generateButtonIcon"
+          [disabledGenerateButton]="disabledGenerateButton || promptView.textAreaValue?.length === 0"
+          [promptOutputs]="aiPromptSettings?.promptOutputs"
+          [textAreaSettings]="aiPromptSettings?.textAreaSettings"
+          (promptRequest)="onPromptRequest($event)"
+          (promptRequestCancel)="cancelRequest()"
+          >
+          <kendo-aiprompt-prompt-view #promptView></kendo-aiprompt-prompt-view>
+          <kendo-aiprompt-output-view></kendo-aiprompt-output-view>
+          @if (streaming && aiPrompt.streaming; as output) {
+            <ng-template kendoAIPromptOutputTemplate let-output>
+              <div class="k-card">
+                <div class="k-card-header">
+                  <div class="k-card-title">
+                    <span class="k-skeleton k-skeleton-text k-skeleton-pulse" [style.width.px]="200"></span>
+                  </div>
+                  <div class="k-card-subtitle">
+                    <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
+                  </div>
+                </div>
+                <div class="k-card-body">
+                  <span class="k-skeleton k-skeleton-rect k-skeleton-pulse" style="height: 80px;"></span>
+                </div>
+                <div class="k-card-actions">
+                  <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
                 </div>
+              </div>
             </ng-template>
-            <ng-template *ngIf="!(streaming && aiPrompt.streaming)" kendoAIPromptOutputBodyTemplate let-output>
-                <p>{{output.output}}</p>
+          }
+          @if (!(streaming && aiPrompt.streaming); as output) {
+            <ng-template kendoAIPromptOutputBodyTemplate let-output>
+              <p>{{output.output}}</p>
             </ng-template>
-            <kendo-aiprompt-messages
-                [generateOutput]="message('aiAssistantApplyButtonText')"
-            ></kendo-aiprompt-messages>
+          }
+          <kendo-aiprompt-messages
+            [generateOutput]="message('aiAssistantApplyButtonText')"
+          ></kendo-aiprompt-messages>
         </kendo-aiprompt>
-    `
+        `
                 }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ContextService }, { type: i3.ColumnInfoService }, { type: i0.NgZone }], propDecorators: { aiPrompt: [{
                 type: ViewChild,

package/esm2022/rendering/toolbar/tools/filter-toolbar-tool.component.mjs

@@ -4,7 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, ElementRef, EventEmitter, NgZone, Output, QueryList, ViewChildren } from '@angular/core';
 import { ContextService } from '../../../common/provider.service';
-import { NgFor } from '@angular/common';
 import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
 import { FilterMenuContainerComponent } from '../../../filtering/menu/filter-menu-container.component';
 import { FilterService } from '../../../filtering/filter.service';
@@ -142,34 +141,36 @@ export class FilterToolbarToolComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterToolbarToolComponent, deps: [{ token: i0.ElementRef }, { token: i1.FilterService }, { token: i2.ContextService }, { token: i3.ColumnInfoService }, { token: i0.NgZone }, { token: i4.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FilterToolbarToolComponent, isStandalone: true, selector: "kendo-filter-toolbar-tool", outputs: { close: "close" }, viewQueries: [{ propertyName: "filterItems", predicate: ["filterItem"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: ["filterItem"], descendants: true }, { propertyName: "filterContainers", predicate: ["filterContainer"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterToolbarToolComponent, isStandalone: true, selector: "kendo-filter-toolbar-tool", outputs: { close: "close" }, viewQueries: [{ propertyName: "filterItems", predicate: ["filterItem"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: ["filterItem"], descendants: true }, { propertyName: "filterContainers", predicate: ["filterContainer"], descendants: true }], ngImport: i0, template: `
         <div [style]="hostStyles">
-            <kendo-grid-columnmenu-item *ngFor="let column of columns; let i = index"
-                class="k-columnmenu-item-wrapper" #filterItem
-                role="button"
-                tabindex="0"
-                [column]="getColumnComponent(column)"
-                [text]="column.title || getColumnComponent(column).field"
-                (focus)="onItemFocus(filterItem)"
-                (focusout)="onItemFocusOut()"
-                (keydown.enter)="toggleItem($event, i)"
-                [indicatorIcon]="isFilterApplied(column)"
-                (itemClick)="navigateView(getColumnComponent(column))"
-                [expanded]="false"
-                [focused]="isItemFocused(filterItem)">
-                <ng-template kendoGridColumnMenuItemContentTemplate>
-                    <kendo-grid-filter-menu-container
-                        #filterContainer
-                        (keydown.shift.tab)="$event.stopImmediatePropagation()"
-                        [column]="getColumnComponent(column)"
-                        [filter]="filter"
-                        [isExpanded]="false"
-                        (close)="handleClose(filterItem)">
-                    </kendo-grid-filter-menu-container>
-                </ng-template>
+          @for (column of columns; track column; let i = $index) {
+            <kendo-grid-columnmenu-item
+              class="k-columnmenu-item-wrapper" #filterItem
+              role="button"
+              tabindex="0"
+              [column]="getColumnComponent(column)"
+              [text]="column.title || getColumnComponent(column).field"
+              (focus)="onItemFocus(filterItem)"
+              (focusout)="onItemFocusOut()"
+              (keydown.enter)="toggleItem($event, i)"
+              [indicatorIcon]="isFilterApplied(column)"
+              (itemClick)="navigateView(getColumnComponent(column))"
+              [expanded]="false"
+              [focused]="isItemFocused(filterItem)">
+              <ng-template kendoGridColumnMenuItemContentTemplate>
+                <kendo-grid-filter-menu-container
+                  #filterContainer
+                  (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                  [column]="getColumnComponent(column)"
+                  [filter]="filter"
+                  [isExpanded]="false"
+                  (close)="handleClose(filterItem)">
+                </kendo-grid-filter-menu-container>
+              </ng-template>
             </kendo-grid-columnmenu-item>
+          }
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterToolbarToolComponent, decorators: [{
             type: Component,
@@ -177,34 +178,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-filter-toolbar-tool',
                     template: `
         <div [style]="hostStyles">
-            <kendo-grid-columnmenu-item *ngFor="let column of columns; let i = index"
-                class="k-columnmenu-item-wrapper" #filterItem
-                role="button"
-                tabindex="0"
-                [column]="getColumnComponent(column)"
-                [text]="column.title || getColumnComponent(column).field"
-                (focus)="onItemFocus(filterItem)"
-                (focusout)="onItemFocusOut()"
-                (keydown.enter)="toggleItem($event, i)"
-                [indicatorIcon]="isFilterApplied(column)"
-                (itemClick)="navigateView(getColumnComponent(column))"
-                [expanded]="false"
-                [focused]="isItemFocused(filterItem)">
-                <ng-template kendoGridColumnMenuItemContentTemplate>
-                    <kendo-grid-filter-menu-container
-                        #filterContainer
-                        (keydown.shift.tab)="$event.stopImmediatePropagation()"
-                        [column]="getColumnComponent(column)"
-                        [filter]="filter"
-                        [isExpanded]="false"
-                        (close)="handleClose(filterItem)">
-                    </kendo-grid-filter-menu-container>
-                </ng-template>
+          @for (column of columns; track column; let i = $index) {
+            <kendo-grid-columnmenu-item
+              class="k-columnmenu-item-wrapper" #filterItem
+              role="button"
+              tabindex="0"
+              [column]="getColumnComponent(column)"
+              [text]="column.title || getColumnComponent(column).field"
+              (focus)="onItemFocus(filterItem)"
+              (focusout)="onItemFocusOut()"
+              (keydown.enter)="toggleItem($event, i)"
+              [indicatorIcon]="isFilterApplied(column)"
+              (itemClick)="navigateView(getColumnComponent(column))"
+              [expanded]="false"
+              [focused]="isItemFocused(filterItem)">
+              <ng-template kendoGridColumnMenuItemContentTemplate>
+                <kendo-grid-filter-menu-container
+                  #filterContainer
+                  (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                  [column]="getColumnComponent(column)"
+                  [filter]="filter"
+                  [isExpanded]="false"
+                  (close)="handleClose(filterItem)">
+                </kendo-grid-filter-menu-container>
+              </ng-template>
             </kendo-grid-columnmenu-item>
+          }
         </div>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgFor, KENDO_BUTTON, FilterMenuContainerComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective]
+                    imports: [KENDO_BUTTON, FilterMenuContainerComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FilterService }, { type: i2.ContextService }, { type: i3.ColumnInfoService }, { type: i0.NgZone }, { type: i4.AdaptiveGridService }], propDecorators: { filterItems: [{
                 type: ViewChildren,