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

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter, QueryList, ViewChildren, ViewChild } from '@angular/core';
-import { NgFor, NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { take } from 'rxjs/operators';
 import { ColumnMenuChooserItemCheckedDirective } from './column-chooser-item-checked.directive';
@@ -244,44 +244,47 @@ export class ColumnListComponent {
         }
     };
     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 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnListComponent, isStandalone: true, selector: "kendo-treelist-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }, { 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">
-            <label 
-                *ngFor="let column of columns; let index = index;" 
-                class='k-column-list-item'
-                [kendoColumnMenuChooserItemChecked]="!column.hidden"
-                role="option">
-                <kendo-checkbox
-                    [inputAttributes]="{'data-index': index.toString()}"
-                    [checkedState]="!column.hidden"
-                    [disabled]="isDisabled(column)"
-                    [tabindex]="-1"
-                ></kendo-checkbox>
-                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColumnListComponent, isStandalone: true, selector: "kendo-treelist-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }, { 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">
+          @for (column of columns; track column; let index = $index) {
+            <label
+              class='k-column-list-item'
+              [kendoColumnMenuChooserItemChecked]="!column.hidden"
+              role="option">
+              <kendo-checkbox
+                [inputAttributes]="{'data-index': index.toString()}"
+                [checkedState]="!column.hidden"
+                [disabled]="isDisabled(column)"
+                [tabindex]="-1"
+              ></kendo-checkbox>
+              <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
+          }
         </div>
-        <div [ngClass]="actionsClass" *ngIf="!autoSync">
+        @if (!autoSync) {
+          <div [ngClass]="actionsClass">
             <button
-                #applyButton
-                type="button"
-                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                (click)="applyChanges()"
-                (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); applyChanges();"
-                (keydown.space)="$event.preventDefault(); $event.stopPropagation(); applyChanges();">{{ applyText }}</button>
+              #applyButton
+              type="button"
+              class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+              (click)="applyChanges()"
+              (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); applyChanges();"
+            (keydown.space)="$event.preventDefault(); $event.stopPropagation(); applyChanges();">{{ applyText }}</button>
             <button
-                #resetButton
-                type="button"
-                (keydown.tab)="onTab($event)"
-                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                (click)="cancelChanges()"
-                (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();"
-                (keydown.space)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();">{{ resetText }}</button>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: ["kendoColumnMenuChooserItemChecked"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
+              #resetButton
+              type="button"
+              (keydown.tab)="onTab($event)"
+              class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+              (click)="cancelChanges()"
+              (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();"
+            (keydown.space)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();">{{ resetText }}</button>
+          </div>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: ["kendoColumnMenuChooserItemChecked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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,
@@ -289,45 +292,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-treelist-columnlist',
                     providers: [ColumnListKeyboardNavigation],
                     template: `
-        <div 
-            class="k-column-list"
-            role="listbox"
-            aria-multiselectable="true"
-            [attr.aria-label]="ariaLabel">
-            <label 
-                *ngFor="let column of columns; let index = index;" 
-                class='k-column-list-item'
-                [kendoColumnMenuChooserItemChecked]="!column.hidden"
-                role="option">
-                <kendo-checkbox
-                    [inputAttributes]="{'data-index': index.toString()}"
-                    [checkedState]="!column.hidden"
-                    [disabled]="isDisabled(column)"
-                    [tabindex]="-1"
-                ></kendo-checkbox>
-                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
+        <div
+          class="k-column-list"
+          role="listbox"
+          aria-multiselectable="true"
+          [attr.aria-label]="ariaLabel">
+          @for (column of columns; track column; let index = $index) {
+            <label
+              class='k-column-list-item'
+              [kendoColumnMenuChooserItemChecked]="!column.hidden"
+              role="option">
+              <kendo-checkbox
+                [inputAttributes]="{'data-index': index.toString()}"
+                [checkedState]="!column.hidden"
+                [disabled]="isDisabled(column)"
+                [tabindex]="-1"
+              ></kendo-checkbox>
+              <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
+          }
         </div>
-        <div [ngClass]="actionsClass" *ngIf="!autoSync">
+        @if (!autoSync) {
+          <div [ngClass]="actionsClass">
             <button
-                #applyButton
-                type="button"
-                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                (click)="applyChanges()"
-                (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); applyChanges();"
-                (keydown.space)="$event.preventDefault(); $event.stopPropagation(); applyChanges();">{{ applyText }}</button>
+              #applyButton
+              type="button"
+              class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+              (click)="applyChanges()"
+              (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); applyChanges();"
+            (keydown.space)="$event.preventDefault(); $event.stopPropagation(); applyChanges();">{{ applyText }}</button>
             <button
-                #resetButton
-                type="button"
-                (keydown.tab)="onTab($event)"
-                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                (click)="cancelChanges()"
-                (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();"
-                (keydown.space)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();">{{ resetText }}</button>
-        </div>
-    `,
+              #resetButton
+              type="button"
+              (keydown.tab)="onTab($event)"
+              class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+              (click)="cancelChanges()"
+              (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();"
+            (keydown.space)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();">{{ resetText }}</button>
+          </div>
+        }
+        `,
                     standalone: true,
-                    imports: [NgFor, ColumnMenuChooserItemCheckedDirective, NgIf, NgClass, CheckBoxComponent]
+                    imports: [ColumnMenuChooserItemCheckedDirective, NgClass, CheckBoxComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ColumnListKeyboardNavigation }], propDecorators: { className: [{
                 type: HostBinding,

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";
 /**
@@ -48,30 +47,32 @@ export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
         autoSizeColumn(this.ctx.treelist, 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-treelist-columnmenu-autosize-all-columns", usesInheritance: true, ngImport: i0, template: `
-        <kendo-treelist-columnmenu-item
-            *ngIf="!this.ctx.treelist.virtualColumns"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColumnMenuAutoSizeAllColumnsComponent, isStandalone: true, selector: "kendo-treelist-columnmenu-autosize-all-columns", usesInheritance: true, ngImport: i0, template: `
+        @if (!this.ctx.treelist.virtualColumns) {
+          <kendo-treelist-columnmenu-item
             [text]="ctx.localization.get('autosizeAllColumns')"
             icon="display-inline-flex"
             [svgIcon]="displayInlineFlexIcon"
             (itemClick)="autoSizeAllColumns()"
-        ></kendo-treelist-columnmenu-item>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }] });
+          ></kendo-treelist-columnmenu-item>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-columnmenu-autosize-all-columns',
                     template: `
-        <kendo-treelist-columnmenu-item
-            *ngIf="!this.ctx.treelist.virtualColumns"
+        @if (!this.ctx.treelist.virtualColumns) {
+          <kendo-treelist-columnmenu-item
             [text]="ctx.localization.get('autosizeAllColumns')"
             icon="display-inline-flex"
             [svgIcon]="displayInlineFlexIcon"
             (itemClick)="autoSizeAllColumns()"
-        ></kendo-treelist-columnmenu-item>
-    `,
+          ></kendo-treelist-columnmenu-item>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, ColumnMenuItemComponent]
+                    imports: [ColumnMenuItemComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }] });

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

@@ -8,7 +8,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 { ColumnMenuErrorMessages } from '../common/error-messages';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
@@ -52,33 +51,35 @@ export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
         autoSizeColumn(this.ctx.treelist, 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-treelist-columnmenu-autosize-column", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-treelist-columnmenu-item
-            *ngIf="!this.ctx.treelist.virtualColumns"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColumnMenuAutoSizeColumnComponent, isStandalone: true, selector: "kendo-treelist-columnmenu-autosize-column", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: `
+        @if (!this.ctx.treelist.virtualColumns) {
+          <kendo-treelist-columnmenu-item
             class="k-grid-columnmenu-autosize-column"
             [text]="ctx.localization.get('autosizeThisColumn')"
             icon="max-width"
             [svgIcon]="maxWidthIcon"
             (itemClick)="autoSizeColumn()"
-        ></kendo-treelist-columnmenu-item>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }] });
+          ></kendo-treelist-columnmenu-item>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-columnmenu-autosize-column',
                     template: `
-        <kendo-treelist-columnmenu-item
-            *ngIf="!this.ctx.treelist.virtualColumns"
+        @if (!this.ctx.treelist.virtualColumns) {
+          <kendo-treelist-columnmenu-item
             class="k-grid-columnmenu-autosize-column"
             [text]="ctx.localization.get('autosizeThisColumn')"
             icon="max-width"
             [svgIcon]="maxWidthIcon"
             (itemClick)="autoSizeColumn()"
-        ></kendo-treelist-columnmenu-item>
-    `,
+          ></kendo-treelist-columnmenu-item>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, ColumnMenuItemComponent]
+                    imports: [ColumnMenuItemComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }], propDecorators: { column: [{
                 type: Input

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, Output, EventEmitter, ContentChild } from '@angular/core';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
@@ -104,39 +104,79 @@ export class ColumnMenuItemComponent {
         this.contentState = this.expanded ? 'expanded' : 'collapsed';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnMenuItemComponent, isStandalone: true, selector: "kendo-treelist-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded", service: "service" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-        <div *ngIf="contentTemplate; else content" class="k-expander">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColumnMenuItemComponent, isStandalone: true, selector: "kendo-treelist-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded", service: "service" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        @if (contentTemplate) {
+          <div class="k-expander">
             <ng-container [ngTemplateOutlet]="content"></ng-container>
-        </div>
-
-        <ng-template #content>
-            <div
-                class="k-columnmenu-item"
-                (click)="onClick($event)"
-                (keydown.enter)="onClick($event)"
-                [class.k-selected]="selected"
-                [class.k-disabled]="disabled"
-                role="button"
-                [attr.aria-expanded]="expanded"
-                [attr.aria-controls]="expanded ? contentId : undefined">
+          </div>
+        } @else {
+          <div
+            class="k-columnmenu-item"
+            (click)="onClick($event)"
+            (keydown.enter)="onClick($event)"
+            [class.k-selected]="selected"
+            [class.k-disabled]="disabled"
+            role="button"
+            [attr.aria-expanded]="expanded"
+            [attr.aria-controls]="expanded ? contentId : undefined">
+            <kendo-icon-wrapper
+              [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
+            {{ text }}
+            @if (contentTemplate) {
+              <span class="k-spacer"></span>
+            }
+            @if (contentTemplate) {
+              <span class="k-expander-indicator">
                 <kendo-icon-wrapper
-                    [name]="icon"
-                    [svgIcon]="svgIcon"></kendo-icon-wrapper>
-                {{ text }}
-                <span *ngIf="contentTemplate" class="k-spacer"></span>
-                <span *ngIf="contentTemplate" class="k-expander-indicator">
-                    <kendo-icon-wrapper
-                        [name]="expandedIcon"
-                        [svgIcon]="expandedSvgIcon">
-                    </kendo-icon-wrapper>
-                </span>
+                  [name]="expandedIcon"
+                  [svgIcon]="expandedSvgIcon">
+                </kendo-icon-wrapper>
+              </span>
+            }
+          </div>
+          @if (contentTemplate) {
+            <div [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+              <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
+              </ng-container>
             </div>
-            <div *ngIf="contentTemplate" [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
-                <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
-                </ng-container>
+          }
+        }
+        
+        <ng-template #content>
+          <div
+            class="k-columnmenu-item"
+            (click)="onClick($event)"
+            (keydown.enter)="onClick($event)"
+            [class.k-selected]="selected"
+            [class.k-disabled]="disabled"
+            role="button"
+            [attr.aria-expanded]="expanded"
+            [attr.aria-controls]="expanded ? contentId : undefined">
+            <kendo-icon-wrapper
+              [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
+            {{ text }}
+            @if (contentTemplate) {
+              <span class="k-spacer"></span>
+            }
+            @if (contentTemplate) {
+              <span class="k-expander-indicator">
+                <kendo-icon-wrapper
+                  [name]="expandedIcon"
+                  [svgIcon]="expandedSvgIcon">
+                </kendo-icon-wrapper>
+              </span>
+            }
+          </div>
+          @if (contentTemplate) {
+            <div [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+              <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
+              </ng-container>
             </div>
+          }
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             trigger('state', [
                 state('collapsed', style({ display: 'none' })),
                 state('expanded', style({ display: 'block' })),
@@ -188,40 +228,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     selector: 'kendo-treelist-columnmenu-item',
                     template: `
-        <div *ngIf="contentTemplate; else content" class="k-expander">
+        @if (contentTemplate) {
+          <div class="k-expander">
             <ng-container [ngTemplateOutlet]="content"></ng-container>
-        </div>
-
-        <ng-template #content>
-            <div
-                class="k-columnmenu-item"
-                (click)="onClick($event)"
-                (keydown.enter)="onClick($event)"
-                [class.k-selected]="selected"
-                [class.k-disabled]="disabled"
-                role="button"
-                [attr.aria-expanded]="expanded"
-                [attr.aria-controls]="expanded ? contentId : undefined">
+          </div>
+        } @else {
+          <div
+            class="k-columnmenu-item"
+            (click)="onClick($event)"
+            (keydown.enter)="onClick($event)"
+            [class.k-selected]="selected"
+            [class.k-disabled]="disabled"
+            role="button"
+            [attr.aria-expanded]="expanded"
+            [attr.aria-controls]="expanded ? contentId : undefined">
+            <kendo-icon-wrapper
+              [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
+            {{ text }}
+            @if (contentTemplate) {
+              <span class="k-spacer"></span>
+            }
+            @if (contentTemplate) {
+              <span class="k-expander-indicator">
                 <kendo-icon-wrapper
-                    [name]="icon"
-                    [svgIcon]="svgIcon"></kendo-icon-wrapper>
-                {{ text }}
-                <span *ngIf="contentTemplate" class="k-spacer"></span>
-                <span *ngIf="contentTemplate" class="k-expander-indicator">
-                    <kendo-icon-wrapper
-                        [name]="expandedIcon"
-                        [svgIcon]="expandedSvgIcon">
-                    </kendo-icon-wrapper>
-                </span>
+                  [name]="expandedIcon"
+                  [svgIcon]="expandedSvgIcon">
+                </kendo-icon-wrapper>
+              </span>
+            }
+          </div>
+          @if (contentTemplate) {
+            <div [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+              <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
+              </ng-container>
             </div>
-            <div *ngIf="contentTemplate" [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
-                <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
-                </ng-container>
+          }
+        }
+        
+        <ng-template #content>
+          <div
+            class="k-columnmenu-item"
+            (click)="onClick($event)"
+            (keydown.enter)="onClick($event)"
+            [class.k-selected]="selected"
+            [class.k-disabled]="disabled"
+            role="button"
+            [attr.aria-expanded]="expanded"
+            [attr.aria-controls]="expanded ? contentId : undefined">
+            <kendo-icon-wrapper
+              [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
+            {{ text }}
+            @if (contentTemplate) {
+              <span class="k-spacer"></span>
+            }
+            @if (contentTemplate) {
+              <span class="k-expander-indicator">
+                <kendo-icon-wrapper
+                  [name]="expandedIcon"
+                  [svgIcon]="expandedSvgIcon">
+                </kendo-icon-wrapper>
+              </span>
+            }
+          </div>
+          @if (contentTemplate) {
+            <div [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+              <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
+              </ng-container>
             </div>
+          }
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [IconWrapperComponent, NgIf, NgTemplateOutlet]
+                    imports: [IconWrapperComponent, NgTemplateOutlet]
                 }]
         }], propDecorators: { itemClick: [{
                 type: Output