@progress/kendo-vue-dropdowns 3.5.0-dev.202208020811 → 3.5.1-dev.202208110751

package/dist/esm/MultiSelect/MultiSelect.js

@@ -0,0 +1,1249 @@
+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;
+import { classNames, Keys, guid, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+var sizeMap = kendoThemeMaps.sizeMap,
+    roundedMap = kendoThemeMaps.roundedMap;
+import { ListContainer } from '../common/ListContainer.js';
+import { List } from '../common/List.js';
+import { TagList } from './TagList.js';
+import { SearchBar } from '../common/SearchBar.js';
+import DropDownBase from '../common/DropDownBase.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';
+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,
+    focus: null,
+    blur: null,
+    open: null,
+    close: null,
+    scroll: null
+  },
+  model: {
+    event: 'changemodel'
+  },
+  props: {
+    autoClose: {
+      type: Boolean,
+      default: true
+    },
+    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'
+        };
+      }
+    },
+    itemRender: [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
+    },
+    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);
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    var kendoAnchorRef = ref(null);
+    return {
+      v3: v3,
+      inputRef: inputRef,
+      kendoAnchorRef: kendoAnchorRef
+    };
+  },
+  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'
+        };
+      }
+    }
+  },
+  created: function created() {
+    this.valuesItemsDuringOnChange = null;
+    this._tags = [];
+    this._skipFocusEvent = false;
+    this.scrollToFocused = false;
+    this.base = new DropDownBase(this);
+    this.anchor = guid();
+    this.inputId = guid();
+  },
+  data: function data() {
+    return {
+      hasMounted: false,
+      currentText: '',
+      currentValue: '',
+      currentFocused: false,
+      currentOpened: false,
+      currentFocusedIndex: undefined,
+      currentFocusedTag: undefined,
+      searchState: {
+        word: '',
+        last: ''
+      },
+      suggested: '',
+      activedescendant: ActiveDescendant.PopupList
+    };
+  },
+  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;
+      }
+    }
+  },
+  updated: function updated() {
+    var virtual = this.$props.virtual;
+    var skip = virtual ? virtual.skip : 0;
+    var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+    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 && this.dataItems.length) {
+      // @ts-ignore
+      this.base.vs.scrollerRef(list.$el);
+    }
+
+    if (!popupSettings.animate && closing) {
+      this.onPopupClosed();
+    }
+
+    if (virtual && this.virtualTotalHasChanged) {
+      this.base.vs.calcScrollElementHeight();
+      this.base.vs.reset();
+      this.virtualTotalHasChanged = false;
+    } else {
+      var _a = this.getFocusedState(),
+          focusedItem = _a.focusedItem,
+          focusedIndex = _a.focusedIndex;
+
+      if (opening && virtual) {
+        this.base.scrollToVirtualItem(virtual, focusedIndex - skip);
+        this.prevCurrentOpened = true;
+      } else if (opening && !virtual) {
+        this.base.scrollToItem(focusedIndex);
+        this.prevCurrentOpened = true;
+      } else if (opened && prevOpened && focusedItem && this.scrollToFocused) {
+        this.base.scrollToItem(focusedIndex - skip);
+      }
+    }
+
+    this.scrollToFocused = false;
+    this.searchBarRef();
+    this.setValidity();
+  },
+  mounted: function mounted() {
+    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();
+  },
+  methods: {
+    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) {
+        if (this.currentText) {
+          state.data.currentText = '';
+        }
+
+        this.base.filterChanged('', 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.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      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.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      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.currentTarget.value;
+      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      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);
+      this.applyState(state);
+    },
+    clearButtonClick: function clearButtonClick(event) {
+      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      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;
+
+      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 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) {
+          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.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      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.base.togglePopup(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.base.togglePopup(state);
+      }
+
+      this.applyState(state);
+    },
+    handleBlur: function handleBlur(event) {
+      if (!this.currentFocused || this._skipFocusEvent) {
+        return;
+      }
+
+      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      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) {
+        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();
+      }
+    }
+  },
+  render: function render(createElement) {
+    var _a;
+
+    var h = gh || createElement;
+    var _b = this.$props,
+        style = _b.style,
+        label = _b.label,
+        dir = _b.dir,
+        disabled = _b.disabled,
+        tags = _b.tags,
+        textField = _b.textField,
+        dataItemKey = _b.dataItemKey,
+        virtual = _b.virtual,
+        loading = _b.loading,
+        size = _b.size,
+        fillMode = _b.fillMode,
+        rounded = _b.rounded,
+        tagsRounded = _b.tagsRounded;
+    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));
+    vs.enabled = virtual !== undefined;
+
+    if (virtual !== undefined) {
+      vs.skip = virtual.skip;
+      vs.total = virtual.total;
+      vs.pageSize = virtual.pageSize;
+    }
+
+    var tagsToRender = [];
+
+    if (tags === undefined) {
+      this.computedValue().forEach(function (item) {
+        tagsToRender.push({
+          text: getItemValue(item, textField),
+          data: [item]
+        });
+      });
+    } else {
+      tagsToRender.push.apply(tagsToRender, tags);
+    }
+
+    this.setItems(tagsToRender, this._tags);
+    var isValid = !this.$props.validityStyles || this.validity().valid;
+
+    var renderClearButton = function renderClearButton(cbutton) {
+      if (cbutton) {
+        // @ts-ignore  function children
+        return h(ClearButton, {
+          onClearclick: this.clearButtonClick,
+          on: this.v3 ? undefined : {
+            "clearclick": this.clearButtonClick
+          },
+          key: "clearbutton"
+        });
+      }
+
+      return h("span");
+    };
+
+    var renderLoading = function renderLoading(cloading) {
+      if (cloading) {
+        return h("span", {
+          "class": "k-icon k-input-loading-icon k-i-loading"
+        });
+      }
+
+      return h("span");
+    };
+
+    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 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: searchText,
+            disabled: disabled,
+            expanded: opened,
+            owns: this.base.listBoxId,
+            activedescendant: ariaActivedescendant,
+            "aria-describedBy": "tagslist-".concat(this.base.guid, " ").concat(this.$props.ariaDescribedBy || ''),
+            "aria-labelledBy": this.$props.ariaLabelledBy
+          },
+          size: Math.max((placeholderToShow || '').length, searchText.length, 1),
+          tabIndex: this.$props.tabIndex,
+          accessKey: this.$props.accessKey,
+          placeholder: placeholderToShow,
+          value: 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 || ''),
+          "aria-labelledBy": this.$props.ariaLabelledBy
+        })
+      );
+    };
+
+    var renderList = function renderList() {
+      var _this2 = this;
+
+      var _a = this.$props.dataItems,
+          dataItems = _a === void 0 ? [] : _a;
+      var itemRender = templateRendering.call(this, this.$props.itemRender, 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)");
+      return (// @ts-ignore  function children
+        h(List, {
+          id: this.base.listBoxId,
+          attrs: this.v3 ? undefined : {
+            id: this.base.listBoxId,
+            show: opened,
+            dataItems: dataItems.slice(),
+            focusedIndex: focusedIndex - skip,
+            value: this.computedValue(),
+            textField: textField,
+            valueField: dataItemKey,
+            optionsGuid: this.base.guid,
+            wrapperStyle: {
+              maxHeight: popupSettings.height
+            },
+            wrapperCssClass: 'k-list-content',
+            listStyle: vs.enabled ? {
+              transform: translate
+            } : undefined,
+            skip: skip,
+            itemRender: itemRender,
+            noDataRender: listNoDataRender
+          },
+          show: opened,
+          dataItems: dataItems.slice(),
+          focusedIndex: focusedIndex - skip,
+          value: this.computedValue(),
+          textField: textField,
+          valueField: dataItemKey,
+          optionsGuid: this.base.guid,
+          ref: 'list',
+          wrapperStyle: {
+            maxHeight: popupSettings.height
+          },
+          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": vs.scrollHandler
+          },
+          itemRender: itemRender,
+          noDataRender: listNoDataRender,
+          onScroll: vs.scrollHandler
+        }, 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 _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 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 currentText = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
+      var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
+      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("span", {
+        "class": "k-icon k-i-plus",
+        style: {
+          float: 'right'
+        }
+      })])]);
+      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: popupWidth,
+            popupSettings: {
+              animate: popupSettings.animate,
+              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: popupSettings.className,
+              appendTo: popupSettings.appendTo
+            },
+            itemsCount: dataItems.length
+          },
+          onBlur: this.handleBlur,
+          width: popupWidth,
+          popupSettings: {
+            animate: popupSettings.animate,
+            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: popupSettings.className,
+            appendTo: popupSettings.appendTo
+          },
+          itemsCount: dataItems.length
+        }, this.v3 ? function () {
+          return [header && h("div", {
+            "class": "k-list-header"
+          }, [header]), customItem, renderList.call(_this3), footer && h("div", {
+            "class": "k-list-footer"
+          }, [footer]), virtual && header];
+        } : [header && h("div", {
+          "class": "k-list-header"
+        }, [header]), customItem, renderList.call(_this3), footer && h("div", {
+          "class": "k-list-footer"
+        }, [footer]), virtual && header])
+      );
+    };
+
+    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)),
+      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
+    }, [tagsToRender.length > 0 && // @ts-ignore  function children
+    h(TagList, {
+      tagsRounded: tagsRounded,
+      attrs: this.v3 ? undefined : {
+        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
+      },
+      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
+    }), renderSearchBar.call(this, id), renderClearButton.call(this, clearButton), renderLoading.call(this, loading), renderListContainer.call(this)]);
+    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", {
+      "for": id,
+      attrs: this.v3 ? undefined : {
+        "for": id
+      },
+      "class": "k-label"
+    }, [this.$props.label]) : h("span", {
+      "class": "k-label"
+    }, [this.$props.label]) : null]) : component;
+  }
+};
+/**
+ * @hidden
+ */
+
+var MultiSelect = MultiSelectVue2;
+export { MultiSelect, MultiSelectVue2 };