@progress/kendo-vue-dropdowns 5.3.0-dev.202410141143 → 5.3.0-develop.2

package/dist/es/MultiSelect/MultiSelect.js

@@ -1,1515 +0,0 @@
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-};
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-var ref = allVue.ref;
-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';
-import { List } from '../common/List';
-import { TagList } from './TagList';
-import { SearchBar } from '../common/SearchBar';
-import DropDownBase from '../common/DropDownBase';
-import { GroupStickyHeader } from '../common/GroupStickyHeader';
-import { ClearButton } from '../common/ClearButton';
-import { ActiveDescendant } from './../common/settings';
-import { itemIndexStartsWith, getItemValue, areSame, matchDataCollections, removeDataItems, isPresent, preventDefaultNonInputs } from '../common/utils';
-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';
-import { ActionSheet } from '@progress/kendo-vue-layout';
-import { ListFilter } from '../common/ListFilter';
-import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { messages, adaptiveModeFooterApply, adaptiveModeFooterCancel } from './../messages/main';
-var VALIDATION_MESSAGE = 'Please enter a valid value!';
-var preventDefault = function preventDefault(event) {
-  return event.preventDefault();
-};
-var matchTags = function matchTags(tag1, tag2, key) {
-  if (!!tag1 !== !!tag2 || tag1.text !== tag2.text) {
-    return false;
-  }
-  return tag1 === tag2 || matchDataCollections(tag1.data, tag2.data, key);
-};
-var isCustom = function isCustom(type) {
-  return type === FocusedItemType.CustomItem;
-};
-var FocusedItemType;
-(function (FocusedItemType) {
-  FocusedItemType[FocusedItemType["None"] = 0] = "None";
-  FocusedItemType[FocusedItemType["ListItem"] = 1] = "ListItem";
-  FocusedItemType[FocusedItemType["CustomItem"] = 2] = "CustomItem";
-})(FocusedItemType || (FocusedItemType = {}));
-/**
- * @hidden
- */
-var MultiSelectVue2 = {
-  name: 'KendoMultiSelect',
-  // @ts-ignore
-  emits: {
-    'changemodel': null,
-    'update:modelValue': null,
-    'filterchange': null,
-    change: null,
-    pagechange: null,
-    focus: null,
-    blur: null,
-    open: null,
-    close: null,
-    scroll: null
-  },
-  model: {
-    event: 'changemodel'
-  },
-  props: {
-    autoClose: {
-      type: Boolean,
-      default: true
-    },
-    removeTagIcon: String,
-    allowCustom: Boolean,
-    modelValue: Array,
-    opened: {
-      type: Boolean,
-      default: undefined
-    },
-    disabled: Boolean,
-    dir: String,
-    tabIndex: {
-      type: Number,
-      default: 0
-    },
-    accessKey: String,
-    dataItems: Array,
-    textField: String,
-    label: String,
-    loading: Boolean,
-    name: String,
-    value: Array,
-    defaultValue: Array,
-    valueField: String,
-    valuePrimitive: Boolean,
-    dataItemKey: String,
-    placeholder: String,
-    tags: Array,
-    required: {
-      type: Boolean,
-      default: false
-    },
-    valid: {
-      type: Boolean,
-      default: undefined
-    },
-    validate: {
-      type: Boolean
-    },
-    validationMessage: {
-      type: String,
-      default: undefined
-    },
-    validityStyles: {
-      type: Boolean,
-      default: true
-    },
-    tagRender: [String, Function, Object],
-    id: String,
-    popupSettings: {
-      type: Object,
-      default: function _default() {
-        return {
-          animate: true,
-          height: '200px',
-          anchor: ''
-        };
-      }
-    },
-    itemRender: [String, Function, Object],
-    groupHeaderItemRender: [String, Function, Object],
-    groupStickyHeaderItemRender: [String, Function, Object],
-    listNoDataRender: [String, Function, Object],
-    focusedItemIndex: Function,
-    virtual: {
-      type: Object,
-      default: undefined
-    },
-    header: [String, Function, Object],
-    footer: [String, Function, Object],
-    filterable: Boolean,
-    filter: {
-      type: String,
-      default: undefined
-    },
-    ariaLabel: {
-      type: String,
-      default: undefined
-    },
-    ariaLabelledBy: String,
-    ariaDescribedBy: String,
-    rounded: {
-      type: String,
-      default: 'medium',
-      validator: function validator(value) {
-        return ['small', 'medium', 'large', 'full'].includes(value);
-      }
-    },
-    tagsRounded: {
-      type: String,
-      default: 'medium',
-      validator: function validator(value) {
-        return ['small', 'medium', 'large', 'full'].includes(value);
-      }
-    },
-    fillMode: {
-      type: String,
-      default: 'solid',
-      validator: function validator(value) {
-        return ['solid', 'flat', 'outline'].includes(value);
-      }
-    },
-    size: {
-      type: String,
-      default: 'medium',
-      validator: function validator(value) {
-        return ['small', 'medium', 'large'].includes(value);
-      }
-    },
-    groupField: {
-      type: String
-    },
-    adaptive: {
-      type: Boolean,
-      default: undefined
-    },
-    adaptiveTitle: {
-      type: String,
-      default: undefined
-    }
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    var inputRef = ref(null);
-    var kendoAnchorRef = ref(null);
-    var kendoLocalizationService = inject('kendoLocalizationService', {});
-    return {
-      v3: v3,
-      inputRef: inputRef,
-      kendoAnchorRef: kendoAnchorRef,
-      kendoLocalizationService: kendoLocalizationService
-    };
-  },
-  computed: {
-    spanClassNames: {
-      get: function get() {
-        var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
-        var editorValue = this.currentText || getItemValue(this.computedValue()[0], this.$props.textField);
-        return {
-          'k-floating-label-container': true,
-          'k-focus': this.currentFocused,
-          'k-empty': !(editorValue && editorValue !== 0),
-          'k-invalid': !isValid && isValid !== undefined,
-          '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;
-    this.scrollToFocused = false;
-    this.base = new DropDownBase(this);
-    this.anchor = guid();
-    this.inputId = guid();
-  },
-  inject: {
-    kendoLocalizationService: {
-      default: null
-    }
-  },
-  data: function data() {
-    return {
-      hasMounted: false,
-      currentText: '',
-      currentValue: '',
-      currentFocused: false,
-      currentOpened: false,
-      currentFocusedIndex: undefined,
-      currentFocusedTag: undefined,
-      searchState: {
-        word: '',
-        last: ''
-      },
-      suggested: '',
-      activedescendant: ActiveDescendant.PopupList,
-      group: undefined,
-      isScrolling: false,
-      itemHeight: 0,
-      windowWidth: 0,
-      popupWidth: undefined,
-      initialAdaptiveRenderingValues: undefined
-    };
-  },
-  watch: {
-    currentOpened: function currentOpened(_, oldValue) {
-      this.prevCurrentOpened = oldValue;
-    },
-    opened: function opened(_, oldValue) {
-      this.prevOpened = oldValue;
-    },
-    virtual: function virtual(newValue, oldValue) {
-      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() {
-    var _a;
-    var _b = this.$props,
-      virtual = _b.virtual,
-      _c = _b.groupField,
-      groupField = _c === void 0 ? '' : _c,
-      _d = _b.dataItems,
-      dataItems = _d === void 0 ? [] : _d;
-    var skip = virtual ? virtual.skip : 0;
-    var opened = this.isOpen;
-    var prevOpened = this.prevOpened !== undefined ? this.prevOpened : this.prevCurrentOpened;
-    var opening = !prevOpened && opened;
-    var closing = prevOpened && !opened;
-    var popupSettings = Object.assign({}, {
-      animate: true,
-      height: '200px'
-    }, this.$props.popupSettings);
-    var list = this.$refs.list;
-    var scrollElement = this.$refs.scrollElement;
-    if (list) {
-      // @ts-ignore
-      this.base.vs.list = list.list;
-      // @ts-ignore
-      this.base.list = list.list;
-    }
-    if (scrollElement) {
-      this.base.vs.scrollElement = scrollElement;
-    }
-    if (list && dataItems.length) {
-      // @ts-ignore
-      this.base.vs.scrollerRef(list.$el);
-    }
-    if (!popupSettings.animate && closing) {
-      this.onPopupClosed();
-    }
-    if (!this.isScrolling) {
-      if (virtual && this.virtualTotalHasChanged) {
-        this.base.vs.calcScrollElementHeight();
-        this.base.vs.reset();
-        this.virtualTotalHasChanged = false;
-      } else {
-        var _e = this.getFocusedState(),
-          focusedItem = _e.focusedItem,
-          focusedIndex = _e.focusedIndex;
-        if (groupField !== '') {
-          focusedIndex = (_a = this.base.getGroupedDataModernMode(dataItems, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(focusedItem);
-        }
-        if (opening && virtual) {
-          this.base.scrollToVirtualItem(virtual, focusedIndex - skip);
-          this.prevCurrentOpened = true;
-        } else if (opening && !virtual) {
-          // Resets the sticky header group value for scenarios with open/close of component's popup
-          if (dataItems && dataItems.length !== 0) {
-            this.base.resetGroupStickyHeader(dataItems[0][groupField], this);
-          }
-          this.base.scrollToItem(focusedIndex);
-          this.prevCurrentOpened = true;
-        } else if (opened && prevOpened && focusedItem) {
-          this.base.scrollToItem(focusedIndex - skip);
-        }
-      }
-    }
-    this.scrollToFocused = false;
-    this.searchBarRef();
-    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;
-    this.base.wrapper = getRef(this, 'kendoAnchor', this.anchor);
-    this.element = getRef(this, 'kendoAnchor', this.anchor);
-    this.base.didMount();
-    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) {
-        result.push.apply(result, this.valuesItemsDuringOnChange);
-      } else if (this.$props.value) {
-        result.push.apply(result, this.$props.value);
-      } else if (this.$props.modelValue !== undefined) {
-        result.push.apply(result, this.$props.modelValue);
-      } else if (this.currentValue) {
-        result.push.apply(result, this.currentValue);
-      } else if (this.$props.defaultValue) {
-        result.push.apply(result, this.$props.defaultValue);
-      }
-      return this.valuePrimitive ? this.findByFieldValue(this.valueField, result) || result : result;
-    },
-    findByFieldValue: function findByFieldValue(field, result) {
-      var _this = this;
-      var newResult = result.map(function (currentValue) {
-        var index = _this.dataItems.findIndex(function (i) {
-          return getItemValue(i, field) === currentValue;
-        });
-        return _this.dataItems[index] || currentValue;
-      });
-      return newResult;
-    },
-    primitiveValue: function primitiveValue() {
-      var _this = this;
-      var computed = this.computedValue();
-      var value = computed.map(function (v) {
-        return getItemValue(v, _this.valueField);
-      });
-      return this.valuePrimitive ? value : computed;
-    },
-    validity: function validity() {
-      var customError = this.$props.validationMessage !== undefined;
-      var value = this.computedValue();
-      var isValid = !this.$props.required || value !== null && value.length > 0 && value !== undefined;
-      var valid = this.$props.valid !== undefined ? this.$props.valid : isValid;
-      return {
-        customError: customError,
-        valid: valid,
-        valueMissing: value === null
-      };
-    },
-    handleItemSelect: function handleItemSelect(index, state) {
-      var _a = this.$props,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        dataItemKey = _a.dataItemKey,
-        virtual = _a.virtual;
-      var value = this.computedValue();
-      var skip = virtual ? virtual.skip : 0;
-      var dataItem = dataItems[index - skip];
-      var indexInValue = value.findIndex(function (i) {
-        return areSame(i, dataItem, dataItemKey);
-      });
-      var newItems = [];
-      if (indexInValue !== -1) {
-        // item is already selected
-        newItems = value;
-        newItems.splice(indexInValue, 1);
-      } else {
-        newItems = __spreadArray(__spreadArray([], value, true), [dataItem], false);
-      }
-      var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
-      if (text && !this.adaptiveState) {
-        this.clearFilter(state);
-      }
-      if (this.currentFocusedIndex !== undefined) {
-        state.data.currentFocusedIndex = undefined;
-      }
-      this.triggerOnChange(newItems, state);
-      this.base.triggerPageChangeCornerItems(dataItem, state);
-    },
-    onTagDelete: function onTagDelete(itemsToRemove, event) {
-      var opened = this.isOpen;
-      var state = this.base.initState();
-      state.event = event;
-      if (opened) {
-        this.base.togglePopup(state);
-      }
-      if (!this.currentFocused) {
-        state.data.currentFocused = true;
-      }
-      var selected = this.computedValue();
-      removeDataItems(selected, itemsToRemove, this.$props.dataItemKey);
-      this.triggerOnChange(selected, state);
-      this.applyState(state);
-    },
-    onNavigate: function onNavigate(state, keyCode) {
-      var _a = this.$props,
-        allowCustom = _a.allowCustom,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b;
-      var opened = this.isOpen;
-      var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
-      var _c = this.getFocusedState(),
-        focusedType = _c.focusedType,
-        focusedIndex = _c.focusedIndex;
-      var customItem = allowCustom && text;
-      var customItemFocused = isCustom(focusedType);
-      var base = this.base;
-      var vs = base.vs;
-      if (opened && keyCode === Keys.up && customItemFocused) {
-        if (this.currentFocusedIndex !== undefined) {
-          state.data.currentFocusedIndex = undefined;
-        }
-      } else {
-        var newFocused = base.navigation.navigate({
-          keyCode: keyCode,
-          current: focusedIndex,
-          max: (vs.enabled ? vs.total : dataItems.length) - 1,
-          min: customItem ? -1 : 0
-        });
-        if (newFocused !== undefined) {
-          this.itemFocus(newFocused, state);
-          this.scrollToFocused = true;
-        }
-      }
-      this.applyState(state);
-    },
-    itemFocus: function itemFocus(index, state) {
-      var _a = this.$props,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        allowCustom = _a.allowCustom,
-        virtual = _a.virtual;
-      var skip = virtual ? virtual.skip : 0;
-      var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
-      var focusedIndex = this.getFocusedState().focusedIndex;
-      var customItem = allowCustom && text;
-      var nextFocusedItem = dataItems[index - skip];
-      if (nextFocusedItem && focusedIndex !== index) {
-        if (this.currentFocusedIndex !== index) {
-          state.data.currentFocusedIndex = index;
-          state.data.activedescendant = ActiveDescendant.PopupList;
-        }
-      } else if (customItem && index === -1) {
-        if (this.currentFocusedIndex !== undefined) {
-          state.data.currentFocusedIndex = undefined;
-        }
-      }
-      this.base.triggerPageChangeCornerItems(nextFocusedItem, state);
-    },
-    searchBarRef: function searchBarRef() {
-      var _this = this;
-      if (this.input && this.currentFocused) {
-        setTimeout(function () {
-          return _this.input.focus();
-        }, 0);
-      }
-    },
-    onChangeHandler: function onChangeHandler(event) {
-      var state = this.base.initState();
-      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;
-      }
-      state.data.currentFocusedIndex = undefined;
-      if (!opened) {
-        this.base.togglePopup(state);
-      }
-      this.base.filterChanged(value, state);
-      // Resets the value of the StickyHeader when filtering the data or just entering symbols in the input
-      if (this.$props.filterable) {
-        state.data.group = undefined;
-      }
-      this.applyState(state);
-    },
-    clearButtonClick: function clearButtonClick(event) {
-      var opened = this.isOpen;
-      var state = this.base.initState();
-      state.event = event;
-      event.stopPropagation();
-      if (this.computedValue().length > 0) {
-        this.triggerOnChange([], state);
-      }
-      if (this.currentFocusedIndex !== undefined) {
-        state.data.currentFocusedIndex = undefined;
-      }
-      if (opened) {
-        this.base.togglePopup(state);
-      }
-      var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
-      if (isPresent(text) && text !== '') {
-        this.base.filterChanged('', state);
-      }
-      if (this.currentText) {
-        state.data.currentText = '';
-      }
-      this.applyState(state);
-    },
-    onInputKeyDown: function onInputKeyDown(event) {
-      var _this = this;
-      if (this.isScrolling) {
-        this.isScrolling = false;
-      }
-      var keyCode = event.keyCode;
-      var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
-      var opened = this.isOpen;
-      var focusedItem = this.getFocusedState().focusedItem;
-      var state = this.base.initState();
-      state.event = event;
-      if (!text && this.computedValue().length > 0 && (keyCode === Keys.left || keyCode === Keys.right || keyCode === Keys.home || keyCode === Keys.end || keyCode === Keys.delete || keyCode === Keys.backspace)) {
-        return this.onTagsNavigate(event, state);
-      }
-      var togglePopup = function togglePopup() {
-        event.preventDefault();
-        _this.base.togglePopup(state);
-        _this.applyState(state);
-      };
-      if (opened) {
-        if (event.altKey && keyCode === Keys.up) {
-          togglePopup();
-        } else if (keyCode === Keys.up || keyCode === Keys.down) {
-          event.preventDefault();
-          this.onNavigate(state, keyCode);
-        } else if (keyCode === Keys.enter) {
-          event.preventDefault();
-          if (this.$props.allowCustom && text && focusedItem === null) {
-            this.customItemSelect(event);
-          } else {
-            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) {
-        togglePopup();
-      }
-    },
-    onTagsNavigate: function onTagsNavigate(event, state) {
-      var keyCode = event.keyCode;
-      var focusedTag = this.currentFocusedTag;
-      var tags = this._tags;
-      var itemsKey = this.$props.dataItemKey;
-      var focusedIndex = focusedTag ? tags.findIndex(function (t) {
-        return matchTags(t, focusedTag, itemsKey);
-      }) : -1;
-      var newFocusedTag = undefined;
-      var hasFocused = focusedIndex !== -1;
-      if (keyCode === Keys.left) {
-        if (hasFocused) {
-          focusedIndex = Math.max(0, focusedIndex - 1);
-        } else {
-          focusedIndex = tags.length - 1;
-        }
-        newFocusedTag = tags[focusedIndex];
-      } else if (keyCode === Keys.right) {
-        if (focusedIndex === tags.length - 1) {
-          newFocusedTag = undefined;
-        } else if (hasFocused) {
-          focusedIndex = Math.min(tags.length - 1, focusedIndex + 1);
-          newFocusedTag = tags[focusedIndex];
-        }
-      } else if (keyCode === Keys.home) {
-        newFocusedTag = tags[0];
-      } else if (keyCode === Keys.end) {
-        newFocusedTag = tags[tags.length - 1];
-      } else if (keyCode === Keys.delete) {
-        if (hasFocused) {
-          var items = this.computedValue();
-          removeDataItems(items, tags[focusedIndex].data, itemsKey);
-          this.triggerOnChange(items, state);
-        }
-      } else if (keyCode === Keys.backspace) {
-        var items = this.computedValue();
-        if (hasFocused) {
-          removeDataItems(items, tags[focusedIndex].data, itemsKey);
-          this.triggerOnChange(items, state);
-        } else if (!hasFocused && tags.length) {
-          var removed = tags.pop();
-          removeDataItems(items, removed.data, itemsKey);
-          this.triggerOnChange(items, state);
-        }
-      }
-      if (newFocusedTag !== focusedTag) {
-        state.data.currentFocusedTag = newFocusedTag;
-        state.data.activedescendant = ActiveDescendant.TagsList;
-      }
-      this.applyState(state);
-    },
-    triggerOnChange: function triggerOnChange(items, state) {
-      if (this.$props.value === undefined) {
-        state.data.currentValue = __spreadArray([], items, true);
-      }
-      this.valuesItemsDuringOnChange = [];
-      this.setItems(items, this.valuesItemsDuringOnChange);
-      state.events.push({
-        type: 'change'
-      });
-    },
-    selectFocusedItem: function selectFocusedItem(event) {
-      var _a = this.$props,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        virtual = _a.virtual;
-      var focusedIndex = this.getFocusedState().focusedIndex;
-      var skip = virtual ? virtual.skip : 0;
-      if (dataItems[focusedIndex - skip] !== undefined) {
-        this.handleItemClick(focusedIndex, event);
-      }
-    },
-    setItems: function setItems(srcItems, destItems) {
-      destItems.length = 0;
-      destItems.push.apply(destItems, srcItems);
-    },
-    getFocusedState: function getFocusedState() {
-      var focusedIndex = this.currentFocusedIndex;
-      var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
-      var _a = this.$props,
-        allowCustom = _a.allowCustom,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b,
-        dataItemKey = _a.dataItemKey,
-        virtual = _a.virtual,
-        textField = _a.textField,
-        _c = _a.focusedItemIndex,
-        focusedItemIndex = _c === void 0 ? itemIndexStartsWith : _c;
-      var skip = virtual && virtual.skip || 0;
-      var focusedInd;
-      if (focusedIndex !== undefined) {
-        return {
-          focusedIndex: focusedIndex,
-          focusedItem: dataItems[focusedIndex - skip],
-          focusedType: FocusedItemType.ListItem
-        };
-      }
-      var selected = this.computedValue();
-      if (allowCustom && text) {
-        return {
-          focusedItem: null,
-          focusedIndex: -1,
-          focusedType: FocusedItemType.CustomItem
-        };
-      } else if (text) {
-        focusedInd = focusedItemIndex(dataItems, text, textField);
-        return {
-          focusedItem: dataItems[focusedInd],
-          focusedIndex: focusedInd + skip,
-          focusedType: FocusedItemType.ListItem
-        };
-      } else if (selected.length) {
-        var last_1 = selected[selected.length - 1];
-        focusedInd = dataItems.findIndex(function (i) {
-          return areSame(i, last_1, dataItemKey);
-        });
-        if (dataItems[focusedInd] !== undefined) {
-          return {
-            focusedIndex: focusedInd + skip,
-            focusedItem: dataItems[focusedInd],
-            focusedType: FocusedItemType.ListItem
-          };
-        }
-        return {
-          focusedType: FocusedItemType.None,
-          focusedIndex: -1
-        };
-      }
-      return skip === 0 ? {
-        focusedItem: dataItems[0],
-        focusedIndex: 0,
-        focusedType: FocusedItemType.ListItem
-      } : {
-        focusedType: FocusedItemType.None,
-        focusedIndex: -1
-      };
-    },
-    customItemSelect: function customItemSelect(event) {
-      var _a;
-      var itemText = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
-      var textField = this.$props.textField;
-      if (!itemText) {
-        return;
-      }
-      var state = this.base.initState();
-      state.event = event;
-      var item = textField ? (_a = {}, _a[textField] = itemText, _a) : itemText;
-      if (this.currentText !== undefined) {
-        state.data.currentText = '';
-      }
-      state.data.currentFocusedIndex = undefined;
-      this.base.filterChanged('', state);
-      var newItems = __spreadArray(__spreadArray([], this.computedValue(), true), [item], false);
-      this.triggerOnChange(newItems, state);
-      this.base.togglePopup(state);
-      this.applyState(state);
-    },
-    handleWrapperClick: function handleWrapperClick(event) {
-      var opened = this.isOpen;
-      var input = this.input;
-      if (!opened && input) {
-        this.focusElement(input);
-      }
-      var state = this.base.initState();
-      state.event = event;
-      if (!this.currentFocused) {
-        state.events.push({
-          type: 'focus'
-        });
-        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 && !this.adaptiveState) {
-        this.base.togglePopup(state);
-      }
-      this.applyState(state);
-    },
-    handleBlur: function handleBlur(event) {
-      if (!this.currentFocused || this._skipFocusEvent) {
-        return;
-      }
-      var opened = this.isOpen;
-      var state = this.base.initState();
-      var _a = this.$props,
-        allowCustom = _a.allowCustom,
-        filterable = _a.filterable;
-      state.event = event;
-      state.data.currentFocused = false;
-      state.events.push({
-        type: 'blur'
-      });
-      if (opened && !this.adaptiveState) {
-        if (this.currentOpened) {
-          state.data.currentOpened = false;
-        }
-        state.events.push({
-          type: 'close'
-        });
-      }
-      if (!allowCustom && !filterable && this.currentText) {
-        state.data.currentText = '';
-      }
-      this.applyState(state);
-    },
-    handleFocus: function handleFocus(event) {
-      if (this._skipFocusEvent) {
-        return;
-      }
-      this.base.handleFocus(event);
-    },
-    onPopupOpened: function onPopupOpened() {
-      if (this.input && this.currentFocused) {
-        this.focusElement(this.input);
-      }
-    },
-    onPopupClosed: function onPopupClosed() {
-      var _this = this;
-      if (this.currentFocused) {
-        setTimeout(function () {
-          if (_this.currentFocused) {
-            _this.focusElement(_this.input);
-          }
-        }, 0);
-      }
-    },
-    focusElement: function focusElement(element) {
-      var _this = this;
-      this._skipFocusEvent = true;
-      element.focus();
-      setTimeout(function () {
-        return _this._skipFocusEvent = false;
-      }, 30);
-    },
-    applyState: function applyState(state) {
-      this.base.applyState(state);
-      this.valuesItemsDuringOnChange = null;
-    },
-    setValidity: function setValidity() {
-      if (this.input && this.input.setCustomValidity) {
-        this.input.setCustomValidity(this.validity().valid ? '' : this.$props.validationMessage || VALIDATION_MESSAGE);
-      }
-    },
-    focus: function focus() {
-      if (this.input) {
-        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();
-    },
-    onScroll: function onScroll(event) {
-      this.isScrolling = true;
-      var _a = this.base,
-        vs = _a.vs,
-        list = _a.list;
-      vs.scrollHandler(event);
-      var state = this.base.initState();
-      var groupField = this.$props.groupField;
-      var _b = this.$props.dataItems,
-        dataItems = _b === void 0 ? [] : _b;
-      var group;
-      if (!groupField || !dataItems.length) {
-        return;
-      }
-      var itemHeight = this.itemHeight = this.itemHeight || (vs.enabled ? vs.itemHeight : list ? list.children[0].offsetHeight : 0);
-      var target = event.target;
-      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];
-      }
-      for (var i = 1; i < dataItems.length; i++) {
-        if (itemHeight * i > scrollTop) {
-          break;
-        }
-        if (dataItems[i] && dataItems[i][groupField]) {
-          group = dataItems[i][groupField];
-        }
-      }
-      if (group !== this.group) {
-        state.data.group = group;
-        this.applyState(state);
-      }
-    }
-  },
-  render: function render(createElement) {
-    var _this = this;
-    var h = gh || createElement;
-    var _a = this.$props,
-      style = _a.style,
-      label = _a.label,
-      dir = _a.dir,
-      disabled = _a.disabled,
-      tags = _a.tags,
-      textField = _a.textField,
-      dataItemKey = _a.dataItemKey,
-      virtual = _a.virtual,
-      loading = _a.loading,
-      size = _a.size,
-      fillMode = _a.fillMode,
-      rounded = _a.rounded,
-      tagsRounded = _a.tagsRounded,
-      removeTagIcon = _a.removeTagIcon,
-      adaptiveTitle = _a.adaptiveTitle,
-      header = _a.header,
-      footer = _a.footer,
-      groupStickyHeaderItemRender = _a.groupStickyHeaderItemRender,
-      _b = _a.dataItems,
-      dataItems = _b === void 0 ? [] : _b;
-    var focused = this.currentFocused;
-    var popupSettings = Object.assign({}, {
-      animate: true,
-      height: '200px'
-    }, this.$props.popupSettings);
-    var focusedTag = this.currentFocusedTag;
-    var value = this.computedValue();
-    var searchText = (this.$props.filter !== undefined ? this.$props.filter : this.currentText) || '';
-    var clearButton = !loading && (!!searchText || value.length > 0);
-    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;
-      vs.total = virtual.total;
-      vs.pageSize = virtual.pageSize;
-    }
-    var tagsToRender = [];
-    if (!this.initialAdaptiveRenderingValues) {
-      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]
-        });
-      });
-    }
-    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 focusedIndex = this.getFocusedState().focusedIndex;
-      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
-        h(SearchBar, {
-          id: searchId,
-          attrs: this.v3 ? undefined : {
-            id: searchId,
-            size: Math.max((placeholderToShow || '').length, searchText.length, 1),
-            tabIndex: this.$props.tabIndex,
-            accessKey: this.$props.accessKey,
-            placeholder: placeholderToShow,
-            value: !renderAdaptive ? searchText : '',
-            disabled: disabled,
-            expanded: opened,
-            owns: this.base.listBoxId,
-            activedescendant: ariaActivedescendant,
-            "aria-describedBy": "tagslist-".concat(this.base.guid).concat(this.$props.ariaDescribedBy ? ' ' + this.$props.ariaDescribedBy : ''),
-            "aria-labelledBy": this.$props.ariaLabelledBy,
-            "aria-label": this.$props.ariaLabel
-          },
-          size: Math.max((placeholderToShow || '').length, searchText.length, 1),
-          tabIndex: this.$props.tabIndex,
-          accessKey: this.$props.accessKey,
-          placeholder: placeholderToShow,
-          value: !renderAdaptive ? searchText : '',
-          onChange: this.onChangeHandler,
-          on: this.v3 ? undefined : {
-            "change": this.onChangeHandler,
-            "blur": this.handleBlur,
-            "keydown": this.onInputKeyDown
-          },
-          onBlur: this.handleBlur,
-          onKeydown: this.onInputKeyDown,
-          ref: this.v3 ? function (el) {
-            _this.inputRef = el;
-          } : 'input',
-          disabled: disabled,
-          expanded: opened,
-          owns: this.base.listBoxId,
-          activedescendant: ariaActivedescendant,
-          "aria-describedBy": "tagslist-".concat(this.base.guid).concat(this.$props.ariaDescribedBy ? ' ' + this.$props.ariaDescribedBy : ''),
-          "aria-labelledBy": this.$props.ariaLabelledBy,
-          "aria-label": this.$props.ariaLabel
-        })
-      );
-    };
-    var renderList = function renderList() {
-      var _this2 = this;
-      var groupField = this.$props.groupField;
-      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 focusedIndex = this.getFocusedState().focusedIndex;
-      var translate = "translateY(".concat(vs.translate, "px)");
-      var listDataItems = dataItems;
-      if (groupField) {
-        listDataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
-      }
-      return (
-        // @ts-ignore  function children
-        h(List, {
-          id: this.base.listBoxId,
-          attrs: this.v3 ? undefined : {
-            id: this.base.listBoxId,
-            show: opened,
-            dataItems: listDataItems.slice(),
-            focusedIndex: focusedIndex,
-            value: this.computedValue(),
-            textField: textField,
-            valueField: dataItemKey,
-            optionsGuid: this.base.guid,
-            wrapperStyle: {
-              maxHeight: !renderAdaptive ? popupSettings.height : undefined
-            },
-            wrapperCssClass: 'k-list-content',
-            listStyle: vs.enabled ? {
-              transform: translate
-            } : undefined,
-            skip: skip,
-            itemRender: itemRender,
-            groupHeaderItemRender: groupHeaderItemRender,
-            noDataRender: listNoDataRender,
-            groupField: groupField
-          },
-          show: opened,
-          dataItems: listDataItems.slice(),
-          focusedIndex: focusedIndex,
-          value: this.computedValue(),
-          textField: textField,
-          valueField: dataItemKey,
-          optionsGuid: this.base.guid,
-          ref: 'list',
-          wrapperStyle: {
-            maxHeight: !renderAdaptive ? popupSettings.height : undefined
-          },
-          wrapperCssClass: 'k-list-content',
-          listStyle: vs.enabled ? {
-            transform: translate
-          } : undefined,
-          key: "listKey",
-          skip: skip,
-          onListclick: this.handleItemClick,
-          on: this.v3 ? undefined : {
-            "listclick": this.handleItemClick,
-            "scroll": this.onScroll
-          },
-          itemRender: itemRender,
-          groupHeaderItemRender: groupHeaderItemRender,
-          noDataRender: listNoDataRender,
-          groupField: groupField,
-          onScroll: this.onScroll
-        }, this.v3 ? function () {
-          return [renderScrollElement.call(_this2)];
-        } : [renderScrollElement.call(_this2)])
-      );
-    };
-    var renderScrollElement = function renderScrollElement() {
-      return vs.enabled && h("div", {
-        ref: 'scrollElement',
-        key: 'scrollElementKey'
-      });
-    };
-    var renderListContainer = function renderListContainer() {
-      var _this3 = this;
-      var _a;
-      var base = this.base;
-      var allowCustom = this.$props.allowCustom;
-      var groupStickyHeaderTemplate = templateRendering.call(this, this.$props.groupStickyHeaderItemRender, getListeners.call(this));
-      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 focusedType = this.getFocusedState().focusedType;
-      var customItem = allowCustom && currentText && h("div", {
-        "class": "k-list",
-        key: "customitem",
-        onClick: this.customItemSelect,
-        on: this.v3 ? undefined : {
-          "click": this.customItemSelect
-        }
-      }, [h("div", {
-        "class": classNames('k-item k-custom-item', {
-          'k-focus': isCustom(focusedType)
-        })
-      }, [currentText, h(Icon, {
-        name: "plus",
-        attrs: this.v3 ? undefined : {
-          name: "plus",
-          icon: plusIcon
-        },
-        icon: plusIcon,
-        style: {
-          float: 'right'
-        }
-      })])]);
-      if (this.group === undefined && this.$props.groupField !== undefined) {
-        this.group = getItemValue(dataItems[0], this.$props.groupField);
-      }
-      return (
-        // @ts-ignore  function children
-        h(ListContainer, {
-          ref: 'container',
-          onMousedown: preventDefault,
-          on: this.v3 ? undefined : {
-            "mousedown": preventDefault,
-            "blur": this.handleBlur
-          },
-          dir: dir !== undefined ? dir : base.dirCalculated,
-          attrs: this.v3 ? undefined : {
-            dir: dir !== undefined ? dir : base.dirCalculated,
-            width: this.popupWidth,
-            popupSettings: __assign(__assign({}, popupSettings), {
-              anchor: this.anchor,
-              show: opened,
-              onOpen: this.onPopupOpened,
-              onClose: this.onPopupClosed,
-              popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
-              className: classNames('k-list-container', popupSettings.className)
-            }),
-            itemsCount: dataItems.length
-          },
-          onBlur: this.handleBlur,
-          width: this.popupWidth,
-          popupSettings: __assign(__assign({}, popupSettings), {
-            anchor: this.anchor,
-            show: opened,
-            onOpen: this.onPopupOpened,
-            onClose: this.onPopupClosed,
-            popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
-            className: classNames('k-list-container', popupSettings.className)
-          }),
-          itemsCount: dataItems.length
-        }, this.v3 ? function () {
-          return [headerListContainer && h("div", {
-            "class": "k-list-header"
-          }, [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), footerListContainer && h("div", {
-            "class": "k-list-footer"
-          }, [footerListContainer]), virtual && header];
-        } : [headerListContainer && h("div", {
-          "class": "k-list-header"
-        }, [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), footerListContainer && h("div", {
-          "class": "k-list-footer"
-        }, [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 multiSelectDefault = function multiSelectDefault() {
-      var _this4 = this;
-      var _a;
-      return 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)),
-        style: !label ? style : __assign(__assign({}, style), {
-          width: undefined
-        }),
-        dir: dir,
-        attrs: this.v3 ? undefined : {
-          dir: dir
-        },
-        onFocusin: this.handleFocus,
-        on: this.v3 ? undefined : {
-          "focusin": this.handleFocus,
-          "click": this.handleWrapperClick,
-          "mousedown": preventDefaultNonInputs
-        },
-        onClick: this.handleWrapperClick,
-        onMousedown: preventDefaultNonInputs
-      }, [
-      // @ts-ignore  function children
-      h(TagList, {
-        removeTagIcon: removeTagIcon,
-        attrs: this.v3 ? undefined : {
-          removeTagIcon: removeTagIcon,
-          tagsRounded: tagsRounded,
-          size: size,
-          fillMode: fillMode,
-          tagRender: tagRender,
-          dataItems: tagsToRender,
-          guid: this.base.guid,
-          focused: focusedTag ? tagsToRender.find(function (t) {
-            return matchTags(t, focusedTag, dataItemKey);
-          }) : undefined
-        },
-        tagsRounded: tagsRounded,
-        size: size,
-        fillMode: fillMode,
-        tagRender: tagRender,
-        onTagdelete: this.onTagDelete,
-        on: this.v3 ? undefined : {
-          "tagdelete": this.onTagDelete
-        },
-        dataItems: tagsToRender,
-        guid: this.base.guid,
-        focused: focusedTag ? tagsToRender.find(function (t) {
-          return matchTags(t, focusedTag, dataItemKey);
-        }) : undefined
-      }, this.v3 ? function () {
-        return [renderSearchBar.call(_this4, id)];
-      } : [renderSearchBar.call(_this4, id)]), tagsToRender.length > 0 && clearButton &&
-      // @ts-ignore  function children
-      h(ClearButton, {
-        onClearclick: this.clearButtonClick,
-        on: this.v3 ? undefined : {
-          "clearclick": this.clearButtonClick
-        }
-      }), h("span", {
-        "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
-      }), !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 = [isV3 ? h(multiSelectDefault.call(this), __assign({}, this.$attrs)) : multiSelectDefault.call(this), renderAdaptive && renderAdaptiveListContainer.call(this)];
-    var multiselectToRender = isV3 ? multiselect : renderAdaptive ? h("div", [multiselect]) : multiSelectDefault.call(this);
-    return label ? h("span", {
-      "class": this.spanClassNames,
-      dir: this.$props.dir,
-      attrs: this.v3 ? undefined : {
-        dir: this.$props.dir
-      }
-    }, [multiselectToRender, this.$props.label ? id ? h("label", {
-      "for": id,
-      attrs: this.v3 ? undefined : {
-        "for": id
-      },
-      "class": "k-floating-label"
-    }, [this.$props.label]) : h("span", {
-      "class": "k-label"
-    }, [this.$props.label]) : null]) : multiselectToRender;
-  }
-};
-/**
- * @hidden
- */
-var MultiSelect = MultiSelectVue2;
-export { MultiSelect, MultiSelectVue2 };