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

package/esm2022/aggregates/status-bar.component.mjs

@@ -5,7 +5,7 @@
 import { Component, HostBinding, Input } from '@angular/core';
 import { StatusBarTemplateDirective } from './status-bar-template.directive';
 import { CellSelectionAggregateService } from './selection-aggregate.service';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./selection-aggregate.service";
 /**
@@ -29,27 +29,29 @@ export class StatusBarComponent {
         return this.aggregateService.aggregates;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatusBarComponent, deps: [{ token: i1.CellSelectionAggregateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StatusBarComponent, isStandalone: true, selector: "kendo-grid-status-bar", inputs: { statusBarTemplate: "statusBarTemplate" }, host: { properties: { "class.k-selection-aggregates": "this.hostClasses", "class.k-grid-selection-aggregates": "this.hostClasses", "style.display": "this.isStatusBarTemplate", "attr.aria-live": "this.hostAriaLive" } }, ngImport: i0, template: `
-        <ng-template
-            *ngIf="statusBarTemplate"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatusBarComponent, isStandalone: true, selector: "kendo-grid-status-bar", inputs: { statusBarTemplate: "statusBarTemplate" }, host: { properties: { "class.k-selection-aggregates": "this.hostClasses", "class.k-grid-selection-aggregates": "this.hostClasses", "style.display": "this.isStatusBarTemplate", "attr.aria-live": "this.hostAriaLive" } }, ngImport: i0, template: `
+        @if (statusBarTemplate) {
+          <ng-template
             [ngTemplateOutlet]="statusBarTemplate?.templateRef"
             [ngTemplateOutletContext]="{ aggregates: aggregates }">
-        </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"] }] });
+          </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: StatusBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-status-bar',
                     template: `
-        <ng-template
-            *ngIf="statusBarTemplate"
+        @if (statusBarTemplate) {
+          <ng-template
             [ngTemplateOutlet]="statusBarTemplate?.templateRef"
             [ngTemplateOutletContext]="{ aggregates: aggregates }">
-        </ng-template>
-    `,
+          </ng-template>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet]
+                    imports: [NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i1.CellSelectionAggregateService }], propDecorators: { hostClasses: [{
                 type: HostBinding,

package/esm2022/column-menu/column-chooser-content.component.mjs

@@ -9,7 +9,7 @@ import { arrowRotateCcwIcon, checkIcon, searchIcon } from '@progress/kendo-svg-i
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { ColumnListComponent } from './column-list.component';
 import { TextBoxComponent } from '@progress/kendo-angular-inputs';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { ColumnMenuService } from './column-menu.service';
 import { ContextService } from '../common/provider.service';
@@ -129,69 +129,74 @@ export class ColumnChooserContentComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnChooserContentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ColumnInfoService, optional: true }, { token: i2.ContextService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnChooserContentComponent, isStandalone: true, selector: "kendo-grid-column-chooser-content", inputs: { filterable: "filterable", showSelectAll: "showSelectAll", showCheckedCount: "showCheckedCount", allowHideAll: "allowHideAll", autoSync: "autoSync", actionsClass: "actionsClass", closeOnReset: "closeOnReset", columns: "columns", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColumnChooserContentComponent, isStandalone: true, selector: "kendo-grid-column-chooser-content", inputs: { filterable: "filterable", showSelectAll: "showSelectAll", showCheckedCount: "showCheckedCount", allowHideAll: "allowHideAll", autoSync: "autoSync", actionsClass: "actionsClass", closeOnReset: "closeOnReset", columns: "columns", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: `
             <form class="k-filter-menu">
-                <div class="k-filter-menu-container">
-                    <kendo-textbox
-                        #filterInput
-                        *ngIf="filterable"
-                        class="k-searchbox"
-                        (valueChange)="onFilter($event)"
-                        [kendoEventsOutsideAngular]="{'keydown': onTab}"
-                        [scope]="this"
-                        >
-                        <ng-template kendoPrefixTemplate>
-                            <kendo-icon-wrapper
-                                [name]="'search'"
-                                [svgIcon]="searchIcon">
-                            </kendo-icon-wrapper>
-                        </ng-template>
-                    </kendo-textbox>
-                    <kendo-grid-columnlist
-                        #columnList
-                        [columns]="columns"
-                        [filteredColumns]="filteredColumns"
-                        [ariaLabel]="messageFor('columns')"
-                        [showSelectAll]="showSelectAll"
-                        [isLast]="isLast"
-                        [isFiltered]="isFiltered"
-                        [filterable]="filterable"
-                        [isExpanded]="isExpanded"
-                        [service]="service"
-                        [applyText]="messageFor('columnsApply')"
-                        [resetText]="messageFor('columnsReset')"
-                        [autoSync]="autoSync"
-                        [allowHideAll]="allowHideAll"
-                        (columnChange)="onChange($event)"
-                        >
-                    </kendo-grid-columnlist>
-                    <div *ngIf="showCheckedCount" class="k-filter-selected-items">
-                        {{selectedItemsText}}
-                    </div>
-                    <div [ngClass]="actionsClass" *ngIf="!autoSync && !actionSheetOpened">
-                        <button
-                            #applyButton
-                            kendoButton
-                            type="button"
-                            icon="check"
-                            [svgIcon]="checkIcon"
-                            themeColor="primary"
-                            (click)="applyChanges()"
-                            (keydown)="onApplyButtonKeydown($event)"
-                        >{{ applyText }}</button>
-                        <button
-                            #resetButton
-                            kendoButton
-                            type="button"
-                            icon="reset"
-                            (keydown.tab)="columnList.onTab($event)"
-                            [svgIcon]="arrowRotateCcwIcon"
-                            (click)="cancelChanges()"
-                        >{{ resetText }}</button>
-                    </div>
-                </div>
+              <div class="k-filter-menu-container">
+                @if (filterable) {
+                  <kendo-textbox
+                    #filterInput
+                    class="k-searchbox"
+                    (valueChange)="onFilter($event)"
+                    [kendoEventsOutsideAngular]="{'keydown': onTab}"
+                    [scope]="this"
+                    >
+                    <ng-template kendoPrefixTemplate>
+                      <kendo-icon-wrapper
+                        [name]="'search'"
+                        [svgIcon]="searchIcon">
+                      </kendo-icon-wrapper>
+                    </ng-template>
+                  </kendo-textbox>
+                }
+                <kendo-grid-columnlist
+                  #columnList
+                  [columns]="columns"
+                  [filteredColumns]="filteredColumns"
+                  [ariaLabel]="messageFor('columns')"
+                  [showSelectAll]="showSelectAll"
+                  [isLast]="isLast"
+                  [isFiltered]="isFiltered"
+                  [filterable]="filterable"
+                  [isExpanded]="isExpanded"
+                  [service]="service"
+                  [applyText]="messageFor('columnsApply')"
+                  [resetText]="messageFor('columnsReset')"
+                  [autoSync]="autoSync"
+                  [allowHideAll]="allowHideAll"
+                  (columnChange)="onChange($event)"
+                  >
+                </kendo-grid-columnlist>
+                @if (showCheckedCount) {
+                  <div class="k-filter-selected-items">
+                    {{selectedItemsText}}
+                  </div>
+                }
+                @if (!autoSync && !actionSheetOpened) {
+                  <div [ngClass]="actionsClass">
+                    <button
+                      #applyButton
+                      kendoButton
+                      type="button"
+                      icon="check"
+                      [svgIcon]="checkIcon"
+                      themeColor="primary"
+                      (click)="applyChanges()"
+                      (keydown)="onApplyButtonKeydown($event)"
+                    >{{ applyText }}</button>
+                    <button
+                      #resetButton
+                      kendoButton
+                      type="button"
+                      icon="reset"
+                      (keydown.tab)="columnList.onTab($event)"
+                      [svgIcon]="arrowRotateCcwIcon"
+                      (click)="cancelChanges()"
+                    >{{ resetText }}</button>
+                  </div>
+                }
+              </div>
             </form>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "filteredColumns", "autoSync", "showSelectAll", "isFiltered", "ariaLabel", "allowHideAll", "applyText", "resetText", "isLast", "isExpanded", "service", "filterable"], outputs: ["reset", "apply", "columnChange"] }, { 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: PrefixTemplateDirective, selector: "[kendoPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+            `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "filteredColumns", "autoSync", "showSelectAll", "isFiltered", "ariaLabel", "allowHideAll", "applyText", "resetText", "isLast", "isExpanded", "service", "filterable"], outputs: ["reset", "apply", "columnChange"] }, { 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: PrefixTemplateDirective, selector: "[kendoPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnChooserContentComponent, decorators: [{
             type: Component,
@@ -199,69 +204,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-grid-column-chooser-content',
                     template: `
             <form class="k-filter-menu">
-                <div class="k-filter-menu-container">
-                    <kendo-textbox
-                        #filterInput
-                        *ngIf="filterable"
-                        class="k-searchbox"
-                        (valueChange)="onFilter($event)"
-                        [kendoEventsOutsideAngular]="{'keydown': onTab}"
-                        [scope]="this"
-                        >
-                        <ng-template kendoPrefixTemplate>
-                            <kendo-icon-wrapper
-                                [name]="'search'"
-                                [svgIcon]="searchIcon">
-                            </kendo-icon-wrapper>
-                        </ng-template>
-                    </kendo-textbox>
-                    <kendo-grid-columnlist
-                        #columnList
-                        [columns]="columns"
-                        [filteredColumns]="filteredColumns"
-                        [ariaLabel]="messageFor('columns')"
-                        [showSelectAll]="showSelectAll"
-                        [isLast]="isLast"
-                        [isFiltered]="isFiltered"
-                        [filterable]="filterable"
-                        [isExpanded]="isExpanded"
-                        [service]="service"
-                        [applyText]="messageFor('columnsApply')"
-                        [resetText]="messageFor('columnsReset')"
-                        [autoSync]="autoSync"
-                        [allowHideAll]="allowHideAll"
-                        (columnChange)="onChange($event)"
-                        >
-                    </kendo-grid-columnlist>
-                    <div *ngIf="showCheckedCount" class="k-filter-selected-items">
-                        {{selectedItemsText}}
-                    </div>
-                    <div [ngClass]="actionsClass" *ngIf="!autoSync && !actionSheetOpened">
-                        <button
-                            #applyButton
-                            kendoButton
-                            type="button"
-                            icon="check"
-                            [svgIcon]="checkIcon"
-                            themeColor="primary"
-                            (click)="applyChanges()"
-                            (keydown)="onApplyButtonKeydown($event)"
-                        >{{ applyText }}</button>
-                        <button
-                            #resetButton
-                            kendoButton
-                            type="button"
-                            icon="reset"
-                            (keydown.tab)="columnList.onTab($event)"
-                            [svgIcon]="arrowRotateCcwIcon"
-                            (click)="cancelChanges()"
-                        >{{ resetText }}</button>
-                    </div>
-                </div>
+              <div class="k-filter-menu-container">
+                @if (filterable) {
+                  <kendo-textbox
+                    #filterInput
+                    class="k-searchbox"
+                    (valueChange)="onFilter($event)"
+                    [kendoEventsOutsideAngular]="{'keydown': onTab}"
+                    [scope]="this"
+                    >
+                    <ng-template kendoPrefixTemplate>
+                      <kendo-icon-wrapper
+                        [name]="'search'"
+                        [svgIcon]="searchIcon">
+                      </kendo-icon-wrapper>
+                    </ng-template>
+                  </kendo-textbox>
+                }
+                <kendo-grid-columnlist
+                  #columnList
+                  [columns]="columns"
+                  [filteredColumns]="filteredColumns"
+                  [ariaLabel]="messageFor('columns')"
+                  [showSelectAll]="showSelectAll"
+                  [isLast]="isLast"
+                  [isFiltered]="isFiltered"
+                  [filterable]="filterable"
+                  [isExpanded]="isExpanded"
+                  [service]="service"
+                  [applyText]="messageFor('columnsApply')"
+                  [resetText]="messageFor('columnsReset')"
+                  [autoSync]="autoSync"
+                  [allowHideAll]="allowHideAll"
+                  (columnChange)="onChange($event)"
+                  >
+                </kendo-grid-columnlist>
+                @if (showCheckedCount) {
+                  <div class="k-filter-selected-items">
+                    {{selectedItemsText}}
+                  </div>
+                }
+                @if (!autoSync && !actionSheetOpened) {
+                  <div [ngClass]="actionsClass">
+                    <button
+                      #applyButton
+                      kendoButton
+                      type="button"
+                      icon="check"
+                      [svgIcon]="checkIcon"
+                      themeColor="primary"
+                      (click)="applyChanges()"
+                      (keydown)="onApplyButtonKeydown($event)"
+                    >{{ applyText }}</button>
+                    <button
+                      #resetButton
+                      kendoButton
+                      type="button"
+                      icon="reset"
+                      (keydown.tab)="columnList.onTab($event)"
+                      [svgIcon]="arrowRotateCcwIcon"
+                      (click)="cancelChanges()"
+                    >{{ resetText }}</button>
+                  </div>
+                }
+              </div>
             </form>
-    `,
+            `,
                     standalone: true,
-                    imports: [NgIf, NgClass, ButtonComponent, ColumnListComponent, TextBoxComponent, PrefixTemplateDirective, IconWrapperComponent, EventsOutsideAngularDirective]
+                    imports: [NgClass, ButtonComponent, ColumnListComponent, TextBoxComponent, PrefixTemplateDirective, IconWrapperComponent, EventsOutsideAngularDirective]
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ColumnInfoService, decorators: [{
                     type: Optional

package/esm2022/column-menu/column-list.component.mjs

@@ -7,7 +7,6 @@ import { ColumnMenuService } from './column-menu.service';
 import { ColumnListKeyboardNavigation } from './column-list-kb-nav.service';
 import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { Subscription } from 'rxjs';
-import { NgFor, NgIf } from '@angular/common';
 import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { take } from 'rxjs/operators';
 import { ContextService } from '../common/provider.service';
@@ -341,40 +340,42 @@ export class ColumnListComponent {
         this.listNavigationService.activeIndex = allLabels.indexOf(labelElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ColumnListKeyboardNavigation }, { token: i0.ChangeDetectorRef }, { token: i2.ColumnInfoService, optional: true }, { token: i3.AdaptiveGridService, optional: true }, { token: i4.ContextService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnListComponent, isStandalone: true, selector: "kendo-grid-columnlist", inputs: { columns: "columns", filteredColumns: "filteredColumns", autoSync: "autoSync", showSelectAll: "showSelectAll", isFiltered: "isFiltered", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", isLast: "isLast", isExpanded: "isExpanded", service: "service", filterable: "filterable" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className", "class.k-column-list-md": "this.listSizeMd", "class.k-column-list-lg": "this.listSizeLg" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-        <div 
-            class="k-column-list"
-            role="listbox"
-            aria-multiselectable="true"
-            [attr.aria-label]="ariaLabel">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColumnListComponent, isStandalone: true, selector: "kendo-grid-columnlist", inputs: { columns: "columns", filteredColumns: "filteredColumns", autoSync: "autoSync", showSelectAll: "showSelectAll", isFiltered: "isFiltered", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", isLast: "isLast", isExpanded: "isExpanded", service: "service", filterable: "filterable" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className", "class.k-column-list-md": "this.listSizeMd", "class.k-column-list-lg": "this.listSizeLg" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div
+          class="k-column-list"
+          role="listbox"
+          aria-multiselectable="true"
+          [attr.aria-label]="ariaLabel">
+          @if (showSelectAll) {
             <label
-                *ngIf="showSelectAll"
-                class='k-column-list-item'
-                role="option">
-                <kendo-checkbox
-                    #checkbox
-                    [inputAttributes]="{'data-index': '0'}"
-                    [tabindex]="-1"
-                    [checkedState]="checkedCheckboxesLength === columns.length"
-                    (checkedStateChange)="onSelectAllCheckboxChange($event)"
-                ></kendo-checkbox>
-                <span class="k-checkbox-label">{{ 'Select all' }}</span>
+              class='k-column-list-item'
+              role="option">
+              <kendo-checkbox
+                #checkbox
+                [inputAttributes]="{'data-index': '0'}"
+                [tabindex]="-1"
+                [checkedState]="checkedCheckboxesLength === columns.length"
+                (checkedStateChange)="onSelectAllCheckboxChange($event)"
+              ></kendo-checkbox>
+              <span class="k-checkbox-label">{{ 'Select all' }}</span>
             </label>
+          }
+          @for (column of filteredColumns; track column; let index = $index) {
             <label
-                *ngFor="let column of filteredColumns; let index = index;"
-                class='k-column-list-item'
-                role="option">
-                <kendo-checkbox
-                    #checkbox
-                    [inputAttributes]="{'data-index': index.toString()}"
-                    [tabindex]="-1"
-                    [checkedState]="column.currentlyChecked"
-                    (checkedStateChange)="onCheckboxChange($event, column, index)"
-                ></kendo-checkbox>
-                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
+              class='k-column-list-item'
+              role="option">
+              <kendo-checkbox
+                #checkbox
+                [inputAttributes]="{'data-index': index.toString()}"
+                [tabindex]="-1"
+                [checkedState]="column.currentlyChecked"
+                (checkedStateChange)="onCheckboxChange($event, column, index)"
+              ></kendo-checkbox>
+              <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
+          }
         </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"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
@@ -382,41 +383,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-grid-columnlist',
                     providers: [ColumnListKeyboardNavigation],
                     template: `
-        <div 
-            class="k-column-list"
-            role="listbox"
-            aria-multiselectable="true"
-            [attr.aria-label]="ariaLabel">
+        <div
+          class="k-column-list"
+          role="listbox"
+          aria-multiselectable="true"
+          [attr.aria-label]="ariaLabel">
+          @if (showSelectAll) {
             <label
-                *ngIf="showSelectAll"
-                class='k-column-list-item'
-                role="option">
-                <kendo-checkbox
-                    #checkbox
-                    [inputAttributes]="{'data-index': '0'}"
-                    [tabindex]="-1"
-                    [checkedState]="checkedCheckboxesLength === columns.length"
-                    (checkedStateChange)="onSelectAllCheckboxChange($event)"
-                ></kendo-checkbox>
-                <span class="k-checkbox-label">{{ 'Select all' }}</span>
+              class='k-column-list-item'
+              role="option">
+              <kendo-checkbox
+                #checkbox
+                [inputAttributes]="{'data-index': '0'}"
+                [tabindex]="-1"
+                [checkedState]="checkedCheckboxesLength === columns.length"
+                (checkedStateChange)="onSelectAllCheckboxChange($event)"
+              ></kendo-checkbox>
+              <span class="k-checkbox-label">{{ 'Select all' }}</span>
             </label>
+          }
+          @for (column of filteredColumns; track column; let index = $index) {
             <label
-                *ngFor="let column of filteredColumns; let index = index;"
-                class='k-column-list-item'
-                role="option">
-                <kendo-checkbox
-                    #checkbox
-                    [inputAttributes]="{'data-index': index.toString()}"
-                    [tabindex]="-1"
-                    [checkedState]="column.currentlyChecked"
-                    (checkedStateChange)="onCheckboxChange($event, column, index)"
-                ></kendo-checkbox>
-                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
+              class='k-column-list-item'
+              role="option">
+              <kendo-checkbox
+                #checkbox
+                [inputAttributes]="{'data-index': index.toString()}"
+                [tabindex]="-1"
+                [checkedState]="column.currentlyChecked"
+                (checkedStateChange)="onCheckboxChange($event, column, index)"
+              ></kendo-checkbox>
+              <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
+          }
         </div>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgFor, NgIf, CheckBoxComponent]
+                    imports: [CheckBoxComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ColumnListKeyboardNavigation }, { type: i0.ChangeDetectorRef }, { type: i2.ColumnInfoService, decorators: [{
                     type: Optional

package/esm2022/column-menu/column-menu-autosize-all.component.mjs

@@ -9,7 +9,6 @@ import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import { autoSizeColumn } from './utils';
 import { ColumnMenuItemComponent } from './column-menu-item.component';
-import { NgIf } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
 /**
@@ -59,30 +58,32 @@ export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
         autoSizeColumn(this.ctx.grid, this.service);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnMenuAutoSizeAllColumnsComponent, isStandalone: true, selector: "kendo-grid-columnmenu-autosize-all-columns", usesInheritance: true, ngImport: i0, template: `
-        <kendo-grid-columnmenu-item
-            *ngIf="!this.ctx.grid.virtualColumns"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColumnMenuAutoSizeAllColumnsComponent, isStandalone: true, selector: "kendo-grid-columnmenu-autosize-all-columns", usesInheritance: true, ngImport: i0, template: `
+        @if (!this.ctx.grid.virtualColumns) {
+          <kendo-grid-columnmenu-item
             [text]="ctx.localization.get('autosizeAllColumns')"
             icon="display-inline-flex"
             [svgIcon]="displayInlineFlexIcon"
             (itemClick)="autoSizeAllColumns()"
-        ></kendo-grid-columnmenu-item>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
+          ></kendo-grid-columnmenu-item>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-autosize-all-columns',
                     template: `
-        <kendo-grid-columnmenu-item
-            *ngIf="!this.ctx.grid.virtualColumns"
+        @if (!this.ctx.grid.virtualColumns) {
+          <kendo-grid-columnmenu-item
             [text]="ctx.localization.get('autosizeAllColumns')"
             icon="display-inline-flex"
             [svgIcon]="displayInlineFlexIcon"
             (itemClick)="autoSizeAllColumns()"
-        ></kendo-grid-columnmenu-item>
-    `,
+          ></kendo-grid-columnmenu-item>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, ColumnMenuItemComponent]
+                    imports: [ColumnMenuItemComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }] });

package/esm2022/column-menu/column-menu-autosize.component.mjs

@@ -9,7 +9,6 @@ import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import { autoSizeColumn } from './utils';
 import { ColumnMenuItemComponent } from './column-menu-item.component';
-import { NgIf } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
 /**
@@ -63,33 +62,35 @@ export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
         autoSizeColumn(this.ctx.grid, this.service, this.column);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnMenuAutoSizeColumnComponent, isStandalone: true, selector: "kendo-grid-columnmenu-autosize-column", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-grid-columnmenu-item
-            *ngIf="!this.ctx.grid.virtualColumns"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColumnMenuAutoSizeColumnComponent, isStandalone: true, selector: "kendo-grid-columnmenu-autosize-column", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: `
+        @if (!this.ctx.grid.virtualColumns) {
+          <kendo-grid-columnmenu-item
             class="k-grid-columnmenu-autosize-column"
             [text]="ctx.localization.get('autosizeThisColumn')"
             icon="max-width"
             [svgIcon]="maxWidthIcon"
             (itemClick)="autoSizeColumn()"
-        ></kendo-grid-columnmenu-item>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
+          ></kendo-grid-columnmenu-item>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-autosize-column',
                     template: `
-        <kendo-grid-columnmenu-item
-            *ngIf="!this.ctx.grid.virtualColumns"
+        @if (!this.ctx.grid.virtualColumns) {
+          <kendo-grid-columnmenu-item
             class="k-grid-columnmenu-autosize-column"
             [text]="ctx.localization.get('autosizeThisColumn')"
             icon="max-width"
             [svgIcon]="maxWidthIcon"
             (itemClick)="autoSizeColumn()"
-        ></kendo-grid-columnmenu-item>
-    `,
+          ></kendo-grid-columnmenu-item>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, ColumnMenuItemComponent]
+                    imports: [ColumnMenuItemComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }], propDecorators: { column: [{
                 type: Input