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

package/esm2022/multiselect/multiselect.component.mjs

@@ -38,7 +38,7 @@ import { normalizeVirtualizationSettings } from '../common/models/virtualization
 import { xIcon } from '@progress/kendo-svg-icons';
 import { AdaptiveRendererComponent } from '../common/adaptive-renderer.component';
 import { TagListComponent } from '../common/taglist.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';
@@ -1788,7 +1788,7 @@ export class MultiSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.DataService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MultiSelectComponent, isStandalone: true, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer", inputAttributes: "inputAttributes" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", removeTag: "removeTag" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MultiSelectComponent, isStandalone: true, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer", inputAttributes: "inputAttributes" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", removeTag: "removeTag" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
             MULTISELECT_VALUE_ACCESSOR,
             DataService,
             SelectionService,
@@ -1807,176 +1807,196 @@ export class MultiSelectComponent {
             }
         ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "customItemTemplate", first: true, predicate: CustomItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, 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: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "tagList", first: true, predicate: TagListComponent, descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoMultiSelect"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoMultiSelectLocalizedMessages
-            i18n-noDataText="kendo.multiselect.noDataText|The text displayed in the popup when there are no items"
-            noDataText="NO DATA FOUND"
-
-            i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
-            clearTitle="clear"
-
-            i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
-            popupLabel="Options list"
-
-            i18n-adaptiveCloseButtonTitle="kendo.multiselect.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-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
-            useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
-        >
+          i18n-noDataText="kendo.multiselect.noDataText|The text displayed in the popup when there are no items"
+          noDataText="NO DATA FOUND"
+        
+          i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
+          clearTitle="clear"
+        
+          i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+          popupLabel="Options list"
+        
+          i18n-adaptiveCloseButtonTitle="kendo.multiselect.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-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
+          useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
+          >
         </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>
-            <div class="k-input-values">
-                <kendo-taglist
-                    [size]="size"
-                    [rounded]="rounded"
-                    [fillMode]="fillMode"
-                    [id]="tagListId"
-                    [tags]="tags"
-                    [textField]="textField"
-                    [valueField]="valueField"
-                    [focused]="focusedTagIndex"
-                    [disabled]="disabled"
-                    [template]="tagTemplate"
-                    [groupTemplate]="groupTagTemplate"
-                    [tagPrefix]="tagPrefix"
-                    [disabledIndices]="disabledIndices"
-                    (removeTag)="handleRemoveTag($event)"
-                >
-                </kendo-taglist>
-                <input
-                    kendoSearchbar
-                    [ariaControls]="ariaControls"
-                    [ariaExpanded]="isOpen"
-                    [id]="focusableId"
-                    [tagListId]="tagListId"
-                    [isLoading]="loading"
-                    [isFilterable]="filterable"
-                    [activeDescendant]="activeDescendant"
-                    [userInput]="text"
-                    [disabled]="disabled"
-                    [readonly]="readonly || this.isAdaptive"
-                    [tabIndex]="tabIndex"
-                    [isRequired]="isControlRequired"
-                    [placeholder]="placeholder"
-                    [inputAttributes]="inputAttributes"
-                    (onNavigate)="handleNavigate($event)"
-                    (valueChange)="handleFilter($event)"
-                    (onBlur)="handleInputBlur()"
-                    (onFocus)="handleInputFocus()"
-                    (click)="handleClick()"
-                />
-            </div>
-
+          }
+          @if (prefixTemplate && prefixTemplate.showSeparator) {
+            <kendo-separator></kendo-separator>
+          }
+          <div class="k-input-values">
+            <kendo-taglist
+              [size]="size"
+              [rounded]="rounded"
+              [fillMode]="fillMode"
+              [id]="tagListId"
+              [tags]="tags"
+              [textField]="textField"
+              [valueField]="valueField"
+              [focused]="focusedTagIndex"
+              [disabled]="disabled"
+              [template]="tagTemplate"
+              [groupTemplate]="groupTagTemplate"
+              [tagPrefix]="tagPrefix"
+              [disabledIndices]="disabledIndices"
+              (removeTag)="handleRemoveTag($event)"
+              >
+            </kendo-taglist>
+            <input
+              kendoSearchbar
+              [ariaControls]="ariaControls"
+              [ariaExpanded]="isOpen"
+              [id]="focusableId"
+              [tagListId]="tagListId"
+              [isLoading]="loading"
+              [isFilterable]="filterable"
+              [activeDescendant]="activeDescendant"
+              [userInput]="text"
+              [disabled]="disabled"
+              [readonly]="readonly || this.isAdaptive"
+              [tabIndex]="tabIndex"
+              [isRequired]="isControlRequired"
+              [placeholder]="placeholder"
+              [inputAttributes]="inputAttributes"
+              (onNavigate)="handleNavigate($event)"
+              (valueChange)="handleFilter($event)"
+              (onBlur)="handleInputBlur()"
+              (onFocus)="handleInputFocus()"
+              (click)="handleClick()"
+              />
+          </div>
+        
+          @if (!loading && !readonly && clearButton && (tags?.length || text?.length)) {
             <span
-                *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
-                class="k-clear-value"
-                [style.visibility]="clearButtonVisibility"
-                [attr.title]="messageFor('clearTitle')"
-                role="button"
-                tabindex="-1"
-                (mousedown)="clearAll($event)"
-            >
-                <kendo-icon-wrapper
-                    class="k-icon"
-                    name="x"
-                    [svgIcon]="xIcon"
+              class="k-clear-value"
+              [style.visibility]="clearButtonVisibility"
+              [attr.title]="messageFor('clearTitle')"
+              role="button"
+              tabindex="-1"
+              (mousedown)="clearAll($event)"
+              >
+              <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
                 >
-                </kendo-icon-wrapper>
+              </kendo-icon-wrapper>
             </span>
+          }
+          @if (loading) {
             <span
-                *ngIf="loading"
-                class="k-icon k-i-loading k-input-loading-icon"
-            >
+              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 (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>
-        <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]="true"
-            [subtitle]="adaptiveSubtitle"
-            (closePopup)="applyValue()"
-            (textInputChange)="handleFilter($event)"
-            [placeholder]="placeholder"
-            (navigate)="handleNavigate($event)"
-            [searchBarValue]="text">
+          [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+          [title]="adaptiveTitle"
+          [showTextInput]="true"
+          [subtitle]="adaptiveSubtitle"
+          (closePopup)="applyValue()"
+          (textInputChange)="handleFilter($event)"
+          [placeholder]="placeholder"
+          (navigate)="handleNavigate($event)"
+          [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]="textField"
-                [valueField]="valueField"
-                [template]="template"
-                [groupTemplate]="groupTemplate"
-                [fixedGroupTemplate]="fixedGroupTemplate"
-                [height]="listHeight"
-                [show]="isOpen"
-                [multipleSelection]="true"
-                [virtual]="virtual"
-                (pageChange)="pageChange($event)"
-                [checkboxes]="checkboxes"
-                [isMultiselect]="true"
-                [isActionSheetExpanded]="isActionSheetExpanded"
-                [showStickyHeader]="showStickyHeader"
-                [customItemTemplate]="customItemTemplate"
-                [text]="text"
-                [allowCustom]="allowCustom"
+          }
+          <!--list-->
+          <kendo-list
+            #optionsList
+            [size]="isAdaptive ? 'large' : size"
+            [rounded]="rounded"
+            [id]="listBoxId"
+            [optionPrefix]="optionPrefix"
+            [data]="data"
+            [textField]="textField"
+            [valueField]="valueField"
+            [template]="template"
+            [groupTemplate]="groupTemplate"
+            [fixedGroupTemplate]="fixedGroupTemplate"
+            [height]="listHeight"
+            [show]="isOpen"
+            [multipleSelection]="true"
+            [virtual]="virtual"
+            (pageChange)="pageChange($event)"
+            [checkboxes]="checkboxes"
+            [isMultiselect]="true"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [showStickyHeader]="showStickyHeader"
+            [customItemTemplate]="customItemTemplate"
+            [text]="text"
+            [allowCustom]="allowCustom"
             >
-            </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 ? 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: 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: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { 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: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { 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: MultiSelectComponent, decorators: [{
             type: Component,
@@ -2003,178 +2023,198 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-multiselect',
                     template: `
         <ng-container kendoMultiSelectLocalizedMessages
-            i18n-noDataText="kendo.multiselect.noDataText|The text displayed in the popup when there are no items"
-            noDataText="NO DATA FOUND"
-
-            i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
-            clearTitle="clear"
-
-            i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
-            popupLabel="Options list"
-
-            i18n-adaptiveCloseButtonTitle="kendo.multiselect.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-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
-            useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
-        >
+          i18n-noDataText="kendo.multiselect.noDataText|The text displayed in the popup when there are no items"
+          noDataText="NO DATA FOUND"
+        
+          i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
+          clearTitle="clear"
+        
+          i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+          popupLabel="Options list"
+        
+          i18n-adaptiveCloseButtonTitle="kendo.multiselect.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-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
+          useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
+          >
         </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>
-            <div class="k-input-values">
-                <kendo-taglist
-                    [size]="size"
-                    [rounded]="rounded"
-                    [fillMode]="fillMode"
-                    [id]="tagListId"
-                    [tags]="tags"
-                    [textField]="textField"
-                    [valueField]="valueField"
-                    [focused]="focusedTagIndex"
-                    [disabled]="disabled"
-                    [template]="tagTemplate"
-                    [groupTemplate]="groupTagTemplate"
-                    [tagPrefix]="tagPrefix"
-                    [disabledIndices]="disabledIndices"
-                    (removeTag)="handleRemoveTag($event)"
-                >
-                </kendo-taglist>
-                <input
-                    kendoSearchbar
-                    [ariaControls]="ariaControls"
-                    [ariaExpanded]="isOpen"
-                    [id]="focusableId"
-                    [tagListId]="tagListId"
-                    [isLoading]="loading"
-                    [isFilterable]="filterable"
-                    [activeDescendant]="activeDescendant"
-                    [userInput]="text"
-                    [disabled]="disabled"
-                    [readonly]="readonly || this.isAdaptive"
-                    [tabIndex]="tabIndex"
-                    [isRequired]="isControlRequired"
-                    [placeholder]="placeholder"
-                    [inputAttributes]="inputAttributes"
-                    (onNavigate)="handleNavigate($event)"
-                    (valueChange)="handleFilter($event)"
-                    (onBlur)="handleInputBlur()"
-                    (onFocus)="handleInputFocus()"
-                    (click)="handleClick()"
-                />
-            </div>
-
+          }
+          @if (prefixTemplate && prefixTemplate.showSeparator) {
+            <kendo-separator></kendo-separator>
+          }
+          <div class="k-input-values">
+            <kendo-taglist
+              [size]="size"
+              [rounded]="rounded"
+              [fillMode]="fillMode"
+              [id]="tagListId"
+              [tags]="tags"
+              [textField]="textField"
+              [valueField]="valueField"
+              [focused]="focusedTagIndex"
+              [disabled]="disabled"
+              [template]="tagTemplate"
+              [groupTemplate]="groupTagTemplate"
+              [tagPrefix]="tagPrefix"
+              [disabledIndices]="disabledIndices"
+              (removeTag)="handleRemoveTag($event)"
+              >
+            </kendo-taglist>
+            <input
+              kendoSearchbar
+              [ariaControls]="ariaControls"
+              [ariaExpanded]="isOpen"
+              [id]="focusableId"
+              [tagListId]="tagListId"
+              [isLoading]="loading"
+              [isFilterable]="filterable"
+              [activeDescendant]="activeDescendant"
+              [userInput]="text"
+              [disabled]="disabled"
+              [readonly]="readonly || this.isAdaptive"
+              [tabIndex]="tabIndex"
+              [isRequired]="isControlRequired"
+              [placeholder]="placeholder"
+              [inputAttributes]="inputAttributes"
+              (onNavigate)="handleNavigate($event)"
+              (valueChange)="handleFilter($event)"
+              (onBlur)="handleInputBlur()"
+              (onFocus)="handleInputFocus()"
+              (click)="handleClick()"
+              />
+          </div>
+        
+          @if (!loading && !readonly && clearButton && (tags?.length || text?.length)) {
             <span
-                *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
-                class="k-clear-value"
-                [style.visibility]="clearButtonVisibility"
-                [attr.title]="messageFor('clearTitle')"
-                role="button"
-                tabindex="-1"
-                (mousedown)="clearAll($event)"
-            >
-                <kendo-icon-wrapper
-                    class="k-icon"
-                    name="x"
-                    [svgIcon]="xIcon"
+              class="k-clear-value"
+              [style.visibility]="clearButtonVisibility"
+              [attr.title]="messageFor('clearTitle')"
+              role="button"
+              tabindex="-1"
+              (mousedown)="clearAll($event)"
+              >
+              <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
                 >
-                </kendo-icon-wrapper>
+              </kendo-icon-wrapper>
             </span>
+          }
+          @if (loading) {
             <span
-                *ngIf="loading"
-                class="k-icon k-i-loading k-input-loading-icon"
-            >
+              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 (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>
-        <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]="true"
-            [subtitle]="adaptiveSubtitle"
-            (closePopup)="applyValue()"
-            (textInputChange)="handleFilter($event)"
-            [placeholder]="placeholder"
-            (navigate)="handleNavigate($event)"
-            [searchBarValue]="text">
+          [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+          [title]="adaptiveTitle"
+          [showTextInput]="true"
+          [subtitle]="adaptiveSubtitle"
+          (closePopup)="applyValue()"
+          (textInputChange)="handleFilter($event)"
+          [placeholder]="placeholder"
+          (navigate)="handleNavigate($event)"
+          [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]="textField"
-                [valueField]="valueField"
-                [template]="template"
-                [groupTemplate]="groupTemplate"
-                [fixedGroupTemplate]="fixedGroupTemplate"
-                [height]="listHeight"
-                [show]="isOpen"
-                [multipleSelection]="true"
-                [virtual]="virtual"
-                (pageChange)="pageChange($event)"
-                [checkboxes]="checkboxes"
-                [isMultiselect]="true"
-                [isActionSheetExpanded]="isActionSheetExpanded"
-                [showStickyHeader]="showStickyHeader"
-                [customItemTemplate]="customItemTemplate"
-                [text]="text"
-                [allowCustom]="allowCustom"
+          }
+          <!--list-->
+          <kendo-list
+            #optionsList
+            [size]="isAdaptive ? 'large' : size"
+            [rounded]="rounded"
+            [id]="listBoxId"
+            [optionPrefix]="optionPrefix"
+            [data]="data"
+            [textField]="textField"
+            [valueField]="valueField"
+            [template]="template"
+            [groupTemplate]="groupTemplate"
+            [fixedGroupTemplate]="fixedGroupTemplate"
+            [height]="listHeight"
+            [show]="isOpen"
+            [multipleSelection]="true"
+            [virtual]="virtual"
+            (pageChange)="pageChange($event)"
+            [checkboxes]="checkboxes"
+            [isMultiselect]="true"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [showStickyHeader]="showStickyHeader"
+            [customItemTemplate]="customItemTemplate"
+            [text]="text"
+            [allowCustom]="allowCustom"
             >
-            </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 ? 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, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, TagListComponent, SearchBarComponent, IconWrapperComponent, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, ListComponent]
+                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgTemplateOutlet, SeparatorComponent, TagListComponent, SearchBarComponent, IconWrapperComponent, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, ListComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.DataService }, { type: i4.SelectionService }, { type: i5.NavigationService }, { type: i6.DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i7.AdaptiveService }], propDecorators: { adaptiveRendererComponent: [{
                 type: ViewChild,