@progress/kendo-vue-dropdowns 8.0.0-develop.3 → 8.0.0-develop.5

package/ComboBox/ComboBox.mjs

@@ -5,16 +5,16 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as xe, h as _, createVNode as o, ref as G, inject as $e, isVNode as Ce } from "vue";
+import { defineComponent as xe, h as G, createVNode as u, ref as _, inject as $e, isVNode as Ce } from "vue";
 import Oe from "../common/DropDownBase.mjs";
 import { GroupStickyHeader as Q } from "../common/GroupStickyHeader.mjs";
-import { templateRendering as $, getListeners as C, Keys as O, canUseDOM as Ve, getRef as X, guid as Z, classNames as L, kendoThemeMaps as Fe, setRef as Te, Icon as Be } from "@progress/kendo-vue-common";
+import { templateRendering as F, getListeners as B, Keys as k, canUseDOM as Ve, getRef as X, guid as Z, classNames as j, kendoThemeMaps as Te, setRef as Fe, Icon as Be } from "@progress/kendo-vue-common";
 import { Button as ee } from "@progress/kendo-vue-buttons";
-import { isPresent as v, getItemValue as V, areSame as I, suggestValue as De, itemIndexStartsWith as te, getItemIndexByText as ie } from "../common/utils.mjs";
-import { SearchBar as we } from "../common/SearchBar.mjs";
+import { isPresent as S, getItemValue as y, areSame as O, suggestValue as we, itemIndexStartsWith as te, getItemIndexByText as ie } from "../common/utils.mjs";
+import { SearchBar as De } from "../common/SearchBar.mjs";
 import { ListContainer as Me } from "../common/ListContainer.mjs";
-import { List as Re } from "../common/List.mjs";
-import { ClearButton as He } from "../common/ClearButton.mjs";
+import { List as He } from "../common/List.mjs";
+import { ClearButton as Re } from "../common/ClearButton.mjs";
 import { provideLocalizationService as Le } from "@progress/kendo-vue-intl";
 import { expandButton as se, messages as je } from "../messages/main.mjs";
 import { xIcon as Ee, caretAltDownIcon as Ne } from "@progress/kendo-svg-icons";
@@ -23,9 +23,9 @@ import { ActionSheet as Ke } from "@progress/kendo-vue-layout";
 import { ListFilter as ze } from "../common/ListFilter.mjs";
 const {
   sizeMap: W,
-  roundedMap: _e
-} = Fe;
-function Ge(e) {
+  roundedMap: Ge
+} = Te;
+function _e(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Ce(e);
 }
 const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
@@ -218,7 +218,7 @@ const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
     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 Oe(this), this.anchor = Z(), this.inputId = Z();
   },
   setup() {
-    const e = G(null), t = G(null), i = G(null), s = $e("kendoLocalizationService", {});
+    const e = _(null), t = _(null), i = _(null), s = $e("kendoLocalizationService", {});
     return {
       inputRef: e,
       elementRef: t,
@@ -230,34 +230,41 @@ const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
     this.observer = Ve && 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 f;
+    var h;
     const {
       dataItems: e = [],
       dataItemKey: t,
       virtual: i,
       groupField: s,
-      textField: a
-    } = this.$props, l = this.isOpen, n = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, r = !n && l, u = this.$refs.list, g = this.$refs.scrollElement, d = this.computedValue();
-    if (this.valueOnDidUpdate = d, u && (this.base.vs.list = u.list, this.base.list = u.list), g && (this.base.vs.scrollElement = g), u && e.length && this.base.vs.scrollerRef(u.$el), i && this.virtualTotalHasChanged)
+      textField: n
+    } = this.$props, d = this.isOpen, a = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, r = !a && d, p = this.$refs.list, g = this.$refs.scrollElement, l = this.computedValue();
+    if (this.valueOnDidUpdate = l, p && (this.base.vs.list = p.list, this.base.list = p.list), g && (this.base.vs.scrollElement = g), p && e.length && this.base.vs.scrollerRef(p.$el), i && this.virtualTotalHasChanged)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset(), this.virtualTotalHasChanged = !1;
     else {
-      const m = this.prevCurrentValue;
-      let y = e.findIndex((F) => I(F, d, t));
-      s && (y = (f = this.base.getGroupedDataModernMode(e, s)) == null ? void 0 : f.indexOf(d));
-      const D = !I(m, d, t);
+      const c = this.prevCurrentValue;
+      let o = e.findIndex((f) => O(f, l, t));
+      if (o === -1 && !t && n && l) {
+        const f = y(l, n);
+        o = e.findIndex((I) => y(I, n) === f);
+      }
+      if (s && o !== -1) {
+        const f = this.base.getGroupedDataModernMode(e, s), I = y(l, n);
+        o = (h = f == null ? void 0 : f.findIndex((V) => y(V, n) === I)) != null ? h : o;
+      }
+      const x = !O(c, l, t);
       if (r && i)
-        this.base.scrollToVirtualItem(i, y), this.prevCurrentOpened = !0;
+        this.base.scrollToVirtualItem(i, o), this.prevCurrentOpened = !0;
       else if (r && !i)
-        e && e.length !== 0 && this.base.resetGroupStickyHeader(e[0][s], this), this.base.scrollToItem(y), this.prevCurrentOpened = !0;
-      else if (l && n && d && D)
-        this.base.scrollToItem(y);
-      else if (l && !d && !this.isScrolling) {
-        let F = 0;
-        if (s && this.getFocusedIndex() !== -1 && e.length > 0) {
-          const T = e[this.getFocusedIndex()][a], w = this.base.getGroupedDataModernMode(e, s), A = w.findIndex((k) => k[a] === T);
-          F = w.slice(0, A).filter((k) => Object.keys(k).length === 1).length;
+        e && e.length !== 0 && this.base.resetGroupStickyHeader(e[0][s], this), this.base.scrollToItem(o), this.prevCurrentOpened = !0;
+      else if (d && a && l && x)
+        this.base.scrollToItem(o);
+      else if (d && !l && !this.isScrolling) {
+        let f = this.getFocusedIndex();
+        if (s && f !== -1 && e.length > 0) {
+          const I = e[f][n];
+          f = this.base.getGroupedDataModernMode(e, s).findIndex((w) => w[n] === I);
         }
-        this.base.scrollToItem(this.getFocusedIndex() + F);
+        this.base.scrollToItem(f);
       }
     }
     r && this.input && this.input.focus(), this.prevCurrentValue = this.computedValue(), this.setValidity();
@@ -285,7 +292,7 @@ const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
         dataItems: e = [],
         dataItemKey: t
       } = this.$props, i = this.computedValue();
-      return e.findIndex((s) => I(s, i, t));
+      return e.findIndex((s) => O(s, i, t));
     },
     spanClassNames() {
       const e = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
@@ -323,12 +330,12 @@ const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
       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 i = this.dataItems.findIndex((s) => V(s, e) === t);
+      const i = this.dataItems.findIndex((s) => y(s, e) === t);
       return this.dataItems[i];
     },
     primitiveValue() {
       const e = this.computedValue();
-      return this.valuePrimitive && e && typeof e == "object" ? V(e, this.valueField) : e;
+      return this.valuePrimitive && e && typeof e == "object" ? y(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, i = this.$props.valid !== void 0 ? this.$props.valid : t;
@@ -342,30 +349,55 @@ const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
       const {
         dataItems: i = [],
         virtual: s,
-        dataItemKey: a
-      } = this.$props, l = s ? s.skip : 0, n = i[e - l], r = !I(n, this.computedValue(), a);
-      this.triggerOnChange(n, t), this.currentText !== void 0 && (t.data.currentText = void 0), r && this.base.triggerPageChangeCornerItems(n, t);
+        dataItemKey: n
+      } = this.$props, d = s ? s.skip : 0, a = i[e - d], r = !O(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: i = [],
         virtual: s = {
           skip: 0
-        }
-      } = this.$props, a = this.$props.filter ? this.$props.filter : this.currentText, l = this.getFocusedIndex(), n = this.base.vs, r = this.computedValue();
-      if (this.suggested = "", l !== -1 && !v(r))
-        this.handleItemSelect(l, e);
-      else if (a === "")
+        },
+        groupField: n,
+        textField: d
+      } = this.$props, a = this.$props.filter ? this.$props.filter : this.currentText;
+      let r = this.getFocusedIndex();
+      const p = this.base.vs, g = this.computedValue();
+      this.suggested = "";
+      const l = n ? this.base.getGroupedDataModernMode(i, n) : i;
+      let h = r;
+      if (n && r !== -1 && r < i.length) {
+        const c = i[r];
+        c && (h = l.findIndex((o) => o[d] === c[d]));
+      }
+      if (r !== -1 && !S(g))
+        this.handleItemSelect(r, e);
+      else if (a === "" && !S(g))
         this.handleItemSelect(0, e);
       else {
-        let u = s.skip + l;
-        const g = this.base.navigation.navigate({
+        let c = s.skip + h, o = this.base.navigation.navigate({
           keyCode: t,
-          current: u,
-          max: (n.enabled ? n.total : i.length) - 1,
+          current: c,
+          max: (p.enabled ? p.total : l.length) - 1,
           min: 0
         });
-        g !== void 0 && this.handleItemSelect(g, e);
+        if (o !== void 0 && n) {
+          const x = t === k.down || t === k.right || t === k.pageDown || t === k.end ? 1 : -1;
+          let f = 0;
+          for (; f < l.length; ) {
+            const I = l[o - s.skip];
+            if (I && Object.keys(I).length === 1 && I[n] !== void 0) {
+              if (o += x, o < 0 || o >= l.length)
+                return;
+            } else {
+              const V = l[o - s.skip], w = i.findIndex((M) => M[d] === V[d]);
+              w !== -1 && this.handleItemSelect(w + s.skip, e);
+              return;
+            }
+            f++;
+          }
+        } else o !== void 0 && this.handleItemSelect(o, e);
       }
     },
     toggleBtnClick(e) {
@@ -376,45 +408,45 @@ const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
       const {
         dataItems: i = [],
         textField: s,
-        allowCustom: a,
-        valuePrimitive: l
-      } = this.$props, n = this.isOpen, u = this.getSelectedItemText() === e ? this.index : ie(i, e, s), g = u !== -1;
-      let d;
+        allowCustom: n,
+        valuePrimitive: d
+      } = this.$props, a = this.isOpen, p = this.getSelectedItemText() === e ? this.index : ie(i, e, s), g = p !== -1;
+      let l;
       if (this.suggested = "", g)
-        d = i[u];
-      else if (a)
-        d = s !== void 0 && !l ? {
+        l = i[p];
+      else if (n)
+        l = s !== void 0 && !d ? {
           [s]: e
         } : e;
       else
         return this.selectFocusedItem(e, t);
-      this.triggerOnChange(d, t), n && this.base.togglePopup(t), this.$props.filter === void 0 && this.currentText !== void 0 && (t.data.currentText = void 0), this.applyState(t);
+      this.triggerOnChange(l, t), a && 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: i = [],
         textField: s,
-        allowCustom: a,
-        valuePrimitive: l
-      } = this.$props, n = this.isOpen, r = this.getSelectedItemText();
-      if (this.suggested = "", e === r || e === "" && !v(r))
-        return n && !this.adaptiveState && this.base.togglePopup(t), this.applyState(t);
-      const u = ie(i, e, s, !0), g = u !== -1;
-      let d = null;
-      g ? d = i[u] : a && e && (s && !l ? d = {
+        allowCustom: n,
+        valuePrimitive: d
+      } = this.$props, a = this.isOpen, r = this.getSelectedItemText();
+      if (this.suggested = "", e === r || e === "" && !S(r))
+        return a && !this.adaptiveState && this.base.togglePopup(t), this.applyState(t);
+      const p = ie(i, e, s, !0), g = p !== -1;
+      let l = null;
+      g ? l = i[p] : n && e && (s && !d ? l = {
         [s]: e
-      } : d = e), this.triggerOnChange(d, t), this.currentText !== void 0 && (t.data.currentText = void 0, this.base.filterChanged("", t)), n && !this.adaptiveState && this.base.togglePopup(t), this.applyState(t);
+      } : l = e), this.triggerOnChange(l, t), this.currentText !== void 0 && (t.data.currentText = void 0, this.base.filterChanged("", t)), a && !this.adaptiveState && this.base.togglePopup(t), this.applyState(t);
     },
     selectFocusedItem(e, t) {
       const i = this.isOpen, {
         dataItems: s = [],
-        textField: a,
-        virtual: l = {
+        textField: n,
+        virtual: d = {
           skip: 0
         },
-        focusedItemIndex: n = te
-      } = this.$props, r = l.skip, u = e === "" && r === 0 ? 0 : n(s, e, a);
-      return u !== -1 ? this.handleItemSelect(u + r, t) : (this.triggerOnChange(null, t), this.currentText !== void 0 && (t.data.currentText = void 0)), i && this.base.togglePopup(t), this.applyState(t);
+        focusedItemIndex: a = te
+      } = this.$props, r = d.skip, p = e === "" && r === 0 ? 0 : a(s, e, n);
+      return p !== -1 ? this.handleItemSelect(p + r, t) : (this.triggerOnChange(null, t), this.currentText !== void 0 && (t.data.currentText = void 0)), i && this.base.togglePopup(t), this.applyState(t);
     },
     handleItemClick(e, t) {
       this.base.handleItemClick(e, t), this.valueDuringOnChange = void 0;
@@ -433,27 +465,27 @@ const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
     onInputKeyDown(e) {
       this.isScrolling && (this.isScrolling = !1);
       const t = e.keyCode, i = this.isOpen, s = this.base.initState();
-      if (s.event = e, !e.altKey && (t === O.up || t === O.down)) {
+      if (s.event = e, !e.altKey && (t === k.up || t === k.down)) {
         e.preventDefault(), this.onNavigate(s, t), this.applyState(s);
         return;
       }
-      const a = () => {
+      const n = () => {
         e.preventDefault(), this.base.togglePopup(s), this.applyState(s);
       };
-      i ? e.altKey && t === O.up ? a() : t === O.enter ? (e.preventDefault(), this.applyValueOnEnter(e.currentTarget.value, s)) : t === O.esc && (this.adaptiveState && this.toggleBtnClick(e), a()) : e.altKey && t === O.down ? a() : t === O.esc && this.applyValueOnRejectSuggestions(e.currentTarget.value, s);
+      i ? e.altKey && t === k.up ? n() : t === k.enter ? (e.preventDefault(), this.applyValueOnEnter(e.currentTarget.value, s)) : t === k.esc && (this.adaptiveState && this.toggleBtnClick(e), n()) : e.altKey && t === k.down ? n() : t === k.esc && this.applyValueOnRejectSuggestions(e.currentTarget.value, s);
     },
     inputOnChange(e) {
       const t = this.base.initState();
       t.event = e;
-      const i = this.isOpen, s = e.currentTarget, a = s.value;
+      const i = this.isOpen, s = e.currentTarget, n = s.value;
       if (this.$props.suggest) {
-        const l = s.selectionEnd === a.length;
-        let n = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
-        v(n) || (n = V(this.computedValue(), this.$props.textField) || "");
-        const r = n && n === a, u = n && n.length > a.length;
-        r || u || !l ? this.suggested = "" : this.suggestValue(a);
+        const d = s.selectionEnd === n.length;
+        let a = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
+        S(a) || (a = y(this.computedValue(), this.$props.textField) || "");
+        const r = a && a === n, p = a && a.length > n.length;
+        r || p || !d ? this.suggested = "" : this.suggestValue(n);
       }
-      this.$props.filter === void 0 && (t.data.currentText = a), this.currentFocusedItem !== void 0 && (t.data.focusedItem = void 0), i || this.base.togglePopup(t), this.base.filterChanged(a, t), this.$props.filterable && (t.data.group = void 0), this.applyState(t);
+      this.$props.filter === void 0 && (t.data.currentText = n), this.currentFocusedItem !== void 0 && (t.data.focusedItem = void 0), i || 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();
@@ -464,29 +496,36 @@ const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
         dataItems: t = [],
         textField: i,
         dataItemKey: s,
-        virtual: a = {
+        virtual: n = {
           skip: 0
         },
-        focusedItemIndex: l = te
-      } = this.$props, n = this.$props.filter ? this.$props.filter : this.currentText;
-      return v(e) && n === void 0 ? t.findIndex((r) => I(r, e, s)) : n ? l(t, n, i) : a.skip === 0 ? 0 : -1;
+        focusedItemIndex: d = te
+      } = this.$props, a = this.$props.filter ? this.$props.filter : this.currentText;
+      if (S(e) && a === void 0) {
+        let r = t.findIndex((p) => O(p, e, s));
+        if (r === -1 && !s && i) {
+          const p = y(e, i);
+          r = t.findIndex((g) => y(g, i) === p);
+        }
+        return r;
+      } else return a ? d(t, a, i) : n.skip === 0 ? 0 : -1;
     },
     suggestValue(e) {
       const {
         dataItems: t,
         textField: i
       } = this.$props;
-      this.suggested = De(e, t, i);
+      this.suggested = we(e, t, i);
     },
     setValidity() {
       this.input && this.input.setCustomValidity && this.input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || We);
     },
     compareValues(e, t) {
-      return this.$props.valuePrimitive && (typeof e != "object" || e === null) && (typeof t != "object" || t === null) ? e === t : I(e, t, this.$props.dataItemKey);
+      return this.$props.valuePrimitive && (typeof e != "object" || e === null) && (typeof t != "object" || t === null) ? e === t : O(e, t, this.$props.dataItemKey);
     },
     triggerOnChange(e, t) {
       const i = this.computedValue();
-      !v(i) && !v(e) || this.compareValues(i, e) || (this.$props.value === void 0 && (this.currentValue = e), this.valueDuringOnChange = e, t.events.push({
+      !S(i) && !S(e) || this.compareValues(i, e) || (this.$props.value === void 0 && (this.currentValue = e), this.valueDuringOnChange = e, t.events.push({
         type: "change"
       }));
     },
@@ -508,29 +547,40 @@ const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
       } = this.base;
       t.scrollHandler(e);
       const s = this.base.initState(), {
-        groupField: a
+        groupField: n
       } = this.$props;
       let {
-        dataItems: l = []
-      } = this.$props, n;
-      if (!a || !l.length)
+        dataItems: d = []
+      } = this.$props, a;
+      if (!n || !d.length)
         return;
-      const r = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : i ? i.children[0].offsetHeight : 0), g = e.target.scrollTop - t.skip * r;
-      a && (l = this.base.getGroupedDataModernMode(l, a), n = l[0][a]);
-      for (let d = 1; d < l.length && !(r * d > g); d++)
-        l[d] && l[d][a] && (n = l[d][a]);
-      n !== this.group && (s.data.group = n, this.applyState(s));
+      const p = e.target.scrollTop - t.skip * (t.itemHeight || 0);
+      if (n) {
+        d = this.base.getGroupedDataModernMode(d, n), a = d[0][n];
+        let g = 0, l = 0, h = 0;
+        if (i && !t.enabled) {
+          const c = i.querySelector(".k-list-item"), o = i.querySelector(".k-list-group-item");
+          l = (c == null ? void 0 : c.offsetHeight) || 0, h = (o == null ? void 0 : o.offsetHeight) || l;
+        } else
+          l = t.itemHeight || 0, h = l;
+        for (let c = 0; c < d.length; c++) {
+          const o = d[c], x = o && Object.keys(o).length === 1 && o[n] !== void 0, f = x ? h : l;
+          if (x && g <= p && (a = o[n]), g += f, g > p)
+            break;
+        }
+      }
+      a !== this.group && (s.data.group = a, this.applyState(s));
     },
     getInputText(e, t) {
-      return v(e) && e !== "" ? String(e) : v(t) ? String(t) : "";
+      return S(e) && e !== "" ? String(e) : S(t) ? String(t) : "";
     },
     getSelectedItemText() {
       const {
         textField: e,
         valuePrimitive: t
       } = this.$props, i = this.computedValue();
-      if (v(i))
-        return t ? i && typeof i == "object" ? V(i, e) : typeof i == "string" ? i !== "" ? i : void 0 : typeof i == "number" || typeof i == "boolean" ? String(i) : void 0 : V(i, e);
+      if (S(i))
+        return t ? i && typeof i == "object" ? y(i, e) : typeof i == "string" ? i !== "" ? i : void 0 : typeof i == "number" || typeof i == "boolean" ? String(i) : void 0 : y(i, e);
     }
   },
   render() {
@@ -539,45 +589,45 @@ const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
       disabled: t,
       clearButton: i,
       label: s,
-      textField: a,
-      className: l,
-      style: n,
+      textField: n,
+      className: d,
+      style: a,
       loading: r,
-      icon: u,
+      icon: p,
       svgIcon: g,
-      iconClassName: d,
-      virtual: f,
-      size: m,
-      fillMode: y,
-      rounded: D,
-      adaptiveTitle: F,
-      header: T,
-      footer: w,
-      groupStickyHeaderItemRender: A,
-      placeholder: k,
+      iconClassName: l,
+      virtual: h,
+      size: c,
+      fillMode: o,
+      rounded: x,
+      adaptiveTitle: f,
+      header: I,
+      footer: V,
+      groupStickyHeaderItemRender: w,
+      placeholder: M,
       inputAttributes: ne
     } = this.$props;
-    const ae = this.currentFocused, le = !this.$props.validityStyles || this.validity().valid, P = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, q = this.getSelectedItemText(), U = this.getInputText(P, q), j = this.computedValue(), oe = this.$props.valuePrimitive ? !!this.findByFieldValue(this.valueField, j) || this.$props.allowCustom && v(j) && j !== "" : v(j), re = i && (!!U || oe), x = this.base, S = x.vs, K = this.$props.id || this.inputId, E = Object.assign({}, {
+    const ae = this.currentFocused, le = !this.$props.validityStyles || this.validity().valid, P = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, q = this.getSelectedItemText(), U = this.getInputText(P, q), E = this.computedValue(), oe = this.$props.valuePrimitive ? !!this.findByFieldValue(this.valueField, E) || this.$props.allowCustom && S(E) && E !== "" : S(E), re = i && (!!U || oe), T = this.base, C = T.vs, K = this.$props.id || this.inputId, N = Object.assign({}, {
       animate: !0,
       height: "200px"
-    }, this.$props.popupSettings), de = Le(this).toLanguageString(se, je[se]), M = this.isOpen, R = this.adaptiveState;
-    S.enabled = f !== void 0, f !== void 0 && (S.skip = f.skip, S.total = f.total, S.pageSize = f.pageSize), this.group === void 0 && this.$props.groupField !== void 0 && (this.group = V(this.$props.dataItems[0], this.$props.groupField));
-    const ue = (p) => {
-      const c = this.base.initState();
-      c.event = p;
-      const h = p.event.target.value;
-      c.data.text = h, this.base.filterChanged(h, c), this.applyState(c);
-    }, pe = () => [o("div", {
+    }, this.$props.popupSettings), de = Le(this).toLanguageString(se, je[se]), H = this.isOpen, R = this.adaptiveState;
+    C.enabled = h !== void 0, h !== void 0 && (C.skip = h.skip, C.total = h.total, C.pageSize = h.pageSize), this.group === void 0 && this.$props.groupField !== void 0 && (this.group = y(this.$props.dataItems[0], this.$props.groupField));
+    const ue = (m) => {
+      const v = this.base.initState();
+      v.event = m;
+      const b = m.event.target.value;
+      v.data.text = b, this.base.filterChanged(b, v), this.applyState(v);
+    }, pe = () => [u("div", {
       class: "k-actionsheet-titlebar-group k-hbox"
-    }, [o("div", {
+    }, [u("div", {
       class: "k-actionsheet-title"
-    }, [o("div", {
+    }, [u("div", {
       class: "k-text-center"
-    }, [F]), k && o("div", {
+    }, [f]), M && u("div", {
       class: "k-actionsheet-subtitle k-text-center"
-    }, [k])]), o("div", {
+    }, [M])]), u("div", {
       class: "k-actionsheet-actions"
-    }, [o(ee, {
+    }, [u(ee, {
       tabIndex: 5,
       "aria-label": "Cancel",
       "aria-disabled": "false",
@@ -586,31 +636,31 @@ const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
       onClick: this.toggleBtnClick,
       icon: "x",
       svgIcon: Ee
-    }, null)])]), o("div", {
+    }, null)])]), u("div", {
       class: "k-actionsheet-titlebar-group k-actionsheet-filter"
-    }, [me.call(this)])], ce = $.call(this, pe, C.call(this)), he = () => {
-      const p = x.getTemplateDef.call(this, T, _), c = x.getTemplateDef.call(this, w, _), h = $.call(this, A, C.call(this)), b = this.$props.dataItems || [];
-      return o("div", {
+    }, [me.call(this)])], ce = F.call(this, pe, B.call(this)), he = () => {
+      const m = T.getTemplateDef.call(this, I, G), v = T.getTemplateDef.call(this, V, G), b = F.call(this, w, B.call(this)), $ = this.$props.dataItems || [];
+      return u("div", {
         class: "k-list-container"
-      }, [p && o("div", {
+      }, [m && u("div", {
         class: "k-list-header"
-      }, [p]), o("div", {
-        class: L("k-list", {
-          [`k-list-${W[m] || m}`]: R ? !1 : m,
+      }, [m]), u("div", {
+        class: j("k-list", {
+          [`k-list-${W[c] || c}`]: R ? !1 : c,
           "k-list-lg": !!R,
-          "k-virtual-list": S.enabled
+          "k-virtual-list": C.enabled
         })
-      }, [T && o("div", {
+      }, [I && u("div", {
         class: "k-list-header"
-      }, [T]), this.group && b.length !== 0 && o(Q, {
+      }, [I]), this.group && $.length !== 0 && u(Q, {
         group: this.group,
-        render: h
-      }, null), Y.call(this), c && o("div", {
+        render: b
+      }, null), Y.call(this), v && u("div", {
         class: "k-list-footer"
-      }, [c])])]);
-    }, fe = $.call(this, he, C.call(this)), ge = function() {
-      return o(Ke, {
-        expand: M,
+      }, [v])])]);
+    }, fe = F.call(this, he, B.call(this)), ge = function() {
+      return u(Ke, {
+        expand: H,
         animation: !0,
         animationStyles: this.animationStyles,
         className: this.classNameAdaptive,
@@ -621,174 +671,174 @@ const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
         navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
       }, null);
     }, me = function() {
-      const c = this.base.initState().data.text;
-      return o(ze, {
+      const v = this.base.initState().data.text;
+      return u(ze, {
         adaptiveMode: !0,
-        value: c,
+        value: v,
         ref: "filterInput",
-        onChange: (h) => ue(h),
+        onChange: (b) => ue(b),
         onKeydown: this.onInputKeyDown,
         size: this.$props.size,
         rounded: this.$props.rounded,
         fillMode: this.$props.fillMode
       }, null);
     }, Y = function() {
-      let p;
+      let m;
       const {
-        dataItemKey: c,
-        groupField: h
+        dataItemKey: v,
+        groupField: b
       } = this.$props;
-      let b = this.$props.dataItems || [];
-      const B = $.call(this, this.$props.itemRender, C.call(this)), N = $.call(this, this.$props.groupHeaderItemRender, C.call(this)), z = $.call(this, this.$props.listNoDataRender, C.call(this));
-      f || (f = {
+      let $ = this.$props.dataItems || [];
+      const D = F.call(this, this.$props.itemRender, B.call(this)), A = F.call(this, this.$props.groupHeaderItemRender, B.call(this)), z = F.call(this, this.$props.listNoDataRender, B.call(this));
+      h || (h = {
         skip: 0
       });
-      const H = f.skip, Se = `translateY(${S.translate}px)`, Ie = M ? this.getFocusedIndex() : void 0, ke = v(P) && P !== q ? null : this.computedValue();
-      return h && (b = this.base.getGroupedDataModernMode(b, h)), o(Re, {
-        id: x.listBoxId,
-        show: M,
-        dataItems: b,
-        focusedIndex: Ie,
+      const L = h.skip, Se = `translateY(${C.translate}px)`, ye = H ? this.getFocusedIndex() : void 0, ke = S(P) && P !== q ? null : this.computedValue();
+      return b && ($ = this.base.getGroupedDataModernMode($, b)), u(He, {
+        id: T.listBoxId,
+        show: H,
+        dataItems: $,
+        focusedIndex: ye,
         value: ke,
-        textField: a,
-        valueField: c,
-        optionsGuid: x.guid,
+        textField: n,
+        valueField: v,
+        optionsGuid: T.guid,
         ref: "list",
         wrapperStyle: {
-          maxHeight: R ? void 0 : E.height
+          maxHeight: R ? void 0 : N.height
         },
-        wrapperCssClass: L("k-list-content", {
+        wrapperCssClass: j("k-list-content", {
           "k-list-scroller": !this.$props.virtual
         }),
-        listStyle: S.enabled ? {
+        listStyle: C.enabled ? {
           transform: Se
         } : void 0,
         key: "listkey",
-        skip: H,
+        skip: L,
         onListclick: this.handleItemClick,
-        itemRender: B,
-        groupHeaderItemRender: N,
+        itemRender: D,
+        groupHeaderItemRender: A,
         noDataRender: z,
-        groupField: h,
+        groupField: b,
         onScroll: this.onScroll
-      }, Ge(p = ve.call(this)) ? p : {
-        default: () => [p]
+      }, _e(m = ve.call(this)) ? m : {
+        default: () => [m]
       });
     }, ve = function() {
-      return S.enabled && o("div", {
+      return C.enabled && u("div", {
         ref: "scrollElement",
         key: "scrollElementKey"
       }, null);
     }, be = function() {
-      const p = $.call(this, this.$props.groupStickyHeaderItemRender, C.call(this)), c = x.getTemplateDef.call(this, T), h = x.getTemplateDef.call(this, w), b = this.$props.dataItems || [];
-      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = V(b[0], this.$props.groupField)), o(Me, {
+      const m = F.call(this, this.$props.groupStickyHeaderItemRender, B.call(this)), v = T.getTemplateDef.call(this, I), b = T.getTemplateDef.call(this, V), $ = this.$props.dataItems || [];
+      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = y($[0], this.$props.groupField)), u(Me, {
         ref: "container",
-        onMousedown: (B) => B.preventDefault(),
+        onMousedown: (D) => D.preventDefault(),
         width: this.popupWidth,
         popupSettings: {
-          ...E,
+          ...N,
           anchor: this.anchor,
-          show: M,
-          popupClass: L(E.popupClass, "k-list", {
-            [`k-list-${W[m] || m}`]: m,
+          show: H,
+          popupClass: j(N.popupClass, "k-list", {
+            [`k-list-${W[c] || c}`]: c,
             "k-virtual-list": this.base.vs.enabled
           }),
-          className: L("k-list-container", E.className)
+          className: j("k-list-container", N.className)
         },
         dir: e !== void 0 ? e : this.base.dirCalculated
       }, {
-        default: () => [c && o("div", {
+        default: () => [v && u("div", {
           class: "k-list-header"
-        }, [c]), this.group && b.length !== 0 && o(Q, {
+        }, [v]), this.group && $.length !== 0 && u(Q, {
           group: this.group,
-          render: p
-        }, null), Y.call(this), h && o("div", {
+          render: m
+        }, null), Y.call(this), b && u("div", {
           class: "k-list-footer"
-        }, [h])]
+        }, [b])]
       });
-    }, ye = function(p, c) {
+    }, Ie = function(m, v) {
       const {
-        tabIndex: h,
-        dataItems: b = [],
-        dataItemKey: B
+        tabIndex: b,
+        dataItems: $ = [],
+        dataItemKey: D
       } = this.$props;
-      f || (f = {
+      h || (h = {
         skip: 0
       });
-      const N = this.computedValue(), z = Math.max(0, b.findIndex((H) => I(H, N, B)));
-      return this.suggested && !I(this.valueOnDidUpdate, N, B) && (this.suggested = ""), o(we, {
-        id: c,
-        placeholder: k,
-        tabIndex: h || void 0,
+      const A = this.computedValue(), z = Math.max(0, $.findIndex((L) => O(L, A, D)));
+      return this.suggested && !O(this.valueOnDidUpdate, A, D) && (this.suggested = ""), u(De, {
+        id: v,
+        placeholder: M,
+        tabIndex: b || void 0,
         accessKey: this.$props.accessKey,
-        value: p + this.suggested,
+        value: m + this.suggested,
         suggestedText: this.suggested,
-        ref: (H) => {
-          this.inputRef = H;
+        ref: (L) => {
+          this.inputRef = L;
         },
         onKeydown: this.onInputKeyDown,
         onChange: this.inputOnChange,
         onFocus: this.base.handleFocus,
         onBlur: this.handleBlur,
         disabled: t,
-        expanded: M,
+        expanded: H,
         owns: this.base.listBoxId,
-        activedescendant: this.base.guid + "-" + (z + f.skip),
+        activedescendant: this.base.guid + "-" + (z + h.skip),
         ariaLabelledBy: this.$props.ariaLabelledBy,
         ariaDescribedBy: this.$props.ariaDescribedBy,
         ariaLabel: this.$props.ariaLabel,
         inputAttributes: ne
       }, null);
-    }, J = [_(function() {
-      return o("span", {
-        class: L("k-combobox k-input", {
-          [`k-input-${W[m] || m}`]: m,
-          [`k-rounded-${_e[D] || D}`]: D,
-          [`k-input-${y}`]: y,
+    }, J = [G(function() {
+      return u("span", {
+        class: j("k-combobox k-input", {
+          [`k-input-${W[c] || c}`]: c,
+          [`k-rounded-${Ge[x] || x}`]: x,
+          [`k-input-${o}`]: o,
           "k-invalid": !le,
           "k-loading": r,
           "k-required": this.required,
           "k-disabled": t,
           "k-focus": ae && !t
-        }, l),
-        ref: Te(this, "kendoAnchor"),
+        }, d),
+        ref: Fe(this, "kendoAnchor"),
         style: s ? {
-          ...n,
+          ...a,
           width: void 0
-        } : n,
+        } : a,
         dir: e
-      }, [ye.call(this, U || "", K), re && !r && o(He, {
+      }, [Ie.call(this, U || "", K), re && !r && u(Re, {
         onClearclick: this.clearButtonClick,
         key: "clearbutton"
-      }, null), r && o(Be, {
+      }, null), r && u(Be, {
         name: "loading",
         class: "k-input-loading-icon",
         key: "loading"
-      }, null), o(ee, {
+      }, null), u(ee, {
         type: "button",
         tabIndex: -1,
         "aria-label": de,
-        size: m,
-        fillMode: y,
+        size: c,
+        fillMode: o,
         rounded: null,
         class: "k-input-button",
-        icon: u || "caret-alt-down",
+        icon: p || "caret-alt-down",
         svgIcon: g || Ne,
-        iconClass: d,
+        iconClass: l,
         onClick: this.toggleBtnClick,
-        onMousedown: (p) => p.preventDefault()
+        onMousedown: (m) => m.preventDefault()
       }, null), !R && be.call(this)]);
     }.call(this), {
       ...this.$attrs
     }), R && ge.call(this)];
-    return s ? o("span", {
+    return s ? u("span", {
       class: this.spanClassNames,
       onFocusin: this.handleFocus,
       dir: this.$props.dir
-    }, [J, this.$props.label ? K ? o("label", {
+    }, [J, this.$props.label ? K ? u("label", {
       for: K,
       class: "k-floating-label"
-    }, [this.$props.label]) : o("span", {
+    }, [this.$props.label]) : u("span", {
       class: "k-label"
     }, [this.$props.label]) : null]) : J;
   }