@progress/kendo-vue-dropdowns 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/MultiSelect/MultiSelect.mjs

@@ -0,0 +1,872 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as $e, ref as Q, inject as Fe, h as _, createVNode as r, isVNode as Te } from "vue";
+import { guid as X, canUseDOM as Oe, getRef as Z, Keys as f, templateRendering as b, getListeners as I, classNames as R, setRef as Ve, kendoThemeMaps as we, Icon as Re } from "@progress/kendo-vue-common";
+import { ListContainer as De } from "../common/ListContainer.mjs";
+import { List as Be } from "../common/List.mjs";
+import { TagList as Me } from "./TagList.mjs";
+import { SearchBar as Le } from "../common/SearchBar.mjs";
+import Ae from "../common/DropDownBase.mjs";
+import { GroupStickyHeader as ee } from "../common/GroupStickyHeader.mjs";
+import { ClearButton as He } from "../common/ClearButton.mjs";
+import { ActiveDescendant as A } from "../common/settings.mjs";
+import { getItemValue as x, areSame as te, removeDataItems as H, isPresent as Ee, matchDataCollections as Pe, itemIndexStartsWith as Ne, preventDefaultNonInputs as Ke } from "../common/utils.mjs";
+import { xIcon as _e, plusIcon as ze } from "@progress/kendo-svg-icons";
+import { Button as z } from "@progress/kendo-vue-buttons";
+import { MOBILE_SMALL_DEVICE as se, MOBILE_MEDIUM_DEVICE as je } from "../common/constants.mjs";
+import { ActionSheet as We } from "@progress/kendo-vue-layout";
+import { ListFilter as Ge } from "../common/ListFilter.mjs";
+import { provideLocalizationService as qe } from "@progress/kendo-vue-intl";
+import { adaptiveModeFooterCancel as ie, messages as ne, adaptiveModeFooterApply as ae } from "../messages/main.mjs";
+const {
+  sizeMap: j,
+  roundedMap: Ue
+} = we;
+function E(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Te(e);
+}
+const Ye = "Please enter a valid value!", Je = (e) => e.preventDefault(), oe = (e, t, s) => !!e != !!t || e.text !== t.text ? !1 : e === t || Pe(e.data, t.data, s), le = (e) => e === S.CustomItem;
+var S = /* @__PURE__ */ function(e) {
+  return e[e.None = 0] = "None", e[e.ListItem = 1] = "ListItem", e[e.CustomItem = 2] = "CustomItem", e;
+}(S || {});
+const mt = /* @__PURE__ */ $e({
+  name: "KendoMultiSelect",
+  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: !0
+    },
+    removeTagIcon: String,
+    allowCustom: Boolean,
+    modelValue: Array,
+    opened: {
+      type: Boolean,
+      default: void 0
+    },
+    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: !1
+    },
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    validate: {
+      type: Boolean
+    },
+    validationMessage: {
+      type: String,
+      default: void 0
+    },
+    validityStyles: {
+      type: Boolean,
+      default: !0
+    },
+    tagRender: [String, Function, Object],
+    id: String,
+    popupSettings: {
+      type: Object,
+      default: function() {
+        return {
+          animate: !0,
+          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: void 0
+    },
+    header: [String, Function, Object],
+    footer: [String, Function, Object],
+    filterable: Boolean,
+    filter: {
+      type: String,
+      default: void 0
+    },
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    rounded: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return ["small", "medium", "large", "full"].includes(e);
+      }
+    },
+    tagsRounded: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return ["small", "medium", "large", "full"].includes(e);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: "solid",
+      validator: function(e) {
+        return ["solid", "flat", "outline"].includes(e);
+      }
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return ["small", "medium", "large"].includes(e);
+      }
+    },
+    groupField: {
+      type: String
+    },
+    adaptive: {
+      type: Boolean,
+      default: void 0
+    },
+    adaptiveTitle: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup() {
+    const e = Q(null), t = Q(null), s = Fe("kendoLocalizationService", {});
+    return {
+      inputRef: e,
+      kendoAnchorRef: t,
+      kendoLocalizationService: s
+    };
+  },
+  computed: {
+    spanClassNames() {
+      const e = !this.hasMounted || !this.$props.validityStyles || this.validity().valid, t = this.currentText || x(this.computedValue()[0], this.$props.textField);
+      return {
+        "k-floating-label-container": !0,
+        "k-focus": this.currentFocused,
+        "k-empty": !(t && t !== 0),
+        "k-invalid": !e && e !== void 0,
+        "k-rtl": this.$props.dir === "rtl"
+      };
+    },
+    isOpen() {
+      return this.$props.opened !== void 0 ? this.$props.opened : this.currentOpened;
+    },
+    animationStyles() {
+      return this.windowWidth <= se ? {
+        top: 0,
+        width: "100%",
+        height: "100%"
+      } : void 0;
+    },
+    classNameAdaptive() {
+      return this.windowWidth <= se ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom";
+    },
+    adaptiveState() {
+      return this.windowWidth <= je && this.$props.adaptive;
+    }
+  },
+  created() {
+    this.observer = null, this.valuesItemsDuringOnChange = null, this._tags = [], this._skipFocusEvent = !1, this.scrollToFocused = !1, this.base = new Ae(this), this.anchor = X(), this.inputId = X();
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data() {
+    return {
+      hasMounted: !1,
+      currentText: "",
+      currentValue: "",
+      currentFocused: !1,
+      currentOpened: !1,
+      currentFocusedIndex: void 0,
+      currentFocusedTag: void 0,
+      searchState: {
+        word: "",
+        last: ""
+      },
+      suggested: "",
+      activedescendant: A.PopupList,
+      group: void 0,
+      isScrolling: !1,
+      itemHeight: 0,
+      windowWidth: 0,
+      popupWidth: void 0,
+      initialAdaptiveRenderingValues: void 0
+    };
+  },
+  watch: {
+    currentOpened: function(e, t) {
+      this.prevCurrentOpened = t;
+    },
+    opened: function(e, t) {
+      this.prevOpened = t;
+    },
+    virtual: function(e, t) {
+      e && t && e.total !== t.total && (this.virtualTotalHasChanged = !0);
+    },
+    isOpen: function(e) {
+      e ? this.initialAdaptiveRenderingValues = this.base.component.currentValue : this.initialAdaptiveRenderingValues = void 0, setTimeout(() => {
+        const t = document.querySelector(".k-list-item");
+        this.itemHeight = this.base.getListItemHeight(t);
+      }, 100);
+    }
+  },
+  updated() {
+    var g;
+    const {
+      virtual: e,
+      groupField: t = "",
+      dataItems: s = []
+    } = this.$props, i = e ? e.skip : 0, n = this.isOpen, o = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, l = !o && n, d = o && !n, c = Object.assign({}, {
+      animate: !0,
+      height: "200px"
+    }, this.$props.popupSettings), a = this.$refs.list, p = this.$refs.scrollElement;
+    if (a && (this.base.vs.list = a.list, this.base.list = a.list), p && (this.base.vs.scrollElement = p), a && s.length && this.base.vs.scrollerRef(a.$el), !c.animate && d && this.onPopupClosed(), !this.isScrolling)
+      if (e && this.virtualTotalHasChanged)
+        this.base.vs.calcScrollElementHeight(), this.base.vs.reset(), this.virtualTotalHasChanged = !1;
+      else {
+        let {
+          focusedItem: m,
+          focusedIndex: $
+        } = this.getFocusedState();
+        t !== "" && ($ = (g = this.base.getGroupedDataModernMode(s, t)) == null ? void 0 : g.indexOf(m)), l && e ? (this.base.scrollToVirtualItem(e, $ - i), this.prevCurrentOpened = !0) : l && !e ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][t], this), this.base.scrollToItem($), this.prevCurrentOpened = !0) : n && o && m && this.base.scrollToItem($ - i);
+      }
+    this.scrollToFocused = !1, this.searchBarRef(), this.setValidity();
+  },
+  mounted() {
+    this.observer = Oe && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.input = this.inputRef.input, this.base.wrapper = Z(this, "kendoAnchor"), this.element = Z(this, "kendoAnchor"), this.base.didMount(), this.searchBarRef(), this.setValidity();
+  },
+  methods: {
+    clearFilter(e) {
+      this.currentText && (e.data.currentText = ""), this.base.filterChanged("", e);
+    },
+    computedValue() {
+      const e = [];
+      return this.valuesItemsDuringOnChange ? e.push(...this.valuesItemsDuringOnChange) : this.$props.value ? e.push(...this.$props.value) : this.$props.modelValue !== void 0 ? e.push(...this.$props.modelValue) : this.currentValue ? e.push(...this.currentValue) : this.$props.defaultValue && e.push(...this.$props.defaultValue), this.valuePrimitive && this.findByFieldValue(this.valueField, e) || e;
+    },
+    findByFieldValue(e, t) {
+      return t.map((i) => {
+        const n = this.dataItems.findIndex((o) => x(o, e) === i);
+        return this.dataItems[n] || i;
+      });
+    },
+    primitiveValue() {
+      const e = this.computedValue(), t = e.map((s) => x(s, this.valueField));
+      return this.valuePrimitive ? t : e;
+    },
+    validity() {
+      const e = this.$props.validationMessage !== void 0, t = this.computedValue(), s = !this.$props.required || t !== null && t.length > 0 && t !== void 0, i = this.$props.valid !== void 0 ? this.$props.valid : s;
+      return {
+        customError: e,
+        valid: i,
+        valueMissing: t === null
+      };
+    },
+    handleItemSelect(e, t) {
+      const {
+        dataItems: s = [],
+        dataItemKey: i,
+        virtual: n
+      } = this.$props, o = this.computedValue(), l = n ? n.skip : 0, d = s[e - l], c = o.findIndex((g) => te(g, d, i));
+      let a = [];
+      c !== -1 ? (a = o, a.splice(c, 1)) : a = [...o, d], (this.$props.filter !== void 0 ? this.$props.filter : this.currentText) && !this.adaptiveState && this.clearFilter(t), this.currentFocusedIndex !== void 0 && (t.data.currentFocusedIndex = void 0), this.triggerOnChange(a, t), this.base.triggerPageChangeCornerItems(d, t);
+    },
+    onTagDelete(e, t) {
+      const s = this.isOpen, i = this.base.initState();
+      i.event = t, s && this.base.togglePopup(i), this.currentFocused || (i.data.currentFocused = !0);
+      const n = this.computedValue();
+      H(n, e, this.$props.dataItemKey), this.triggerOnChange(n, i), this.applyState(i);
+    },
+    onNavigate(e, t) {
+      const {
+        allowCustom: s,
+        dataItems: i = []
+      } = this.$props, n = this.isOpen, o = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
+        focusedType: l,
+        focusedIndex: d
+      } = this.getFocusedState(), c = s && o, a = le(l), p = this.base, g = p.vs;
+      if (n && t === f.up && a)
+        this.currentFocusedIndex !== void 0 && (e.data.currentFocusedIndex = void 0);
+      else {
+        const m = p.navigation.navigate({
+          keyCode: t,
+          current: d,
+          max: (g.enabled ? g.total : i.length) - 1,
+          min: c ? -1 : 0
+        });
+        m !== void 0 && (this.itemFocus(m, e), this.scrollToFocused = !0);
+      }
+      this.applyState(e);
+    },
+    itemFocus(e, t) {
+      const {
+        dataItems: s = [],
+        allowCustom: i,
+        virtual: n
+      } = this.$props, o = n ? n.skip : 0, l = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
+        focusedIndex: d
+      } = this.getFocusedState(), c = i && l, a = s[e - o];
+      a && d !== e ? this.currentFocusedIndex !== e && (t.data.currentFocusedIndex = e, t.data.activedescendant = A.PopupList) : c && e === -1 && this.currentFocusedIndex !== void 0 && (t.data.currentFocusedIndex = void 0), this.base.triggerPageChangeCornerItems(a, t);
+    },
+    searchBarRef() {
+      this.input && this.currentFocused && setTimeout(() => this.input.focus(), 0);
+    },
+    onChangeHandler(e) {
+      const t = this.base.initState(), s = e && (e.currentTarget && e.currentTarget.value || e.value), i = this.isOpen;
+      t.event = e, this.$props.filter === void 0 && (t.data.currentText = s), t.data.currentFocusedIndex = void 0, i || this.base.togglePopup(t), this.base.filterChanged(s, t), this.$props.filterable && (t.data.group = void 0), this.applyState(t);
+    },
+    clearButtonClick(e) {
+      const t = this.isOpen, s = this.base.initState();
+      s.event = e, e.stopPropagation(), this.computedValue().length > 0 && this.triggerOnChange([], s), this.currentFocusedIndex !== void 0 && (s.data.currentFocusedIndex = void 0), t && this.base.togglePopup(s);
+      const i = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
+      Ee(i) && i !== "" && this.base.filterChanged("", s), this.currentText && (s.data.currentText = ""), this.applyState(s);
+    },
+    onInputKeyDown(e) {
+      this.isScrolling && (this.isScrolling = !1);
+      const t = e.keyCode, s = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, i = this.isOpen, {
+        focusedItem: n
+      } = this.getFocusedState(), o = this.base.initState();
+      if (o.event = e, !s && this.computedValue().length > 0 && (t === f.left || t === f.right || t === f.home || t === f.end || t === f.delete || t === f.backspace))
+        return this.onTagsNavigate(e, o);
+      const l = () => {
+        e.preventDefault(), this.base.togglePopup(o), this.applyState(o);
+      };
+      i ? e.altKey && t === f.up ? l() : t === f.up || t === f.down ? (e.preventDefault(), this.onNavigate(o, t)) : t === f.enter ? (e.preventDefault(), this.$props.allowCustom && s && n === null ? this.customItemSelect(e) : this.selectFocusedItem(e)) : t === f.esc && (this.adaptiveState && this.handleWrapperClick(e), l()) : e.altKey && t === f.down && l();
+    },
+    onTagsNavigate(e, t) {
+      const s = e.keyCode, i = this.currentFocusedTag, n = this._tags, o = this.$props.dataItemKey;
+      let l = i ? n.findIndex((a) => oe(a, i, o)) : -1, d;
+      const c = l !== -1;
+      if (s === f.left)
+        c ? l = Math.max(0, l - 1) : l = n.length - 1, d = n[l];
+      else if (s === f.right)
+        l === n.length - 1 ? d = void 0 : c && (l = Math.min(n.length - 1, l + 1), d = n[l]);
+      else if (s === f.home)
+        d = n[0];
+      else if (s === f.end)
+        d = n[n.length - 1];
+      else if (s === f.delete) {
+        if (c) {
+          const a = this.computedValue();
+          H(a, n[l].data, o), this.triggerOnChange(a, t);
+        }
+      } else if (s === f.backspace) {
+        const a = this.computedValue();
+        if (c)
+          H(a, n[l].data, o), this.triggerOnChange(a, t);
+        else if (!c && n.length) {
+          const p = n.pop();
+          H(a, p.data, o), this.triggerOnChange(a, t);
+        }
+      }
+      d !== i && (t.data.currentFocusedTag = d, t.data.activedescendant = A.TagsList), this.applyState(t);
+    },
+    triggerOnChange(e, t) {
+      this.$props.value === void 0 && (t.data.currentValue = [...e]), this.valuesItemsDuringOnChange = [], this.setItems(e, this.valuesItemsDuringOnChange), t.events.push({
+        type: "change"
+      });
+    },
+    selectFocusedItem(e) {
+      const {
+        dataItems: t = [],
+        virtual: s
+      } = this.$props, {
+        focusedIndex: i
+      } = this.getFocusedState(), n = s ? s.skip : 0;
+      t[i - n] !== void 0 && this.handleItemClick(i, e);
+    },
+    setItems(e, t) {
+      t.length = 0, t.push(...e);
+    },
+    getFocusedState() {
+      const e = this.currentFocusedIndex, t = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
+        allowCustom: s,
+        dataItems: i = [],
+        dataItemKey: n,
+        virtual: o,
+        textField: l,
+        focusedItemIndex: d = Ne
+      } = this.$props, c = o && o.skip || 0;
+      let a;
+      if (e !== void 0)
+        return {
+          focusedIndex: e,
+          focusedItem: i[e - c],
+          focusedType: S.ListItem
+        };
+      const p = this.computedValue();
+      if (s && t)
+        return {
+          focusedItem: null,
+          focusedIndex: -1,
+          focusedType: S.CustomItem
+        };
+      if (t)
+        return a = d(i, t, l), {
+          focusedItem: i[a],
+          focusedIndex: a + c,
+          focusedType: S.ListItem
+        };
+      if (p.length) {
+        const g = p[p.length - 1];
+        return a = i.findIndex((m) => te(m, g, n)), i[a] !== void 0 ? {
+          focusedIndex: a + c,
+          focusedItem: i[a],
+          focusedType: S.ListItem
+        } : {
+          focusedType: S.None,
+          focusedIndex: -1
+        };
+      }
+      return c === 0 ? {
+        focusedItem: i[0],
+        focusedIndex: 0,
+        focusedType: S.ListItem
+      } : {
+        focusedType: S.None,
+        focusedIndex: -1
+      };
+    },
+    customItemSelect(e) {
+      const t = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
+        textField: s
+      } = this.$props;
+      if (!t)
+        return;
+      const i = this.base.initState();
+      i.event = e;
+      const n = s ? {
+        [s]: t
+      } : t;
+      this.currentText !== void 0 && (i.data.currentText = ""), i.data.currentFocusedIndex = void 0, this.base.filterChanged("", i);
+      const o = [...this.computedValue(), n];
+      this.triggerOnChange(o, i), this.base.togglePopup(i), this.applyState(i);
+    },
+    handleWrapperClick(e) {
+      const t = this.isOpen, s = this.input;
+      !t && s && this.focusElement(s);
+      const i = this.base.initState();
+      i.event = e, this.currentFocused || (i.events.push({
+        type: "focus"
+      }), i.data.currentFocused = !0), this.clearFilter(i), this.base.togglePopup(i), this.applyState(i);
+    },
+    onCancel(e) {
+      const t = this.base.initState();
+      t.event = e, e.stopPropagation();
+      const s = this.isOpen;
+      t.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), s && this.base.togglePopup(t), t.events.push({
+        type: "onCancel"
+      }), this.clearFilter(t), this.triggerOnChange([...this.initialAdaptiveRenderingValues], t), this.base.triggerPageChangeCornerItems([...this.initialAdaptiveRenderingValues], t), this.applyState(t);
+    },
+    handleItemClick(e, t) {
+      const s = this.base.initState();
+      s.event = t, this.handleItemSelect(e, s), this.$props.autoClose && !this.adaptiveState && this.base.togglePopup(s), this.applyState(s);
+    },
+    handleBlur(e) {
+      if (!this.currentFocused || this._skipFocusEvent)
+        return;
+      const t = this.isOpen, s = this.base.initState(), {
+        allowCustom: i,
+        filterable: n
+      } = this.$props;
+      s.event = e, s.data.currentFocused = !1, s.events.push({
+        type: "blur"
+      }), t && !this.adaptiveState && (this.currentOpened && (s.data.currentOpened = !1), s.events.push({
+        type: "close"
+      })), !i && !n && this.currentText && (s.data.currentText = ""), this.applyState(s);
+    },
+    handleFocus(e) {
+      this._skipFocusEvent || this.base.handleFocus(e);
+    },
+    onPopupOpened() {
+      this.input && this.currentFocused && this.focusElement(this.input);
+    },
+    onPopupClosed() {
+      this.currentFocused && setTimeout(() => {
+        this.currentFocused && this.focusElement(this.input);
+      }, 0);
+    },
+    focusElement(e) {
+      this._skipFocusEvent = !0, e.focus(), setTimeout(() => this._skipFocusEvent = !1, 30);
+    },
+    applyState(e) {
+      this.base.applyState(e), this.valuesItemsDuringOnChange = null;
+    },
+    setValidity() {
+      this.input && this.input.setCustomValidity && this.input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || Ye);
+    },
+    focus() {
+      this.input && this.input.focus();
+    },
+    calculateMedia(e) {
+      for (let t of e)
+        this.windowWidth = t.target.clientWidth;
+    },
+    repositionPopup() {
+      this.base.repositionPopup();
+    },
+    onScroll(e) {
+      this.isScrolling = !0;
+      const {
+        vs: t,
+        list: s
+      } = this.base;
+      t.scrollHandler(e);
+      const i = this.base.initState(), {
+        groupField: n
+      } = this.$props;
+      let {
+        dataItems: o = []
+      } = this.$props, l;
+      if (!n || !o.length)
+        return;
+      const d = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : s ? s.children[0].offsetHeight : 0), a = e.target.scrollTop - t.skip * d;
+      n && (o = this.base.getGroupedDataModernMode(o, n), o = this.base.getGroupedDataModernMode(o, n), l = o[0][n]);
+      for (let p = 1; p < o.length && !(d * p > a); p++)
+        o[p] && o[p][n] && (l = o[p][n]);
+      l !== this.group && (i.data.group = l, this.applyState(i));
+    }
+  },
+  render() {
+    const {
+      style: e,
+      label: t,
+      dir: s,
+      disabled: i,
+      tags: n,
+      textField: o,
+      dataItemKey: l,
+      virtual: d,
+      loading: c,
+      size: a,
+      fillMode: p,
+      rounded: g,
+      tagsRounded: m,
+      removeTagIcon: $,
+      adaptiveTitle: re,
+      header: P,
+      footer: W,
+      groupStickyHeaderItemRender: de,
+      dataItems: F = []
+    } = this.$props, ue = this.currentFocused, D = Object.assign({}, {
+      animate: !0,
+      height: "200px"
+    }, this.$props.popupSettings), B = this.currentFocusedTag, G = this.computedValue(), M = (this.$props.filter !== void 0 ? this.$props.filter : this.currentText) || "", ce = !c && (!!M || G.length > 0), y = this.base.vs, N = this.$props.id || this.inputId, pe = b.call(this, this.$props.tagRender, I.call(this)), L = this.isOpen, T = this.adaptiveState, q = qe(this);
+    this.group === void 0 && this.$props.groupField !== void 0 && (this.group = x(this.$props.dataItems[0], this.$props.groupField)), y.enabled = d !== void 0, d !== void 0 && (y.skip = d.skip, y.total = d.total, y.pageSize = d.pageSize);
+    let v = [];
+    this.initialAdaptiveRenderingValues ? [...this.initialAdaptiveRenderingValues].forEach((h) => {
+      v.push({
+        text: x(h, o),
+        data: [h]
+      });
+    }) : n === void 0 ? this.computedValue().forEach((u) => {
+      v.push({
+        text: x(u, o),
+        data: [u]
+      });
+    }) : v.push(...n), v.length > 0 && this.setItems(v, this._tags);
+    const he = !this.$props.validityStyles || this.validity().valid, fe = function(u) {
+      const h = this.activedescendant, {
+        placeholder: k
+      } = this.$props, {
+        focusedIndex: O
+      } = this.getFocusedState(), C = v.length === 0 || G.length === 0 && !M ? k : void 0, V = h === A.TagsList && B !== void 0 ? `tag-${this.base.guid}-${B.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${O}`;
+      return r(Le, {
+        id: u,
+        size: Math.max((C || "").length, M.length, 1),
+        tabIndex: this.$props.tabIndex,
+        accessKey: this.$props.accessKey,
+        placeholder: C,
+        value: T ? "" : M,
+        onChange: this.onChangeHandler,
+        onBlur: this.handleBlur,
+        onKeydown: this.onInputKeyDown,
+        ref: (w) => {
+          this.inputRef = w;
+        },
+        disabled: i,
+        expanded: L,
+        owns: this.base.listBoxId,
+        activedescendant: V,
+        "aria-describedBy": `tagslist-${this.base.guid}${this.$props.ariaDescribedBy ? " " + this.$props.ariaDescribedBy : ""}`,
+        "aria-labelledBy": this.$props.ariaLabelledBy,
+        "aria-label": this.$props.ariaLabel
+      }, null);
+    }, U = function() {
+      let u;
+      const {
+        groupField: h
+      } = this.$props, k = b.call(this, this.$props.itemRender, I.call(this)), O = b.call(this, this.$props.groupHeaderItemRender, I.call(this)), C = b.call(this, this.$props.listNoDataRender, I.call(this)), V = d ? d.skip : 0, {
+        focusedIndex: w
+      } = this.getFocusedState(), K = `translateY(${y.translate}px)`;
+      let J = F;
+      return h && (J = this.base.getGroupedDataModernMode(F, h)), r(Be, {
+        id: this.base.listBoxId,
+        show: L,
+        dataItems: J.slice(),
+        focusedIndex: w,
+        value: this.computedValue(),
+        textField: o,
+        valueField: l,
+        optionsGuid: this.base.guid,
+        ref: "list",
+        wrapperStyle: {
+          maxHeight: T ? void 0 : D.height
+        },
+        wrapperCssClass: "k-list-content",
+        listStyle: y.enabled ? {
+          transform: K
+        } : void 0,
+        key: "listKey",
+        skip: V,
+        onListclick: this.handleItemClick,
+        itemRender: k,
+        groupHeaderItemRender: O,
+        noDataRender: C,
+        groupField: h,
+        onScroll: this.onScroll
+      }, E(u = ge.call(this)) ? u : {
+        default: () => [u]
+      });
+    }, ge = function() {
+      return y.enabled && r("div", {
+        ref: "scrollElement",
+        key: "scrollElementKey"
+      }, null);
+    }, me = function() {
+      const u = this.base, {
+        allowCustom: h
+      } = this.$props, k = b.call(this, this.$props.groupStickyHeaderItemRender, I.call(this)), O = u.getTemplateDef.call(this, P), C = u.getTemplateDef.call(this, W), V = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
+        focusedType: w
+      } = this.getFocusedState(), K = h && V && r("div", {
+        class: "k-list",
+        key: "customitem",
+        onClick: this.customItemSelect
+      }, [r("div", {
+        class: R("k-item k-custom-item", {
+          "k-focus": le(w)
+        })
+      }, [V, r(Re, {
+        name: "plus",
+        icon: ze,
+        style: {
+          float: "right"
+        }
+      }, null)])]);
+      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = x(F[0], this.$props.groupField)), r(De, {
+        ref: "container",
+        onMousedown: Je,
+        dir: s !== void 0 ? s : u.dirCalculated,
+        onBlur: this.handleBlur,
+        width: this.popupWidth,
+        popupSettings: {
+          ...D,
+          anchor: this.anchor,
+          show: L,
+          onOpen: this.onPopupOpened,
+          onClose: this.onPopupClosed,
+          popupClass: R(D.popupClass, "k-list", {
+            [`k-list-${j[a] || a}`]: a,
+            "k-virtual-list": this.base.vs.enabled
+          }),
+          className: R("k-list-container", D.className)
+        },
+        itemsCount: F.length
+      }, {
+        default: () => [O && r("div", {
+          class: "k-list-header"
+        }, [O]), K, this.group && F.length !== 0 && r(ee, {
+          group: this.group,
+          render: k
+        }, null), U.call(this), C && r("div", {
+          class: "k-list-footer"
+        }, [C]), d && P]
+      });
+    }, ve = function() {
+      const u = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
+      return this.$props.filterable && r(Ge, {
+        value: u,
+        ref: "filterInput",
+        onChange: this.onChangeHandler,
+        onKeydown: this.onInputKeyDown,
+        size: a,
+        rounded: g,
+        fillMode: p
+      }, null);
+    }, be = () => [r("div", {
+      class: "k-actionsheet-titlebar-group k-hbox"
+    }, [r("div", {
+      class: "k-actionsheet-title"
+    }, [r("div", {
+      class: "k-text-center"
+    }, [re]), r("div", {
+      class: "k-actionsheet-subtitle k-text-center"
+    }, null)]), r("div", {
+      class: "k-actionsheet-actions"
+    }, [r(z, {
+      tabIndex: 5,
+      "aria-label": "Cancel",
+      "aria-disabled": "false",
+      type: "button",
+      fillMode: "flat",
+      onClick: this.onCancel,
+      icon: "x",
+      svgIcon: _e
+    }, null)])]), r("div", {
+      class: "k-actionsheet-titlebar-group k-actionsheet-filter"
+    }, [ve.call(this)])], Ie = b.call(this, be, I.call(this)), Se = () => {
+      const u = q.toLanguageString(ie, ne[ie]), h = q.toLanguageString(ae, ne[ae]);
+      return [r(z, {
+        size: "large",
+        "aria-label": u,
+        "aria-disabled": "false",
+        type: "button",
+        onClick: this.onCancel
+      }, E(u) ? u : {
+        default: () => [u]
+      }), r(z, {
+        themeColor: "primary",
+        size: "large",
+        "aria-label": h,
+        "aria-disabled": "false",
+        type: "button",
+        onClick: this.handleWrapperClick
+      }, E(h) ? h : {
+        default: () => [h]
+      })];
+    }, ye = b.call(this, Se, I.call(this)), ke = () => {
+      const u = this.base.getTemplateDef.call(this, P, _), h = this.base.getTemplateDef.call(this, W, _), k = b.call(this, de, I.call(this));
+      return r("div", {
+        class: "k-list-container"
+      }, [u && r("div", {
+        class: "k-list-header"
+      }, [u]), r("div", {
+        class: R("k-list", {
+          [`k-list-${j[a] || a}`]: T ? !1 : a,
+          "k-list-lg": !!T,
+          "k-virtual-list": y.enabled
+        })
+      }, [this.group && F.length !== 0 && r(ee, {
+        group: this.group,
+        render: k
+      }, null), U.call(this), h && r("div", {
+        class: "k-list-footer"
+      }, [h])])]);
+    }, Ce = b.call(this, ke, I.call(this)), xe = function() {
+      return r(We, {
+        expand: L,
+        animation: !0,
+        animationStyles: this.animationStyles,
+        className: this.classNameAdaptive,
+        contentClassName: "!k-overflow-hidden",
+        footerClassName: "k-actions k-actions-stretched",
+        header: Ie,
+        content: Ce,
+        footer: ye,
+        onClose: this.onCancel,
+        navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
+      }, null);
+    }, Y = [_(function() {
+      let u;
+      return r("span", {
+        ref: Ve(this, "kendoAnchor"),
+        class: R("k-multiselect", "k-input", {
+          [`k-input-${j[a] || a}`]: a,
+          [`k-rounded-${Ue[g] || g}`]: g,
+          [`k-input-${p}`]: p,
+          "k-focus": ue && !i,
+          "k-disabled": i,
+          "k-invalid": !he,
+          "k-loading": c,
+          "k-required": this.required
+        }),
+        style: t ? {
+          ...e,
+          width: void 0
+        } : e,
+        dir: s,
+        onFocusin: this.handleFocus,
+        onClick: this.handleWrapperClick,
+        onMousedown: Ke
+      }, [r(Me, {
+        removeTagIcon: $,
+        tagsRounded: m,
+        size: a,
+        fillMode: p,
+        tagRender: pe,
+        onTagdelete: this.onTagDelete,
+        dataItems: v,
+        guid: this.base.guid,
+        focused: B ? v.find((h) => oe(h, B, l)) : void 0
+      }, E(u = fe.call(this, N)) ? u : {
+        default: () => [u]
+      }), v.length > 0 && ce && r(He, {
+        onClearclick: this.clearButtonClick
+      }, null), r("span", {
+        class: c ? "k-input-loading-icon k-icon k-i-loading" : void 0
+      }, null), !T && me.call(this)]);
+    }.call(this), {
+      ...this.$attrs
+    }), T && xe.call(this)];
+    return t ? r("span", {
+      class: this.spanClassNames,
+      dir: this.$props.dir
+    }, [Y, this.$props.label ? N ? r("label", {
+      for: N,
+      class: "k-floating-label"
+    }, [this.$props.label]) : r("span", {
+      class: "k-label"
+    }, [this.$props.label]) : null]) : Y;
+  }
+});
+export {
+  mt as MultiSelect
+};