@progress/kendo-angular-dropdowns 17.0.0-develop.9 → 17.0.0

package/{esm2020 → esm2022}/multiselect/multiselect.component.mjs

@@ -76,239 +76,43 @@ const DEFAULT_FILL_MODE = 'solid';
  * ```
  */
 export class MultiSelectComponent {
-    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, injector, hostElement) {
-        this.wrapper = wrapper;
-        this.localization = localization;
-        this.popupService = popupService;
-        this.dataService = dataService;
-        this.selectionService = selectionService;
-        this.navigationService = navigationService;
-        this.disabledItemsService = disabledItemsService;
-        this.cdr = cdr;
-        this.differs = differs;
-        this.renderer = renderer;
-        this._zone = _zone;
-        this.injector = injector;
-        this.hostElement = hostElement;
-        /**
-         * @hidden
-         */
-        this.animationDuration = animationDuration;
-        /**
-         * @hidden
-         */
-        this.xIcon = xIcon;
-        /**
-         * @hidden
-         */
-        this.plusIcon = plusIcon;
-        this.listBoxId = `k-${guid()}`;
-        this.tagListId = `k-${guid()}`;
-        this.tagPrefix = "tag-" + guid();
-        this.optionPrefix = "option-" + guid();
-        this.focusedTagIndex = undefined;
-        /**
-         * Shows or hides the current group sticky header when using grouped data.
-         * By default the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
-         */
-        this.showStickyHeader = true;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
-        /**
-         * Determines whether to close the options list of the MultiSelect after the item selection is finished
-         * ([see example]({% slug openstate_multiselect %}#toc-keeping-the-options-list-open-while-on-focus)).
-         * @default true
-         */
-        this.autoClose = true;
-        /**
-         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-         */
-        this.tabindex = 0;
-        /**
-         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
-         */
-        this.adaptiveMode = 'none';
-        /**
-         * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
-         * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
-         */
-        this.title = '';
-        /**
-         * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_multiselect#toc-managing-the-multiselect-disabled-state-in-reactive-forms).
-         */
-        this.disabled = false;
-        /**
-         * Sets the read-only state of the component.
-         *
-         * @default false
-         */
-        this.readonly = false;
-        /**
-         * Enables the [filtering]({% slug filtering_multiselect %}) functionality of the MultiSelect.
-         */
-        this.filterable = false;
-        this._listHeight = 200;
-        /**
-         * If set to `true`, renders a button on hovering over the component.
-         * Clicking this button resets the value of the component to an empty array and triggers the `change` event.
-         */
-        this.clearButton = true;
-        /**
-         * A user-defined callback function which receives an array of selected data items and maps them to an array of tags
-         * ([see examples]({% slug summarytagmode_multiselect %}#toc-rendering-of-tags)).
-         *
-         * @param { Any[] } dataItems - The selected data items from the list.
-         * @returns { Any[] } - The tags that will be rendered by the component.
-         */
-        this.tagMapper = (tags) => tags || [];
-        /**
-         * Specifies whether the MultiSelect allows user-defined values that are not present in the dataset
-         * ([more information and examples]({% slug custom_values_multiselect %})).
-         * Defaults to `false`.
-         *
-         * The feature is not available when using adaptive mode.
-         */
-        this.allowCustom = false;
-        /**
-         * A user-defined callback function which returns normalized custom values.
-         * Typically used when the data items are different from type `string`.
-         *
-         * @param { Any } value - The custom value that is defined by the user.
-         * @returns { Any }
-         *
-         * @example
-         * ```ts
-         * import { map } from 'rxjs/operators';
-         *
-         * _@Component({
-         * selector: 'my-app',
-         * template: `
-         *   <kendo-multiselect
-         *       [allowCustom]="true"
-         *       [data]="listItems"
-         *       textField="text"
-         *       valueField="value"
-         *       [valueNormalizer]="valueNormalizer"
-         *       (valueChange)="onValueChange($event)"
-         *   >
-         *   </kendo-multiselect>
-         * `
-         * })
-         *
-         * class AppComponent {
-         *   public listItems: Array<{ text: string, value: number }> = [
-         *       { text: "Small", value: 1 },
-         *       { text: "Medium", value: 2 },
-         *       { text: "Large", value: 3 }
-         *   ];
-         *
-         *   public onValueChange(value) {
-         *       console.log("valueChange : ", value);
-         *   }
-         *
-         *   public valueNormalizer = (text$: Observable<string>) => text$.pipe(map((text: string) => {
-         *      return {
-         *         value: Math.floor(Math.random() * (1000 - 100) + 1000), //generate unique valueField
-         *         text: text };
-         *   }));
-         *
-         * }
-         * ```
-         */
-        this.valueNormalizer = (text) => text.pipe(map((userInput) => {
-            const comparer = (item) => typeof item === 'string' && userInput.toLowerCase() === item.toLowerCase();
-            const matchingValue = this.value.find(comparer);
-            if (matchingValue) {
-                return matchingValue;
-            }
-            const matchingItem = this.dataService.find(comparer);
-            return matchingItem ? matchingItem : userInput;
-        }));
-        /**
-         * Fires each time the user types in the input field.
-         * You can filter the source based on the passed filtration value.
-         */
-        this.filterChange = new EventEmitter();
-        /**
-         * Fires each time the value is changed&mdash;
-         * when the component is blurred or the value is cleared through the **Clear** button
-         * ([see example](slug:events_multiselect)).
-         * When the value of the component is programmatically changed to `ngModel` or `formControl`
-         * through its API or form binding, the `valueChange` event is not triggered because it
-         * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open
-         * ([see example]({% slug openstate_multiselect %}#toc-preventing-opening-and-closing)).
-         * This event is preventable. If you cancel it, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires after the popup has been opened.
-         */
-        this.opened = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close
-         * ([see example]({% slug openstate_multiselect %}#toc-preventing-opening-and-closing)).
-         * This event is preventable. If you cancel it, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        /**
-         * Fires after the popup has been closed.
-         */
-        this.closed = new EventEmitter();
-        /**
-         * Fires each time the user focuses the MultiSelect.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the MultiSelect gets blurred.
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires each time the user focuses the `input` element.
-         */
-        this.inputFocus = new EventEmitter();
-        /**
-         * Fires each time the `input` element gets blurred.
-         */
-        this.inputBlur = new EventEmitter();
-        /**
-         * Fires each time a tag is about to be removed([see examples]({% slug summarytagmode_multiselecttree %}#toc-notifying-on-removing-group-tags)).
-         * This event is preventable. If you cancel it, the tag will not be removed.
-         */
-        this.removeTag = new EventEmitter();
-        this.hostClasses = true;
-        /**
-         * @hidden
-         */
-        this.windowSize = 'large';
-        this.initialized = false;
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
-        this._valueHolder = [];
-        this.onChangeCallback = (_) => { };
-        this.onTouchedCallback = (_) => { };
-        this._placeholder = '';
-        this._open = false;
-        this._value = [];
-        this._popupSettings = { animate: true };
-        this._checkboxes = { enabled: false };
-        this._isFocused = false;
-        this.selectedDataItems = [];
-        this.customValueSubject = new Subject();
-        this.subs = new Subscription();
-        validatePackage(packageMetadata);
-        this.popupMouseDownHandler = this.onMouseDown.bind(this);
-        this.data = [];
-        this.direction = this.localization.rtl ? 'rtl' : 'ltr';
-        this.subscribeEvents();
-        this.subscribeTouchEvents();
-    }
+    wrapper;
+    localization;
+    popupService;
+    dataService;
+    selectionService;
+    navigationService;
+    disabledItemsService;
+    cdr;
+    differs;
+    renderer;
+    _zone;
+    injector;
+    hostElement;
+    /**
+     * @hidden
+     */
+    animationDuration = animationDuration;
+    /**
+     * @hidden
+     */
+    xIcon = xIcon;
+    /**
+     * @hidden
+     */
+    plusIcon = plusIcon;
+    listBoxId = `k-${guid()}`;
+    tagListId = `k-${guid()}`;
+    tagPrefix = "tag-" + guid();
+    optionPrefix = "option-" + guid();
+    popupRef;
+    text;
+    tags;
+    focusedTagIndex = undefined;
+    /**
+     * @hidden
+     */
+    responsiveRendererComponent;
     /**
      * @hidden
      */
@@ -494,6 +298,25 @@ export class MultiSelectComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
+    /**
+     * Shows or hides the current group sticky header when using grouped data.
+     * By default the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
+     */
+    showStickyHeader = true;
+    /**
+     * @hidden
+     */
+    focusableId = `k-${guid()}`;
+    /**
+     * Determines whether to close the options list of the MultiSelect after the item selection is finished
+     * ([see example]({% slug openstate_multiselect %}#toc-keeping-the-options-list-open-while-on-focus)).
+     * @default true
+     */
+    autoClose = true;
+    /**
+     * Sets and gets the loading state of the MultiSelect.
+     */
+    loading;
     /**
      * Sets the data of the MultiSelect.
      *
@@ -538,6 +361,24 @@ export class MultiSelectComponent {
     get value() {
         return this._value;
     }
+    /**
+     * Sets the data item field that represents the item value.
+     * If the data contains only primitive values, do not define it.
+     *
+     * > The `valueField` property can be set to point to a nested property value - e.g. `category.id`.
+     */
+    valueField;
+    /**
+     * Sets the data item field that represents the item text.
+     * If the data contains only primitive values, do not define it.
+     *
+     * > The `textField` property can be set to point to a nested property value - e.g. `category.name`.
+     */
+    textField;
+    /**
+     * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     */
+    tabindex = 0;
     /**
      * @hidden
      */
@@ -621,6 +462,15 @@ export class MultiSelectComponent {
     get placeholder() {
         return this.selectedDataItems.length ? '' : this._placeholder;
     }
+    /**
+     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     */
+    adaptiveMode = 'none';
+    /**
+     * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
+     */
+    title = '';
     /**
      * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
      * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
@@ -637,6 +487,10 @@ export class MultiSelectComponent {
     get isAdaptiveModeEnabled() {
         return this.adaptiveMode === 'auto';
     }
+    /**
+     * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_multiselect#toc-managing-the-multiselect-disabled-state-in-reactive-forms).
+     */
+    disabled = false;
     /**
      * Defines a Boolean function that is executed for each data item in the component
      * ([see examples]({% slug disableditems_multiselect %})). Determines whether the item will be disabled.
@@ -656,6 +510,16 @@ export class MultiSelectComponent {
     get checkboxes() {
         return this._checkboxes;
     }
+    /**
+     * Sets the read-only state of the component.
+     *
+     * @default false
+     */
+    readonly = false;
+    /**
+     * Enables the [filtering]({% slug filtering_multiselect %}) functionality of the MultiSelect.
+     */
+    filterable = false;
     /**
      * Enables the [virtualization]({% slug virtualization_multiselect %}) functionality.
      */
@@ -698,6 +562,7 @@ export class MultiSelectComponent {
         }
         return this._listHeight;
     }
+    _listHeight = 200;
     /**
      * Specifies the type of the selected value.
      * If set to `true`, the selected value has to be of the primitive type
@@ -712,6 +577,164 @@ export class MultiSelectComponent {
         }
         return this._valuePrimitive;
     }
+    /**
+     * If set to `true`, renders a button on hovering over the component.
+     * Clicking this button resets the value of the component to an empty array and triggers the `change` event.
+     */
+    clearButton = true;
+    /**
+     * A user-defined callback function which receives an array of selected data items and maps them to an array of tags
+     * ([see examples]({% slug summarytagmode_multiselect %}#toc-rendering-of-tags)).
+     *
+     * @param { Any[] } dataItems - The selected data items from the list.
+     * @returns { Any[] } - The tags that will be rendered by the component.
+     */
+    tagMapper = (tags) => tags || [];
+    /**
+     * Specifies whether the MultiSelect allows user-defined values that are not present in the dataset
+     * ([more information and examples]({% slug custom_values_multiselect %})).
+     * Defaults to `false`.
+     *
+     * The feature is not available when using adaptive mode.
+     */
+    allowCustom = false;
+    /**
+     * A user-defined callback function which returns normalized custom values.
+     * Typically used when the data items are different from type `string`.
+     *
+     * @param { Any } value - The custom value that is defined by the user.
+     * @returns { Any }
+     *
+     * @example
+     * ```ts
+     * import { map } from 'rxjs/operators';
+     *
+     * _@Component({
+     * selector: 'my-app',
+     * template: `
+     *   <kendo-multiselect
+     *       [allowCustom]="true"
+     *       [data]="listItems"
+     *       textField="text"
+     *       valueField="value"
+     *       [valueNormalizer]="valueNormalizer"
+     *       (valueChange)="onValueChange($event)"
+     *   >
+     *   </kendo-multiselect>
+     * `
+     * })
+     *
+     * class AppComponent {
+     *   public listItems: Array<{ text: string, value: number }> = [
+     *       { text: "Small", value: 1 },
+     *       { text: "Medium", value: 2 },
+     *       { text: "Large", value: 3 }
+     *   ];
+     *
+     *   public onValueChange(value) {
+     *       console.log("valueChange : ", value);
+     *   }
+     *
+     *   public valueNormalizer = (text$: Observable<string>) => text$.pipe(map((text: string) => {
+     *      return {
+     *         value: Math.floor(Math.random() * (1000 - 100) + 1000), //generate unique valueField
+     *         text: text };
+     *   }));
+     *
+     * }
+     * ```
+     */
+    valueNormalizer = (text) => text.pipe(map((userInput) => {
+        const comparer = (item) => typeof item === 'string' && userInput.toLowerCase() === item.toLowerCase();
+        const matchingValue = this.value.find(comparer);
+        if (matchingValue) {
+            return matchingValue;
+        }
+        const matchingItem = this.dataService.find(comparer);
+        return matchingItem ? matchingItem : userInput;
+    }));
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes;
+    /**
+     * Fires each time the user types in the input field.
+     * You can filter the source based on the passed filtration value.
+     */
+    filterChange = new EventEmitter();
+    /**
+     * Fires each time the value is changed&mdash;
+     * when the component is blurred or the value is cleared through the **Clear** button
+     * ([see example](slug:events_multiselect)).
+     * When the value of the component is programmatically changed to `ngModel` or `formControl`
+     * through its API or form binding, the `valueChange` event is not triggered because it
+     * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
+     */
+    valueChange = new EventEmitter();
+    /**
+     * Fires each time the popup is about to open
+     * ([see example]({% slug openstate_multiselect %}#toc-preventing-opening-and-closing)).
+     * This event is preventable. If you cancel it, the popup will remain closed.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires after the popup has been opened.
+     */
+    opened = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close
+     * ([see example]({% slug openstate_multiselect %}#toc-preventing-opening-and-closing)).
+     * This event is preventable. If you cancel it, the popup will remain open.
+     */
+    close = new EventEmitter();
+    /**
+     * Fires after the popup has been closed.
+     */
+    closed = new EventEmitter();
+    /**
+     * Fires each time the user focuses the MultiSelect.
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time the MultiSelect gets blurred.
+     */
+    onBlur = new EventEmitter();
+    /**
+     * Fires each time the user focuses the `input` element.
+     */
+    inputFocus = new EventEmitter();
+    /**
+     * Fires each time the `input` element gets blurred.
+     */
+    inputBlur = new EventEmitter();
+    /**
+     * Fires each time a tag is about to be removed([see examples]({% slug summarytagmode_multiselecttree %}#toc-notifying-on-removing-group-tags)).
+     * This event is preventable. If you cancel it, the tag will not be removed.
+     */
+    removeTag = new EventEmitter();
+    container;
+    searchbar;
+    tagList;
+    popupTemplate;
+    optionsList;
+    template;
+    customItemTemplate;
+    groupTemplate;
+    fixedGroupTemplate;
+    headerTemplate;
+    footerTemplate;
+    tagTemplate;
+    groupTagTemplate;
+    noDataTemplate;
+    /**
+     * @hidden
+     */
+    suffixTemplate;
+    /**
+     * @hidden
+     */
+    prefixTemplate;
+    hostClasses = true;
     get dir() {
         return this.direction;
     }
@@ -721,6 +744,10 @@ export class MultiSelectComponent {
     get isLoading() {
         return this.loading;
     }
+    /**
+     * @hidden
+     */
+    windowSize = 'large';
     /**
      * @hidden
      */
@@ -733,6 +760,34 @@ export class MultiSelectComponent {
     get isAdaptive() {
         return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
     }
+    disabledIndices;
+    initialized = false;
+    _size = 'medium';
+    _rounded = 'medium';
+    _fillMode = 'solid';
+    _subtitle;
+    _valueHolder = [];
+    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, injector, hostElement) {
+        this.wrapper = wrapper;
+        this.localization = localization;
+        this.popupService = popupService;
+        this.dataService = dataService;
+        this.selectionService = selectionService;
+        this.navigationService = navigationService;
+        this.disabledItemsService = disabledItemsService;
+        this.cdr = cdr;
+        this.differs = differs;
+        this.renderer = renderer;
+        this._zone = _zone;
+        this.injector = injector;
+        this.hostElement = hostElement;
+        validatePackage(packageMetadata);
+        this.popupMouseDownHandler = this.onMouseDown.bind(this);
+        this.data = [];
+        this.direction = this.localization.rtl ? 'rtl' : 'ltr';
+        this.subscribeEvents();
+        this.subscribeTouchEvents();
+    }
     get listContainerClasses() {
         const containerClasses = ['k-list-container', 'k-multiselect-popup'];
         if (this.popupSettings.popupClass) {
@@ -1173,6 +1228,16 @@ export class MultiSelectComponent {
             this.togglePopup(true);
         }
     }
+    onChangeCallback = (_) => { };
+    onTouchedCallback = (_) => { };
+    _placeholder = '';
+    _open = false;
+    _value = [];
+    _popupSettings = { animate: true };
+    _virtualSettings;
+    _valuePrimitive;
+    _checkboxes = { enabled: false };
+    _isFocused = false;
     set isFocused(isFocused) {
         this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
         this._isFocused = isFocused;
@@ -1180,6 +1245,15 @@ export class MultiSelectComponent {
     get isFocused() {
         return this._isFocused;
     }
+    selectedDataItems = [];
+    popupMouseDownHandler;
+    customValueSubject = new Subject();
+    customValueSubscription;
+    subs = new Subscription();
+    touchstartDisposeHandler;
+    direction;
+    differ;
+    valueChangeDetected;
     subscribeEvents() {
         if (!isDocumentAvailable()) {
             return;
@@ -1736,26 +1810,25 @@ export class MultiSelectComponent {
         this.selectionService.focus(this.selectionService.focused);
         this.actionSheetSearchBar.focus();
     }
-}
-MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", title: "title", subtitle: "subtitle", 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,
-        NavigationService,
-        DisabledItemsService,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.multiselect'
-        },
-        {
-            provide: FilterableComponent, useExisting: forwardRef(() => MultiSelectComponent)
-        },
-        {
-            provide: KendoInput, useExisting: forwardRef(() => 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: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", title: "title", subtitle: "subtitle", 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,
+            NavigationService,
+            DisabledItemsService,
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.multiselect'
+            },
+            {
+                provide: FilterableComponent, useExisting: forwardRef(() => MultiSelectComponent)
+            },
+            {
+                provide: KendoInput, useExisting: forwardRef(() => 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: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, 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"
@@ -1951,7 +2024,8 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             </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: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { 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", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiSelectComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoMultiSelect',