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

package/esm2022/autocomplete/autocomplete.component.mjs

@@ -30,7 +30,7 @@ import { ListComponent } from '../common/list.component';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
 import { xIcon } from '@progress/kendo-svg-icons';
 import { AdaptiveRendererComponent } from '../common/adaptive-renderer.component';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { SharedDropDownEventsDirective } from '../common/shared-events.directive';
 import { LocalizedMessagesDirective } from '../common/localization/localized-messages.directive';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
@@ -1180,7 +1180,7 @@ export class AutoCompleteComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: i2.DataService }, { token: i3.PopupService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AutoCompleteComponent, isStandalone: true, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AutoCompleteComponent, isStandalone: true, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
             AUTOCOMPLETE_VALUE_ACCESSOR,
             DataService,
             SelectionService,
@@ -1201,143 +1201,164 @@ export class AutoCompleteComponent {
             }
         ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, 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 }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "adaptiveRendererComponent", first: true, predicate: AdaptiveRendererComponent, 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: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoAutoComplete"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoAutoCompleteLocalizedMessages
-            i18n-noDataText="kendo.autocomplete.noDataText|The text displayed in the popup when there are no items"
-            noDataText="NO DATA FOUND"
-
-            i18n-clearTitle="kendo.autocomplete.clearTitle|The title of the clear button"
-            clearTitle="clear"
-
-            i18n-popupLabel="kendo.autocomplete.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
-            popupLabel="Options list"
-
-            i18n-adaptiveCloseButtonTitle="kendo.autocomplete.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-noDataText="kendo.autocomplete.noDataText|The text displayed in the popup when there are no items"
+          noDataText="NO DATA FOUND"
+        
+          i18n-clearTitle="kendo.autocomplete.clearTitle|The title of the clear button"
+          clearTitle="clear"
+        
+          i18n-popupLabel="kendo.autocomplete.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+          popupLabel="Options list"
+        
+          i18n-adaptiveCloseButtonTitle="kendo.autocomplete.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"
+          >
         </ng-container>
-
+        
         <ng-container
-            kendoDropDownSharedEvents
-            [hostElement]="hostElement"
-            [(isFocused)]="isFocused"
-            (handleBlur)="handleBlur()"
-            (onFocus)="handleFocus()"
-        >
-            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
-                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
-                </ng-template>
+          kendoDropDownSharedEvents
+          [hostElement]="hostElement"
+          [(isFocused)]="isFocused"
+          (handleBlur)="handleBlur()"
+          (onFocus)="handleFocus()"
+          >
+          @if (prefixTemplate) {
+            <span class="k-input-prefix k-input-prefix-horizontal">
+              <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+              </ng-template>
             </span>
-            <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
-            <input
-                kendoSearchbar
-                [ariaExpanded]="isOpen"
-                [isSuggestable]="suggest"
-                [isFilterable]="filterable"
-                [isLoading]="isLoading"
-                [ariaControls]="ariaControls"
-                [id]="focusableId"
-                [activeDescendant]="activeDescendant"
-                [userInput]="text"
-                [suggestedText]="suggestion"
-                [disabled]="disabled"
-                [readonly]="readonly || this.isAdaptive"
-                [tabIndex]="tabIndex"
-                [isRequired]="isControlRequired"
-                [placeholder]="placeholder"
-                [inputAttributes]="inputAttributes"
-                (onNavigate)="handleNavigate($event)"
-                (valueChange)="searchBarChange($event)"
-                (onBlur)="handleInputBlur()"
-                (onFocus)="handleInputFocus()"
-                (click)="handleClick()"
+          }
+          @if (prefixTemplate && prefixTemplate.showSeparator) {
+            <kendo-separator></kendo-separator>
+          }
+          <input
+            kendoSearchbar
+            [ariaExpanded]="isOpen"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
+            [isLoading]="isLoading"
+            [ariaControls]="ariaControls"
+            [id]="focusableId"
+            [activeDescendant]="activeDescendant"
+            [userInput]="text"
+            [suggestedText]="suggestion"
+            [disabled]="disabled"
+            [readonly]="readonly || this.isAdaptive"
+            [tabIndex]="tabIndex"
+            [isRequired]="isControlRequired"
+            [placeholder]="placeholder"
+            [inputAttributes]="inputAttributes"
+            (onNavigate)="handleNavigate($event)"
+            (valueChange)="searchBarChange($event)"
+            (onBlur)="handleInputBlur()"
+            (onFocus)="handleInputFocus()"
+            (click)="handleClick()"
             />
+          @if (!loading && !readonly && (clearButton && text?.length)) {
             <span
-                *ngIf="!loading && !readonly && (clearButton && text?.length)"
-                class="k-clear-value"
-                [style.visibility]="clearButtonVisibility"
-                [attr.title]="messageFor('clearTitle')"
-                role="button"
-                tabindex="-1"
-                (click)="clearValue($event)"
-                (mousedown)="$event.preventDefault()"
-            >
-                <kendo-icon-wrapper
-                    name="x"
-                    [svgIcon]="xIcon"
+              class="k-clear-value"
+              [style.visibility]="clearButtonVisibility"
+              [attr.title]="messageFor('clearTitle')"
+              role="button"
+              tabindex="-1"
+              (click)="clearValue($event)"
+              (mousedown)="$event.preventDefault()"
+              >
+              <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
                 >
-                </kendo-icon-wrapper>
+              </kendo-icon-wrapper>
             </span>
-            <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
-            <kendo-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-separator>
-            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
-                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
-                </ng-template>
+          }
+          @if (loading) {
+            <span class="k-icon k-i-loading k-input-loading-icon"></span>
+          }
+          @if (suffixTemplate && suffixTemplate.showSeparator) {
+            <kendo-separator></kendo-separator>
+          }
+          @if (suffixTemplate) {
+            <span class="k-input-suffix k-input-suffix-horizontal">
+              <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+              </ng-template>
             </span>
+          }
         </ng-container>
-
+        
         <ng-template #popupTemplate>
-            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+          <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-
+        @if (isOpen || isAdaptiveModeEnabled) {
+          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        }
+        
         <kendo-adaptive-renderer
-            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [title]="adaptiveTitle"
-            [showTextInput]="true"
-            [subtitle]="adaptiveSubtitle"
-            (closePopup)="closeActionSheet()"
-            (textInputChange)="searchBarChange($event)"
-            (navigate)="handleNavigate($event)"
-            [placeholder]="placeholder"
-            [searchBarValue]="text">
+          [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+          [title]="adaptiveTitle"
+          [showTextInput]="true"
+          [subtitle]="adaptiveSubtitle"
+          (closePopup)="closeActionSheet()"
+          (textInputChange)="searchBarChange($event)"
+          (navigate)="handleNavigate($event)"
+          [placeholder]="placeholder"
+          [searchBarValue]="text">
         </kendo-adaptive-renderer>
-
+        
         <ng-template #sharedPopupActionSheetTemplate>
-            <!--header template-->
-            <ng-template *ngIf="headerTemplate"
+          <!--header template-->
+          @if (headerTemplate) {
+            <ng-template
                 [templateContext]="{
                     templateRef: headerTemplate.templateRef
                 }">
             </ng-template>
-            <!--list-->
-            <kendo-list
-                #optionsList
-                [size]="isAdaptive ? 'large' : size"
-                [rounded]="rounded"
-                [id]="listBoxId"
-                [optionPrefix]="optionPrefix"
-                [data]="data"
-                [textField]="valueField"
-                [valueField]="valueField"
-                [template]="template"
-                [groupTemplate]="groupTemplate"
-                [fixedGroupTemplate]="fixedGroupTemplate"
-                [height]="listHeight"
-                [show]="isOpen"
-                [virtual]="virtual"
-                [showStickyHeader]="showStickyHeader"
-                (pageChange)="pageChange($event)"
+          }
+          <!--list-->
+          <kendo-list
+            #optionsList
+            [size]="isAdaptive ? 'large' : size"
+            [rounded]="rounded"
+            [id]="listBoxId"
+            [optionPrefix]="optionPrefix"
+            [data]="data"
+            [textField]="valueField"
+            [valueField]="valueField"
+            [template]="template"
+            [groupTemplate]="groupTemplate"
+            [fixedGroupTemplate]="fixedGroupTemplate"
+            [height]="listHeight"
+            [show]="isOpen"
+            [virtual]="virtual"
+            [showStickyHeader]="showStickyHeader"
+            (pageChange)="pageChange($event)"
             >
-            </kendo-list>
-            <!--no-data template-->
-            <div class="k-no-data" *ngIf="data.length === 0">
-                <ng-template [ngIf]="noDataTemplate"
+          </kendo-list>
+          <!--no-data template-->
+          @if (data.length === 0) {
+            <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>
-            <!--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: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { 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: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { 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: AutoCompleteComponent, decorators: [{
             type: Component,
@@ -1366,145 +1387,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-autocomplete',
                     template: `
         <ng-container kendoAutoCompleteLocalizedMessages
-            i18n-noDataText="kendo.autocomplete.noDataText|The text displayed in the popup when there are no items"
-            noDataText="NO DATA FOUND"
-
-            i18n-clearTitle="kendo.autocomplete.clearTitle|The title of the clear button"
-            clearTitle="clear"
-
-            i18n-popupLabel="kendo.autocomplete.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
-            popupLabel="Options list"
-
-            i18n-adaptiveCloseButtonTitle="kendo.autocomplete.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-noDataText="kendo.autocomplete.noDataText|The text displayed in the popup when there are no items"
+          noDataText="NO DATA FOUND"
+        
+          i18n-clearTitle="kendo.autocomplete.clearTitle|The title of the clear button"
+          clearTitle="clear"
+        
+          i18n-popupLabel="kendo.autocomplete.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+          popupLabel="Options list"
+        
+          i18n-adaptiveCloseButtonTitle="kendo.autocomplete.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"
+          >
         </ng-container>
-
+        
         <ng-container
-            kendoDropDownSharedEvents
-            [hostElement]="hostElement"
-            [(isFocused)]="isFocused"
-            (handleBlur)="handleBlur()"
-            (onFocus)="handleFocus()"
-        >
-            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
-                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
-                </ng-template>
+          kendoDropDownSharedEvents
+          [hostElement]="hostElement"
+          [(isFocused)]="isFocused"
+          (handleBlur)="handleBlur()"
+          (onFocus)="handleFocus()"
+          >
+          @if (prefixTemplate) {
+            <span class="k-input-prefix k-input-prefix-horizontal">
+              <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+              </ng-template>
             </span>
-            <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
-            <input
-                kendoSearchbar
-                [ariaExpanded]="isOpen"
-                [isSuggestable]="suggest"
-                [isFilterable]="filterable"
-                [isLoading]="isLoading"
-                [ariaControls]="ariaControls"
-                [id]="focusableId"
-                [activeDescendant]="activeDescendant"
-                [userInput]="text"
-                [suggestedText]="suggestion"
-                [disabled]="disabled"
-                [readonly]="readonly || this.isAdaptive"
-                [tabIndex]="tabIndex"
-                [isRequired]="isControlRequired"
-                [placeholder]="placeholder"
-                [inputAttributes]="inputAttributes"
-                (onNavigate)="handleNavigate($event)"
-                (valueChange)="searchBarChange($event)"
-                (onBlur)="handleInputBlur()"
-                (onFocus)="handleInputFocus()"
-                (click)="handleClick()"
+          }
+          @if (prefixTemplate && prefixTemplate.showSeparator) {
+            <kendo-separator></kendo-separator>
+          }
+          <input
+            kendoSearchbar
+            [ariaExpanded]="isOpen"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
+            [isLoading]="isLoading"
+            [ariaControls]="ariaControls"
+            [id]="focusableId"
+            [activeDescendant]="activeDescendant"
+            [userInput]="text"
+            [suggestedText]="suggestion"
+            [disabled]="disabled"
+            [readonly]="readonly || this.isAdaptive"
+            [tabIndex]="tabIndex"
+            [isRequired]="isControlRequired"
+            [placeholder]="placeholder"
+            [inputAttributes]="inputAttributes"
+            (onNavigate)="handleNavigate($event)"
+            (valueChange)="searchBarChange($event)"
+            (onBlur)="handleInputBlur()"
+            (onFocus)="handleInputFocus()"
+            (click)="handleClick()"
             />
+          @if (!loading && !readonly && (clearButton && text?.length)) {
             <span
-                *ngIf="!loading && !readonly && (clearButton && text?.length)"
-                class="k-clear-value"
-                [style.visibility]="clearButtonVisibility"
-                [attr.title]="messageFor('clearTitle')"
-                role="button"
-                tabindex="-1"
-                (click)="clearValue($event)"
-                (mousedown)="$event.preventDefault()"
-            >
-                <kendo-icon-wrapper
-                    name="x"
-                    [svgIcon]="xIcon"
+              class="k-clear-value"
+              [style.visibility]="clearButtonVisibility"
+              [attr.title]="messageFor('clearTitle')"
+              role="button"
+              tabindex="-1"
+              (click)="clearValue($event)"
+              (mousedown)="$event.preventDefault()"
+              >
+              <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
                 >
-                </kendo-icon-wrapper>
+              </kendo-icon-wrapper>
             </span>
-            <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
-            <kendo-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-separator>
-            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
-                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
-                </ng-template>
+          }
+          @if (loading) {
+            <span class="k-icon k-i-loading k-input-loading-icon"></span>
+          }
+          @if (suffixTemplate && suffixTemplate.showSeparator) {
+            <kendo-separator></kendo-separator>
+          }
+          @if (suffixTemplate) {
+            <span class="k-input-suffix k-input-suffix-horizontal">
+              <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+              </ng-template>
             </span>
+          }
         </ng-container>
-
+        
         <ng-template #popupTemplate>
-            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+          <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-
+        @if (isOpen || isAdaptiveModeEnabled) {
+          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        }
+        
         <kendo-adaptive-renderer
-            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [title]="adaptiveTitle"
-            [showTextInput]="true"
-            [subtitle]="adaptiveSubtitle"
-            (closePopup)="closeActionSheet()"
-            (textInputChange)="searchBarChange($event)"
-            (navigate)="handleNavigate($event)"
-            [placeholder]="placeholder"
-            [searchBarValue]="text">
+          [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+          [title]="adaptiveTitle"
+          [showTextInput]="true"
+          [subtitle]="adaptiveSubtitle"
+          (closePopup)="closeActionSheet()"
+          (textInputChange)="searchBarChange($event)"
+          (navigate)="handleNavigate($event)"
+          [placeholder]="placeholder"
+          [searchBarValue]="text">
         </kendo-adaptive-renderer>
-
+        
         <ng-template #sharedPopupActionSheetTemplate>
-            <!--header template-->
-            <ng-template *ngIf="headerTemplate"
+          <!--header template-->
+          @if (headerTemplate) {
+            <ng-template
                 [templateContext]="{
                     templateRef: headerTemplate.templateRef
                 }">
             </ng-template>
-            <!--list-->
-            <kendo-list
-                #optionsList
-                [size]="isAdaptive ? 'large' : size"
-                [rounded]="rounded"
-                [id]="listBoxId"
-                [optionPrefix]="optionPrefix"
-                [data]="data"
-                [textField]="valueField"
-                [valueField]="valueField"
-                [template]="template"
-                [groupTemplate]="groupTemplate"
-                [fixedGroupTemplate]="fixedGroupTemplate"
-                [height]="listHeight"
-                [show]="isOpen"
-                [virtual]="virtual"
-                [showStickyHeader]="showStickyHeader"
-                (pageChange)="pageChange($event)"
+          }
+          <!--list-->
+          <kendo-list
+            #optionsList
+            [size]="isAdaptive ? 'large' : size"
+            [rounded]="rounded"
+            [id]="listBoxId"
+            [optionPrefix]="optionPrefix"
+            [data]="data"
+            [textField]="valueField"
+            [valueField]="valueField"
+            [template]="template"
+            [groupTemplate]="groupTemplate"
+            [fixedGroupTemplate]="fixedGroupTemplate"
+            [height]="listHeight"
+            [show]="isOpen"
+            [virtual]="virtual"
+            [showStickyHeader]="showStickyHeader"
+            (pageChange)="pageChange($event)"
             >
-            </kendo-list>
-            <!--no-data template-->
-            <div class="k-no-data" *ngIf="data.length === 0">
-                <ng-template [ngIf]="noDataTemplate"
+          </kendo-list>
+          <!--no-data template-->
+          @if (data.length === 0) {
+            <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>
-            <!--footer template-->
-            <ng-template *ngIf="footerTemplate"
+          }
+          <!--footer template-->
+          @if (footerTemplate) {
+            <ng-template
                 [templateContext]="{
                     templateRef: footerTemplate.templateRef
                 }">
             </ng-template>
+          }
         </ng-template>
-  `,
+        `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, IconWrapperComponent, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, ListComponent]
+                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, IconWrapperComponent, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, ListComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.DataService }, { type: i3.PopupService }, { type: i4.SelectionService }, { type: i5.NavigationService }, { type: i6.DisabledItemsService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.Injector }, { type: i7.AdaptiveService }], propDecorators: { adaptiveRendererComponent: [{
                 type: ViewChild,