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

package/esm2022/dropdowntrees/dropdowntree.component.mjs

@@ -27,7 +27,7 @@ import { ValueTemplateDirective } from '../common/templates/value-template.direc
 import { caretAltDownIcon, searchIcon, xIcon } from '@progress/kendo-svg-icons';
 import { AdaptiveRendererComponent } from '../common/adaptive-renderer.component';
 import { FilterInputDirective } from '../common/filter-input.directive';
-import { NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { LocalizedMessagesDirective } from '../common/localization/localized-messages.directive';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
@@ -125,7 +125,7 @@ export class DropDownTreeComponent {
         return this.loading ? 'true' : null;
     }
     get hostAriaControls() {
-        return this.isOpen ? this.treeViewId : undefined;
+        return this.isOpen ? this.treeViewId : null;
     }
     get id() {
         return this.focusableId;
@@ -1128,6 +1128,8 @@ export class DropDownTreeComponent {
             this.popupRef.close();
             this.popupRef = null;
             this.clearFilter();
+            // Trigger change detection to update aria-controls attribute
+            this.cdr.markForCheck();
         }
     }
     clearFilter() {
@@ -1332,7 +1334,7 @@ export class DropDownTreeComponent {
         this.removeTreeViewFromTabOrder();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.LocalizationService }, { token: i4.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropDownTreeComponent, isStandalone: true, selector: "kendo-dropdowntree", inputs: { icon: "icon", svgIcon: "svgIcon", loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.readonly": "this.isReadonly", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DropDownTreeComponent, isStandalone: true, selector: "kendo-dropdowntree", inputs: { icon: "icon", svgIcon: "svgIcon", loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.readonly": "this.isReadonly", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-readonly": "this.readonly" } }, providers: [
             DataService,
             SelectionService,
             NavigationService,
@@ -1361,182 +1363,201 @@ export class DropDownTreeComponent {
             }
         ], queries: [{ propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "nodeTemplate", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ValueTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "adaptiveRendererComponent", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "treeview", first: true, predicate: ["treeview"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], exportAs: ["kendoDropDownTree"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDropDownTreeLocalizedMessages
-            i18n-noDataText="kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items"
-            noDataText="NO DATA FOUND"
-
-            i18n-clearTitle="kendo.dropdowntree.clearTitle|The title of the clear button"
-            clearTitle="clear"
-
-            i18n-selectButtonText="kendo.dropdowntree.selectButtonText|The text set as aria-label on the select button"
-            selectButtonText="Select"
-
-            i18n-filterInputLabel="kendo.dropdowntree.filterInputLabel|The text set as aria-label on the filter input"
-            filterInputLabel="Filter"
-
-            i18n-popupLabel="kendo.dropdowntree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
-            popupLabel="Options list"
-
-            i18n-adaptiveCloseButtonTitle="kendo.dropdowntree.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
-            adaptiveCloseButtonTitle="Close"
-
-            i18n-filterInputPlaceholder="kendo.dropdowntree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
-            filterInputPlaceholder="Filter"
-        >
+          i18n-noDataText="kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items"
+          noDataText="NO DATA FOUND"
+        
+          i18n-clearTitle="kendo.dropdowntree.clearTitle|The title of the clear button"
+          clearTitle="clear"
+        
+          i18n-selectButtonText="kendo.dropdowntree.selectButtonText|The text set as aria-label on the select button"
+          selectButtonText="Select"
+        
+          i18n-filterInputLabel="kendo.dropdowntree.filterInputLabel|The text set as aria-label on the filter input"
+          filterInputLabel="Filter"
+        
+          i18n-popupLabel="kendo.dropdowntree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+          popupLabel="Options list"
+        
+          i18n-adaptiveCloseButtonTitle="kendo.dropdowntree.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+          adaptiveCloseButtonTitle="Close"
+        
+          i18n-filterInputPlaceholder="kendo.dropdowntree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
+          filterInputPlaceholder="Filter"
+          >
         </ng-container>
         <span
-            [attr.id]="valueLabelId"
-            class="k-input-inner"
-            (click)="$event.preventDefault()"
-        >
-            <span class="k-input-value-text" *ngIf="valueTemplate || text || placeholder">
-                <ng-template *ngIf="valueTemplate"
+          [attr.id]="valueLabelId"
+          class="k-input-inner"
+          (click)="$event.preventDefault()"
+          >
+          @if (valueTemplate || text || placeholder) {
+            <span class="k-input-value-text">
+              @if (valueTemplate) {
+                <ng-template
                     [templateContext]="{
                         templateRef: valueTemplate.templateRef,
                         $implicit: dataItem
                     }">
                 </ng-template>
-                <ng-template [ngIf]="!valueTemplate"> {{ text || placeholder }} </ng-template>
+              }
+              @if (!valueTemplate) {
+                {{ text || placeholder }}
+              }
             </span>
+          }
         </span>
-        <span
-            *ngIf="!loading && !readonly && clearButton && text?.length && !disabled"
+        @if (!loading && !readonly && clearButton && text?.length && !disabled) {
+          <span
             class="k-clear-value"
             [style.visibility]="clearButtonVisibility"
             [attr.title]="messageFor('clearTitle')"
             aria-hidden="true"
             (click)="clearValue($event)"
-        >
-            <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon"
             >
+            <kendo-icon-wrapper
+              name="x"
+              [svgIcon]="xIcon"
+              >
             </kendo-icon-wrapper>
-        </span>
-        <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
+          </span>
+        }
+        @if (loading) {
+          <span class="k-i-loading k-input-loading-icon k-icon"></span>
+        }
         <button
-            tabindex="-1"
-            type="button"
-            class="k-input-button k-button k-icon-button"
-            [ngClass]="selectButtonClasses"
-            [attr.aria-label]="messageFor('selectButtonText')"
-            [attr.disabled]="disabled ? '' : null"
-        >
-            <kendo-icon-wrapper
-                [name]="icon || 'caret-alt-down'"
-                innerCssClass="k-button-icon"
-                [svgIcon]="svgIcon || caretAltDownIcon"
+          tabindex="-1"
+          type="button"
+          class="k-input-button k-button k-icon-button"
+          [ngClass]="selectButtonClasses"
+          [attr.aria-label]="messageFor('selectButtonText')"
+          [attr.disabled]="disabled ? '' : null"
+          >
+          <kendo-icon-wrapper
+            [name]="icon || 'caret-alt-down'"
+            innerCssClass="k-button-icon"
+            [svgIcon]="svgIcon || caretAltDownIcon"
             >
-            </kendo-icon-wrapper>
+          </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
-            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+          <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
         <ng-container #container></ng-container>
-
+        
         <kendo-adaptive-renderer
-            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [title]="adaptiveTitle"
-            [showTextInput]="filterable"
-            [subtitle]="adaptiveSubtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="handleFilterInputChange($event)"
-            [placeholder]="placeholder"
-            [searchBarValue]="filter"
-            [filterable]="filterable">
+          [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+          [title]="adaptiveTitle"
+          [showTextInput]="filterable"
+          [subtitle]="adaptiveSubtitle"
+          (closePopup)="togglePopup(false)"
+          (textInputChange)="handleFilterInputChange($event)"
+          [placeholder]="placeholder"
+          [searchBarValue]="filter"
+          [filterable]="filterable">
         </kendo-adaptive-renderer>
-
+        
         <ng-template #sharedPopupActionSheetTemplate>
+          @if (filterable && !isActionSheetExpanded) {
             <span
-                *ngIf="filterable && !isActionSheetExpanded"
-                class="k-list-filter"
-            >
-                <span
-                    class="k-textbox k-input"
-                    [ngClass]="filterInputClasses"
+              class="k-list-filter"
+              >
+              <span
+                class="k-textbox k-input"
+                [ngClass]="filterInputClasses"
                 >
-                    <span class="k-input-prefix">
-                        <kendo-icon-wrapper
-                            class="k-icon"
-                            name="search"
-                            [svgIcon]="searchIcon"
-                        >
-                        </kendo-icon-wrapper>
-                    </span>
-                    <input
-                        #filterInput
-                        (input)="handleFilterInputChange($event.target)"
-                        [filterInput]="filterable && !touchEnabled"
-                        (keydown.arrowdown)="handleKeydown($event, filterInput)"
-                        (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
-                        (keydown.escape)="handleKeydown($event, filterInput)"
-                        [attr.aria-label]="messageFor('filterInputLabel')"
-                        [value]="filter"
-                        class="k-input-inner"
-                        role="textbox"
+                <span class="k-input-prefix">
+                  <kendo-icon-wrapper
+                    class="k-icon"
+                    name="search"
+                    [svgIcon]="searchIcon"
+                    >
+                  </kendo-icon-wrapper>
+                </span>
+                <input
+                  #filterInput
+                  (input)="handleFilterInputChange($event.target)"
+                  [filterInput]="filterable && !touchEnabled"
+                  (keydown.arrowdown)="handleKeydown($event, filterInput)"
+                  (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
+                  (keydown.escape)="handleKeydown($event, filterInput)"
+                  [attr.aria-label]="messageFor('filterInputLabel')"
+                  [value]="filter"
+                  class="k-input-inner"
+                  role="textbox"
                         [kendoEventsOutsideAngular]="{
                             blur: handleBlur
                         }"
-                        [scope]="this"
-                    >
-                </span>
+                  [scope]="this"
+                  >
+              </span>
             </span>
-            <!--header template-->
+          }
+          <!--header template-->
+          @if (headerTemplate) {
             <ng-template
-                *ngIf="headerTemplate"
                 [templateContext]="{
                     templateRef: headerTemplate?.templateRef
                 }">
             </ng-template>
+          }
+          @if (data.length !== 0 && !allNodesHidden) {
             <kendo-treeview
-                #treeview
-                [attr.id]="treeViewId"
-                *ngIf="data.length !== 0 && !allNodesHidden"
-                [size]="windowSize !== 'large' ? 'large' : size"
-                [nodes]="data"
-                [style.maxHeight.px]="listHeight"
-                [animate]="false"
-                [(selectedKeys)]="selectedKeys"
-                [selectBy]="selectBy"
-                [textField]="textField"
-                kendoTreeViewSelectable
-                [children]="children"
-                [hasChildren]="hasChildren"
-                [loadOnDemand]="loadOnDemand"
-                [isExpanded]="isNodeExpanded"
-                [isDisabled]="itemDisabled"
-                [nodeTemplate]="nodeTemplate"
-                [filter]="filter"
-                [isVisible]="isNodeVisible"
-                (focusout)="handleBlur($event)"
-                (keydown)="handleKeydown($event)"
-                (selectionChange)="onSelectionChange($event)"
-                (expand)="nodeExpand.emit($event)"
-                (collapse)="nodeCollapse.emit($event)"
-                (childrenLoaded)="onChildrenLoaded()"
-            >
+              #treeview
+              [attr.id]="treeViewId"
+              [size]="windowSize !== 'large' ? 'large' : size"
+              [nodes]="data"
+              [style.maxHeight.px]="listHeight"
+              [animate]="false"
+              [(selectedKeys)]="selectedKeys"
+              [selectBy]="selectBy"
+              [textField]="textField"
+              kendoTreeViewSelectable
+              [children]="children"
+              [hasChildren]="hasChildren"
+              [loadOnDemand]="loadOnDemand"
+              [isExpanded]="isNodeExpanded"
+              [isDisabled]="itemDisabled"
+              [nodeTemplate]="nodeTemplate"
+              [filter]="filter"
+              [isVisible]="isNodeVisible"
+              (focusout)="handleBlur($event)"
+              (keydown)="handleKeydown($event)"
+              (selectionChange)="onSelectionChange($event)"
+              (expand)="nodeExpand.emit($event)"
+              (collapse)="nodeCollapse.emit($event)"
+              (childrenLoaded)="onChildrenLoaded()"
+              >
             </kendo-treeview>
-            <!--footer template-->
+          }
+          <!--footer template-->
+          @if (footerTemplate) {
             <ng-template
-                *ngIf="footerTemplate"
                 [templateContext]="{
                     templateRef: footerTemplate?.templateRef
                 }">
             </ng-template>
-            <!--no-data template-->
-            <div class="k-no-data" *ngIf="data.length === 0 || allNodesHidden">
-                <ng-template [ngIf]="noDataTemplate"
+          }
+          <!--no-data template-->
+          @if (data.length === 0 || allNodesHidden) {
+            <div class="k-no-data">
+              @if (noDataTemplate) {
+                <ng-template
                     [templateContext]="{
                         templateRef: noDataTemplate?.templateRef
                     }">
                 </ng-template>
-                <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ messageFor('noDataText') }}</div>
-                </ng-template>
+              }
+              @if (!noDataTemplate) {
+                <div>{{ messageFor('noDataText') }}</div>
+              }
             </div>
+          }
         </ng-template>
-
-        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        
+        @if (isOpen || isAdaptiveModeEnabled) {
+          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropDownTreeComponent, decorators: [{
             type: Component,
@@ -1573,185 +1594,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-dropdowntree',
                     template: `
         <ng-container kendoDropDownTreeLocalizedMessages
-            i18n-noDataText="kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items"
-            noDataText="NO DATA FOUND"
-
-            i18n-clearTitle="kendo.dropdowntree.clearTitle|The title of the clear button"
-            clearTitle="clear"
-
-            i18n-selectButtonText="kendo.dropdowntree.selectButtonText|The text set as aria-label on the select button"
-            selectButtonText="Select"
-
-            i18n-filterInputLabel="kendo.dropdowntree.filterInputLabel|The text set as aria-label on the filter input"
-            filterInputLabel="Filter"
-
-            i18n-popupLabel="kendo.dropdowntree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
-            popupLabel="Options list"
-
-            i18n-adaptiveCloseButtonTitle="kendo.dropdowntree.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
-            adaptiveCloseButtonTitle="Close"
-
-            i18n-filterInputPlaceholder="kendo.dropdowntree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
-            filterInputPlaceholder="Filter"
-        >
+          i18n-noDataText="kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items"
+          noDataText="NO DATA FOUND"
+        
+          i18n-clearTitle="kendo.dropdowntree.clearTitle|The title of the clear button"
+          clearTitle="clear"
+        
+          i18n-selectButtonText="kendo.dropdowntree.selectButtonText|The text set as aria-label on the select button"
+          selectButtonText="Select"
+        
+          i18n-filterInputLabel="kendo.dropdowntree.filterInputLabel|The text set as aria-label on the filter input"
+          filterInputLabel="Filter"
+        
+          i18n-popupLabel="kendo.dropdowntree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+          popupLabel="Options list"
+        
+          i18n-adaptiveCloseButtonTitle="kendo.dropdowntree.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+          adaptiveCloseButtonTitle="Close"
+        
+          i18n-filterInputPlaceholder="kendo.dropdowntree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
+          filterInputPlaceholder="Filter"
+          >
         </ng-container>
         <span
-            [attr.id]="valueLabelId"
-            class="k-input-inner"
-            (click)="$event.preventDefault()"
-        >
-            <span class="k-input-value-text" *ngIf="valueTemplate || text || placeholder">
-                <ng-template *ngIf="valueTemplate"
+          [attr.id]="valueLabelId"
+          class="k-input-inner"
+          (click)="$event.preventDefault()"
+          >
+          @if (valueTemplate || text || placeholder) {
+            <span class="k-input-value-text">
+              @if (valueTemplate) {
+                <ng-template
                     [templateContext]="{
                         templateRef: valueTemplate.templateRef,
                         $implicit: dataItem
                     }">
                 </ng-template>
-                <ng-template [ngIf]="!valueTemplate"> {{ text || placeholder }} </ng-template>
+              }
+              @if (!valueTemplate) {
+                {{ text || placeholder }}
+              }
             </span>
+          }
         </span>
-        <span
-            *ngIf="!loading && !readonly && clearButton && text?.length && !disabled"
+        @if (!loading && !readonly && clearButton && text?.length && !disabled) {
+          <span
             class="k-clear-value"
             [style.visibility]="clearButtonVisibility"
             [attr.title]="messageFor('clearTitle')"
             aria-hidden="true"
             (click)="clearValue($event)"
-        >
-            <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon"
             >
+            <kendo-icon-wrapper
+              name="x"
+              [svgIcon]="xIcon"
+              >
             </kendo-icon-wrapper>
-        </span>
-        <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
+          </span>
+        }
+        @if (loading) {
+          <span class="k-i-loading k-input-loading-icon k-icon"></span>
+        }
         <button
-            tabindex="-1"
-            type="button"
-            class="k-input-button k-button k-icon-button"
-            [ngClass]="selectButtonClasses"
-            [attr.aria-label]="messageFor('selectButtonText')"
-            [attr.disabled]="disabled ? '' : null"
-        >
-            <kendo-icon-wrapper
-                [name]="icon || 'caret-alt-down'"
-                innerCssClass="k-button-icon"
-                [svgIcon]="svgIcon || caretAltDownIcon"
+          tabindex="-1"
+          type="button"
+          class="k-input-button k-button k-icon-button"
+          [ngClass]="selectButtonClasses"
+          [attr.aria-label]="messageFor('selectButtonText')"
+          [attr.disabled]="disabled ? '' : null"
+          >
+          <kendo-icon-wrapper
+            [name]="icon || 'caret-alt-down'"
+            innerCssClass="k-button-icon"
+            [svgIcon]="svgIcon || caretAltDownIcon"
             >
-            </kendo-icon-wrapper>
+          </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
-            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+          <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
         <ng-container #container></ng-container>
-
+        
         <kendo-adaptive-renderer
-            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [title]="adaptiveTitle"
-            [showTextInput]="filterable"
-            [subtitle]="adaptiveSubtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="handleFilterInputChange($event)"
-            [placeholder]="placeholder"
-            [searchBarValue]="filter"
-            [filterable]="filterable">
+          [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+          [title]="adaptiveTitle"
+          [showTextInput]="filterable"
+          [subtitle]="adaptiveSubtitle"
+          (closePopup)="togglePopup(false)"
+          (textInputChange)="handleFilterInputChange($event)"
+          [placeholder]="placeholder"
+          [searchBarValue]="filter"
+          [filterable]="filterable">
         </kendo-adaptive-renderer>
-
+        
         <ng-template #sharedPopupActionSheetTemplate>
+          @if (filterable && !isActionSheetExpanded) {
             <span
-                *ngIf="filterable && !isActionSheetExpanded"
-                class="k-list-filter"
-            >
-                <span
-                    class="k-textbox k-input"
-                    [ngClass]="filterInputClasses"
+              class="k-list-filter"
+              >
+              <span
+                class="k-textbox k-input"
+                [ngClass]="filterInputClasses"
                 >
-                    <span class="k-input-prefix">
-                        <kendo-icon-wrapper
-                            class="k-icon"
-                            name="search"
-                            [svgIcon]="searchIcon"
-                        >
-                        </kendo-icon-wrapper>
-                    </span>
-                    <input
-                        #filterInput
-                        (input)="handleFilterInputChange($event.target)"
-                        [filterInput]="filterable && !touchEnabled"
-                        (keydown.arrowdown)="handleKeydown($event, filterInput)"
-                        (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
-                        (keydown.escape)="handleKeydown($event, filterInput)"
-                        [attr.aria-label]="messageFor('filterInputLabel')"
-                        [value]="filter"
-                        class="k-input-inner"
-                        role="textbox"
+                <span class="k-input-prefix">
+                  <kendo-icon-wrapper
+                    class="k-icon"
+                    name="search"
+                    [svgIcon]="searchIcon"
+                    >
+                  </kendo-icon-wrapper>
+                </span>
+                <input
+                  #filterInput
+                  (input)="handleFilterInputChange($event.target)"
+                  [filterInput]="filterable && !touchEnabled"
+                  (keydown.arrowdown)="handleKeydown($event, filterInput)"
+                  (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
+                  (keydown.escape)="handleKeydown($event, filterInput)"
+                  [attr.aria-label]="messageFor('filterInputLabel')"
+                  [value]="filter"
+                  class="k-input-inner"
+                  role="textbox"
                         [kendoEventsOutsideAngular]="{
                             blur: handleBlur
                         }"
-                        [scope]="this"
-                    >
-                </span>
+                  [scope]="this"
+                  >
+              </span>
             </span>
-            <!--header template-->
+          }
+          <!--header template-->
+          @if (headerTemplate) {
             <ng-template
-                *ngIf="headerTemplate"
                 [templateContext]="{
                     templateRef: headerTemplate?.templateRef
                 }">
             </ng-template>
+          }
+          @if (data.length !== 0 && !allNodesHidden) {
             <kendo-treeview
-                #treeview
-                [attr.id]="treeViewId"
-                *ngIf="data.length !== 0 && !allNodesHidden"
-                [size]="windowSize !== 'large' ? 'large' : size"
-                [nodes]="data"
-                [style.maxHeight.px]="listHeight"
-                [animate]="false"
-                [(selectedKeys)]="selectedKeys"
-                [selectBy]="selectBy"
-                [textField]="textField"
-                kendoTreeViewSelectable
-                [children]="children"
-                [hasChildren]="hasChildren"
-                [loadOnDemand]="loadOnDemand"
-                [isExpanded]="isNodeExpanded"
-                [isDisabled]="itemDisabled"
-                [nodeTemplate]="nodeTemplate"
-                [filter]="filter"
-                [isVisible]="isNodeVisible"
-                (focusout)="handleBlur($event)"
-                (keydown)="handleKeydown($event)"
-                (selectionChange)="onSelectionChange($event)"
-                (expand)="nodeExpand.emit($event)"
-                (collapse)="nodeCollapse.emit($event)"
-                (childrenLoaded)="onChildrenLoaded()"
-            >
+              #treeview
+              [attr.id]="treeViewId"
+              [size]="windowSize !== 'large' ? 'large' : size"
+              [nodes]="data"
+              [style.maxHeight.px]="listHeight"
+              [animate]="false"
+              [(selectedKeys)]="selectedKeys"
+              [selectBy]="selectBy"
+              [textField]="textField"
+              kendoTreeViewSelectable
+              [children]="children"
+              [hasChildren]="hasChildren"
+              [loadOnDemand]="loadOnDemand"
+              [isExpanded]="isNodeExpanded"
+              [isDisabled]="itemDisabled"
+              [nodeTemplate]="nodeTemplate"
+              [filter]="filter"
+              [isVisible]="isNodeVisible"
+              (focusout)="handleBlur($event)"
+              (keydown)="handleKeydown($event)"
+              (selectionChange)="onSelectionChange($event)"
+              (expand)="nodeExpand.emit($event)"
+              (collapse)="nodeCollapse.emit($event)"
+              (childrenLoaded)="onChildrenLoaded()"
+              >
             </kendo-treeview>
-            <!--footer template-->
+          }
+          <!--footer template-->
+          @if (footerTemplate) {
             <ng-template
-                *ngIf="footerTemplate"
                 [templateContext]="{
                     templateRef: footerTemplate?.templateRef
                 }">
             </ng-template>
-            <!--no-data template-->
-            <div class="k-no-data" *ngIf="data.length === 0 || allNodesHidden">
-                <ng-template [ngIf]="noDataTemplate"
+          }
+          <!--no-data template-->
+          @if (data.length === 0 || allNodesHidden) {
+            <div class="k-no-data">
+              @if (noDataTemplate) {
+                <ng-template
                     [templateContext]="{
                         templateRef: noDataTemplate?.templateRef
                     }">
                 </ng-template>
-                <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ messageFor('noDataText') }}</div>
-                </ng-template>
+              }
+              @if (!noDataTemplate) {
+                <div>{{ messageFor('noDataText') }}</div>
+              }
             </div>
+          }
         </ng-template>
-
-        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-    `,
+        
+        @if (isOpen || isAdaptiveModeEnabled) {
+          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        }
+        `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgIf, TemplateContextDirective, IconWrapperComponent, NgClass, NgTemplateOutlet, AdaptiveRendererComponent, FilterInputDirective, EventsOutsideAngularDirective, TreeViewComponent, SelectDirective, ResizeSensorComponent]
+                    imports: [LocalizedMessagesDirective, TemplateContextDirective, IconWrapperComponent, NgClass, NgTemplateOutlet, AdaptiveRendererComponent, FilterInputDirective, EventsOutsideAngularDirective, TreeViewComponent, SelectDirective, ResizeSensorComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1.PopupService }, { type: i2.NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.LocalizationService }, { type: i4.AdaptiveService }], propDecorators: { icon: [{
                 type: Input