@progress/kendo-vue-dropdowns 3.14.2 → 3.15.0-dev.202309281301

package/dist/esm/MultiSelect/MultiSelect.js

@@ -25,7 +25,8 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, Keys, guid, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef, Icon } from '@progress/kendo-vue-common';
+var inject = allVue.inject;
+import { classNames, Keys, guid, templateRendering, getListeners, kendoThemeMaps, setRef, getRef, Icon, canUseDOM } from '@progress/kendo-vue-common';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 import { ListContainer } from '../common/ListContainer.js';
@@ -37,7 +38,13 @@ import { GroupStickyHeader } from '../common/GroupStickyHeader.js';
 import { ClearButton } from '../common/ClearButton.js';
 import { ActiveDescendant } from './../common/settings.js';
 import { itemIndexStartsWith, getItemValue, areSame, matchDataCollections, removeDataItems, isPresent, preventDefaultNonInputs } from '../common/utils.js';
-import { plusIcon } from '@progress/kendo-svg-icons';
+import { plusIcon, xIcon } from '@progress/kendo-svg-icons';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { MOBILE_SMALL_DEVICE, MOBILE_MEDIUM_DEVICE } from '../common/constants.js';
+import { ActionSheet } from '@progress/kendo-vue-layout';
+import { ListFilter } from '../common/ListFilter.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, adaptiveModeFooterApply, adaptiveModeFooterCancel } from './../messages/main.js';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var preventDefault = function preventDefault(event) {
   return event.preventDefault();
@@ -191,6 +198,14 @@ var MultiSelectVue2 = {
     },
     groupField: {
       type: String
+    },
+    adaptive: {
+      type: Boolean,
+      default: undefined
+    },
+    adaptiveTitle: {
+      type: String,
+      default: undefined
     }
   },
   // @ts-ignore
@@ -198,10 +213,12 @@ var MultiSelectVue2 = {
     var v3 = !!isV3;
     var inputRef = ref(null);
     var kendoAnchorRef = ref(null);
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
     return {
       v3: v3,
       inputRef: inputRef,
-      kendoAnchorRef: kendoAnchorRef
+      kendoAnchorRef: kendoAnchorRef,
+      kendoLocalizationService: kendoLocalizationService
     };
   },
   computed: {
@@ -217,9 +234,34 @@ var MultiSelectVue2 = {
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
+    },
+    isOpen: {
+      get: function get() {
+        return this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      }
+    },
+    animationStyles: {
+      get: function get() {
+        return this.windowWidth <= MOBILE_SMALL_DEVICE ? {
+          top: 0,
+          width: '100%',
+          height: '100%'
+        } : undefined;
+      }
+    },
+    classNameAdaptive: {
+      get: function get() {
+        return this.windowWidth <= MOBILE_SMALL_DEVICE ? 'k-adaptive-actionsheet k-actionsheet-fullscreen' : 'k-adaptive-actionsheet k-actionsheet-bottom';
+      }
+    },
+    adaptiveState: {
+      get: function get() {
+        return this.windowWidth <= MOBILE_MEDIUM_DEVICE && this.$props.adaptive;
+      }
     }
   },
   created: function created() {
+    this.observer = null;
     this.valuesItemsDuringOnChange = null;
     this._tags = [];
     this._skipFocusEvent = false;
@@ -228,6 +270,11 @@ var MultiSelectVue2 = {
     this.anchor = guid();
     this.inputId = guid();
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   data: function data() {
     return {
       hasMounted: false,
@@ -245,7 +292,9 @@ var MultiSelectVue2 = {
       activedescendant: ActiveDescendant.PopupList,
       group: undefined,
       isScrolling: false,
-      itemHeight: 0
+      itemHeight: 0,
+      windowWidth: 0,
+      initialAdaptiveRenderingValues: undefined
     };
   },
   watch: {
@@ -259,6 +308,18 @@ var MultiSelectVue2 = {
       if (newValue && oldValue && newValue.total !== oldValue.total) {
         this.virtualTotalHasChanged = true;
       }
+    },
+    isOpen: function isOpen(newValue) {
+      var _this = this;
+      if (newValue) {
+        this.initialAdaptiveRenderingValues = this.base.component.currentValue;
+      } else {
+        this.initialAdaptiveRenderingValues = undefined;
+      }
+      setTimeout(function () {
+        var listItem = document.querySelector('.k-list-item');
+        _this.itemHeight = _this.base.getListItemHeight(listItem);
+      }, 100);
     }
   },
   updated: function updated() {
@@ -270,7 +331,7 @@ var MultiSelectVue2 = {
       _d = _b.dataItems,
       dataItems = _d === void 0 ? [] : _d;
     var skip = virtual ? virtual.skip : 0;
-    var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+    var opened = this.isOpen;
     var prevOpened = this.prevOpened !== undefined ? this.prevOpened : this.prevCurrentOpened;
     var opening = !prevOpened && opened;
     var closing = prevOpened && !opened;
@@ -328,6 +389,10 @@ var MultiSelectVue2 = {
     this.setValidity();
   },
   mounted: function mounted() {
+    this.observer = canUseDOM && new ResizeObserver(this.calculateMedia);
+    if ((document === null || document === void 0 ? void 0 : document.body) && this.observer) {
+      this.observer.observe(document.body);
+    }
     this.hasMounted = true;
     // @ts-ignore
     this.input = this.v3 ? this.inputRef.input : this.$refs.input.input;
@@ -337,7 +402,18 @@ var MultiSelectVue2 = {
     this.searchBarRef();
     this.setValidity();
   },
+  destroyed: !!isV3 ? undefined : function () {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
   methods: {
+    clearFilter: function clearFilter(state) {
+      if (this.currentText) {
+        state.data.currentText = '';
+      }
+      this.base.filterChanged('', state);
+    },
     computedValue: function computedValue() {
       var result = [];
       if (this.valuesItemsDuringOnChange) {
@@ -403,11 +479,8 @@ var MultiSelectVue2 = {
         newItems = __spreadArray(__spreadArray([], value, true), [dataItem], false);
       }
       var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
-      if (text) {
-        if (this.currentText) {
-          state.data.currentText = '';
-        }
-        this.base.filterChanged('', state);
+      if (text && !this.adaptiveState) {
+        this.clearFilter(state);
       }
       if (this.currentFocusedIndex !== undefined) {
         state.data.currentFocusedIndex = undefined;
@@ -416,7 +489,7 @@ var MultiSelectVue2 = {
       this.base.triggerPageChangeCornerItems(dataItem, state);
     },
     onTagDelete: function onTagDelete(itemsToRemove, event) {
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var state = this.base.initState();
       state.event = event;
       if (opened) {
@@ -435,7 +508,7 @@ var MultiSelectVue2 = {
         allowCustom = _a.allowCustom,
         _b = _a.dataItems,
         dataItems = _b === void 0 ? [] : _b;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
       var _c = this.getFocusedState(),
         focusedType = _c.focusedType,
@@ -495,8 +568,8 @@ var MultiSelectVue2 = {
     },
     onChangeHandler: function onChangeHandler(event) {
       var state = this.base.initState();
-      var value = event.currentTarget.value;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var value = event && (event.currentTarget && event.currentTarget.value || event.value);
+      var opened = this.isOpen;
       state.event = event;
       if (this.$props.filter === undefined) {
         state.data.currentText = value;
@@ -513,7 +586,7 @@ var MultiSelectVue2 = {
       this.applyState(state);
     },
     clearButtonClick: function clearButtonClick(event) {
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var state = this.base.initState();
       state.event = event;
       event.stopPropagation();
@@ -542,7 +615,7 @@ var MultiSelectVue2 = {
       }
       var keyCode = event.keyCode;
       var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var focusedItem = this.getFocusedState().focusedItem;
       var state = this.base.initState();
       state.event = event;
@@ -568,6 +641,10 @@ var MultiSelectVue2 = {
             this.selectFocusedItem(event);
           }
         } else if (keyCode === Keys.esc) {
+          if (this.adaptiveState) {
+            this.handleWrapperClick(event); // Handle the closing on "Esc" key press in adaptive mode
+          }
+
           togglePopup();
         }
       } else if (event.altKey && keyCode === Keys.down) {
@@ -732,7 +809,7 @@ var MultiSelectVue2 = {
       this.applyState(state);
     },
     handleWrapperClick: function handleWrapperClick(event) {
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var input = this.input;
       if (!opened && input) {
         this.focusElement(input);
@@ -745,14 +822,34 @@ var MultiSelectVue2 = {
         });
         state.data.currentFocused = true;
       }
+      this.clearFilter(state);
       this.base.togglePopup(state);
       this.applyState(state);
     },
+    onCancel: function onCancel(event) {
+      var state = this.base.initState();
+      state.event = event;
+      event.stopPropagation();
+      var opened = this.isOpen;
+      if (state.focusedIndex !== undefined) {
+        state.data.focusedIndex = undefined;
+      }
+      if (opened) {
+        this.base.togglePopup(state);
+      }
+      state.events.push({
+        type: 'onCancel'
+      });
+      this.clearFilter(state);
+      this.triggerOnChange(__spreadArray([], this.initialAdaptiveRenderingValues, true), state);
+      this.base.triggerPageChangeCornerItems(__spreadArray([], this.initialAdaptiveRenderingValues, true), state);
+      this.applyState(state);
+    },
     handleItemClick: function handleItemClick(index, event) {
       var state = this.base.initState();
       state.event = event;
       this.handleItemSelect(index, state);
-      if (this.$props.autoClose) {
+      if (this.$props.autoClose && !this.adaptiveState) {
         this.base.togglePopup(state);
       }
       this.applyState(state);
@@ -761,7 +858,7 @@ var MultiSelectVue2 = {
       if (!this.currentFocused || this._skipFocusEvent) {
         return;
       }
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var state = this.base.initState();
       var _a = this.$props,
         allowCustom = _a.allowCustom,
@@ -771,7 +868,7 @@ var MultiSelectVue2 = {
       state.events.push({
         type: 'blur'
       });
-      if (opened) {
+      if (opened && !this.adaptiveState) {
         if (this.currentOpened) {
           state.data.currentOpened = false;
         }
@@ -827,6 +924,12 @@ var MultiSelectVue2 = {
         this.input.focus();
       }
     },
+    calculateMedia: function calculateMedia(entries) {
+      for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+        var entry = entries_1[_i];
+        this.windowWidth = entry.target.clientWidth;
+      }
+    },
     repositionPopup: function repositionPopup() {
       this.base.repositionPopup();
     },
@@ -840,6 +943,7 @@ var MultiSelectVue2 = {
       var groupField = this.$props.groupField;
       var _b = this.$props.dataItems,
         dataItems = _b === void 0 ? [] : _b;
+      var group;
       if (!groupField || !dataItems.length) {
         return;
       }
@@ -848,8 +952,9 @@ var MultiSelectVue2 = {
       var scrollTop = target.scrollTop - vs.skip * itemHeight;
       if (groupField) {
         dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+        group = dataItems[0][groupField];
       }
-      var group = dataItems[0][groupField];
       for (var i = 1; i < dataItems.length; i++) {
         if (itemHeight * i > scrollTop) {
           break;
@@ -867,6 +972,7 @@ var MultiSelectVue2 = {
   render: function render(createElement) {
     var _this4 = this;
     var _a;
+    var _this = this;
     var h = gh || createElement;
     var _b = this.$props,
       style = _b.style,
@@ -882,7 +988,13 @@ var MultiSelectVue2 = {
       fillMode = _b.fillMode,
       rounded = _b.rounded,
       tagsRounded = _b.tagsRounded,
-      removeTagIcon = _b.removeTagIcon;
+      removeTagIcon = _b.removeTagIcon,
+      adaptiveTitle = _b.adaptiveTitle,
+      header = _b.header,
+      footer = _b.footer,
+      groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender,
+      _c = _b.dataItems,
+      dataItems = _c === void 0 ? [] : _c;
     var focused = this.currentFocused;
     var popupSettings = Object.assign({}, {
       animate: true,
@@ -895,6 +1007,12 @@ var MultiSelectVue2 = {
     var vs = this.base.vs;
     var id = this.$props.id || this.inputId;
     var tagRender = templateRendering.call(this, this.$props.tagRender, getListeners.call(this));
+    var opened = this.isOpen;
+    var renderAdaptive = this.adaptiveState;
+    var localization = provideLocalizationService(this);
+    if (this.group === undefined && this.$props.groupField !== undefined) {
+      this.group = getItemValue(this.$props.dataItems[0], this.$props.groupField);
+    }
     vs.enabled = virtual !== undefined;
     if (virtual !== undefined) {
       vs.skip = virtual.skip;
@@ -902,25 +1020,36 @@ var MultiSelectVue2 = {
       vs.pageSize = virtual.pageSize;
     }
     var tagsToRender = [];
-    if (tags === undefined) {
-      this.computedValue().forEach(function (item) {
+    if (this.initialAdaptiveRenderingValues === undefined) {
+      if (tags === undefined) {
+        this.computedValue().forEach(function (item) {
+          tagsToRender.push({
+            text: getItemValue(item, textField),
+            data: [item]
+          });
+        });
+      } else {
+        tagsToRender.push.apply(tagsToRender, tags);
+      }
+    } else {
+      var valuesBeforeAdaptiveRendering = __spreadArray([], this.initialAdaptiveRenderingValues, true);
+      valuesBeforeAdaptiveRendering.forEach(function (item) {
         tagsToRender.push({
           text: getItemValue(item, textField),
           data: [item]
         });
       });
-    } else {
-      tagsToRender.push.apply(tagsToRender, tags);
     }
-    this.setItems(tagsToRender, this._tags);
+    if (tagsToRender.length > 0) {
+      this.setItems(tagsToRender, this._tags);
+    }
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var renderSearchBar = function renderSearchBar(searchId) {
       var _this = this;
       var activedescendant = this.activedescendant;
       var placeholder = this.$props.placeholder;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var focusedIndex = this.getFocusedState().focusedIndex;
-      var placeholderToShow = value.length === 0 && !searchText ? placeholder : undefined;
+      var placeholderToShow = tagsToRender.length === 0 || value.length === 0 && !searchText ? placeholder : undefined;
       var ariaActivedescendant = activedescendant === ActiveDescendant.TagsList && focusedTag !== undefined ? "tag-".concat(this.base.guid, "-").concat(focusedTag.text.replace(/\s+/g, '-')) : "option-".concat(this.base.guid, "-").concat(focusedIndex);
       return (
         // @ts-ignore  function children
@@ -932,7 +1061,7 @@ var MultiSelectVue2 = {
             tabIndex: this.$props.tabIndex,
             accessKey: this.$props.accessKey,
             placeholder: placeholderToShow,
-            value: searchText,
+            value: !renderAdaptive ? searchText : '',
             disabled: disabled,
             expanded: opened,
             owns: this.base.listBoxId,
@@ -945,7 +1074,7 @@ var MultiSelectVue2 = {
           tabIndex: this.$props.tabIndex,
           accessKey: this.$props.accessKey,
           placeholder: placeholderToShow,
-          value: searchText,
+          value: !renderAdaptive ? searchText : '',
           onChange: this.onChangeHandler,
           on: this.v3 ? undefined : {
             "change": this.onChangeHandler,
@@ -970,16 +1099,15 @@ var MultiSelectVue2 = {
     var renderList = function renderList() {
       var _this2 = this;
       var groupField = this.$props.groupField;
-      var dataItems = this.$props.dataItems || [];
       var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
       var groupHeaderItemRender = templateRendering.call(this, this.$props.groupHeaderItemRender, getListeners.call(this));
       var listNoDataRender = templateRendering.call(this, this.$props.listNoDataRender, getListeners.call(this));
       var skip = virtual ? virtual.skip : 0;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var focusedIndex = this.getFocusedState().focusedIndex;
       var translate = "translateY(".concat(vs.translate, "px)");
+      var listDataItems = dataItems;
       if (groupField) {
-        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+        listDataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
       }
       return (
         // @ts-ignore  function children
@@ -988,14 +1116,14 @@ var MultiSelectVue2 = {
           attrs: this.v3 ? undefined : {
             id: this.base.listBoxId,
             show: opened,
-            dataItems: dataItems.slice(),
+            dataItems: listDataItems.slice(),
             focusedIndex: focusedIndex - skip,
             value: this.computedValue(),
             textField: textField,
             valueField: dataItemKey,
             optionsGuid: this.base.guid,
             wrapperStyle: {
-              maxHeight: popupSettings.height
+              maxHeight: !renderAdaptive ? popupSettings.height : undefined
             },
             wrapperCssClass: 'k-list-content',
             listStyle: vs.enabled ? {
@@ -1008,7 +1136,7 @@ var MultiSelectVue2 = {
             groupField: groupField
           },
           show: opened,
-          dataItems: dataItems.slice(),
+          dataItems: listDataItems.slice(),
           focusedIndex: focusedIndex - skip,
           value: this.computedValue(),
           textField: textField,
@@ -1016,7 +1144,7 @@ var MultiSelectVue2 = {
           optionsGuid: this.base.guid,
           ref: 'list',
           wrapperStyle: {
-            maxHeight: popupSettings.height
+            maxHeight: !renderAdaptive ? popupSettings.height : undefined
           },
           wrapperCssClass: 'k-list-content',
           listStyle: vs.enabled ? {
@@ -1049,22 +1177,10 @@ var MultiSelectVue2 = {
       var _this3 = this;
       var _a;
       var base = this.base;
-      var _b = this.$props,
-        allowCustom = _b.allowCustom,
-        _c = _b.dataItems,
-        dataItems = _c === void 0 ? [] : _c;
-      var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
-      var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
+      var allowCustom = this.$props.allowCustom;
       var groupStickyHeaderTemplate = templateRendering.call(this, this.$props.groupStickyHeaderItemRender, getListeners.call(this));
-      var header = getTemplate.call(this, {
-        h: h,
-        template: headerTemplate
-      });
-      var footer = getTemplate.call(this, {
-        h: h,
-        template: footerTemplate
-      });
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var headerListContainer = base.getTemplateDef.call(this, header);
+      var footerListContainer = base.getTemplateDef.call(this, footer);
       var currentText = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
       var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
       var focusedType = this.getFocusedState().focusedType;
@@ -1128,32 +1244,187 @@ var MultiSelectVue2 = {
           }),
           itemsCount: dataItems.length
         }, this.v3 ? function () {
-          return [header && h("div", {
+          return [headerListContainer && h("div", {
             "class": "k-list-header"
-          }, [header]), customItem, _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
+          }, [headerListContainer]), customItem, _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
             group: _this3.group,
             attrs: _this3.v3 ? undefined : {
               group: _this3.group,
               render: groupStickyHeaderTemplate
             },
             render: groupStickyHeaderTemplate
-          }), renderList.call(_this3), footer && h("div", {
+          }), renderList.call(_this3), footerListContainer && h("div", {
             "class": "k-list-footer"
-          }, [footer]), virtual && header];
-        } : [header && h("div", {
+          }, [footerListContainer]), virtual && header];
+        } : [headerListContainer && h("div", {
           "class": "k-list-header"
-        }, [header]), customItem, _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
+        }, [headerListContainer]), customItem, _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
           group: _this3.group,
           attrs: _this3.v3 ? undefined : {
             group: _this3.group,
             render: groupStickyHeaderTemplate
           },
           render: groupStickyHeaderTemplate
-        }), renderList.call(_this3), footer && h("div", {
+        }), renderList.call(_this3), footerListContainer && h("div", {
           "class": "k-list-footer"
-        }, [footer]), virtual && header])
+        }, [footerListContainer]), virtual && header])
       );
     };
+    var renderListFilter = function renderListFilter() {
+      var filterText = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
+      return this.$props.filterable &&
+      // @ts-ignore
+      h(ListFilter, {
+        value: filterText,
+        attrs: this.v3 ? undefined : {
+          value: filterText,
+          size: size,
+          rounded: rounded,
+          fillMode: fillMode
+        },
+        ref: 'filterInput',
+        onChange: this.onChangeHandler,
+        on: this.v3 ? undefined : {
+          "change": this.onChangeHandler,
+          "keydown": this.onInputKeyDown
+        },
+        onKeydown: this.onInputKeyDown,
+        size: size,
+        rounded: rounded,
+        fillMode: fillMode
+      });
+    };
+    var adaptiveActionSheetHeaderTemplateDef = function adaptiveActionSheetHeaderTemplateDef() {
+      return [h("div", {
+        "class": "k-actionsheet-titlebar-group k-hbox"
+      }, [h("div", {
+        "class": "k-actionsheet-title"
+      }, [h("div", {
+        "class": "k-text-center"
+      }, [adaptiveTitle]), h("div", {
+        "class": "k-actionsheet-subtitle k-text-center"
+      })]), h("div", {
+        "class": "k-actionsheet-actions"
+      }, [h(KButton, {
+        tabindex: 5,
+        attrs: this.v3 ? undefined : {
+          tabindex: 5,
+          "aria-label": "Cancel",
+          "aria-disabled": "false",
+          type: "button",
+          fillMode: "flat",
+          icon: "x",
+          svgIcon: xIcon
+        },
+        "aria-label": "Cancel",
+        "aria-disabled": "false",
+        type: "button",
+        fillMode: "flat",
+        onClick: _this.onCancel,
+        on: this.v3 ? undefined : {
+          "click": _this.onCancel
+        },
+        icon: "x",
+        svgIcon: xIcon
+      })])]), h("div", {
+        "class": "k-actionsheet-titlebar-group k-actionsheet-filter"
+      }, [renderListFilter.call(_this)])];
+    };
+    var adaptiveActionSheetHeaderTemplate = templateRendering.call(this, adaptiveActionSheetHeaderTemplateDef, getListeners.call(this));
+    var adaptiveActionSheetFooterTemplateDef = function adaptiveActionSheetFooterTemplateDef() {
+      var cancelText = localization.toLanguageString(adaptiveModeFooterCancel, messages[adaptiveModeFooterCancel]);
+      var applyText = localization.toLanguageString(adaptiveModeFooterApply, messages[adaptiveModeFooterApply]);
+      return [h(KButton, {
+        size: "large",
+        attrs: this.v3 ? undefined : {
+          size: "large",
+          "aria-label": cancelText,
+          "aria-disabled": "false",
+          type: "button"
+        },
+        "aria-label": cancelText,
+        "aria-disabled": "false",
+        type: "button",
+        onClick: _this.onCancel,
+        on: this.v3 ? undefined : {
+          "click": _this.onCancel
+        }
+      }, [cancelText]), h(KButton, {
+        themeColor: "primary",
+        attrs: this.v3 ? undefined : {
+          themeColor: "primary",
+          size: "large",
+          "aria-label": applyText,
+          "aria-disabled": "false",
+          type: "button"
+        },
+        size: "large",
+        "aria-label": applyText,
+        "aria-disabled": "false",
+        type: "button",
+        onClick: _this.handleWrapperClick,
+        on: this.v3 ? undefined : {
+          "click": _this.handleWrapperClick
+        }
+      }, [applyText])];
+    };
+    var adaptiveActionSheetFooterTemplate = templateRendering.call(this, adaptiveActionSheetFooterTemplateDef, getListeners.call(this));
+    var adaptiveActionSheetContentTemplateDef = function adaptiveActionSheetContentTemplateDef() {
+      var _a;
+      var headerToRender = _this.base.getTemplateDef.call(_this, header, h);
+      var footerToRender = _this.base.getTemplateDef.call(_this, footer, h);
+      var groupStickyHeaderTemplate = templateRendering.call(_this, groupStickyHeaderItemRender, getListeners.call(_this));
+      return h("div", {
+        "class": "k-list-container"
+      }, [headerToRender && h("div", {
+        "class": "k-list-header"
+      }, [headerToRender]), h("div", {
+        "class": classNames('k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = !renderAdaptive ? size : false, _a['k-list-lg'] = renderAdaptive ? true : false, _a['k-virtual-list'] = vs.enabled, _a))
+      }, [_this.group && dataItems.length !== 0 && h(GroupStickyHeader, {
+        group: _this.group,
+        attrs: this.v3 ? undefined : {
+          group: _this.group,
+          render: groupStickyHeaderTemplate
+        },
+        render: groupStickyHeaderTemplate
+      }), renderList.call(_this), footerToRender && h("div", {
+        className: "k-list-footer",
+        attrs: this.v3 ? undefined : {
+          className: "k-list-footer"
+        }
+      }, [footerToRender])])]);
+    };
+    var adaptiveActionSheetContentTemplate = templateRendering.call(this, adaptiveActionSheetContentTemplateDef, getListeners.call(this));
+    var renderAdaptiveListContainer = function renderAdaptiveListContainer() {
+      return h(ActionSheet, {
+        expand: opened,
+        attrs: this.v3 ? undefined : {
+          expand: opened,
+          animation: true,
+          animationStyles: this.animationStyles,
+          className: this.classNameAdaptive,
+          contentClassName: '!k-overflow-hidden',
+          footerClassName: 'k-actions k-actions-stretched',
+          header: adaptiveActionSheetHeaderTemplate,
+          content: adaptiveActionSheetContentTemplate,
+          footer: adaptiveActionSheetFooterTemplate,
+          navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
+        },
+        animation: true,
+        animationStyles: this.animationStyles,
+        className: this.classNameAdaptive,
+        contentClassName: '!k-overflow-hidden',
+        footerClassName: 'k-actions k-actions-stretched',
+        header: adaptiveActionSheetHeaderTemplate,
+        content: adaptiveActionSheetContentTemplate,
+        footer: adaptiveActionSheetFooterTemplate,
+        onClose: this.onCancel,
+        on: this.v3 ? undefined : {
+          "close": this.onCancel
+        },
+        navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
+      });
+    };
     var component = h("span", {
       ref: setRef(this, 'kendoAnchor', this.anchor),
       "class": classNames('k-multiselect', 'k-input', (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-focus'] = focused && !disabled, _a['k-disabled'] = disabled, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a)),
@@ -1203,7 +1474,7 @@ var MultiSelectVue2 = {
       }) : undefined
     }, this.v3 ? function () {
       return [renderSearchBar.call(_this4, id)];
-    } : [renderSearchBar.call(_this4, id)]), clearButton &&
+    } : [renderSearchBar.call(_this4, id)]), tagsToRender.length > 0 && clearButton &&
     // @ts-ignore  function children
     h(ClearButton, {
       onClearclick: this.clearButtonClick,
@@ -1212,14 +1483,18 @@ var MultiSelectVue2 = {
       }
     }), h("span", {
       "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
-    }), renderListContainer.call(this)]);
+    }), !renderAdaptive && renderListContainer.call(this)]);
+    // The following one combines the default rendering of the MultiSelect and the Adaptive rendering.
+    // This is needed because of Vue 2 specifics
+    var multiselect = [component, renderAdaptive && renderAdaptiveListContainer.call(this)];
+    var multiselectToRender = isV3 ? multiselect : this.$props.adaptive ? h("span", [multiselect]) : component;
     return label ? h("span", {
       "class": this.spanClassNames,
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
         dir: this.$props.dir
       }
-    }, [component, this.$props.label ? id ? h("label", {
+    }, [multiselectToRender, this.$props.label ? id ? h("label", {
       "for": id,
       attrs: this.v3 ? undefined : {
         "for": id
@@ -1227,7 +1502,7 @@ var MultiSelectVue2 = {
       "class": "k-label"
     }, [this.$props.label]) : h("span", {
       "class": "k-label"
-    }, [this.$props.label]) : null]) : component;
+    }, [this.$props.label]) : null]) : multiselectToRender;
   }
 };
 /**