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

package/ComboBox/ComboBox.mjs

@@ -0,0 +1,776 @@
+/**
+ * @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 Ie, ref as z, inject as ke, h as _, createVNode as o, isVNode as xe } from "vue";
+import Ce from "../common/DropDownBase.mjs";
+import { GroupStickyHeader as J } from "../common/GroupStickyHeader.mjs";
+import { guid as Q, canUseDOM as $e, getRef as X, Keys as $, templateRendering as O, getListeners as V, classNames as L, setRef as Oe, Icon as Ve, kendoThemeMaps as Fe } from "@progress/kendo-vue-common";
+import { Button as Z } from "@progress/kendo-vue-buttons";
+import { areSame as I, getItemValue as k, isPresent as b, getItemIndexByText as ee, suggestValue as Te, itemIndexStartsWith as te } from "../common/utils.mjs";
+import { SearchBar as Be } from "../common/SearchBar.mjs";
+import { ListContainer as De } from "../common/ListContainer.mjs";
+import { List as we } from "../common/List.mjs";
+import { ClearButton as Me } from "../common/ClearButton.mjs";
+import { provideLocalizationService as Re } from "@progress/kendo-vue-intl";
+import { expandButton as ie, messages as He } from "../messages/main.mjs";
+import { xIcon as Le, caretAltDownIcon as Ee } from "@progress/kendo-svg-icons";
+import { MOBILE_SMALL_DEVICE as se, MOBILE_MEDIUM_DEVICE as Ne } from "../common/constants.mjs";
+import { ActionSheet as je } from "@progress/kendo-vue-layout";
+import { ListFilter as Ke } from "../common/ListFilter.mjs";
+const {
+  sizeMap: G,
+  roundedMap: Ae
+} = Fe;
+function Pe(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !xe(e);
+}
+const ze = "Please enter a valid value!", ot = /* @__PURE__ */ Ie({
+  name: "KendoComboBox",
+  model: {
+    event: "changemodel"
+  },
+  emits: {
+    changemodel: null,
+    "update:modelValue": null,
+    filterchange: null,
+    pagechange: null,
+    change: null,
+    focus: null,
+    blur: null,
+    open: null,
+    close: null,
+    scroll: null
+  },
+  props: {
+    id: String,
+    dataItemKey: {
+      type: [Object, String]
+    },
+    defaultValue: {
+      type: [String, Object, Number, Boolean],
+      default: void 0
+    },
+    name: String,
+    modelValue: {
+      type: [String, Object, Number, Boolean],
+      default: void 0
+    },
+    value: {
+      type: [String, Object, Number, Boolean],
+      default: void 0
+    },
+    label: {
+      type: String
+    },
+    placeholder: String,
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    validationMessage: {
+      type: String,
+      default: void 0
+    },
+    validityStyles: {
+      type: Boolean,
+      default: !0
+    },
+    iconClassName: String,
+    opened: {
+      type: Boolean,
+      default: void 0
+    },
+    disabled: Boolean,
+    dir: {
+      type: String,
+      default: void 0
+    },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    accessKey: String,
+    dataItems: Array,
+    textField: String,
+    className: String,
+    loading: Boolean,
+    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,
+    header: [String, Function, Object],
+    footer: [String, Function, Object],
+    filterable: Boolean,
+    filter: {
+      type: String,
+      default: void 0
+    },
+    virtual: {
+      type: Object,
+      default: void 0
+    },
+    suggest: {
+      type: Boolean,
+      default: !1
+    },
+    allowCustom: {
+      type: Boolean,
+      default: !1
+    },
+    clearButton: {
+      type: Boolean,
+      default: !0
+    },
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    valueField: String,
+    valuePrimitive: Boolean,
+    rounded: {
+      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
+    },
+    onFilterchange: Function
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data() {
+    return {
+      hasMounted: !1,
+      currentText: "",
+      currentValue: "",
+      currentFocused: !1,
+      currentOpened: !1,
+      searchState: {
+        word: "",
+        last: ""
+      },
+      _skipFocusEvent: !1,
+      valueDuringOnChange: {},
+      _navigated: !1,
+      suggested: "",
+      group: void 0,
+      isScrolling: !1,
+      itemHeight: 0,
+      state: void 0,
+      popupWidth: void 0,
+      windowWidth: 0
+    };
+  },
+  created() {
+    this.observer = null, this.valueDuringOnChange = void 0, this.currentText = void 0, this.currentValue = void 0, this.currentFocused = void 0, this.currentOpened = void 0, this.prevCurrentValue = this.computedValue(), this.base = new Ce(this), this.anchor = Q(), this.inputId = Q();
+  },
+  setup() {
+    const e = z(null), t = z(null), s = z(null), i = ke("kendoLocalizationService", {});
+    return {
+      inputRef: e,
+      elementRef: t,
+      kendoAnchorRef: s,
+      kendoLocalizationService: i
+    };
+  },
+  mounted() {
+    this.observer = $e && 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 = X(this, "kendoAnchor"), this.element = X(this, "kendoAnchor"), this.base.didMount(), this.setValidity();
+  },
+  updated() {
+    var g;
+    const {
+      dataItems: e = [],
+      dataItemKey: t,
+      virtual: s,
+      groupField: i,
+      textField: n
+    } = this.$props, l = this.isOpen, a = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, r = !a && l, d = this.$refs.list, u = this.$refs.scrollElement, h = this.computedValue();
+    if (this.valueOnDidUpdate = h, d && (this.base.vs.list = d.list, this.base.list = d.list), u && (this.base.vs.scrollElement = u), d && e.length && this.base.vs.scrollerRef(d.$el), s && this.virtualTotalHasChanged)
+      this.base.vs.calcScrollElementHeight(), this.base.vs.reset(), this.virtualTotalHasChanged = !1;
+    else {
+      const m = this.prevCurrentValue;
+      let S = e.findIndex((F) => I(F, h, t));
+      i && (S = (g = this.base.getGroupedDataModernMode(e, i)) == null ? void 0 : g.indexOf(h));
+      const D = !I(m, h, t);
+      if (r && s)
+        this.base.scrollToVirtualItem(s, S), this.prevCurrentOpened = !0;
+      else if (r && !s)
+        e && e.length !== 0 && this.base.resetGroupStickyHeader(e[0][i], this), this.base.scrollToItem(S), this.prevCurrentOpened = !0;
+      else if (l && a && h && D)
+        this.base.scrollToItem(S);
+      else if (l && !h && !this.isScrolling) {
+        let F = 0;
+        if (i && this.getFocusedIndex() !== -1 && e.length > 0) {
+          const T = e[this.getFocusedIndex()][n], w = this.base.getGroupedDataModernMode(e, i), K = w.findIndex((x) => x[n] === T);
+          F = w.slice(0, K).filter((x) => Object.keys(x).length === 1).length;
+        }
+        this.base.scrollToItem(this.getFocusedIndex() + F);
+      }
+    }
+    r && this.input && this.input.focus(), this.prevCurrentValue = this.computedValue(), this.setValidity();
+  },
+  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), this.virtualHasChanged = !0;
+    },
+    isOpen: function() {
+      setTimeout(() => {
+        const e = document.querySelector(".k-list-item");
+        this.itemHeight = this.base.getListItemHeight(e);
+      }, 100);
+    }
+  },
+  computed: {
+    index() {
+      const {
+        dataItems: e = [],
+        dataItemKey: t
+      } = this.$props, s = this.computedValue();
+      return e.findIndex((i) => I(i, s, t));
+    },
+    spanClassNames() {
+      const e = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
+      return {
+        "k-floating-label-container": !0,
+        "k-focus": this.currentFocused,
+        "k-empty": !this.computedValue(),
+        "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 <= Ne && this.$props.adaptive;
+    }
+  },
+  methods: {
+    focus() {
+      this.input && this.input.focus();
+    },
+    computedValue() {
+      let e;
+      return this.valueDuringOnChange !== void 0 ? e = this.valueDuringOnChange : this.$props.value !== void 0 ? e = this.$props.value : this.$props.modelValue !== void 0 ? e = this.$props.modelValue : this.currentValue !== void 0 ? e = this.currentValue : this.$props.defaultValue !== void 0 && (e = this.$props.defaultValue), this.valuePrimitive && this.findByFieldValue(this.valueField, e) || e;
+    },
+    findByFieldValue(e, t) {
+      const s = this.dataItems.findIndex((i) => k(i, e) === t);
+      return this.dataItems[s];
+    },
+    primitiveValue() {
+      const e = this.computedValue();
+      return this.valuePrimitive ? k(e, this.valueField) : e;
+    },
+    validity() {
+      const e = this.$props.validationMessage !== void 0, t = !this.$props.required || this.computedValue() !== null && this.computedValue() !== "" && this.computedValue() !== void 0, s = this.$props.valid !== void 0 ? this.$props.valid : t;
+      return {
+        customError: e,
+        valid: s,
+        valueMissing: this.computedValue() === null
+      };
+    },
+    handleItemSelect(e, t) {
+      const {
+        dataItems: s = [],
+        virtual: i,
+        dataItemKey: n
+      } = this.$props, l = i ? i.skip : 0, a = s[e - l], r = !I(a, this.computedValue(), n);
+      this.triggerOnChange(a, t), this.currentText !== void 0 && (t.data.currentText = void 0), r && this.base.triggerPageChangeCornerItems(a, t);
+    },
+    onNavigate(e, t) {
+      const {
+        dataItems: s = [],
+        virtual: i = {
+          skip: 0
+        }
+      } = this.$props, n = this.$props.filter ? this.$props.filter : this.currentText, l = this.getFocusedIndex(), a = this.base.vs, r = this.computedValue();
+      if (this.suggested = "", l !== -1 && !b(r))
+        this.handleItemSelect(l, e);
+      else if (n === "")
+        this.handleItemSelect(0, e);
+      else {
+        let d = i.skip + l;
+        const u = this.base.navigation.navigate({
+          keyCode: t,
+          current: d,
+          max: (a.enabled ? a.total : s.length) - 1,
+          min: 0
+        });
+        u !== void 0 && this.handleItemSelect(u, e);
+      }
+    },
+    toggleBtnClick(e) {
+      const t = this.base.initState(), s = this.isOpen, i = this.adaptiveState;
+      t.event = e, this.base.togglePopup(t), !s && i && this.base.filterChanged("", t), this.applyState(t);
+    },
+    applyValueOnEnter(e, t) {
+      const {
+        dataItems: s = [],
+        textField: i,
+        allowCustom: n
+      } = this.$props, l = this.isOpen, r = k(this.computedValue(), i) === e ? this.index : ee(s, e, i), d = r !== -1;
+      let u;
+      if (this.suggested = "", d)
+        u = s[r];
+      else if (n)
+        u = i !== void 0 ? {
+          [i]: e
+        } : e;
+      else
+        return this.selectFocusedItem(e, t);
+      this.triggerOnChange(u, t), l && this.base.togglePopup(t), this.$props.filter === void 0 && this.currentText !== void 0 && (t.data.currentText = void 0), this.applyState(t);
+    },
+    applyValueOnRejectSuggestions(e, t) {
+      const {
+        dataItems: s = [],
+        textField: i,
+        allowCustom: n
+      } = this.$props, l = this.isOpen, a = k(this.computedValue(), i);
+      if (this.suggested = "", e === a || e === "" && !b(a))
+        return l && !this.adaptiveState && this.base.togglePopup(t), this.applyState(t);
+      const r = ee(s, e, i, !0), d = r !== -1;
+      let u = null;
+      d ? u = s[r] : n && (u = e ? i ? {
+        [i]: e
+      } : e : null), this.triggerOnChange(u, t), this.currentText !== void 0 && (t.data.currentText = void 0, this.base.filterChanged("", t)), l && !this.adaptiveState && this.base.togglePopup(t), this.applyState(t);
+    },
+    selectFocusedItem(e, t) {
+      const s = this.isOpen, {
+        dataItems: i = [],
+        textField: n,
+        virtual: l = {
+          skip: 0
+        },
+        focusedItemIndex: a = te
+      } = this.$props, r = l.skip, d = e === "" && r === 0 ? 0 : a(i, e, n);
+      return d !== -1 ? this.handleItemSelect(d + r, t) : (this.triggerOnChange(null, t), this.currentText !== void 0 && (t.data.currentText = void 0)), s && this.base.togglePopup(t), this.applyState(t);
+    },
+    handleItemClick(e, t) {
+      this.base.handleItemClick(e, t), this.valueDuringOnChange = void 0;
+    },
+    handleFocus(e) {
+      this.$emit("focus", e);
+    },
+    handleBlur(e) {
+      if (this.currentFocused) {
+        const t = this.base.initState();
+        t.data.currentFocused = !1, t.events.push({
+          type: "blur"
+        }), t.event = e, this.applyValueOnRejectSuggestions(e.currentTarget.value, t);
+      }
+    },
+    onInputKeyDown(e) {
+      this.isScrolling && (this.isScrolling = !1);
+      const t = e.keyCode, s = this.isOpen, i = this.base.initState();
+      if (i.event = e, !e.altKey && (t === $.up || t === $.down)) {
+        e.preventDefault(), this.onNavigate(i, t), this.applyState(i);
+        return;
+      }
+      const n = () => {
+        e.preventDefault(), this.base.togglePopup(i), this.applyState(i);
+      };
+      s ? e.altKey && t === $.up ? n() : t === $.enter ? (e.preventDefault(), this.applyValueOnEnter(e.currentTarget.value, i)) : t === $.esc && (this.adaptiveState && this.toggleBtnClick(e), n()) : e.altKey && t === $.down ? n() : t === $.esc && this.applyValueOnRejectSuggestions(e.currentTarget.value, i);
+    },
+    inputOnChange(e) {
+      const t = this.base.initState();
+      t.event = e;
+      const s = this.isOpen, i = e.currentTarget, n = i.value;
+      if (this.$props.suggest) {
+        const l = i.selectionEnd === n.length;
+        let a = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
+        b(a) || (a = k(this.computedValue(), this.$props.textField) || "");
+        const r = a && a === n, d = a && a.length > n.length;
+        r || d || !l ? this.suggested = "" : this.suggestValue(n);
+      }
+      this.$props.filter === void 0 && (t.data.currentText = n), this.currentFocusedItem !== void 0 && (t.data.focusedItem = void 0), s || this.base.togglePopup(t), this.base.filterChanged(n, t), this.$props.filterable && (t.data.group = void 0), this.applyState(t);
+    },
+    clearButtonClick(e) {
+      const t = this.base.initState();
+      t.event = e, e.stopPropagation(), this.suggested = "", this.base.filterChanged("", t), this.$props.filter === void 0 && this.currentText !== void 0 && (t.data.currentText = void 0), this.triggerOnChange(null, t), this.isOpen && this.base.togglePopup(t), this.applyState(t);
+    },
+    getFocusedIndex() {
+      const e = this.computedValue(), {
+        dataItems: t = [],
+        textField: s,
+        dataItemKey: i,
+        virtual: n = {
+          skip: 0
+        },
+        focusedItemIndex: l = te
+      } = this.$props, a = this.$props.filter ? this.$props.filter : this.currentText;
+      return b(e) && a === void 0 ? t.findIndex((r) => I(r, e, i)) : a ? l(t, a, s) : n.skip === 0 ? 0 : -1;
+    },
+    suggestValue(e) {
+      const {
+        dataItems: t,
+        textField: s
+      } = this.$props;
+      this.suggested = Te(e, t, s);
+    },
+    setValidity() {
+      this.input && this.input.setCustomValidity && this.input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || ze);
+    },
+    triggerOnChange(e, t) {
+      const s = this.computedValue();
+      !b(s) && !b(e) || I(s, e, this.$props.dataItemKey) || (this.$props.value === void 0 && (this.currentValue = e), this.valueDuringOnChange = e, t.events.push({
+        type: "change"
+      }));
+    },
+    applyState(e) {
+      this.base.applyState(e), this.valueDuringOnChange = void 0;
+    },
+    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: l = []
+      } = this.$props, a;
+      if (!n || !l.length)
+        return;
+      const r = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : s ? s.children[0].offsetHeight : 0), u = e.target.scrollTop - t.skip * r;
+      n && (l = this.base.getGroupedDataModernMode(l, n), a = l[0][n]);
+      for (let h = 1; h < l.length && !(r * h > u); h++)
+        l[h] && l[h][n] && (a = l[h][n]);
+      a !== this.group && (i.data.group = a, this.applyState(i));
+    }
+  },
+  render() {
+    let {
+      dir: e,
+      disabled: t,
+      clearButton: s,
+      label: i,
+      textField: n,
+      className: l,
+      style: a,
+      loading: r,
+      icon: d,
+      svgIcon: u,
+      iconClassName: h,
+      virtual: g,
+      size: m,
+      fillMode: S,
+      rounded: D,
+      adaptiveTitle: F,
+      header: T,
+      footer: w,
+      groupStickyHeaderItemRender: K,
+      placeholder: x
+    } = this.$props;
+    const ne = this.currentFocused, ae = !this.$props.validityStyles || this.validity().valid, E = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, W = k(this.computedValue(), n), q = b(E) ? E : W, le = s && (!!q || b(this.computedValue())), C = this.base, y = C.vs, A = this.$props.id || this.inputId, N = Object.assign({}, {
+      animate: !0,
+      height: "200px"
+    }, this.$props.popupSettings), oe = Re(this).toLanguageString(ie, He[ie]), M = this.isOpen, R = this.adaptiveState;
+    y.enabled = g !== void 0, g !== void 0 && (y.skip = g.skip, y.total = g.total, y.pageSize = g.pageSize), this.group === void 0 && this.$props.groupField !== void 0 && (this.group = k(this.$props.dataItems[0], this.$props.groupField));
+    const re = (p) => {
+      const c = this.base.initState();
+      c.event = p;
+      const f = p.event.target.value;
+      c.data.text = f, this.base.filterChanged(f, c), this.applyState(c);
+    }, de = () => [o("div", {
+      class: "k-actionsheet-titlebar-group k-hbox"
+    }, [o("div", {
+      class: "k-actionsheet-title"
+    }, [o("div", {
+      class: "k-text-center"
+    }, [F]), x && o("div", {
+      class: "k-actionsheet-subtitle k-text-center"
+    }, [x])]), o("div", {
+      class: "k-actionsheet-actions"
+    }, [o(Z, {
+      tabIndex: 5,
+      "aria-label": "Cancel",
+      "aria-disabled": "false",
+      type: "button",
+      fillMode: "flat",
+      onClick: this.toggleBtnClick,
+      icon: "x",
+      svgIcon: Le
+    }, null)])]), o("div", {
+      class: "k-actionsheet-titlebar-group k-actionsheet-filter"
+    }, [fe.call(this)])], ue = O.call(this, de, V.call(this)), pe = () => {
+      const p = C.getTemplateDef.call(this, T, _), c = C.getTemplateDef.call(this, w, _), f = O.call(this, K, V.call(this)), v = this.$props.dataItems || [];
+      return o("div", {
+        class: "k-list-container"
+      }, [p && o("div", {
+        class: "k-list-header"
+      }, [p]), o("div", {
+        class: L("k-list", {
+          [`k-list-${G[m] || m}`]: R ? !1 : m,
+          "k-list-lg": !!R,
+          "k-virtual-list": y.enabled
+        })
+      }, [T && o("div", {
+        class: "k-list-header"
+      }, [T]), this.group && v.length !== 0 && o(J, {
+        group: this.group,
+        render: f
+      }, null), U.call(this), c && o("div", {
+        class: "k-list-footer"
+      }, [c])])]);
+    }, ce = O.call(this, pe, V.call(this)), he = function() {
+      return o(je, {
+        expand: M,
+        animation: !0,
+        animationStyles: this.animationStyles,
+        className: this.classNameAdaptive,
+        contentClassName: "!k-overflow-hidden",
+        header: ue,
+        content: ce,
+        onClose: this.toggleBtnClick,
+        navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
+      }, null);
+    }, fe = function() {
+      const c = this.base.initState().data.text;
+      return o(Ke, {
+        adaptiveMode: !0,
+        value: c,
+        ref: "filterInput",
+        onChange: (f) => re(f),
+        onKeydown: this.onInputKeyDown,
+        size: this.$props.size,
+        rounded: this.$props.rounded,
+        fillMode: this.$props.fillMode
+      }, null);
+    }, U = function() {
+      let p;
+      const {
+        dataItemKey: c,
+        groupField: f
+      } = this.$props;
+      let v = this.$props.dataItems || [];
+      const B = O.call(this, this.$props.itemRender, V.call(this)), j = O.call(this, this.$props.groupHeaderItemRender, V.call(this)), P = O.call(this, this.$props.listNoDataRender, V.call(this));
+      g || (g = {
+        skip: 0
+      });
+      const H = g.skip, be = `translateY(${y.translate}px)`, Se = M ? this.getFocusedIndex() : void 0, ye = b(E) && E !== W ? null : this.computedValue();
+      return f && (v = this.base.getGroupedDataModernMode(v, f)), o(we, {
+        id: C.listBoxId,
+        show: M,
+        dataItems: v,
+        focusedIndex: Se,
+        value: ye,
+        textField: n,
+        valueField: c,
+        optionsGuid: C.guid,
+        ref: "list",
+        wrapperStyle: {
+          maxHeight: R ? void 0 : N.height
+        },
+        wrapperCssClass: L("k-list-content", {
+          "k-list-scroller": !this.$props.virtual
+        }),
+        listStyle: y.enabled ? {
+          transform: be
+        } : void 0,
+        key: "listkey",
+        skip: H,
+        onListclick: this.handleItemClick,
+        itemRender: B,
+        groupHeaderItemRender: j,
+        noDataRender: P,
+        groupField: f,
+        onScroll: this.onScroll
+      }, Pe(p = ge.call(this)) ? p : {
+        default: () => [p]
+      });
+    }, ge = function() {
+      return y.enabled && o("div", {
+        ref: "scrollElement",
+        key: "scrollElementKey"
+      }, null);
+    }, me = function() {
+      const p = O.call(this, this.$props.groupStickyHeaderItemRender, V.call(this)), c = C.getTemplateDef.call(this, T), f = C.getTemplateDef.call(this, w), v = this.$props.dataItems || [];
+      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = k(v[0], this.$props.groupField)), o(De, {
+        ref: "container",
+        onMousedown: (B) => B.preventDefault(),
+        width: this.popupWidth,
+        popupSettings: {
+          ...N,
+          anchor: this.anchor,
+          show: M,
+          popupClass: L(N.popupClass, "k-list", {
+            [`k-list-${G[m] || m}`]: m,
+            "k-virtual-list": this.base.vs.enabled
+          }),
+          className: L("k-list-container", N.className)
+        },
+        dir: e !== void 0 ? e : this.base.dirCalculated
+      }, {
+        default: () => [c && o("div", {
+          class: "k-list-header"
+        }, [c]), this.group && v.length !== 0 && o(J, {
+          group: this.group,
+          render: p
+        }, null), U.call(this), f && o("div", {
+          class: "k-list-footer"
+        }, [f])]
+      });
+    }, ve = function(p, c) {
+      const {
+        tabIndex: f,
+        dataItems: v = [],
+        dataItemKey: B
+      } = this.$props;
+      g || (g = {
+        skip: 0
+      });
+      const j = this.computedValue(), P = Math.max(0, v.findIndex((H) => I(H, j, B)));
+      return this.suggested && !I(this.valueOnDidUpdate, j, B) && (this.suggested = ""), o(Be, {
+        id: c,
+        placeholder: x,
+        tabIndex: f || void 0,
+        accessKey: this.$props.accessKey,
+        value: p + this.suggested,
+        suggestedText: this.suggested,
+        ref: (H) => {
+          this.inputRef = H;
+        },
+        onKeydown: this.onInputKeyDown,
+        onChange: this.inputOnChange,
+        onFocus: this.base.handleFocus,
+        onBlur: this.handleBlur,
+        disabled: t,
+        expanded: M,
+        owns: this.base.listBoxId,
+        activedescendant: this.base.guid + "-" + (P + g.skip),
+        ariaLabelledBy: this.$props.ariaLabelledBy,
+        ariaDescribedBy: this.$props.ariaDescribedBy,
+        ariaLabel: this.$props.ariaLabel
+      }, null);
+    }, Y = [_(function() {
+      return o("span", {
+        class: L("k-combobox k-input", {
+          [`k-input-${G[m] || m}`]: m,
+          [`k-rounded-${Ae[D] || D}`]: D,
+          [`k-input-${S}`]: S,
+          "k-invalid": !ae,
+          "k-loading": r,
+          "k-required": this.required,
+          "k-disabled": t,
+          "k-focus": ne && !t
+        }, l),
+        ref: Oe(this, "kendoAnchor"),
+        style: i ? {
+          ...a,
+          width: void 0
+        } : a,
+        dir: e
+      }, [ve.call(this, q || "", A), le && !r && o(Me, {
+        onClearclick: this.clearButtonClick,
+        key: "clearbutton"
+      }, null), r && o(Ve, {
+        name: "loading",
+        class: "k-input-loading-icon",
+        key: "loading"
+      }, null), o(Z, {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": oe,
+        size: m,
+        fillMode: S,
+        rounded: null,
+        class: "k-input-button",
+        icon: d || "caret-alt-down",
+        svgIcon: u || Ee,
+        iconClass: h,
+        onClick: this.toggleBtnClick,
+        onMousedown: (p) => p.preventDefault()
+      }, null), !R && me.call(this)]);
+    }.call(this), {
+      ...this.$attrs
+    }), R && he.call(this)];
+    return i ? o("span", {
+      class: this.spanClassNames,
+      onFocusin: this.handleFocus,
+      dir: this.$props.dir
+    }, [Y, this.$props.label ? A ? o("label", {
+      for: A,
+      class: "k-floating-label"
+    }, [this.$props.label]) : o("span", {
+      class: "k-label"
+    }, [this.$props.label]) : null]) : Y;
+  }
+});
+export {
+  ot as ComboBox
+};