@progress/kendo-angular-dropdowns 12.0.0-develop.1 → 12.0.0-develop.10

package/esm2020/multiselect/multiselect.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, getter, isNumber, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
+import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, getter, isNumber, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, animationDuration, isTruthy, windowSize, setListBoxAriaLabelLebBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance } from '../common/util';
 import { SearchBarComponent } from '../common/searchbar.component';
 import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject } from '@angular/core';
 import { Subscription, Subject, of, merge } from 'rxjs';
@@ -37,6 +37,7 @@ import { ListComponent } from '../common/list.component';
 import { normalizeCheckboxesSettings } from '../common/models/checkboxes-settings';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
 import { plusIcon, xIcon } from '@progress/kendo-svg-icons';
+import { ResponsiveRendererComponent } from '../common/action-sheet.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
@@ -47,12 +48,13 @@ import * as i6 from "../common/disabled-items/disabled-items.service";
 import * as i7 from "../common/taglist.component";
 import * as i8 from "../common/searchbar.component";
 import * as i9 from "@progress/kendo-angular-icons";
-import * as i10 from "../common/list.component";
-import * as i11 from "@progress/kendo-angular-common";
-import * as i12 from "../common/localization/localized-messages.directive";
-import * as i13 from "@angular/common";
-import * as i14 from "../common/templates/template-context.directive";
-import * as i15 from "../common/selection/selectable.directive";
+import * as i10 from "@progress/kendo-angular-common";
+import * as i11 from "../common/action-sheet.component";
+import * as i12 from "../common/list.component";
+import * as i13 from "../common/localization/localized-messages.directive";
+import * as i14 from "@angular/common";
+import * as i15 from "../common/templates/template-context.directive";
+import * as i16 from "../common/selection/selectable.directive";
 const MULTISELECT_VALUE_ACCESSOR = {
     multi: true,
     provide: NG_VALUE_ACCESSOR,
@@ -92,6 +94,10 @@ export class MultiSelectComponent {
         this.renderer = renderer;
         this._zone = _zone;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
         /**
          * @hidden
          */
@@ -119,6 +125,15 @@ export class MultiSelectComponent {
          * 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.
          */
@@ -131,13 +146,7 @@ export class MultiSelectComponent {
          * Enables the [filtering]({% slug filtering_multiselect %}) functionality of the MultiSelect.
          */
         this.filterable = false;
-        /**
-         * Sets the height of the suggestions list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of suggestions and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
-         */
-        this.listHeight = 200;
+        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.
@@ -260,6 +269,10 @@ export class MultiSelectComponent {
          */
         this.removeTag = new EventEmitter();
         this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.windowSize = 'large';
         this.initialized = false;
         this._size = 'medium';
         this._rounded = 'medium';
@@ -274,7 +287,7 @@ export class MultiSelectComponent {
         this._isFocused = false;
         this.selectedDataItems = [];
         this.customValueSubject = new Subject();
-        this.observableSubscriptions = new Subscription();
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.popupMouseDownHandler = this.onMouseDown.bind(this);
         this.data = [];
@@ -282,6 +295,18 @@ export class MultiSelectComponent {
         this.subscribeEvents();
         this.subscribeTouchEvents();
     }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.responsiveRendererComponent?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get actionSheetSearchBar() {
+        return this.responsiveRendererComponent?.actionSheetSearchBar;
+    }
     /**
      * @hidden
      */
@@ -324,6 +349,16 @@ export class MultiSelectComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
+    onAdaptiveTextBoxChange(text) {
+        if (this.filterable) {
+            this.filterChange.emit(text);
+            return;
+        }
+        this.searchTextAndFocus(text);
+    }
     /**
      * Blurs the MultiSelect.
      */
@@ -336,28 +371,30 @@ export class MultiSelectComponent {
      * @hidden
      */
     onSearchBarBlur() {
-        if (!this.isFocused) {
-            return;
-        }
-        this.isFocused = false;
-        if (hasObservers(this.onBlur) ||
-            hasObservers(this.filterChange) ||
-            hasObservers(this.close) ||
-            isUntouched(this.wrapper.nativeElement)) {
-            this._zone.run(() => {
-                this.closePopup();
-                if (!(this.isOpen && this.allowCustom)) {
+        if (!this.isActionSheetExpanded) {
+            if (!this.isFocused) {
+                return;
+            }
+            this.isFocused = false;
+            if (hasObservers(this.onBlur) ||
+                hasObservers(this.filterChange) ||
+                hasObservers(this.close) ||
+                isUntouched(this.wrapper.nativeElement)) {
+                this._zone.run(() => {
+                    this.closePopup();
+                    if (!(this.isOpen && this.allowCustom)) {
+                        this.clearFilter();
+                    }
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                });
+            }
+            else {
+                if (!this.allowCustom) {
                     this.clearFilter();
                 }
-                this.onBlur.emit();
-                this.onTouchedCallback();
-            });
-        }
-        else {
-            if (!this.allowCustom) {
-                this.clearFilter();
+                this.closePopup();
             }
-            this.closePopup();
         }
     }
     /**
@@ -370,7 +407,14 @@ export class MultiSelectComponent {
      * @hidden
      */
     onResize() {
-        if (this._open) {
+        if (this.isAdaptiveModeEnabled && this.windowSize !== windowSize()) {
+            if (this.isOpen) {
+                this.togglePopup(false);
+            }
+            this.windowSize = windowSize();
+            this.cdr.detectChanges();
+        }
+        if (this.isOpen && !this.isActionSheetExpanded) {
             const popupWrapper = this.popupRef.popupElement;
             const { min, max } = this.width;
             popupWrapper.style.minWidth = min;
@@ -511,6 +555,22 @@ export class MultiSelectComponent {
     get placeholder() {
         return this.selectedDataItems.length ? '' : this._placeholder;
     }
+    /**
+     * 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.
+    */
+    set subtitle(_subtitle) {
+        this._subtitle = _subtitle;
+    }
+    get subtitle() {
+        return this._subtitle || this.placeholder;
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
     /**
      * 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.
@@ -555,6 +615,24 @@ export class MultiSelectComponent {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
+     *
+     * > The `listHeight` property affects only the list of options and not the whole popup container.
+     * > To set the height of the popup container, use `popupSettings.height`.
+     *
+     * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
+     */
+    set listHeight(_listHeight) {
+        this._listHeight = _listHeight;
+    }
+    ;
+    get listHeight() {
+        if (this.isAdaptive) {
+            return;
+        }
+        return this._listHeight;
+    }
     /**
      * Specifies the type of the selected value.
      * If set to `true`, the selected value has to be of the primitive type
@@ -578,6 +656,19 @@ export class MultiSelectComponent {
     get isLoading() {
         return this.loading;
     }
+    /**
+     * @hidden
+     */
+    get isActionSheetExpanded() {
+        return this.actionSheet?.expanded;
+    }
+    ;
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     get listContainerClasses() {
         const containerClasses = ['k-list-container', 'k-reset'];
         if (this.popupSettings.popupClass) {
@@ -628,6 +719,21 @@ export class MultiSelectComponent {
             return 'visible';
         }
     }
+    /**
+     * @hidden
+     */
+    applyValue() {
+        this.value = this._valueHolder;
+        this.emitValueChange();
+        this.togglePopup(false);
+    }
+    /**
+     * @hidden
+     */
+    cancelValue() {
+        this._valueHolder = [];
+        this.togglePopup(false);
+    }
     /**
      * @hidden
      */
@@ -659,8 +765,12 @@ export class MultiSelectComponent {
                 event.added.forEach((itemIndex) => {
                     const dataItem = this.dataService.itemAt(itemIndex);
                     const newItem = (this.valuePrimitive && isPresent(dataItem) && isPresent(dataItem[this.valueField])) ? dataItem[this.valueField] : dataItem;
+                    this._valueHolder = this.value.filter(filter);
                     if (newItem) {
-                        this.value = [...this.value, newItem];
+                        this._valueHolder = [...this.value, newItem];
+                        if (!this.isAdaptive) {
+                            this.value = this._valueHolder;
+                        }
                     }
                 });
             }
@@ -668,7 +778,10 @@ export class MultiSelectComponent {
                 event.removed.forEach((itemIndex) => {
                     const dataItem = this.dataService.itemAt(itemIndex);
                     const filter = (item) => getter(item, this.valueField) !== getter(dataItem, this.valueField);
-                    this.value = this.value.filter(filter);
+                    this._valueHolder = this.value.filter(filter);
+                    if (!this.isAdaptive) {
+                        this.value = this._valueHolder;
+                    }
                 });
                 this.cdr.detectChanges();
             }
@@ -683,17 +796,25 @@ export class MultiSelectComponent {
             if (isPresent(event.added)) {
                 const dataItem = this.dataService.itemAt(event.added);
                 const newItem = (this.valuePrimitive && isPresent(dataItem) && isPresent(dataItem[this.valueField])) ? dataItem[this.valueField] : dataItem;
-                this.value = [...this.value, newItem];
+                this._valueHolder = [...this.value, newItem];
+                if (!this.isAdaptive) {
+                    this.value = this._valueHolder;
+                }
             }
             if (isPresent(event.removed)) {
                 const dataItem = this.dataService.itemAt(event.removed);
                 const filter = (item) => getter(item, this.valueField) !== getter(dataItem, this.valueField);
-                this.value = this.value.filter(filter);
+                this._valueHolder = this.value.filter(filter);
+                if (!this.isAdaptive) {
+                    this.value = this._valueHolder;
+                }
                 this.selectionService.focused = event.removed;
                 this.cdr.detectChanges();
             }
         }
-        this.emitValueChange();
+        if (!this.isAdaptive) {
+            this.emitValueChange();
+        }
     }
     /**
      * @hidden
@@ -778,6 +899,9 @@ export class MultiSelectComponent {
         const navigateInput = this.text && event.keyCode !== Keys.ArrowDown && event.keyCode !== Keys.ArrowUp;
         const selectValue = this.text && event.keyCode === Keys.Enter || event.keyCode === Keys.Escape;
         const deleteTag = !this.text && event.keyCode === Keys.Backspace && this.tags.length > 0;
+        if (event.keyCode === Keys.Backspace && this.isActionSheetExpanded) {
+            return;
+        }
         if (deleteTag) {
             this.handleBackspace();
             return;
@@ -795,7 +919,8 @@ export class MultiSelectComponent {
             originalEvent: eventData
         });
         if (action !== NavigationAction.Undefined &&
-            ((action === NavigationAction.Enter && this.isOpen) || action !== NavigationAction.Enter)) {
+            ((action === NavigationAction.Enter && this.isOpen) || action !== NavigationAction.Enter) &&
+            (!this.isActionSheetExpanded && action === NavigationAction.Tab)) {
             event.preventDefault();
         }
     }
@@ -852,11 +977,11 @@ export class MultiSelectComponent {
     ngOnInit() {
         this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
         this.createCustomValueStream();
-        this.localizationChangeSubscription = this.localization
+        this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
-        });
+        }));
         this.setState(this.value);
         this.setComponentClasses();
         this.initialized = true;
@@ -875,18 +1000,21 @@ export class MultiSelectComponent {
         }
     }
     ngAfterViewInit() {
+        this.windowSize = windowSize();
+        this.cdr.detectChanges();
         this.searchbar.setInputSize();
-        this.observableSubscriptions.add(this.renderer.listen(this.wrapper.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
-        this.observableSubscriptions.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     ngOnDestroy() {
         this._toggle(false);
         this.unsubscribeEvents();
     }
     /**
-     * Toggles the visibility of the popup
+     * Toggles the visibility of the popup or actionSheet
      * ([see example]({% slug openstate_multiselect %}#toc-setting-the-initially-opened-component)).
-     * If you use the `toggle` method to open or close the popup, the respective `open` and `close` events will not be fired.
+     * If you use the `toggle` method to open or close the popup or actionSheet, the respective `open` and `close` events will not be fired.
      *
      * @param open - The state of the popup.
      */
@@ -900,10 +1028,10 @@ export class MultiSelectComponent {
         });
     }
     /**
-     * Returns the current open state of the popup.
+     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return this._open;
+        return isTruthy(this._open || this.isActionSheetExpanded);
     }
     /**
      * Resets the value of the MultiSelect.
@@ -952,6 +1080,15 @@ export class MultiSelectComponent {
         this.tags = this.tagMapper(this.selectedDataItems.slice(0));
         this.cdr.markForCheck();
     }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.togglePopup(true);
+        }
+    }
     set isFocused(isFocused) {
         this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
         this._isFocused = isFocused;
@@ -990,7 +1127,7 @@ export class MultiSelectComponent {
                     this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
                 }
             })
-        ].forEach(s => this.observableSubscriptions.add(s));
+        ].forEach(s => this.subs.add(s));
     }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
@@ -1014,13 +1151,10 @@ export class MultiSelectComponent {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.observableSubscriptions.unsubscribe();
+        this.subs.unsubscribe();
         if (this.customValueSubscription) {
             this.customValueSubscription.unsubscribe();
         }
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
         }
@@ -1135,7 +1269,7 @@ export class MultiSelectComponent {
     }
     handleItemChange(event) {
         this.change(event);
-        if (this.autoClose && !event.preventClosingPopup) {
+        if (this.autoClose && !event.preventClosingPopup && !this.isActionSheetExpanded) {
             this.togglePopup(false);
         }
         if (this.autoClose || !this.filterable) {
@@ -1143,21 +1277,23 @@ export class MultiSelectComponent {
         }
     }
     handleMousedown(event) {
-        const inputElement = this.searchbar.input.nativeElement;
-        if (event.button === 0) {
-            if (this.isFocused && this.isOpen && event.target === inputElement) {
-                return;
-            }
-            if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
-                this.searchbar.focus();
-            }
-            // The check is needed otherwise when appended to the component, the popup reopens on click
-            // https://github.com/telerik/kendo-angular/issues/3738
-            if ((this.popupRef && this.popupRef.popupElement.contains(event.target))) {
-                return;
+        if (!this.isActionSheetExpanded) {
+            const inputElement = this.searchbar.input.nativeElement;
+            if (event.button === 0) {
+                if (this.isFocused && this.isOpen && event.target === inputElement) {
+                    return;
+                }
+                if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
+                    this.searchbar.focus();
+                }
+                // The check is needed otherwise when appended to the component, the popup reopens on click
+                // https://github.com/telerik/kendo-angular/issues/3738
+                if ((this.popupRef && this.popupRef.popupElement.contains(event.target))) {
+                    return;
+                }
+                event.preventDefault();
+                this.togglePopup(!this.isOpen);
             }
-            event.preventDefault();
-            this.togglePopup(!this.isOpen);
         }
     }
     handleKeydown(event) {
@@ -1186,7 +1322,7 @@ export class MultiSelectComponent {
         else {
             service.add(focusedIndex);
         }
-        if (this.autoClose) {
+        if (this.autoClose && !this.isActionSheetExpanded) {
             this.togglePopup(false);
         }
         if (this.autoClose || !this.filterable) {
@@ -1357,6 +1493,9 @@ export class MultiSelectComponent {
         this.togglePopup(true);
         this.focusedTagIndex = undefined;
     }
+    /**
+     * @hidden
+     */
     togglePopup(open) {
         const isDisabled = this.disabled || this.readonly;
         const sameState = this.isOpen === open;
@@ -1381,6 +1520,10 @@ export class MultiSelectComponent {
     _toggle(open) {
         this._open = open;
         this.destroyPopup();
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+            this.focus();
+        }
         if (this._open) {
             this.createPopup();
         }
@@ -1397,6 +1540,11 @@ export class MultiSelectComponent {
         if (this.virtual) {
             this.virtual.skip = 0;
         }
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.openActionSheet();
+            return;
+        }
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
@@ -1428,7 +1576,9 @@ export class MultiSelectComponent {
         }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
+            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
+            this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
         });
         this.popupRef.popupClose.subscribe(() => {
@@ -1482,9 +1632,28 @@ export class MultiSelectComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
     }
+    closeActionSheet() {
+        this.actionSheet.toggle(false);
+        this.actionSheetSearchBar.value = '';
+        this.filterable && this.filterChange.emit('');
+        this.closed.emit();
+    }
+    openActionSheet() {
+        this.windowSize = windowSize();
+        this.actionSheet.toggle(true);
+        this.cdr.detectChanges();
+        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        this.title = setActionSheetTitle(this.searchbar.input, this.title);
+        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.cdr.detectChanges();
+        this.opened.emit();
+        this.optionsList.scrollToItem(this.selectionService.focused);
+        this.selectionService.focus(this.selectionService.focused);
+        this.actionSheetSearchBar.focus();
+    }
 }
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.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: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { 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", 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" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { properties: { "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: [
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { 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" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { properties: { "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,
@@ -1501,7 +1670,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         {
             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 }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, 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: `
+    ], 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 }], 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: "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"
@@ -1511,6 +1680,12 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
 
             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-applyButton="kendo.multiselect.applyButton|The text of the Apply button in the action sheet"
+            applyButton="Apply"
+
+            i18n-cancelButton="kendo.multiselect.cancelButton|The text of the Cancel button in the action sheet"
+            cancelButton="Cancel"
         >
         </ng-container>
         <kendo-taglist
@@ -1541,13 +1716,14 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [activeDescendant]="activeDescendant"
                 [userInput]="text"
                 [disabled]="disabled"
-                [readonly]="readonly"
+                [readonly]="readonly || this.isAdaptive"
                 [tabIndex]="tabIndex"
                 [placeholder]="placeholder"
                 (onNavigate)="handleNavigate($event)"
                 (valueChange)="handleFilter($event)"
                 (onBlur)="onSearchBarBlur()"
                 (onFocus)="onSearchBarFocus()"
+                (click)="handleClick()"
             >
             </kendo-searchbar>
         </kendo-taglist>
@@ -1574,6 +1750,29 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         >
         </span>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [showActionButtons]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [placeholder]="placeholder"
+            (navigate)="handleNavigate($event)"
+            (onApply)="applyValue()"
+            (onCancel)="cancelValue()"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -1612,17 +1811,18 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [data]="data"
                 [textField]="textField"
                 [valueField]="valueField"
-                [height]="listHeight"
                 [template]="template"
                 [groupTemplate]="groupTemplate"
                 [fixedGroupTemplate]="fixedGroupTemplate"
+                [height]="listHeight"
                 [show]="isOpen"
                 [multipleSelection]="true"
                 [virtual]="virtual"
                 (pageChange)="pageChange($event)"
                 [checkboxes]="checkboxes"
                 [isMultiselect]="true"
-                >
+                [isActionSheetExpanded]="isActionSheetExpanded"
+            >
             </kendo-list>
             <!--no data template-->
             <div class="k-no-data" *ngIf="data.length === 0">
@@ -1642,11 +1842,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: i7.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i8.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i10.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i11.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i15.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i7.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i8.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i11.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i12.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i13.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i15.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i16.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -1680,6 +1876,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             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-applyButton="kendo.multiselect.applyButton|The text of the Apply button in the action sheet"
+            applyButton="Apply"
+
+            i18n-cancelButton="kendo.multiselect.cancelButton|The text of the Cancel button in the action sheet"
+            cancelButton="Cancel"
         >
         </ng-container>
         <kendo-taglist
@@ -1710,13 +1912,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [activeDescendant]="activeDescendant"
                 [userInput]="text"
                 [disabled]="disabled"
-                [readonly]="readonly"
+                [readonly]="readonly || this.isAdaptive"
                 [tabIndex]="tabIndex"
                 [placeholder]="placeholder"
                 (onNavigate)="handleNavigate($event)"
                 (valueChange)="handleFilter($event)"
                 (onBlur)="onSearchBarBlur()"
                 (onFocus)="onSearchBarFocus()"
+                (click)="handleClick()"
             >
             </kendo-searchbar>
         </kendo-taglist>
@@ -1743,6 +1946,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         >
         </span>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [showActionButtons]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [placeholder]="placeholder"
+            (navigate)="handleNavigate($event)"
+            (onApply)="applyValue()"
+            (onCancel)="cancelValue()"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -1781,17 +2007,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [data]="data"
                 [textField]="textField"
                 [valueField]="valueField"
-                [height]="listHeight"
                 [template]="template"
                 [groupTemplate]="groupTemplate"
                 [fixedGroupTemplate]="fixedGroupTemplate"
+                [height]="listHeight"
                 [show]="isOpen"
                 [multipleSelection]="true"
                 [virtual]="virtual"
                 (pageChange)="pageChange($event)"
                 [checkboxes]="checkboxes"
                 [isMultiselect]="true"
-                >
+                [isActionSheetExpanded]="isActionSheetExpanded"
+            >
             </kendo-list>
             <!--no data template-->
             <div class="k-no-data" *ngIf="data.length === 0">
@@ -1811,10 +2038,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
   `
                 }]
         }], ctorParameters: function () { return [{ 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: undefined, decorators: [{
@@ -1822,7 +2045,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { focusableId: [{
+                }] }]; }, propDecorators: { responsiveRendererComponent: [{
+                type: ViewChild,
+                args: [ResponsiveRendererComponent]
+            }], focusableId: [{
                 type: Input
             }], autoClose: [{
                 type: Input
@@ -1849,6 +2075,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], itemDisabled: [{