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

package/fesm2022/progress-kendo-angular-treeview.mjs

@@ -14,7 +14,7 @@ import { caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, searchIcon, canc
 import { CheckBoxComponent, TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { filter, tap, switchMap, delay, takeUntil, catchError, finalize, take, map } from 'rxjs/operators';
-import { NgFor, NgClass, NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import { Draggable } from '@progress/kendo-draggable';
 import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
@@ -28,8 +28,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763729083,
-    version: '21.1.1-develop.2',
+    publishDate: 1764002161,
+    version: '21.2.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1721,9 +1721,9 @@ class TreeViewGroupComponent {
         this.emitChildrenLoaded(mappedChildren);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeViewGroupComponent, deps: [{ token: ExpandStateService }, { token: LoadingNotificationService }, { token: IndexBuilderService }, { token: TreeViewLookupService }, { token: NavigationService }, { token: NodeChildrenService }, { token: DataChangeNotificationService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TreeViewGroupComponent, isStandalone: true, selector: "[kendoTreeViewGroup]", inputs: { checkboxes: "checkboxes", expandIcons: "expandIcons", disabled: "disabled", selectable: "selectable", touchActions: "touchActions", disableParentNodesOnly: "disableParentNodesOnly", loadOnDemand: "loadOnDemand", trackBy: "trackBy", nodes: "nodes", textField: "textField", parentDataItem: "parentDataItem", parentIndex: "parentIndex", nodeTemplateRef: "nodeTemplateRef", loadMoreButtonTemplateRef: "loadMoreButtonTemplateRef", loadMoreService: "loadMoreService", size: "size", expandDisabledNodes: "expandDisabledNodes", isChecked: "isChecked", isDisabled: "isDisabled", hasCheckbox: "hasCheckbox", isExpanded: "isExpanded", isVisible: "isVisible", isSelected: "isSelected", children: "children", hasChildren: "hasChildren" }, host: { properties: { "class.k-treeview-group": "this.kGroupClass", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: `
-        <li
-            *ngFor="let node of data; let index = index; trackBy: trackBy"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TreeViewGroupComponent, isStandalone: true, selector: "[kendoTreeViewGroup]", inputs: { checkboxes: "checkboxes", expandIcons: "expandIcons", disabled: "disabled", selectable: "selectable", touchActions: "touchActions", disableParentNodesOnly: "disableParentNodesOnly", loadOnDemand: "loadOnDemand", trackBy: "trackBy", nodes: "nodes", textField: "textField", parentDataItem: "parentDataItem", parentIndex: "parentIndex", nodeTemplateRef: "nodeTemplateRef", loadMoreButtonTemplateRef: "loadMoreButtonTemplateRef", loadMoreService: "loadMoreService", size: "size", expandDisabledNodes: "expandDisabledNodes", isChecked: "isChecked", isDisabled: "isDisabled", hasCheckbox: "hasCheckbox", isExpanded: "isExpanded", isVisible: "isVisible", isSelected: "isSelected", children: "children", hasChildren: "hasChildren" }, host: { properties: { "class.k-treeview-group": "this.kGroupClass", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: `
+        @for (node of data; track trackBy ? trackBy(index, node) : index; let index = $index) {
+          <li
             class="k-treeview-item"
             [class.k-hidden]="!isVisible(node, nodeIndex(index))"
             kendoTreeViewItem
@@ -1742,62 +1742,64 @@ class TreeViewGroupComponent {
             [selectable]="selectable"
             [isSelected]="isSelected(node, nodeIndex(index))"
             [attr.data-treeindex]="nodeIndex(index)"
-        >
+            >
             <div [ngClass]="setItemClasses(data.length, index)">
+              @if (expandIcons && hasChildren(node)) {
                 <span
-                    [class.k-disabled]="!isItemExpandable(node, index)"
-                    class="k-treeview-toggle"
-                    [kendoTreeViewLoading]="nodeIndex(index)"
-                    (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
-                    *ngIf="expandIcons && hasChildren(node)"
-                >
-                    <kendo-icon-wrapper
-                        [name]="getFontIcon(node, nodeIndex(index))"
-                        [svgIcon]="getSvgIcon(node, nodeIndex(index))">
-                    </kendo-icon-wrapper>
+                  [class.k-disabled]="!isItemExpandable(node, index)"
+                  class="k-treeview-toggle"
+                  [kendoTreeViewLoading]="nodeIndex(index)"
+                  (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
+                  >
+                  <kendo-icon-wrapper
+                    [name]="getFontIcon(node, nodeIndex(index))"
+                    [svgIcon]="getSvgIcon(node, nodeIndex(index))">
+                  </kendo-icon-wrapper>
                 </span>
+              }
+              @if (checkboxes && hasCheckbox(node, nodeIndex(index))) {
                 <kendo-checkbox
-                    #checkbox
-                    *ngIf="checkboxes && hasCheckbox(node, nodeIndex(index))"
-                    [disabled]="isItemDisabled(node, index)"
-                    [size]="size"
-                    [checkedState]="getCheckBoxState(node, nodeIndex(index))"
-                    (checkedStateChange)="checkNode(nodeIndex(index), checkbox)"
-                    [tabindex]="-1"
-                    [inputAttributes]="getCheckboxAttributes(index)"
+                  #checkbox
+                  [disabled]="isItemDisabled(node, index)"
+                  [size]="size"
+                  [checkedState]="getCheckBoxState(node, nodeIndex(index))"
+                  (checkedStateChange)="checkNode(nodeIndex(index), checkbox)"
+                  [tabindex]="-1"
+                  [inputAttributes]="getCheckboxAttributes(index)"
                 ></kendo-checkbox>
-                <span kendoTreeViewItemContent
-                    [id]="nodeIndex(index)"
-                    [attr.data-treeindex]="nodeIndex(index)"
-                    [dataItem]="node"
-                    [index]="nodeIndex(index)"
-                    [initialSelection]="isSelected(node, nodeIndex(index))"
-                    [isSelected]="isSelected"
-                    class="k-treeview-leaf"
-                    [style.touch-action]="touchActions ? '' : 'none'"
-                    [class.k-disabled]="isItemDisabled(node, index)"
+              }
+              <span kendoTreeViewItemContent
+                [id]="nodeIndex(index)"
+                [attr.data-treeindex]="nodeIndex(index)"
+                [dataItem]="node"
+                [index]="nodeIndex(index)"
+                [initialSelection]="isSelected(node, nodeIndex(index))"
+                [isSelected]="isSelected"
+                class="k-treeview-leaf"
+                [style.touch-action]="touchActions ? '' : 'none'"
+                [class.k-disabled]="isItemDisabled(node, index)"
                 >
-                    <span class="k-treeview-leaf-text">
-                        <ng-container [ngSwitch]="hasTemplate">
-                            <ng-container *ngSwitchCase="true">
-                                <ng-template
-                                    [ngTemplateOutlet]="nodeTemplateRef"
+                <span class="k-treeview-leaf-text">
+                  @switch (hasTemplate) {
+                    @case (true) {
+                      <ng-template
+                        [ngTemplateOutlet]="nodeTemplateRef"
                                     [ngTemplateOutletContext]="{
                                         $implicit: node,
                                         index: nodeIndex(index)
                                     }"
-                                >
-                                </ng-template>
-                            </ng-container>
-                            <ng-container *ngSwitchDefault>
-                                {{nodeText(node)}}
-                            </ng-container>
-                        </ng-container>
-                    </span>
+                        >
+                      </ng-template>
+                    }
+                    @default {
+                      {{nodeText(node)}}
+                    }
+                  }
                 </span>
+              </span>
             </div>
-            <ul
-                *ngIf="isExpanded(node, nodeIndex(index)) && hasChildren(node)"
+            @if (isExpanded(node, nodeIndex(index)) && hasChildren(node)) {
+              <ul
                 kendoTreeViewGroup
                 role="group"
                 [size]="size"
@@ -1826,11 +1828,13 @@ class TreeViewGroupComponent {
                 [@toggle]="true"
                 [trackBy]="trackBy"
                 [disableParentNodesOnly]="disableParentNodesOnly"
-            >
-            </ul>
-        </li>
-        <li
-            *ngIf="initialNodesLoaded && moreNodesAvailable"
+                >
+              </ul>
+            }
+          </li>
+        }
+        @if (initialNodesLoaded && moreNodesAvailable) {
+          <li
             class="k-treeview-item"
             [class.k-treeview-load-more-checkboxes-container]="checkboxes"
             kendoTreeViewItem
@@ -1842,36 +1846,39 @@ class TreeViewGroupComponent {
             [parentDataItem]="parentDataItem"
             [parentIndex]="parentIndex"
             [attr.data-treeindex]="loadMoreButtonIndex"
-        >
+            >
             <div class="k-treeview-bot">
+              @if (loadingMoreNodes) {
                 <span
-                    *ngIf="loadingMoreNodes"
-                    class="k-icon k-i-loading"
-                >
+                  class="k-icon k-i-loading"
+                  >
                 </span>
-                <span
-                    class="k-treeview-leaf k-treeview-load-more-button"
-                    [attr.data-treeindex]="loadMoreButtonIndex"
-                    kendoTreeViewItemContent
-                    [index]="loadMoreButtonIndex"
+              }
+              <span
+                class="k-treeview-leaf k-treeview-load-more-button"
+                [attr.data-treeindex]="loadMoreButtonIndex"
+                kendoTreeViewItemContent
+                [index]="loadMoreButtonIndex"
                 >
-                    <span class="k-treeview-leaf-text">
-                        <ng-template
-                            *ngIf="loadMoreButtonTemplateRef"
-                            [ngTemplateOutlet]="loadMoreButtonTemplateRef"
+                <span class="k-treeview-leaf-text">
+                  @if (loadMoreButtonTemplateRef) {
+                    <ng-template
+                      [ngTemplateOutlet]="loadMoreButtonTemplateRef"
                             [ngTemplateOutletContext]="{
                                 index: loadMoreButtonIndex
                             }"
-                        >
-                        </ng-template>
-                        <ng-container *ngIf="!loadMoreButtonTemplateRef">
-                            {{ loadMoreTitle }}
-                        </ng-container>
-                    </span>
+                      >
+                    </ng-template>
+                  }
+                  @if (!loadMoreButtonTemplateRef) {
+                    {{ loadMoreTitle }}
+                  }
                 </span>
+              </span>
             </div>
-        </li>
-    `, isInline: true, dependencies: [{ kind: "component", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
+          </li>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }, { kind: "directive", type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             trigger('toggle', [
                 transition('void => *', [
                     style({ height: 0 }),
@@ -1902,8 +1909,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     // eslint-disable-next-line
                     selector: '[kendoTreeViewGroup]',
                     template: `
-        <li
-            *ngFor="let node of data; let index = index; trackBy: trackBy"
+        @for (node of data; track trackBy ? trackBy(index, node) : index; let index = $index) {
+          <li
             class="k-treeview-item"
             [class.k-hidden]="!isVisible(node, nodeIndex(index))"
             kendoTreeViewItem
@@ -1922,62 +1929,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [selectable]="selectable"
             [isSelected]="isSelected(node, nodeIndex(index))"
             [attr.data-treeindex]="nodeIndex(index)"
-        >
+            >
             <div [ngClass]="setItemClasses(data.length, index)">
+              @if (expandIcons && hasChildren(node)) {
                 <span
-                    [class.k-disabled]="!isItemExpandable(node, index)"
-                    class="k-treeview-toggle"
-                    [kendoTreeViewLoading]="nodeIndex(index)"
-                    (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
-                    *ngIf="expandIcons && hasChildren(node)"
-                >
-                    <kendo-icon-wrapper
-                        [name]="getFontIcon(node, nodeIndex(index))"
-                        [svgIcon]="getSvgIcon(node, nodeIndex(index))">
-                    </kendo-icon-wrapper>
+                  [class.k-disabled]="!isItemExpandable(node, index)"
+                  class="k-treeview-toggle"
+                  [kendoTreeViewLoading]="nodeIndex(index)"
+                  (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
+                  >
+                  <kendo-icon-wrapper
+                    [name]="getFontIcon(node, nodeIndex(index))"
+                    [svgIcon]="getSvgIcon(node, nodeIndex(index))">
+                  </kendo-icon-wrapper>
                 </span>
+              }
+              @if (checkboxes && hasCheckbox(node, nodeIndex(index))) {
                 <kendo-checkbox
-                    #checkbox
-                    *ngIf="checkboxes && hasCheckbox(node, nodeIndex(index))"
-                    [disabled]="isItemDisabled(node, index)"
-                    [size]="size"
-                    [checkedState]="getCheckBoxState(node, nodeIndex(index))"
-                    (checkedStateChange)="checkNode(nodeIndex(index), checkbox)"
-                    [tabindex]="-1"
-                    [inputAttributes]="getCheckboxAttributes(index)"
+                  #checkbox
+                  [disabled]="isItemDisabled(node, index)"
+                  [size]="size"
+                  [checkedState]="getCheckBoxState(node, nodeIndex(index))"
+                  (checkedStateChange)="checkNode(nodeIndex(index), checkbox)"
+                  [tabindex]="-1"
+                  [inputAttributes]="getCheckboxAttributes(index)"
                 ></kendo-checkbox>
-                <span kendoTreeViewItemContent
-                    [id]="nodeIndex(index)"
-                    [attr.data-treeindex]="nodeIndex(index)"
-                    [dataItem]="node"
-                    [index]="nodeIndex(index)"
-                    [initialSelection]="isSelected(node, nodeIndex(index))"
-                    [isSelected]="isSelected"
-                    class="k-treeview-leaf"
-                    [style.touch-action]="touchActions ? '' : 'none'"
-                    [class.k-disabled]="isItemDisabled(node, index)"
+              }
+              <span kendoTreeViewItemContent
+                [id]="nodeIndex(index)"
+                [attr.data-treeindex]="nodeIndex(index)"
+                [dataItem]="node"
+                [index]="nodeIndex(index)"
+                [initialSelection]="isSelected(node, nodeIndex(index))"
+                [isSelected]="isSelected"
+                class="k-treeview-leaf"
+                [style.touch-action]="touchActions ? '' : 'none'"
+                [class.k-disabled]="isItemDisabled(node, index)"
                 >
-                    <span class="k-treeview-leaf-text">
-                        <ng-container [ngSwitch]="hasTemplate">
-                            <ng-container *ngSwitchCase="true">
-                                <ng-template
-                                    [ngTemplateOutlet]="nodeTemplateRef"
+                <span class="k-treeview-leaf-text">
+                  @switch (hasTemplate) {
+                    @case (true) {
+                      <ng-template
+                        [ngTemplateOutlet]="nodeTemplateRef"
                                     [ngTemplateOutletContext]="{
                                         $implicit: node,
                                         index: nodeIndex(index)
                                     }"
-                                >
-                                </ng-template>
-                            </ng-container>
-                            <ng-container *ngSwitchDefault>
-                                {{nodeText(node)}}
-                            </ng-container>
-                        </ng-container>
-                    </span>
+                        >
+                      </ng-template>
+                    }
+                    @default {
+                      {{nodeText(node)}}
+                    }
+                  }
                 </span>
+              </span>
             </div>
-            <ul
-                *ngIf="isExpanded(node, nodeIndex(index)) && hasChildren(node)"
+            @if (isExpanded(node, nodeIndex(index)) && hasChildren(node)) {
+              <ul
                 kendoTreeViewGroup
                 role="group"
                 [size]="size"
@@ -2006,11 +2015,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [@toggle]="true"
                 [trackBy]="trackBy"
                 [disableParentNodesOnly]="disableParentNodesOnly"
-            >
-            </ul>
-        </li>
-        <li
-            *ngIf="initialNodesLoaded && moreNodesAvailable"
+                >
+              </ul>
+            }
+          </li>
+        }
+        @if (initialNodesLoaded && moreNodesAvailable) {
+          <li
             class="k-treeview-item"
             [class.k-treeview-load-more-checkboxes-container]="checkboxes"
             kendoTreeViewItem
@@ -2022,38 +2033,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [parentDataItem]="parentDataItem"
             [parentIndex]="parentIndex"
             [attr.data-treeindex]="loadMoreButtonIndex"
-        >
+            >
             <div class="k-treeview-bot">
+              @if (loadingMoreNodes) {
                 <span
-                    *ngIf="loadingMoreNodes"
-                    class="k-icon k-i-loading"
-                >
+                  class="k-icon k-i-loading"
+                  >
                 </span>
-                <span
-                    class="k-treeview-leaf k-treeview-load-more-button"
-                    [attr.data-treeindex]="loadMoreButtonIndex"
-                    kendoTreeViewItemContent
-                    [index]="loadMoreButtonIndex"
+              }
+              <span
+                class="k-treeview-leaf k-treeview-load-more-button"
+                [attr.data-treeindex]="loadMoreButtonIndex"
+                kendoTreeViewItemContent
+                [index]="loadMoreButtonIndex"
                 >
-                    <span class="k-treeview-leaf-text">
-                        <ng-template
-                            *ngIf="loadMoreButtonTemplateRef"
-                            [ngTemplateOutlet]="loadMoreButtonTemplateRef"
+                <span class="k-treeview-leaf-text">
+                  @if (loadMoreButtonTemplateRef) {
+                    <ng-template
+                      [ngTemplateOutlet]="loadMoreButtonTemplateRef"
                             [ngTemplateOutletContext]="{
                                 index: loadMoreButtonIndex
                             }"
-                        >
-                        </ng-template>
-                        <ng-container *ngIf="!loadMoreButtonTemplateRef">
-                            {{ loadMoreTitle }}
-                        </ng-container>
-                    </span>
+                      >
+                    </ng-template>
+                  }
+                  @if (!loadMoreButtonTemplateRef) {
+                    {{ loadMoreTitle }}
+                  }
                 </span>
+              </span>
             </div>
-        </li>
-    `,
+          </li>
+        }
+        `,
                     standalone: true,
-                    imports: [NgFor, TreeViewItemDirective, NgClass, NgIf, LoadingIndicatorDirective, IconWrapperComponent, CheckBoxComponent, TreeViewItemContentDirective, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgSwitchDefault]
+                    imports: [TreeViewItemDirective, NgClass, LoadingIndicatorDirective, IconWrapperComponent, CheckBoxComponent, TreeViewItemContentDirective, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: ExpandStateService }, { type: LoadingNotificationService }, { type: IndexBuilderService }, { type: TreeViewLookupService }, { type: NavigationService }, { type: NodeChildrenService }, { type: DataChangeNotificationService }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.Renderer2 }], propDecorators: { kGroupClass: [{
                 type: HostBinding,
@@ -2769,64 +2783,65 @@ class TreeViewComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ExpandStateService }, { token: NavigationService }, { token: NodeChildrenService }, { token: SelectionService }, { token: TreeViewLookupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: DataChangeNotificationService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TreeViewComponent, isStandalone: true, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", hasCheckbox: "hasCheckbox", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size", disableParentNodesOnly: "disableParentNodesOnly" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbox", first: true, predicate: ["searchbox"], descendants: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TreeViewComponent, isStandalone: true, selector: "kendo-treeview", inputs: { filterInputPlaceholder: "filterInputPlaceholder", expandDisabledNodes: "expandDisabledNodes", animate: "animate", nodeTemplateRef: ["nodeTemplate", "nodeTemplateRef"], loadMoreButtonTemplateRef: ["loadMoreButtonTemplate", "loadMoreButtonTemplateRef"], trackBy: "trackBy", nodes: "nodes", textField: "textField", hasChildren: "hasChildren", isChecked: "isChecked", isDisabled: "isDisabled", hasCheckbox: "hasCheckbox", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", navigable: "navigable", children: "children", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", size: "size", disableParentNodesOnly: "disableParentNodesOnly" }, outputs: { childrenLoaded: "childrenLoaded", onBlur: "blur", onFocus: "focus", expand: "expand", collapse: "collapse", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", filterStateChange: "filterStateChange", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", checkedChange: "checkedChange", selectionChange: "selectionChange", filterChange: "filterChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick" }, host: { properties: { "class.k-treeview": "this.classNames", "attr.dir": "this.direction", "@.disabled": "this.animate" } }, providers: providers, queries: [{ propertyName: "nodeTemplateQuery", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "loadMoreButtonTemplateQuery", first: true, predicate: LoadMoreButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "assetsContainer", first: true, predicate: ["assetsContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbox", first: true, predicate: ["searchbox"], descendants: true }], exportAs: ["kendoTreeView"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTreeViewLocalizedMessages
-            i18n-loadMore="kendo.treeview.loadMore|The title of the Load More button"
-            loadMore="Load more..."
-        >
+          i18n-loadMore="kendo.treeview.loadMore|The title of the Load More button"
+          loadMore="Load more..."
+          >
         </ng-container>
-        <span
+        @if (filterable) {
+          <span
             class="k-treeview-filter"
-            *ngIf="filterable"
-        >
-            <kendo-textbox
-                #searchbox
-                [size]="size"
-                [value]="filter"
-                [clearButton]="true"
-                (valueChange)="filterChange.emit($event)"
-                [placeholder]="filterInputPlaceholder"
             >
-                <ng-template kendoTextBoxPrefixTemplate>
-                    <kendo-icon-wrapper
-                        innerCssClass="k-input-icon"
-                        name="search"
-                        [svgIcon]="searchIcon"
-                        >
-                    </kendo-icon-wrapper>
-                </ng-template>
+            <kendo-textbox
+              #searchbox
+              [size]="size"
+              [value]="filter"
+              [clearButton]="true"
+              (valueChange)="filterChange.emit($event)"
+              [placeholder]="filterInputPlaceholder"
+              >
+              <ng-template kendoTextBoxPrefixTemplate>
+                <kendo-icon-wrapper
+                  innerCssClass="k-input-icon"
+                  name="search"
+                  [svgIcon]="searchIcon"
+                  >
+                </kendo-icon-wrapper>
+              </ng-template>
             </kendo-textbox>
-        </span>
+          </span>
+        }
         <ul class="k-treeview-lines"
-            kendoTreeViewGroup
-            [attr.id]="treeviewId"
-            role="tree"
-            [size]="size"
-            [loadOnDemand]="loadOnDemand"
-            [checkboxes]="checkboxes"
-            [expandIcons]="expandIcons"
-            [selectable]="selectable"
-            [touchActions]="touchActions"
-            [children]="children"
-            [hasChildren]="hasChildren"
-            [isChecked]="isChecked"
-            [isDisabled]="isDisabled"
-            [hasCheckbox]="hasCheckbox"
-            [disableParentNodesOnly]="disableParentNodesOnly"
-            [isExpanded]="isExpanded"
-            [isSelected]="isSelected"
-            [isVisible]="isVisible"
-            [nodeTemplateRef]="nodeTemplateRef?.templateRef"
-            [loadMoreButtonTemplateRef]="loadMoreButtonTemplateRef?.templateRef"
-            [textField]="textField"
-            [nodes]="fetchNodes"
-            [loadMoreService]="loadMoreService"
-            [trackBy]="trackBy"
-            [expandDisabledNodes]="expandDisabledNodes"
-        >
+          kendoTreeViewGroup
+          [attr.id]="treeviewId"
+          role="tree"
+          [size]="size"
+          [loadOnDemand]="loadOnDemand"
+          [checkboxes]="checkboxes"
+          [expandIcons]="expandIcons"
+          [selectable]="selectable"
+          [touchActions]="touchActions"
+          [children]="children"
+          [hasChildren]="hasChildren"
+          [isChecked]="isChecked"
+          [isDisabled]="isDisabled"
+          [hasCheckbox]="hasCheckbox"
+          [disableParentNodesOnly]="disableParentNodesOnly"
+          [isExpanded]="isExpanded"
+          [isSelected]="isSelected"
+          [isVisible]="isVisible"
+          [nodeTemplateRef]="nodeTemplateRef?.templateRef"
+          [loadMoreButtonTemplateRef]="loadMoreButtonTemplateRef?.templateRef"
+          [textField]="textField"
+          [nodes]="fetchNodes"
+          [loadMoreService]="loadMoreService"
+          [trackBy]="trackBy"
+          [expandDisabledNodes]="expandDisabledNodes"
+          >
         </ul>
         <ng-container #assetsContainer></ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTreeViewLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTreeViewLocalizedMessages]" }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
@@ -2837,64 +2852,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-treeview',
                     template: `
         <ng-container kendoTreeViewLocalizedMessages
-            i18n-loadMore="kendo.treeview.loadMore|The title of the Load More button"
-            loadMore="Load more..."
-        >
+          i18n-loadMore="kendo.treeview.loadMore|The title of the Load More button"
+          loadMore="Load more..."
+          >
         </ng-container>
-        <span
+        @if (filterable) {
+          <span
             class="k-treeview-filter"
-            *ngIf="filterable"
-        >
-            <kendo-textbox
-                #searchbox
-                [size]="size"
-                [value]="filter"
-                [clearButton]="true"
-                (valueChange)="filterChange.emit($event)"
-                [placeholder]="filterInputPlaceholder"
             >
-                <ng-template kendoTextBoxPrefixTemplate>
-                    <kendo-icon-wrapper
-                        innerCssClass="k-input-icon"
-                        name="search"
-                        [svgIcon]="searchIcon"
-                        >
-                    </kendo-icon-wrapper>
-                </ng-template>
+            <kendo-textbox
+              #searchbox
+              [size]="size"
+              [value]="filter"
+              [clearButton]="true"
+              (valueChange)="filterChange.emit($event)"
+              [placeholder]="filterInputPlaceholder"
+              >
+              <ng-template kendoTextBoxPrefixTemplate>
+                <kendo-icon-wrapper
+                  innerCssClass="k-input-icon"
+                  name="search"
+                  [svgIcon]="searchIcon"
+                  >
+                </kendo-icon-wrapper>
+              </ng-template>
             </kendo-textbox>
-        </span>
+          </span>
+        }
         <ul class="k-treeview-lines"
-            kendoTreeViewGroup
-            [attr.id]="treeviewId"
-            role="tree"
-            [size]="size"
-            [loadOnDemand]="loadOnDemand"
-            [checkboxes]="checkboxes"
-            [expandIcons]="expandIcons"
-            [selectable]="selectable"
-            [touchActions]="touchActions"
-            [children]="children"
-            [hasChildren]="hasChildren"
-            [isChecked]="isChecked"
-            [isDisabled]="isDisabled"
-            [hasCheckbox]="hasCheckbox"
-            [disableParentNodesOnly]="disableParentNodesOnly"
-            [isExpanded]="isExpanded"
-            [isSelected]="isSelected"
-            [isVisible]="isVisible"
-            [nodeTemplateRef]="nodeTemplateRef?.templateRef"
-            [loadMoreButtonTemplateRef]="loadMoreButtonTemplateRef?.templateRef"
-            [textField]="textField"
-            [nodes]="fetchNodes"
-            [loadMoreService]="loadMoreService"
-            [trackBy]="trackBy"
-            [expandDisabledNodes]="expandDisabledNodes"
-        >
+          kendoTreeViewGroup
+          [attr.id]="treeviewId"
+          role="tree"
+          [size]="size"
+          [loadOnDemand]="loadOnDemand"
+          [checkboxes]="checkboxes"
+          [expandIcons]="expandIcons"
+          [selectable]="selectable"
+          [touchActions]="touchActions"
+          [children]="children"
+          [hasChildren]="hasChildren"
+          [isChecked]="isChecked"
+          [isDisabled]="isDisabled"
+          [hasCheckbox]="hasCheckbox"
+          [disableParentNodesOnly]="disableParentNodesOnly"
+          [isExpanded]="isExpanded"
+          [isSelected]="isSelected"
+          [isVisible]="isVisible"
+          [nodeTemplateRef]="nodeTemplateRef?.templateRef"
+          [loadMoreButtonTemplateRef]="loadMoreButtonTemplateRef?.templateRef"
+          [textField]="textField"
+          [nodes]="fetchNodes"
+          [loadMoreService]="loadMoreService"
+          [trackBy]="trackBy"
+          [expandDisabledNodes]="expandDisabledNodes"
+          >
         </ul>
         <ng-container #assetsContainer></ng-container>
-    `,
+        `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgIf, TextBoxComponent, TextBoxPrefixTemplateDirective, IconWrapperComponent, TreeViewGroupComponent]
+                    imports: [LocalizedMessagesDirective, TextBoxComponent, TextBoxPrefixTemplateDirective, IconWrapperComponent, TreeViewGroupComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ExpandStateService }, { type: NavigationService }, { type: NodeChildrenService }, { type: SelectionService }, { type: TreeViewLookupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: DataChangeNotificationService }, { type: i1.LocalizationService }], propDecorators: { classNames: [{
                 type: HostBinding,
@@ -3693,19 +3709,19 @@ class DragClueComponent {
         this.cdr.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DragClueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DragClueComponent, isStandalone: true, selector: "kendo-treeview-drag-clue", host: { properties: { "class.k-header": "this.hostClasses", "class.k-drag-clue": "this.hostClasses", "style.position": "this.posistionStyle" } }, ngImport: i0, template: `
-        <ng-container *ngIf="!template">
-            <kendo-icon-wrapper
-                innerCssClass="k-drag-status"
-                [name]="statusIconClass"
-                [svgIcon]="statusSVGIcon"
-                >
-            </kendo-icon-wrapper>
-            <span>{{text}}</span>
-        </ng-container>
-
-        <ng-template
-            *ngIf="template"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DragClueComponent, isStandalone: true, selector: "kendo-treeview-drag-clue", host: { properties: { "class.k-header": "this.hostClasses", "class.k-drag-clue": "this.hostClasses", "style.position": "this.posistionStyle" } }, ngImport: i0, template: `
+        @if (!template) {
+          <kendo-icon-wrapper
+            innerCssClass="k-drag-status"
+            [name]="statusIconClass"
+            [svgIcon]="statusSVGIcon"
+            >
+          </kendo-icon-wrapper>
+          <span>{{text}}</span>
+        }
+        
+        @if (template) {
+          <ng-template
             [ngTemplateOutlet]="template"
             [ngTemplateOutletContext]="{
                 text: text,
@@ -3713,9 +3729,10 @@ class DragClueComponent {
                 sourceItem: sourceItem,
                 destinationItem: destinationItem
             }"
-        >
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            >
+          </ng-template>
+        }
+        `, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DragClueComponent, decorators: [{
             type: Component,
@@ -3723,18 +3740,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-treeview-drag-clue',
                     template: `
-        <ng-container *ngIf="!template">
-            <kendo-icon-wrapper
-                innerCssClass="k-drag-status"
-                [name]="statusIconClass"
-                [svgIcon]="statusSVGIcon"
-                >
-            </kendo-icon-wrapper>
-            <span>{{text}}</span>
-        </ng-container>
-
-        <ng-template
-            *ngIf="template"
+        @if (!template) {
+          <kendo-icon-wrapper
+            innerCssClass="k-drag-status"
+            [name]="statusIconClass"
+            [svgIcon]="statusSVGIcon"
+            >
+          </kendo-icon-wrapper>
+          <span>{{text}}</span>
+        }
+        
+        @if (template) {
+          <ng-template
             [ngTemplateOutlet]="template"
             [ngTemplateOutletContext]="{
                 text: text,
@@ -3742,11 +3759,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 sourceItem: sourceItem,
                 destinationItem: destinationItem
             }"
-        >
-        </ng-template>
-    `,
+            >
+          </ng-template>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgTemplateOutlet]
+                    imports: [IconWrapperComponent, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -4210,26 +4228,28 @@ class DropHintComponent {
         this.changeDetectorRef.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropHintComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropHintComponent, isStandalone: true, selector: "kendo-treeview-drop-hint", host: { properties: { "class.k-drop-hint-container": "this.hostClass", "style.position": "this.position", "style.pointer-events": "this.pointerEvents" } }, ngImport: i0, template: `
-        <div
-            *ngIf="!template"
-            class="k-drop-hint k-drop-hint-h"
-        >
-            <div class='k-drop-hint-start'></div>
-            <div class='k-drop-hint-line'></div>
-        </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DropHintComponent, isStandalone: true, selector: "kendo-treeview-drop-hint", host: { properties: { "class.k-drop-hint-container": "this.hostClass", "style.position": "this.position", "style.pointer-events": "this.pointerEvents" } }, ngImport: i0, template: `
+        @if (!template) {
+          <div
+              class="k-drop-hint k-drop-hint-h"
+          >
+              <div class='k-drop-hint-start'></div>
+              <div class='k-drop-hint-line'></div>
+          </div>
+        }
 
-        <ng-template
-            *ngIf="template"
-            [ngTemplateOutlet]="template"
-            [ngTemplateOutletContext]="{
-                action: action,
-                sourceItem: sourceItem,
-                destinationItem: destinationItem
-            }"
-        >
-        <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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        @if (template) {
+          <ng-template
+              [ngTemplateOutlet]="template"
+              [ngTemplateOutletContext]="{
+                  action: action,
+                  sourceItem: sourceItem,
+                  destinationItem: destinationItem
+              }"
+          >
+          </ng-template>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropHintComponent, decorators: [{
             type: Component,
@@ -4237,27 +4257,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-treeview-drop-hint',
                     template: `
-        <div
-            *ngIf="!template"
-            class="k-drop-hint k-drop-hint-h"
-        >
-            <div class='k-drop-hint-start'></div>
-            <div class='k-drop-hint-line'></div>
-        </div>
+        @if (!template) {
+          <div
+              class="k-drop-hint k-drop-hint-h"
+          >
+              <div class='k-drop-hint-start'></div>
+              <div class='k-drop-hint-line'></div>
+          </div>
+        }
 
-        <ng-template
-            *ngIf="template"
-            [ngTemplateOutlet]="template"
-            [ngTemplateOutletContext]="{
-                action: action,
-                sourceItem: sourceItem,
-                destinationItem: destinationItem
-            }"
-        >
-        <ng-template>
+        @if (template) {
+          <ng-template
+              [ngTemplateOutlet]="template"
+              [ngTemplateOutletContext]="{
+                  action: action,
+                  sourceItem: sourceItem,
+                  destinationItem: destinationItem
+              }"
+          >
+          </ng-template>
+        }
     `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet]
+                    imports: [NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { hostClass: [{
                 type: HostBinding,