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

package/esm2022/dropdownlist/dropdownlist.component.mjs

@@ -33,7 +33,7 @@ import { normalizeVirtualizationSettings } from '../common/models/virtualization
 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 { touchEnabled } from '@progress/kendo-common';
@@ -1452,7 +1452,7 @@ export class DropDownListComponent {
         this.opened.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.aria-disabled": "this.isDisabledClass", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.aria-disabled": "this.isDisabledClass", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
             DROPDOWNLIST_VALUE_ACCESSOR,
             DataService,
             SelectionService,
@@ -1471,152 +1471,166 @@ export class DropDownListComponent {
             }
         ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ValueTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoDropDownList"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDropDownListLocalizedMessages
-            i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
-            noDataText="NO DATA FOUND"
-
-            i18n-selectButtonText="kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button"
-            selectButtonText="Select"
-
-            i18n-filterInputLabel="kendo.dropdownlist.filterInputLabel|The text set as aria-label on the filter input"
-            filterInputLabel="Filter"
-
-            i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
-            popupLabel="Options list"
-
-            i18n-adaptiveCloseButtonTitle="kendo.dropdownlist.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-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
-            filterInputPlaceholder="Filter"
-        >
+          i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
+          noDataText="NO DATA FOUND"
+        
+          i18n-selectButtonText="kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button"
+          selectButtonText="Select"
+        
+          i18n-filterInputLabel="kendo.dropdownlist.filterInputLabel|The text set as aria-label on the filter input"
+          filterInputLabel="Filter"
+        
+          i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+          popupLabel="Options list"
+        
+          i18n-adaptiveCloseButtonTitle="kendo.dropdownlist.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-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
+          filterInputPlaceholder="Filter"
+          >
         </ng-container>
         <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
-            <span class="k-input-value-text">
-                <ng-template *ngIf="valueTemplate"
+          <span class="k-input-value-text">
+            @if (valueTemplate) {
+              <ng-template
                     [templateContext]="{
                         templateRef: valueTemplate.templateRef,
                         $implicit: dataItem
                     }">
-                </ng-template>
-                <ng-template [ngIf]="!valueTemplate">{{ getText() }}</ng-template>
-            </span>
+              </ng-template>
+            }
+            @if (!valueTemplate) {{{ getText() }}}
+          </span>
         </span>
-        <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
+        @if (loading) {
+          <span class="k-i-loading k-input-loading-icon k-icon"></span>
+        }
         <button
-            tabindex="-1"
-            unselectable="on"
-            type="button"
-            class="k-input-button k-button k-icon-button"
-            [ngClass]="selectButtonClasses"
-            [attr.aria-label]="messageFor('selectButtonText')"
-            [attr.disabled]="disabled ? '' : null"
+          tabindex="-1"
+          unselectable="on"
+          type="button"
+          class="k-input-button k-button k-icon-button"
+          [ngClass]="selectButtonClasses"
+          [attr.aria-label]="messageFor('selectButtonText')"
+          [attr.disabled]="disabled ? '' : null"
             [kendoEventsOutsideAngular]="{
                 mousedown: onMouseDown
             }"
-        >
-            <kendo-icon-wrapper
-                unselectable="on"
-                [name]="icon || 'caret-alt-down'"
-                innerCssClass="k-button-icon"
-                [customFontClass]="customIconClass"
-                [svgIcon]="svgIcon || caretAltDownSVGIcon">
-            </kendo-icon-wrapper>
+          >
+          <kendo-icon-wrapper
+            unselectable="on"
+            [name]="icon || 'caret-alt-down'"
+            innerCssClass="k-button-icon"
+            [customFontClass]="customIconClass"
+            [svgIcon]="svgIcon || caretAltDownSVGIcon">
+          </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
-            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+          <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
-        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        @if (isOpen || isAdaptiveModeEnabled) {
+          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        }
         <ng-container #container></ng-container>
-
+        
         <kendo-adaptive-renderer
-            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [title]="adaptiveTitle"
-            [showTextInput]="filterable"
-            [subtitle]="adaptiveSubtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onFilterChange($event)"
-            [filterable]="filterable">
+          [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+          [title]="adaptiveTitle"
+          [showTextInput]="filterable"
+          [subtitle]="adaptiveSubtitle"
+          (closePopup)="togglePopup(false)"
+          (textInputChange)="onFilterChange($event)"
+          [filterable]="filterable">
         </kendo-adaptive-renderer>
-
+        
         <ng-template #sharedPopupActionSheetTemplate>
-            <!--filterable-->
-            <ng-template [ngIf]="filterable && !isActionSheetExpanded">
-                <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
-                    <span
-                        class="k-searchbox k-input"
-                        [ngClass]="filterInputClasses">
-                        <kendo-icon-wrapper
-                            class="k-icon"
-                            innerCssClass="k-input-icon"
-                            name="search"
-                            [svgIcon]="searchIcon">
-                        </kendo-icon-wrapper>
-                        <input
-                            #searchInput
-                            role="searchbox"
-                            aria-autocomplete="list"
-                            aria-haspopup="listbox"
-                            [attr.aria-controls]="listBoxId"
-                            tabindex="-1"
-                            [filterInput]="isFocused && !touchEnabled"
-                            [attr.aria-label]="messageFor('filterInputLabel')"
-                            [dir]="direction"
-                            [(ngModel)]="filterText"
-                            class="k-input-inner"
-                            (keydown)="keydown($event, searchInput)"
-                            (input)="handleFilter($event)"
-                            (focus)="onFilterFocus()"
-                            (blur)="blurFilterInput()"
-                            (click)="handleClick()" />
-                    </span>
-                </div>
-            </ng-template>
-            <!--header template-->
-            <ng-template *ngIf="headerTemplate"
+          <!--filterable-->
+          @if (filterable && !isActionSheetExpanded) {
+            <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
+              <span
+                class="k-searchbox k-input"
+                [ngClass]="filterInputClasses">
+                <kendo-icon-wrapper
+                  class="k-icon"
+                  innerCssClass="k-input-icon"
+                  name="search"
+                  [svgIcon]="searchIcon">
+                </kendo-icon-wrapper>
+                <input
+                  #searchInput
+                  role="searchbox"
+                  aria-autocomplete="list"
+                  aria-haspopup="listbox"
+                  [attr.aria-controls]="listBoxId"
+                  tabindex="-1"
+                  [filterInput]="isFocused && !touchEnabled"
+                  [attr.aria-label]="messageFor('filterInputLabel')"
+                  [dir]="direction"
+                  [(ngModel)]="filterText"
+                  class="k-input-inner"
+                  (keydown)="keydown($event, searchInput)"
+                  (input)="handleFilter($event)"
+                  (focus)="onFilterFocus()"
+                  (blur)="blurFilterInput()"
+                  (click)="handleClick()" />
+              </span>
+            </div>
+          }
+          <!--header template-->
+          @if (headerTemplate) {
+            <ng-template
                 [templateContext]="{
                     templateRef: headerTemplate.templateRef
                 }">
             </ng-template>
-            <!--list-->
-            <kendo-list
-                #optionsList
-                [id]="listBoxId"
-                [size]="isAdaptive ? 'large' : size"
-                [rounded]="rounded"
-                [optionPrefix]="optionPrefix"
-                [data]="data"
-                [textField]="textField"
-                [valueField]="valueField"
-                [template]="itemTemplate"
-                [groupTemplate]="groupTemplate"
-                [fixedGroupTemplate]="fixedGroupTemplate"
-                [height]="listHeight"
-                [show]="isOpen"
-                [virtual]="virtual"
-                [ariaLive]="ariaLive"
-                [showStickyHeader]="showStickyHeader"
-                (pageChange)="pageChange($event)"
-                [defaultItem]="defaultItem">
-            </kendo-list>
-            <!--no-data template-->
-            <div class="k-no-data" *ngIf="data.length === 0">
-                <ng-template [ngIf]="noDataTemplate"
+          }
+          <!--list-->
+          <kendo-list
+            #optionsList
+            [id]="listBoxId"
+            [size]="isAdaptive ? 'large' : size"
+            [rounded]="rounded"
+            [optionPrefix]="optionPrefix"
+            [data]="data"
+            [textField]="textField"
+            [valueField]="valueField"
+            [template]="itemTemplate"
+            [groupTemplate]="groupTemplate"
+            [fixedGroupTemplate]="fixedGroupTemplate"
+            [height]="listHeight"
+            [show]="isOpen"
+            [virtual]="virtual"
+            [ariaLive]="ariaLive"
+            [showStickyHeader]="showStickyHeader"
+            (pageChange)="pageChange($event)"
+            [defaultItem]="defaultItem">
+          </kendo-list>
+          <!--no-data template-->
+          @if (data.length === 0) {
+            <div class="k-no-data">
+              @if (noDataTemplate) {
+                <ng-template
                     [templateContext]="{
                         templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
                     }">
                 </ng-template>
-                <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ messageFor('noDataText') }}</div>
-                </ng-template>
+              }
+              @if (!noDataTemplate) {
+                <div>{{ messageFor('noDataText') }}</div>
+              }
             </div>
-            <!--footer template-->
-            <ng-template *ngIf="footerTemplate"
+          }
+          <!--footer template-->
+          @if (footerTemplate) {
+            <ng-template
                 [templateContext]="{
                     templateRef: footerTemplate.templateRef
                 }">
             </ng-template>
+          }
         </ng-template>
-  `, 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { 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"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+        `, 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { 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"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
@@ -1643,154 +1657,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-dropdownlist',
                     template: `
         <ng-container kendoDropDownListLocalizedMessages
-            i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
-            noDataText="NO DATA FOUND"
-
-            i18n-selectButtonText="kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button"
-            selectButtonText="Select"
-
-            i18n-filterInputLabel="kendo.dropdownlist.filterInputLabel|The text set as aria-label on the filter input"
-            filterInputLabel="Filter"
-
-            i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
-            popupLabel="Options list"
-
-            i18n-adaptiveCloseButtonTitle="kendo.dropdownlist.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-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
-            filterInputPlaceholder="Filter"
-        >
+          i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
+          noDataText="NO DATA FOUND"
+        
+          i18n-selectButtonText="kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button"
+          selectButtonText="Select"
+        
+          i18n-filterInputLabel="kendo.dropdownlist.filterInputLabel|The text set as aria-label on the filter input"
+          filterInputLabel="Filter"
+        
+          i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+          popupLabel="Options list"
+        
+          i18n-adaptiveCloseButtonTitle="kendo.dropdownlist.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-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
+          filterInputPlaceholder="Filter"
+          >
         </ng-container>
         <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
-            <span class="k-input-value-text">
-                <ng-template *ngIf="valueTemplate"
+          <span class="k-input-value-text">
+            @if (valueTemplate) {
+              <ng-template
                     [templateContext]="{
                         templateRef: valueTemplate.templateRef,
                         $implicit: dataItem
                     }">
-                </ng-template>
-                <ng-template [ngIf]="!valueTemplate">{{ getText() }}</ng-template>
-            </span>
+              </ng-template>
+            }
+            @if (!valueTemplate) {{{ getText() }}}
+          </span>
         </span>
-        <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
+        @if (loading) {
+          <span class="k-i-loading k-input-loading-icon k-icon"></span>
+        }
         <button
-            tabindex="-1"
-            unselectable="on"
-            type="button"
-            class="k-input-button k-button k-icon-button"
-            [ngClass]="selectButtonClasses"
-            [attr.aria-label]="messageFor('selectButtonText')"
-            [attr.disabled]="disabled ? '' : null"
+          tabindex="-1"
+          unselectable="on"
+          type="button"
+          class="k-input-button k-button k-icon-button"
+          [ngClass]="selectButtonClasses"
+          [attr.aria-label]="messageFor('selectButtonText')"
+          [attr.disabled]="disabled ? '' : null"
             [kendoEventsOutsideAngular]="{
                 mousedown: onMouseDown
             }"
-        >
-            <kendo-icon-wrapper
-                unselectable="on"
-                [name]="icon || 'caret-alt-down'"
-                innerCssClass="k-button-icon"
-                [customFontClass]="customIconClass"
-                [svgIcon]="svgIcon || caretAltDownSVGIcon">
-            </kendo-icon-wrapper>
+          >
+          <kendo-icon-wrapper
+            unselectable="on"
+            [name]="icon || 'caret-alt-down'"
+            innerCssClass="k-button-icon"
+            [customFontClass]="customIconClass"
+            [svgIcon]="svgIcon || caretAltDownSVGIcon">
+          </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
-            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+          <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
-        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        @if (isOpen || isAdaptiveModeEnabled) {
+          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        }
         <ng-container #container></ng-container>
-
+        
         <kendo-adaptive-renderer
-            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [title]="adaptiveTitle"
-            [showTextInput]="filterable"
-            [subtitle]="adaptiveSubtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onFilterChange($event)"
-            [filterable]="filterable">
+          [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+          [title]="adaptiveTitle"
+          [showTextInput]="filterable"
+          [subtitle]="adaptiveSubtitle"
+          (closePopup)="togglePopup(false)"
+          (textInputChange)="onFilterChange($event)"
+          [filterable]="filterable">
         </kendo-adaptive-renderer>
-
+        
         <ng-template #sharedPopupActionSheetTemplate>
-            <!--filterable-->
-            <ng-template [ngIf]="filterable && !isActionSheetExpanded">
-                <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
-                    <span
-                        class="k-searchbox k-input"
-                        [ngClass]="filterInputClasses">
-                        <kendo-icon-wrapper
-                            class="k-icon"
-                            innerCssClass="k-input-icon"
-                            name="search"
-                            [svgIcon]="searchIcon">
-                        </kendo-icon-wrapper>
-                        <input
-                            #searchInput
-                            role="searchbox"
-                            aria-autocomplete="list"
-                            aria-haspopup="listbox"
-                            [attr.aria-controls]="listBoxId"
-                            tabindex="-1"
-                            [filterInput]="isFocused && !touchEnabled"
-                            [attr.aria-label]="messageFor('filterInputLabel')"
-                            [dir]="direction"
-                            [(ngModel)]="filterText"
-                            class="k-input-inner"
-                            (keydown)="keydown($event, searchInput)"
-                            (input)="handleFilter($event)"
-                            (focus)="onFilterFocus()"
-                            (blur)="blurFilterInput()"
-                            (click)="handleClick()" />
-                    </span>
-                </div>
-            </ng-template>
-            <!--header template-->
-            <ng-template *ngIf="headerTemplate"
+          <!--filterable-->
+          @if (filterable && !isActionSheetExpanded) {
+            <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
+              <span
+                class="k-searchbox k-input"
+                [ngClass]="filterInputClasses">
+                <kendo-icon-wrapper
+                  class="k-icon"
+                  innerCssClass="k-input-icon"
+                  name="search"
+                  [svgIcon]="searchIcon">
+                </kendo-icon-wrapper>
+                <input
+                  #searchInput
+                  role="searchbox"
+                  aria-autocomplete="list"
+                  aria-haspopup="listbox"
+                  [attr.aria-controls]="listBoxId"
+                  tabindex="-1"
+                  [filterInput]="isFocused && !touchEnabled"
+                  [attr.aria-label]="messageFor('filterInputLabel')"
+                  [dir]="direction"
+                  [(ngModel)]="filterText"
+                  class="k-input-inner"
+                  (keydown)="keydown($event, searchInput)"
+                  (input)="handleFilter($event)"
+                  (focus)="onFilterFocus()"
+                  (blur)="blurFilterInput()"
+                  (click)="handleClick()" />
+              </span>
+            </div>
+          }
+          <!--header template-->
+          @if (headerTemplate) {
+            <ng-template
                 [templateContext]="{
                     templateRef: headerTemplate.templateRef
                 }">
             </ng-template>
-            <!--list-->
-            <kendo-list
-                #optionsList
-                [id]="listBoxId"
-                [size]="isAdaptive ? 'large' : size"
-                [rounded]="rounded"
-                [optionPrefix]="optionPrefix"
-                [data]="data"
-                [textField]="textField"
-                [valueField]="valueField"
-                [template]="itemTemplate"
-                [groupTemplate]="groupTemplate"
-                [fixedGroupTemplate]="fixedGroupTemplate"
-                [height]="listHeight"
-                [show]="isOpen"
-                [virtual]="virtual"
-                [ariaLive]="ariaLive"
-                [showStickyHeader]="showStickyHeader"
-                (pageChange)="pageChange($event)"
-                [defaultItem]="defaultItem">
-            </kendo-list>
-            <!--no-data template-->
-            <div class="k-no-data" *ngIf="data.length === 0">
-                <ng-template [ngIf]="noDataTemplate"
+          }
+          <!--list-->
+          <kendo-list
+            #optionsList
+            [id]="listBoxId"
+            [size]="isAdaptive ? 'large' : size"
+            [rounded]="rounded"
+            [optionPrefix]="optionPrefix"
+            [data]="data"
+            [textField]="textField"
+            [valueField]="valueField"
+            [template]="itemTemplate"
+            [groupTemplate]="groupTemplate"
+            [fixedGroupTemplate]="fixedGroupTemplate"
+            [height]="listHeight"
+            [show]="isOpen"
+            [virtual]="virtual"
+            [ariaLive]="ariaLive"
+            [showStickyHeader]="showStickyHeader"
+            (pageChange)="pageChange($event)"
+            [defaultItem]="defaultItem">
+          </kendo-list>
+          <!--no-data template-->
+          @if (data.length === 0) {
+            <div class="k-no-data">
+              @if (noDataTemplate) {
+                <ng-template
                     [templateContext]="{
                         templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
                     }">
                 </ng-template>
-                <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ messageFor('noDataText') }}</div>
-                </ng-template>
+              }
+              @if (!noDataTemplate) {
+                <div>{{ messageFor('noDataText') }}</div>
+              }
             </div>
-            <!--footer template-->
-            <ng-template *ngIf="footerTemplate"
+          }
+          <!--footer template-->
+          @if (footerTemplate) {
+            <ng-template
                 [templateContext]="{
                     templateRef: footerTemplate.templateRef
                 }">
             </ng-template>
+          }
         </ng-template>
-  `,
+        `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgIf, TemplateContextDirective, NgClass, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, AdaptiveRendererComponent, ReactiveFormsModule, FilterInputDirective, FormsModule, ListComponent]
+                    imports: [LocalizedMessagesDirective, TemplateContextDirective, NgClass, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, AdaptiveRendererComponent, ReactiveFormsModule, FilterInputDirective, FormsModule, ListComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.SelectionService }, { type: i4.NavigationService }, { type: i5.DisabledItemsService }, { type: i6.DataService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i7.AdaptiveService }], propDecorators: { customIconClass: [{
                 type: Input