@progress/kendo-vue-dropdowns 7.0.1 → 7.0.2-develop.1

package/ComboBox/ComboBox.mjs

@@ -5,30 +5,30 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as Ie, h as z, createVNode as o, ref as _, inject as ke, isVNode as xe } from "vue";
-import Ce from "../common/DropDownBase.mjs";
-import { GroupStickyHeader as J } from "../common/GroupStickyHeader.mjs";
-import { templateRendering as $, getListeners as O, Keys as V, canUseDOM as $e, getRef as Q, guid as X, classNames as L, kendoThemeMaps as Oe, setRef as Ve, Icon as Fe } from "@progress/kendo-vue-common";
-import { Button as Z } from "@progress/kendo-vue-buttons";
-import { getItemValue as I, isPresent as b, areSame as k, suggestValue as Te, itemIndexStartsWith as ee, getItemIndexByText 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_MEDIUM_DEVICE as Ne, MOBILE_SMALL_DEVICE as Ae } from "../common/constants.mjs";
-import { ActionSheet as je } from "@progress/kendo-vue-layout";
-import { ListFilter as Ke } from "../common/ListFilter.mjs";
+import { defineComponent as xe, h as _, createVNode as o, ref as G, 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 { 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 { ListContainer as Me } from "../common/ListContainer.mjs";
+import { List as Re } from "../common/List.mjs";
+import { ClearButton as He } 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";
+import { MOBILE_MEDIUM_DEVICE as Ae, MOBILE_SMALL_DEVICE as Pe } from "../common/constants.mjs";
+import { ActionSheet as Ke } from "@progress/kendo-vue-layout";
+import { ListFilter as ze } from "../common/ListFilter.mjs";
 const {
-  sizeMap: G,
-  roundedMap: Pe
-} = Oe;
-function ze(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !xe(e);
+  sizeMap: W,
+  roundedMap: _e
+} = Fe;
+function Ge(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Ce(e);
 }
-const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
+const We = "Please enter a valid value!", ut = /* @__PURE__ */ xe({
   name: "KendoComboBox",
   model: {
     event: "changemodel"
@@ -189,8 +189,8 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
     },
     adaptiveModeBreakpoints: {
       default: {
-        small: Ae,
-        medium: Ne
+        small: Pe,
+        medium: Ae
       }
     }
   },
@@ -218,47 +218,47 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
     };
   },
   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 = X(), this.inputId = X();
+    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 = _(null), t = _(null), s = _(null), i = ke("kendoLocalizationService", {});
+    const e = G(null), t = G(null), i = G(null), s = $e("kendoLocalizationService", {});
     return {
       inputRef: e,
       elementRef: t,
-      kendoAnchorRef: s,
-      kendoLocalizationService: i
+      kendoAnchorRef: i,
+      kendoLocalizationService: s
     };
   },
   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 = Q(this, "kendoAnchor"), this.element = Q(this, "kendoAnchor"), this.base.didMount(), this.setValidity();
+    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 g;
+    var f;
     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)
+      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)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset(), this.virtualTotalHasChanged = !1;
     else {
       const m = this.prevCurrentValue;
-      let S = e.findIndex((F) => k(F, h, t));
-      i && (S = (g = this.base.getGroupedDataModernMode(e, i)) == null ? void 0 : g.indexOf(h));
-      const D = !k(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 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);
+      if (r && i)
+        this.base.scrollToVirtualItem(i, y), 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 (i && this.getFocusedIndex() !== -1 && e.length > 0) {
-          const T = e[this.getFocusedIndex()][n], w = this.base.getGroupedDataModernMode(e, i), A = w.findIndex((x) => x[n] === T);
-          F = w.slice(0, A).filter((x) => Object.keys(x).length === 1).length;
+        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;
         }
         this.base.scrollToItem(this.getFocusedIndex() + F);
       }
@@ -287,8 +287,8 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
       const {
         dataItems: e = [],
         dataItemKey: t
-      } = this.$props, s = this.computedValue();
-      return e.findIndex((i) => k(i, s, t));
+      } = this.$props, i = this.computedValue();
+      return e.findIndex((s) => I(s, i, t));
     },
     spanClassNames() {
       const e = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
@@ -326,96 +326,98 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
       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) => I(i, e) === t);
-      return this.dataItems[s];
+      const i = this.dataItems.findIndex((s) => V(s, e) === t);
+      return this.dataItems[i];
     },
     primitiveValue() {
       const e = this.computedValue();
-      return this.valuePrimitive ? I(e, this.valueField) : e;
+      return this.valuePrimitive && e && typeof e == "object" ? V(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;
+      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;
       return {
         customError: e,
-        valid: s,
+        valid: i,
         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 = !k(a, this.computedValue(), n);
-      this.triggerOnChange(a, t), this.currentText !== void 0 && (t.data.currentText = void 0), r && this.base.triggerPageChangeCornerItems(a, t);
+        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);
     },
     onNavigate(e, t) {
       const {
-        dataItems: s = [],
-        virtual: i = {
+        dataItems: i = [],
+        virtual: s = {
           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.$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 (n === "")
+      else if (a === "")
         this.handleItemSelect(0, e);
       else {
-        let d = i.skip + l;
-        const u = this.base.navigation.navigate({
+        let u = s.skip + l;
+        const g = this.base.navigation.navigate({
           keyCode: t,
-          current: d,
-          max: (a.enabled ? a.total : s.length) - 1,
+          current: u,
+          max: (n.enabled ? n.total : i.length) - 1,
           min: 0
         });
-        u !== void 0 && this.handleItemSelect(u, e);
+        g !== void 0 && this.handleItemSelect(g, 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);
+      const t = this.base.initState(), i = this.isOpen, s = this.adaptiveState;
+      t.event = e, this.base.togglePopup(t), !i && s && this.base.filterChanged("", t), this.applyState(t);
     },
     applyValueOnEnter(e, t) {
       const {
-        dataItems: s = [],
-        textField: i,
-        allowCustom: n
-      } = this.$props, l = this.isOpen, r = I(this.computedValue(), i) === e ? this.index : te(s, e, i), d = r !== -1;
-      let u;
-      if (this.suggested = "", d)
-        u = s[r];
-      else if (n)
-        u = i !== void 0 ? {
-          [i]: e
+        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;
+      if (this.suggested = "", g)
+        d = i[u];
+      else if (a)
+        d = s !== void 0 && !l ? {
+          [s]: 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);
+      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);
     },
     applyValueOnRejectSuggestions(e, t) {
       const {
-        dataItems: s = [],
-        textField: i,
-        allowCustom: n
-      } = this.$props, l = this.isOpen, a = I(this.computedValue(), i);
-      if (this.suggested = "", e === a || e === "" && !b(a))
-        return l && !this.adaptiveState && this.base.togglePopup(t), this.applyState(t);
-      const r = te(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);
+        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 = {
+        [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);
     },
     selectFocusedItem(e, t) {
-      const s = this.isOpen, {
-        dataItems: i = [],
-        textField: n,
+      const i = this.isOpen, {
+        dataItems: s = [],
+        textField: a,
         virtual: l = {
           skip: 0
         },
-        focusedItemIndex: a = ee
-      } = 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);
+        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);
     },
     handleItemClick(e, t) {
       this.base.handleItemClick(e, t), this.valueDuringOnChange = void 0;
@@ -433,28 +435,28 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
     },
     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 === V.up || t === V.down)) {
-        e.preventDefault(), this.onNavigate(i, t), this.applyState(i);
+      const t = e.keyCode, i = this.isOpen, s = this.base.initState();
+      if (s.event = e, !e.altKey && (t === O.up || t === O.down)) {
+        e.preventDefault(), this.onNavigate(s, t), this.applyState(s);
         return;
       }
-      const n = () => {
-        e.preventDefault(), this.base.togglePopup(i), this.applyState(i);
+      const a = () => {
+        e.preventDefault(), this.base.togglePopup(s), this.applyState(s);
       };
-      s ? e.altKey && t === V.up ? n() : t === V.enter ? (e.preventDefault(), this.applyValueOnEnter(e.currentTarget.value, i)) : t === V.esc && (this.adaptiveState && this.toggleBtnClick(e), n()) : e.altKey && t === V.down ? n() : t === V.esc && this.applyValueOnRejectSuggestions(e.currentTarget.value, i);
+      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);
     },
     inputOnChange(e) {
       const t = this.base.initState();
       t.event = e;
-      const s = this.isOpen, i = e.currentTarget, n = i.value;
+      const i = this.isOpen, s = e.currentTarget, a = s.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 = I(this.computedValue(), this.$props.textField) || "");
-        const r = a && a === n, d = a && a.length > n.length;
-        r || d || !l ? this.suggested = "" : this.suggestValue(n);
+        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);
       }
-      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);
+      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);
     },
     clearButtonClick(e) {
       const t = this.base.initState();
@@ -463,28 +465,31 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
     getFocusedIndex() {
       const e = this.computedValue(), {
         dataItems: t = [],
-        textField: s,
-        dataItemKey: i,
-        virtual: n = {
+        textField: i,
+        dataItemKey: s,
+        virtual: a = {
           skip: 0
         },
-        focusedItemIndex: l = ee
-      } = this.$props, a = this.$props.filter ? this.$props.filter : this.currentText;
-      return b(e) && a === void 0 ? t.findIndex((r) => k(r, e, i)) : a ? l(t, a, s) : n.skip === 0 ? 0 : -1;
+        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;
     },
     suggestValue(e) {
       const {
         dataItems: t,
-        textField: s
+        textField: i
       } = this.$props;
-      this.suggested = Te(e, t, s);
+      this.suggested = De(e, t, i);
     },
     setValidity() {
-      this.input && this.input.setCustomValidity && this.input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || _e);
+      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);
     },
     triggerOnChange(e, t) {
-      const s = this.computedValue();
-      !b(s) && !b(e) || k(s, e, this.$props.dataItemKey) || (this.$props.value === void 0 && (this.currentValue = e), this.valueDuringOnChange = e, t.events.push({
+      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({
         type: "change"
       }));
     },
@@ -502,72 +507,80 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
       this.isScrolling = !0;
       const {
         vs: t,
-        list: s
+        list: i
       } = this.base;
       t.scrollHandler(e);
-      const i = this.base.initState(), {
-        groupField: n
+      const s = this.base.initState(), {
+        groupField: a
       } = this.$props;
       let {
         dataItems: l = []
-      } = this.$props, a;
-      if (!n || !l.length)
+      } = this.$props, n;
+      if (!a || !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));
+      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));
     },
     getInputText(e, t) {
-      return b(e) && e !== "" ? String(e) : b(t) ? String(t) : "";
+      return v(e) && e !== "" ? String(e) : v(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);
     }
   },
   render() {
     let {
       dir: e,
       disabled: t,
-      clearButton: s,
-      label: i,
-      textField: n,
+      clearButton: i,
+      label: s,
+      textField: a,
       className: l,
-      style: a,
+      style: n,
       loading: r,
-      icon: d,
-      svgIcon: u,
-      iconClassName: h,
-      virtual: g,
+      icon: u,
+      svgIcon: g,
+      iconClassName: d,
+      virtual: f,
       size: m,
-      fillMode: S,
+      fillMode: y,
       rounded: D,
       adaptiveTitle: F,
       header: T,
       footer: w,
       groupStickyHeaderItemRender: A,
-      placeholder: x,
-      inputAttributes: se
+      placeholder: k,
+      inputAttributes: ne
     } = this.$props;
-    const ne = this.currentFocused, ae = !this.$props.validityStyles || this.validity().valid, j = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, W = I(this.computedValue(), n), q = this.getInputText(j, W), le = s && (!!q || b(this.computedValue())), C = this.base, y = C.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), 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({}, {
       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 = I(this.$props.dataItems[0], this.$props.groupField));
-    const re = (p) => {
+    }, 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 f = p.event.target.value;
-      c.data.text = f, this.base.filterChanged(f, c), this.applyState(c);
-    }, de = () => [o("div", {
+      const h = p.event.target.value;
+      c.data.text = h, this.base.filterChanged(h, c), this.applyState(c);
+    }, pe = () => [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", {
+    }, [F]), k && o("div", {
       class: "k-actionsheet-subtitle k-text-center"
-    }, [x])]), o("div", {
+    }, [k])]), o("div", {
       class: "k-actionsheet-actions"
-    }, [o(Z, {
+    }, [o(ee, {
       tabIndex: 5,
       "aria-label": "Cancel",
       "aria-disabled": "false",
@@ -575,74 +588,74 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
       fillMode: "flat",
       onClick: this.toggleBtnClick,
       icon: "x",
-      svgIcon: Le
+      svgIcon: Ee
     }, null)])]), o("div", {
       class: "k-actionsheet-titlebar-group k-actionsheet-filter"
-    }, [fe.call(this)])], ue = $.call(this, de, O.call(this)), pe = () => {
-      const p = C.getTemplateDef.call(this, T, z), c = C.getTemplateDef.call(this, w, z), f = $.call(this, A, O.call(this)), v = this.$props.dataItems || [];
+    }, [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", {
         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-${W[m] || m}`]: R ? !1 : m,
           "k-list-lg": !!R,
-          "k-virtual-list": y.enabled
+          "k-virtual-list": S.enabled
         })
       }, [T && o("div", {
         class: "k-list-header"
-      }, [T]), this.group && v.length !== 0 && o(J, {
+      }, [T]), this.group && b.length !== 0 && o(Q, {
         group: this.group,
-        render: f
-      }, null), U.call(this), c && o("div", {
+        render: h
+      }, null), Y.call(this), c && o("div", {
         class: "k-list-footer"
       }, [c])])]);
-    }, ce = $.call(this, pe, O.call(this)), he = function() {
-      return o(je, {
+    }, fe = $.call(this, he, C.call(this)), ge = function() {
+      return o(Ke, {
         expand: M,
         animation: !0,
         animationStyles: this.animationStyles,
         className: this.classNameAdaptive,
         contentClassName: "!k-overflow-hidden",
-        header: ue,
-        content: ce,
+        header: ce,
+        content: fe,
         onClose: this.toggleBtnClick,
         navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
       }, null);
-    }, fe = function() {
+    }, me = function() {
       const c = this.base.initState().data.text;
-      return o(Ke, {
+      return o(ze, {
         adaptiveMode: !0,
         value: c,
         ref: "filterInput",
-        onChange: (f) => re(f),
+        onChange: (h) => ue(h),
         onKeydown: this.onInputKeyDown,
         size: this.$props.size,
         rounded: this.$props.rounded,
         fillMode: this.$props.fillMode
       }, null);
-    }, U = function() {
+    }, Y = function() {
       let p;
       const {
         dataItemKey: c,
-        groupField: f
+        groupField: h
       } = this.$props;
-      let v = this.$props.dataItems || [];
-      const B = $.call(this, this.$props.itemRender, O.call(this)), N = $.call(this, this.$props.groupHeaderItemRender, O.call(this)), P = $.call(this, this.$props.listNoDataRender, O.call(this));
-      g || (g = {
+      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 = {
         skip: 0
       });
-      const H = g.skip, be = `translateY(${y.translate}px)`, Se = M ? this.getFocusedIndex() : void 0, ye = b(j) && j !== W ? null : this.computedValue();
-      return f && (v = this.base.getGroupedDataModernMode(v, f)), o(we, {
-        id: C.listBoxId,
+      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: v,
-        focusedIndex: Se,
-        value: ye,
-        textField: n,
+        dataItems: b,
+        focusedIndex: Ie,
+        value: ke,
+        textField: a,
         valueField: c,
-        optionsGuid: C.guid,
+        optionsGuid: x.guid,
         ref: "list",
         wrapperStyle: {
           maxHeight: R ? void 0 : E.height
@@ -650,28 +663,28 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
         wrapperCssClass: L("k-list-content", {
           "k-list-scroller": !this.$props.virtual
         }),
-        listStyle: y.enabled ? {
-          transform: be
+        listStyle: S.enabled ? {
+          transform: Se
         } : void 0,
         key: "listkey",
         skip: H,
         onListclick: this.handleItemClick,
         itemRender: B,
         groupHeaderItemRender: N,
-        noDataRender: P,
-        groupField: f,
+        noDataRender: z,
+        groupField: h,
         onScroll: this.onScroll
-      }, ze(p = ge.call(this)) ? p : {
+      }, Ge(p = ve.call(this)) ? p : {
         default: () => [p]
       });
-    }, ge = function() {
-      return y.enabled && o("div", {
+    }, ve = function() {
+      return S.enabled && o("div", {
         ref: "scrollElement",
         key: "scrollElementKey"
       }, null);
-    }, me = function() {
-      const p = $.call(this, this.$props.groupStickyHeaderItemRender, O.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 = I(v[0], this.$props.groupField)), o(De, {
+    }, 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, {
         ref: "container",
         onMousedown: (B) => B.preventDefault(),
         width: this.popupWidth,
@@ -680,7 +693,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
           anchor: this.anchor,
           show: M,
           popupClass: L(E.popupClass, "k-list", {
-            [`k-list-${G[m] || m}`]: m,
+            [`k-list-${W[m] || m}`]: m,
             "k-virtual-list": this.base.vs.enabled
           }),
           className: L("k-list-container", E.className)
@@ -689,27 +702,27 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
       }, {
         default: () => [c && o("div", {
           class: "k-list-header"
-        }, [c]), this.group && v.length !== 0 && o(J, {
+        }, [c]), this.group && b.length !== 0 && o(Q, {
           group: this.group,
           render: p
-        }, null), U.call(this), f && o("div", {
+        }, null), Y.call(this), h && o("div", {
           class: "k-list-footer"
-        }, [f])]
+        }, [h])]
       });
-    }, ve = function(p, c) {
+    }, ye = function(p, c) {
       const {
-        tabIndex: f,
-        dataItems: v = [],
+        tabIndex: h,
+        dataItems: b = [],
         dataItemKey: B
       } = this.$props;
-      g || (g = {
+      f || (f = {
         skip: 0
       });
-      const N = this.computedValue(), P = Math.max(0, v.findIndex((H) => k(H, N, B)));
-      return this.suggested && !k(this.valueOnDidUpdate, N, B) && (this.suggested = ""), o(Be, {
+      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: x,
-        tabIndex: f || void 0,
+        placeholder: k,
+        tabIndex: h || void 0,
         accessKey: this.$props.accessKey,
         value: p + this.suggested,
         suggestedText: this.suggested,
@@ -723,66 +736,66 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
         disabled: t,
         expanded: M,
         owns: this.base.listBoxId,
-        activedescendant: this.base.guid + "-" + (P + g.skip),
+        activedescendant: this.base.guid + "-" + (z + f.skip),
         ariaLabelledBy: this.$props.ariaLabelledBy,
         ariaDescribedBy: this.$props.ariaDescribedBy,
         ariaLabel: this.$props.ariaLabel,
-        inputAttributes: se
+        inputAttributes: ne
       }, null);
-    }, Y = [z(function() {
+    }, J = [_(function() {
       return o("span", {
         class: L("k-combobox k-input", {
-          [`k-input-${G[m] || m}`]: m,
-          [`k-rounded-${Pe[D] || D}`]: D,
-          [`k-input-${S}`]: S,
-          "k-invalid": !ae,
+          [`k-input-${W[m] || m}`]: m,
+          [`k-rounded-${_e[D] || D}`]: D,
+          [`k-input-${y}`]: y,
+          "k-invalid": !le,
           "k-loading": r,
           "k-required": this.required,
           "k-disabled": t,
-          "k-focus": ne && !t
+          "k-focus": ae && !t
         }, l),
-        ref: Ve(this, "kendoAnchor"),
-        style: i ? {
-          ...a,
+        ref: Te(this, "kendoAnchor"),
+        style: s ? {
+          ...n,
           width: void 0
-        } : a,
+        } : n,
         dir: e
-      }, [ve.call(this, q || "", K), le && !r && o(Me, {
+      }, [ye.call(this, U || "", K), re && !r && o(He, {
         onClearclick: this.clearButtonClick,
         key: "clearbutton"
-      }, null), r && o(Fe, {
+      }, null), r && o(Be, {
         name: "loading",
         class: "k-input-loading-icon",
         key: "loading"
-      }, null), o(Z, {
+      }, null), o(ee, {
         type: "button",
         tabIndex: -1,
-        "aria-label": oe,
+        "aria-label": de,
         size: m,
-        fillMode: S,
+        fillMode: y,
         rounded: null,
         class: "k-input-button",
-        icon: d || "caret-alt-down",
-        svgIcon: u || Ee,
-        iconClass: h,
+        icon: u || "caret-alt-down",
+        svgIcon: g || Ne,
+        iconClass: d,
         onClick: this.toggleBtnClick,
         onMousedown: (p) => p.preventDefault()
-      }, null), !R && me.call(this)]);
+      }, null), !R && be.call(this)]);
     }.call(this), {
       ...this.$attrs
-    }), R && he.call(this)];
-    return i ? o("span", {
+    }), R && ge.call(this)];
+    return s ? o("span", {
       class: this.spanClassNames,
       onFocusin: this.handleFocus,
       dir: this.$props.dir
-    }, [Y, this.$props.label ? K ? o("label", {
+    }, [J, this.$props.label ? K ? o("label", {
       for: K,
       class: "k-floating-label"
     }, [this.$props.label]) : o("span", {
       class: "k-label"
-    }, [this.$props.label]) : null]) : Y;
+    }, [this.$props.label]) : null]) : J;
   }
 });
 export {
-  rt as ComboBox
+  ut as ComboBox
 };