@progress/kendo-vue-dropdowns 8.4.0-develop.3 → 8.4.0-develop.4

package/DropDownList/DropDownList.mjs

@@ -5,29 +5,29 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as Se, createVNode as n, h as T, ref as N, isVNode as $e } from "vue";
-import { kendoThemeMaps as Ce, templateRendering as x, getListeners as O, getTemplate as xe, Keys as m, canUseDOM as Oe, getRef as A, guid as W, classNames as B, noop as G, getTabIndex as we, setRef as q, Icon as Fe } from "@progress/kendo-vue-common";
-import { Button as U } from "@progress/kendo-vue-buttons";
+import { defineComponent as $e, createVNode as n, h as T, ref as N, isVNode as Ce } from "vue";
+import { kendoThemeMaps as xe, templateRendering as C, getListeners as x, getTemplate as Oe, Keys as m, canUseDOM as A, getRef as W, guid as G, classNames as B, noop as q, getTabIndex as we, setRef as U, Icon as Fe } from "@progress/kendo-vue-common";
+import { Button as Y } from "@progress/kendo-vue-buttons";
 import { ListContainer as De } from "../common/ListContainer.mjs";
 import { ListFilter as Ve } from "../common/ListFilter.mjs";
 import { ListDefaultItem as Me } from "../common/ListDefaultItem.mjs";
 import { List as Te } from "../common/List.mjs";
 import Be from "../common/DropDownBase.mjs";
-import { GroupStickyHeader as Y } from "../common/GroupStickyHeader.mjs";
-import { selectButton as J, messages as Le } from "../messages/main.mjs";
+import { GroupStickyHeader as J } from "../common/GroupStickyHeader.mjs";
+import { selectButton as Q, messages as Le } from "../messages/main.mjs";
 import { provideLocalizationService as Re } from "@progress/kendo-vue-intl";
 import { MOBILE_MEDIUM_DEVICE as Ne, MOBILE_SMALL_DEVICE as Ee } from "../common/constants.mjs";
 import { ActionSheet as He } from "@progress/kendo-vue-layout";
-import { getItemValue as F, areSame as I, isPresent as Q, getFocusedItem as Ke, sameCharsOnly as Pe, shuffleData as _e, matchText as X, preventDefaultNonInputs as Z } from "../common/utils.mjs";
+import { getItemValue as F, areSame as I, isPresent as X, getFocusedItem as Ke, sameCharsOnly as Pe, shuffleData as _e, matchText as Z, preventDefaultNonInputs as ee } from "../common/utils.mjs";
 import { xIcon as je, chevronDownIcon as ze } from "@progress/kendo-svg-icons";
 const {
   sizeMap: E,
   roundedMap: Ae
-} = Ce;
+} = xe;
 function We(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !$e(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Ce(e);
 }
-const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
+const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ $e({
   name: "KendoDropDownList",
   model: {
     event: "changemodel"
@@ -214,13 +214,15 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
     },
     isOpen: function() {
       setTimeout(() => {
+        if (!A || typeof document == "undefined")
+          return;
         const e = document.querySelector(".k-list-item");
         this.itemHeight = this.base.getListItemHeight(e);
       }, 100);
     }
   },
   created() {
-    this.observer = null, this.valueDuringOnChange = void 0, this.currentText = void 0, this.currentValue = void 0, this.prevCurrentValue = this.computedValue(), this.currentFocused = void 0, this.currentOpened = void 0, this.base = new Be(this), this.anchor = W(), this.inputId = W();
+    this.observer = null, this.valueDuringOnChange = void 0, this.currentText = void 0, this.currentValue = void 0, this.prevCurrentValue = this.computedValue(), this.currentFocused = void 0, this.currentOpened = void 0, this.base = new Be(this), this.anchor = G(), this.inputId = G();
   },
   setup() {
     const e = N(null), t = N(null), s = N(null);
@@ -231,7 +233,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
     };
   },
   mounted() {
-    this.observer = Oe && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.select = A(this, "select"), this.base.wrapper = A(this, "kendoAnchor"), this.base.didMount(), this.setValidity();
+    this.observer = A && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.select = W(this, "select"), this.base.wrapper = W(this, "kendoAnchor"), this.base.didMount(), this.setValidity();
   },
   updated() {
     var v;
@@ -241,15 +243,15 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       virtual: s,
       groupField: l,
       textField: o
-    } = this.$props, i = this.isOpen, d = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, a = !d && i, r = this.$refs.list, h = this.$refs.filterInput, c = this.$refs.scrollElement;
-    if (this.$refs.scroller, r && (this.base.vs.list = r.list, this.base.list = r.list), c && (this.base.vs.scrollElement = c), h && (this.filterInput = h), r && e.length && this.base.vs.scrollerRef(r.$el), this.$props.popupSettings.animate || a && this.onPopupOpened(), s && this.virtualTotalHasChanged)
+    } = this.$props, i = this.isOpen, d = this.prevOpened !== void 0 ? this.prevOpened : this.prevCurrentOpened, a = !d && i, r = this.$refs.list, c = this.$refs.filterInput, f = this.$refs.scrollElement;
+    if (this.$refs.scroller, r && (this.base.vs.list = r.list, this.base.list = r.list), f && (this.base.vs.scrollElement = f), c && (this.filterInput = c), r && e.length && this.base.vs.scrollerRef(r.$el), this.$props.popupSettings.animate || a && this.onPopupOpened(), s && this.virtualTotalHasChanged)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset(), this.virtualTotalHasChanged = !1;
     else {
       const p = this.computedValue(), g = this.prevCurrentValue;
-      let u = e.findIndex((b) => I(b, p, t));
-      l && (u = (v = this.base.getGroupedDataModernMode(e, l)) == null ? void 0 : v.indexOf(p));
+      let h = e.findIndex((b) => I(b, p, t));
+      l && (h = (v = this.base.getGroupedDataModernMode(e, l)) == null ? void 0 : v.indexOf(p));
       const k = !I(g, p, t);
-      a && s ? (this.base.scrollToVirtualItem(s, u), this.prevCurrentOpened = !0) : a && !s ? (e && e.length !== 0 && this.base.resetGroupStickyHeader(e[0][l], this), this.base.scrollToItem(u), this.prevCurrentOpened = !0) : i && d && p && k && !this._navigated ? this.base.scrollToItem(u) : i && d && this._navigated && (this._navigated && s && s.skip === 0 ? this.base.vs.reset() : this._navigated && s && s.skip === s.total - s.pageSize && this.base.vs.scrollToEnd());
+      a && s ? (this.base.scrollToVirtualItem(s, h), this.prevCurrentOpened = !0) : a && !s ? (e && e.length !== 0 && this.base.resetGroupStickyHeader(e[0][l], this), this.base.scrollToItem(h), this.prevCurrentOpened = !0) : i && d && p && k && !this._navigated ? this.base.scrollToItem(h) : i && d && this._navigated && (this._navigated && s && s.skip === 0 ? this.base.vs.reset() : this._navigated && s && s.skip === s.total - s.pageSize && this.base.vs.scrollToEnd());
     }
     this._navigated = !1, this.prevCurrentValue = this.computedValue(), this.setValidity();
   },
@@ -297,7 +299,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
     },
     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), !Q(e) && this.$props.defaultItem !== void 0 && (e = this.$props.defaultItem), this.valuePrimitive && this.findByFieldValue(this.valueField, e) || 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), !X(e) && this.$props.defaultItem !== void 0 && (e = this.$props.defaultItem), this.valuePrimitive && this.findByFieldValue(this.valueField, e) || e;
     },
     findByFieldValue(e, t) {
       const s = this.dataItems.findIndex((l) => F(l, e) === t);
@@ -334,13 +336,13 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
           total: 0,
           pageSize: 0
         }
-      } = this.$props, d = this.base.vs, a = this.computedValue(), r = s.findIndex((c) => I(c, a, o)), h = this.base.navigation.navigate({
+      } = this.$props, d = this.base.vs, a = this.computedValue(), r = s.findIndex((f) => I(f, a, o)), c = this.base.navigation.navigate({
         current: i.skip + r,
         max: (d.enabled ? i.total : s.length) - 1,
         min: l !== void 0 ? -1 : 0,
         keyCode: t
       });
-      h !== void 0 && this.handleItemSelect(h, e), this.applyState(e);
+      c !== void 0 && this.handleItemSelect(c, e), this.applyState(e);
     },
     search(e) {
       clearTimeout(this.typingTimeout), this.$props.filterable || (this.typingTimeout = setTimeout(() => this.searchState.word = "", this.$props.delay), this.selectNext(e));
@@ -355,18 +357,18 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         itemIndex: D
       }));
       const o = this.searchState.word, i = this.searchState.last, d = Pe(o, i);
-      let a = l.length, r = Math.max(0, t.findIndex((b) => I(b, this.computedValue(), s))), h;
-      this.$props.defaultItem && (h = {
+      let a = l.length, r = Math.max(0, t.findIndex((b) => I(b, this.computedValue(), s))), c;
+      this.$props.defaultItem && (c = {
         item: this.$props.defaultItem,
         itemIndex: -1
-      }, a += 1, r += 1), r += d ? 1 : 0, l = _e(l, r, h);
-      let c, v, p, g = 0;
+      }, a += 1, r += 1), r += d ? 1 : 0, l = _e(l, r, c);
+      let f, v, p, g = 0;
       const {
-        textField: u,
+        textField: h,
         ignoreCase: k
       } = this.$props;
       for (; g < a; ) {
-        if (c = F(l[g].item, u), v = d && X(c, i, k), p = X(c, o, k), v || p) {
+        if (f = F(l[g].item, h), v = d && Z(f, i, k), p = Z(f, o, k), v || p) {
           g = l[g].itemIndex;
           break;
         }
@@ -389,15 +391,15 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
           total: 0,
           pageSize: 0
         }
-      } = this.$props, d = this.isOpen, a = e.keyCode, r = a === m.home || a === m.end, h = a === m.up || a === m.down, c = !d && (e.altKey && a === m.down || a === m.enter || a === m.space), v = d && (e.altKey && a === m.up || a === m.esc), p = s && (a === m.left || a === m.right), g = h || !l && (p || r), u = this.base.initState();
-      if (u.event = e, !o) {
+      } = this.$props, d = this.isOpen, a = e.keyCode, r = a === m.home || a === m.end, c = a === m.up || a === m.down, f = !d && (e.altKey && a === m.down || a === m.enter || a === m.space), v = d && (e.altKey && a === m.up || a === m.esc), p = s && (a === m.left || a === m.right), g = c || !l && (p || r), h = this.base.initState();
+      if (h.event = e, !o) {
         if (r && this.base.vs.enabled)
-          a === m.home ? i.skip !== 0 ? (this.base.triggerOnPageChange(u, 0, i.pageSize), this._navigated = !0) : this.triggerOnChange(t[0], u) : i.skip < i.total - i.pageSize ? (this.base.triggerOnPageChange(u, i.total - i.pageSize, i.pageSize), this._navigated = !0) : this.triggerOnChange(t[t.length - 1], u);
+          a === m.home ? i.skip !== 0 ? (this.base.triggerOnPageChange(h, 0, i.pageSize), this._navigated = !0) : this.triggerOnChange(t[0], h) : i.skip < i.total - i.pageSize ? (this.base.triggerOnPageChange(h, i.total - i.pageSize, i.pageSize), this._navigated = !0) : this.triggerOnChange(t[t.length - 1], h);
         else if (d && a === m.enter) {
           const k = this.focusedIndex();
-          k !== void 0 && this.handleItemSelect(k, u), this.base.togglePopup(u), e.preventDefault();
-        } else c || v ? (this.adaptiveState && this.handleWrapperClick(e), this.base.togglePopup(u), e.preventDefault()) : g && (this.onNavigate(u, a), e.preventDefault());
-        this.applyState(u);
+          k !== void 0 && this.handleItemSelect(k, h), this.base.togglePopup(h), e.preventDefault();
+        } else f || v ? (this.adaptiveState && this.handleWrapperClick(e), this.base.togglePopup(h), e.preventDefault()) : g && (this.onNavigate(h, a), e.preventDefault());
+        this.applyState(h);
       }
     },
     handleItemClick(e, t) {
@@ -444,7 +446,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       });
     },
     focusedIndex() {
-      const e = Q(this.$props.filter) ? this.$props.filter : this.currentText, {
+      const e = X(this.$props.filter) ? this.$props.filter : this.currentText, {
         dataItems: t = [],
         virtual: s = {
           skip: 0
@@ -452,7 +454,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         dataItemKey: l,
         textField: o,
         focusedItemIndex: i
-      } = this.$props, d = this.computedValue(), r = !(t.findIndex((h) => I(h, d, l)) < 0 && !this.$props.defaultItem);
+      } = this.$props, d = this.computedValue(), r = !(t.findIndex((c) => I(c, d, l)) < 0 && !this.$props.defaultItem);
       return !r && e && s.skip === 0 ? i ? i(t, e, o) : t.indexOf(Ke(t, e, o)) : !r && s.skip === 0 ? 0 : void 0;
     },
     focusElement(e) {
@@ -492,9 +494,9 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       } = this.$props, d;
       if (!o || !i.length)
         return;
-      const a = s && ((v = s.querySelector(".k-list-item")) == null ? void 0 : v.offsetHeight) || 0, r = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : a), c = e.target.scrollTop - t.skip * r;
+      const a = s && ((v = s.querySelector(".k-list-item")) == null ? void 0 : v.offsetHeight) || 0, r = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : a), f = e.target.scrollTop - t.skip * r;
       o && (i = this.base.getGroupedDataModernMode(i, o), d = i[0][o]);
-      for (let p = 1; p < i.length && !(r * p > c); p++)
+      for (let p = 1; p < i.length && !(r * p > f); p++)
         i[p] && i[p][o] && (d = i[p][o]);
       d !== this.group && (l.data.group = d, this.applyState(l));
     }
@@ -512,44 +514,44 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       rounded: d,
       fillMode: a,
       dataItemKey: r,
-      dataItems: h = [],
-      disabled: c,
+      dataItems: c = [],
+      disabled: f,
       tabIndex: v,
       loading: p,
       icon: g,
-      svgIcon: u,
+      svgIcon: h,
       iconClassName: k,
       adaptiveTitle: b,
       header: D,
       footer: H,
-      groupStickyHeaderItemRender: ee
-    } = this.$props, $ = this.isOpen, te = F(this.computedValue(), this.$props.textField), ie = !this.$props.validityStyles || this.validity().valid, S = this.base, w = S.vs, L = this.$props.id || this.inputId;
+      groupStickyHeaderItemRender: te
+    } = this.$props, O = this.isOpen, ie = F(this.computedValue(), this.$props.textField), se = !this.$props.validityStyles || this.validity().valid, S = this.base, w = S.vs, L = this.$props.id || this.inputId;
     w.enabled = this.$props.virtual !== void 0;
     const V = Object.assign({}, {
       animate: !0,
       height: "200px"
-    }, this.$props.popupSettings), se = Re(this).toLanguageString(J, Le[J]), M = this.adaptiveState;
+    }, this.$props.popupSettings), ae = Re(this).toLanguageString(Q, Le[Q]), M = this.adaptiveState;
     this.group === void 0 && this.$props.groupField !== void 0 && (this.group = F(this.$props.dataItems[0], this.$props.groupField));
-    const ae = x.call(this, this.$props.valueRender, O.call(this)), ne = this.currentFocused, K = this.primitiveValue(), le = h.findIndex((f) => I(f, K, r)), oe = n("span", {
+    const ne = C.call(this, this.$props.valueRender, x.call(this)), le = this.currentFocused, K = this.primitiveValue(), oe = c.findIndex((u) => I(u, K, r)), re = n("span", {
       class: "k-input-inner",
       id: this.dropDownListId
     }, [n("span", {
       class: "k-input-value-text"
-    }, [te])]);
-    let re = xe.call(this, {
+    }, [ie])]);
+    let de = Oe.call(this, {
       h: T,
-      template: ae,
-      defaultRendering: oe,
+      template: ne,
+      defaultRendering: re,
       additionalProps: {
         value: this.computedValue(),
         ...this.$data
       }
     });
-    const de = function(f) {
+    const ue = function(u) {
       return n("select", {
         name: this.$props.name,
         id: L,
-        ref: q(this, "select"),
+        ref: U(this, "select"),
         tabindex: -1,
         "aria-hidden": !0,
         title: this.$props.label,
@@ -562,7 +564,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
           left: "50%"
         }
       }, [n("option", {
-        value: this.$props.valueMap ? this.$props.valueMap.call(void 0, f) : f
+        value: this.$props.valueMap ? this.$props.valueMap.call(void 0, u) : u
       }, null)]);
     }, pe = () => [n("div", {
       class: "k-actionsheet-titlebar-group k-hbox"
@@ -574,7 +576,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       class: "k-actionsheet-subtitle k-text-center"
     }, null)]), n("div", {
       class: "k-actionsheet-actions"
-    }, [n(U, {
+    }, [n(Y, {
       tabIndex: 5,
       "aria-label": "Cancel",
       "aria-disabled": "false",
@@ -585,59 +587,59 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
       svgIcon: je
     }, null)])]), n("div", {
       class: "k-actionsheet-titlebar-group k-actionsheet-filter"
-    }, [j.call(this)])], ue = x.call(this, pe, O.call(this)), he = () => {
-      const f = S.getTemplateDef.call(this, D, T), y = S.getTemplateDef.call(this, H, T), C = x.call(this, ee, O.call(this));
+    }, [j.call(this)])], he = C.call(this, pe, x.call(this)), ce = () => {
+      const u = S.getTemplateDef.call(this, D, T), y = S.getTemplateDef.call(this, H, T), $ = C.call(this, te, x.call(this));
       return n("div", {
         class: "k-list-container"
-      }, [f && n("div", {
+      }, [u && n("div", {
         class: "k-list-header"
-      }, [f]), n("div", {
+      }, [u]), n("div", {
         class: B("k-list", {
           [`k-list-${E[i] || i}`]: M ? !1 : i,
           "k-list-lg": !!M,
           "k-virtual-list": w.enabled
         })
-      }, [P.call(this), this.group && h.length !== 0 && n(Y, {
+      }, [P.call(this), this.group && c.length !== 0 && n(J, {
         group: this.group,
-        render: C
+        render: $
       }, null), _.call(this), y && n("div", {
         class: "k-list-footer"
       }, [y])])]);
-    }, ce = x.call(this, he, O.call(this)), fe = function() {
+    }, fe = C.call(this, ce, x.call(this)), me = function() {
       return n(He, {
-        expand: $,
+        expand: O,
         animation: !0,
         animationStyles: this.animationStyles,
         className: this.classNameAdaptive,
         contentClassName: "!k-overflow-hidden",
-        header: ue,
-        content: ce,
+        header: he,
+        content: fe,
         onClose: this.handleWrapperClick,
         navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
       }, null);
     }, P = function() {
       const {
-        textField: f,
+        textField: u,
         defaultItem: y
       } = this.$props;
       return y !== void 0 && n(Me, {
         defaultItem: y,
-        textField: f,
+        textField: u,
         selected: I(this.computedValue(), y, r),
         key: "defaultitemkey",
         onDefaultitemclick: this.handleDefaultItemClick
       }, null);
     }, _ = function() {
-      let f;
+      let u;
       const {
         textField: y,
-        groupField: C
+        groupField: $
       } = this.$props;
       let R = this.$props.dataItems || [];
-      const ve = x.call(this, this.$props.itemRender, O.call(this)), be = x.call(this, this.$props.groupHeaderItemRender, O.call(this)), ye = x.call(this, this.$props.listNoDataRender, O.call(this)), Ie = o.skip, ke = `translateY(${w.translate}px)`;
-      return C && (R = this.base.getGroupedDataModernMode(R, C)), n(Te, {
+      const be = C.call(this, this.$props.itemRender, x.call(this)), ye = C.call(this, this.$props.groupHeaderItemRender, x.call(this)), Ie = C.call(this, this.$props.listNoDataRender, x.call(this)), ke = o.skip, Se = `translateY(${w.translate}px)`;
+      return $ && (R = this.base.getGroupedDataModernMode(R, $)), n(Te, {
         id: this.base.listBoxId,
-        show: $,
+        show: O,
         dataItems: R.slice(),
         focusedIndex: this.focusedIndex(),
         value: this.computedValue(),
@@ -650,23 +652,23 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         },
         wrapperCssClass: "k-list-content",
         listStyle: w.enabled ? {
-          transform: ke
+          transform: Se
         } : void 0,
         key: "listkey",
-        skip: Ie,
+        skip: ke,
         onListclick: this.handleItemClick,
-        itemRender: ve,
-        groupHeaderItemRender: be,
-        noDataRender: ye,
-        groupField: C,
+        itemRender: be,
+        groupHeaderItemRender: ye,
+        noDataRender: Ie,
+        groupField: $,
         onScroll: this.onScroll
-      }, We(f = me.call(this)) ? f : {
-        default: () => [f]
+      }, We(u = ge.call(this)) ? u : {
+        default: () => [u]
       });
     }, j = function() {
-      const f = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
+      const u = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
       return this.$props.filterable && n(Ve, {
-        value: f,
+        value: u,
         ref: "filterInput",
         onChange: this.handleListFilterChange,
         onKeydown: this.handleKeyDown,
@@ -676,16 +678,16 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
         ariaControlsId: this.base.listBoxId,
         ariaActivedescendantId: `option-${this.base.guid}-${this.focusedIndex()}`
       }, null);
-    }, me = function() {
+    }, ge = function() {
       return w.enabled && n("div", {
         ref: "scrollElement",
         key: "scrollElementKey"
       }, null);
-    }, ge = function() {
-      const f = x.call(this, this.$props.groupStickyHeaderItemRender, O.call(this)), y = S.getTemplateDef.call(this, D), C = S.getTemplateDef.call(this, H);
+    }, ve = function() {
+      const u = C.call(this, this.$props.groupStickyHeaderItemRender, x.call(this)), y = S.getTemplateDef.call(this, D), $ = S.getTemplateDef.call(this, H);
       return n(De, {
         ref: "container",
-        onMousedown: Z,
+        onMousedown: ee,
         dir: l !== void 0 ? l : S.dirCalculated,
         width: this.popupWidth,
         popupSettings: {
@@ -696,33 +698,34 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
           }),
           className: B("k-list-container", V.className),
           anchor: this.anchor,
-          show: $
+          show: O
         },
         onOpen: this.onPopupOpened,
         onClose: this.onPopupClosed,
         onBlur: this.handleBlur
       }, {
-        default: () => [j.call(this), P.call(this), this.group && h.length !== 0 && n(Y, {
+        default: () => [j.call(this), P.call(this), this.group && c.length !== 0 && n(J, {
           group: this.group,
-          render: f
+          render: u
         }, null), y && n("div", {
           class: "k-list-header"
-        }, [y]), _.call(this), C && n("div", {
+        }, [y]), _.call(this), $ && n("div", {
           class: "k-list-footer"
-        }, [C])]
+        }, [$])]
       });
     };
     this.$props.virtual !== void 0 && (S.vs.skip = o.skip, S.vs.total = o.total, S.vs.pageSize = o.pageSize);
     const z = [T(function() {
+      var u;
       return n("span", {
-        ref: q(this, "kendoAnchor"),
+        ref: U(this, "kendoAnchor"),
         class: B("k-dropdownlist k-picker", t, {
           [`k-picker-${E[i] || i}`]: i,
           [`k-rounded-${Ae[d] || d}`]: d,
           [`k-picker-${a}`]: a,
-          "k-focus": ne,
-          "k-disabled": c,
-          "k-invalid": !ie,
+          "k-focus": le,
+          "k-disabled": f,
+          "k-invalid": !se,
           "k-loading": p,
           "k-required": this.required
         }),
@@ -731,43 +734,43 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
           width: void 0
         } : e,
         dir: l,
-        onMousedown: $ ? Z : G,
+        onMousedown: O ? ee : q,
         onFocusin: this.handleFocus,
         onFocusout: this.handleBlur,
-        tabindex: we(v, c),
+        tabindex: (u = we(v, f)) != null ? u : 0,
         accesskey: this.$props.accessKey,
         onKeydown: this.handleKeyDown,
         onKeypress: this.handleKeyPress,
         role: "combobox",
-        onClick: c ? G : this.handleWrapperClick,
-        "aria-disabled": c || void 0,
-        "aria-haspopup": "listbox",
-        "aria-expanded": $ || !1,
-        "aria-controls": $ ? this.base.listBoxId : void 0,
-        "aria-activedescendant": $ ? "option-" + this.base.guid + "-" + (le + (o ? o.skip : 0)) : void 0,
+        onClick: f ? q : this.handleWrapperClick,
+        "aria-disabled": f || void 0,
+        "aria-haspopup": !0,
+        "aria-expanded": O || !1,
+        "aria-owns": this.base.listBoxId,
+        "aria-activedescendant": O ? "option-" + this.base.guid + "-" + (oe + (o ? o.skip : 0)) : void 0,
         "aria-label": this.$props.ariaLabel || this.$props.label,
         "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedby": $ ? this.dropDownListId : void 0,
+        "aria-describedBy": this.dropDownListId,
         title: this.$props.title
-      }, [re, p && n(Fe, {
+      }, [de, p && n(Fe, {
         name: "loading",
         class: "k-input-loading-icon",
         key: "loading"
-      }, null), n(U, {
+      }, null), n(Y, {
         type: "button",
         tabIndex: -1,
         size: i,
         fillMode: a,
         rounded: null,
-        ariaLabel: se,
+        ariaLabel: ae,
         class: "k-input-button",
         icon: g || "chevron-down",
-        svgIcon: u || ze,
+        svgIcon: h || ze,
         iconClass: k
-      }, null), de.call(this, K), !M && ge.call(this)]);
+      }, null), ue.call(this, K), !M && ve.call(this)]);
     }.call(this), {
       ...this.$attrs
-    }), M && fe.call(this)];
+    }), M && me.call(this)];
     return s ? n("span", {
       class: this.spanClassNames,
       onFocusin: this.handleFocus,

package/DropDownTree/DropDownTree.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),t=require("@progress/kendo-vue-common"),ne=require("@progress/kendo-vue-popup"),ae=require("@progress/kendo-vue-intl"),O=require("@progress/kendo-vue-treeview"),b=require("../package-metadata.js"),k=require("../common/utils.js"),oe=require("./ListNoData.js"),c=require("../messages/main.js"),le=require("@progress/kendo-vue-labels"),T=require("../common/ListFilter.js"),B=require("@progress/kendo-vue-buttons"),w=require("@progress/kendo-svg-icons"),K=require("../common/constants.js"),re=require("@progress/kendo-vue-layout"),de=require("../common/DropDownBase.js");function L(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!s.isVNode(e)}const{sizeMap:ue,roundedMap:ce}=t.kendoThemeMaps,pe="Please select a value from the list!",E=e=>e.split("_").map(i=>parseInt(i,10)),S=(e,i)=>{const{validationMessage:n,valid:a,required:o}=e;return{customError:n!==void 0,valid:!!(a!==void 0?a:!o||i),valueMissing:!i}},he=s.defineComponent({name:"KendoDropDownTree",model:{event:"changemodel"},emits:{open:e=>!0,close:e=>!0,focus:e=>!0,blur:e=>!0,change:e=>!0,filterchange:e=>!0,expandchange:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0},props:{opened:{type:Boolean,default:void 0},disabled:Boolean,dir:String,tabIndex:Number,accessKey:String,dataItems:{type:Array,default:function(){return[]}},value:{type:[Object,String,Number,Boolean],default:function(){}},modelValue:{type:[Object,String,Number,Boolean],default:function(){}},valueMap:Function,placeholder:String,dataItemKey:{type:String,required:!0},textField:{type:String,required:!0},selectField:{type:String,default:"selected"},expandField:String,subItemsField:{type:String,default:"items"},className:String,label:String,validationMessage:String,validityStyles:{type:Boolean,default:!0},valid:{type:Boolean,default:void 0},required:Boolean,name:String,id:String,ariaLabel:{type:String,default:void 0},ariaLabelledBy:String,ariaDescribedBy:String,filterable:Boolean,filter:String,loading:Boolean,popupSettings:{type:Object,default:function(){return{animate:!0,height:"200px",anchor:""}}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["flat","outline","solid"].includes(e)}},item:[String,Function,Object],header:[String,Function,Object],footer:[String,Function,Object],valueRender:[String,Function,Object],listNoData:[String,Function,Object],adaptive:{type:Boolean,default:void 0},adaptiveTitle:{type:String,default:void 0}},inject:{kendoLocalizationService:{default:null},adaptiveModeBreakpoints:{default:{small:K.MOBILE_SMALL_DEVICE,medium:K.MOBILE_MEDIUM_DEVICE}}},created(){this.observer=null,t.validatePackage(b.packageMetadata),this.showLicenseWatermark=t.shouldShowValidationUI(b.packageMetadata),this.licenseMessage=t.getLicenseMessage(b.packageMetadata),this.base=new de(this),this.componentGuid=t.guid(),this.anchor=t.guid()},data(){return{showLicenseWatermark:!1,licenseMessage:void 0,currentOpened:!1,focused:!1,filterState:"",currentValue:void 0,popupWidth:"200px",windowWidth:0,initialAdaptiveRenderingValues:void 0}},computed:{wrapperClass(){const{validationMessage:e,valid:i,required:n,validityStyles:a}=this.$props,o=S({validationMessage:e,valid:i,required:n},this.hasValue),d=!a||o.valid,{size:r,rounded:l,fillMode:u}=this.$props;return{"k-dropdowntree":!0,"k-picker":!0,[this.$props.className]:this.$props.className,[`k-picker-${ue[r]||r}`]:r,[`k-rounded-${ce[l]||l}`]:l,[`k-picker-${u}`]:u,"k-focus":this.focused,"k-invalid":!d,"k-loading":this.$props.loading,"k-required":n,"k-disabled":this.$props.disabled}},animationStyles(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?{top:0,width:"100%",height:"100%"}:void 0},classNameAdaptive(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"},adaptiveState(){return this.windowWidth<=this.adaptiveModeBreakpoints.medium&&this.$props.adaptive},isOpen(){return this.opened!==void 0?this.opened:this.currentOpened},computedValue(){return this.value!==void 0?this.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},hasValue(){return k.isPresent(this.computedValue)},currentValueText(){return this.hasValue?k.getItemValue(this.computedValue,this.$props.textField):""}},watch:{isOpen:function(e){e&&this.value?this.initialAdaptiveRenderingValues=[this.value]:this.initialAdaptiveRenderingValues=void 0}},mounted(){this.observer=t.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),document!=null&&document.body&&this.observer&&this.observer.observe(document.body),this.elementRef=t.getRef(this,"kendoAnchor"),this.inputRef=t.getRef(this,"input"),this.selectRef=t.getRef(this,"select"),this.treeViewRef=t.getRef(this,"treeView"),this.skipFocusRef=!1,this.popupRef=t.getRef(this,"popup"),this.calculatePopupWidth()},updated(){this.inputRef=t.getRef(this,"input"),this.treeViewRef=t.getRef(this,"treeView"),this.popupRef&&this.isOpen&&this.hasValue&&this.popupRef.reposition(),this.setValidity(),this.calculatePopupWidth()},render(){let e;const i=this.$props.id||this.componentGuid,{dataItems:n,dataItemKey:a,popupSettings:o,disabled:d,placeholder:r,label:l,name:u,selectField:R,subItemsField:$,validationMessage:q,valid:W,required:F,validityStyles:P,adaptiveTitle:A}=this.$props,g=t.getTabIndex(this.$props.tabIndex,d),x=ae.provideLocalizationService(this),z=S({validationMessage:q,valid:W,required:F},this.hasValue),I=this.adaptiveState,p=this.$props.dir,N=t.templateRendering.call(this,this.item,t.getListeners.call(this)),j=t.templateRendering.call(this,this.valueRender,t.getListeners.call(this)),_=t.templateRendering.call(this,this.$props.header,t.getListeners.call(this)),G=t.templateRendering.call(this,this.$props.footer,t.getListeners.call(this)),v=t.getTemplate.call(this,{h:s.h,template:_}),y=t.getTemplate.call(this,{h:s.h,template:G}),H=t.templateRendering.call(this,this.$props.listNoData,t.getListeners.call(this)),U=s.createVNode(oe.ListNoData,null,L(e=x.toLanguageString(c.nodata,c.messages[c.nodata]))?e:{default:()=>[e]}),M=t.getTemplate.call(this,{h:s.h,defaultRendering:U,template:H}),J=s.createVNode("span",{class:"k-input-value-text"},[this.currentValueText||r]),Q=t.getTemplate.call(this,{h:s.h,defaultRendering:J,template:j,additionalProps:{value:this.computedValue}}),X=()=>[s.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[s.createVNode("div",{class:"k-actionsheet-title"},[s.createVNode("div",{class:"k-text-center"},[A]),s.createVNode("div",{class:"k-actionsheet-subtitle k-text-center"},[r])]),s.createVNode("div",{class:"k-actionsheet-actions"},[s.createVNode(B.Button,{tabIndex:1,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.onWrapperClick,icon:"x",svgIcon:w.xIcon},null)])]),s.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[this.$props.filterable&&s.createVNode(T.ListFilter,{tabIndex:0,value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:t.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,size:h,rounded:D,fillMode:V,onFocus:this.onFocus,onBlur:this.onBlur},null)])],Y=t.templateRendering.call(this,X,t.getListeners.call(this)),Z=()=>{const m=this.base.getTemplateDef.call(this,v,s.h),C=this.base.getTemplateDef.call(this,y,s.h);return[m&&s.createVNode("div",{class:"k-list-header"},[m]),n.length>0?s.createVNode(O.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:g,dataItems:n,focusIdField:a,textField:this.$props.textField,selectField:R,expandField:this.$props.expandField,childrenField:$,expandIcons:!0,onItemclick:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,size:"large",item:N},null):M,C&&s.createVNode("div",{class:"k-list-footer"},[C])]},ee=t.templateRendering.call(this,Z,t.getListeners.call(this)),te=function(){return s.createVNode(re.ActionSheet,{expand:this.isOpen,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,header:Y,content:ee,contentClassName:"!k-overflow-hidden",onClose:this.onWrapperClick,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},ie=!P||z.valid,{size:h,rounded:D,fillMode:V}=this.$props,se=function(){return s.createVNode("span",{class:this.wrapperClass,tabindex:g,accesskey:this.$props.accessKey,id:i,dir:p,ref:t.setRef(this,"kendoAnchor"),onKeydown:this.onWrapperKeyDown,onClick:this.onWrapperClick,onMousedown:this.onWrapperMouseDown,onFocusin:this.onFocus,onFocusout:this.onBlur,role:"combobox","aria-haspopup":"tree","aria-expanded":this.isOpen,"aria-disabled":d||void 0,"aria-label":l||this.$props.ariaLabel,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-required":F||void 0},[s.createVNode("span",{class:"k-input-inner"},[Q]),this.$props.loading&&s.createVNode(t.Icon,{class:"k-input-loading-icon",name:"loading"},null),this.hasValue&&!d&&s.createVNode("span",{onClick:this.onClear,class:"k-clear-value",title:x.toLanguageString(c.clear,c.messages[c.clear]),role:"button",tabindex:-1,onMousedown:m=>m.preventDefault()},[s.createVNode(t.Icon,{name:"x",icon:w.xIcon},null)]),s.createVNode(B.Button,{tabIndex:-1,type:"button","aria-label":"select",class:"k-input-button",size:h,fillMode:V,themeColor:"base",rounded:null,icon:"chevron-down",svgIcon:w.chevronDownIcon},null),s.createVNode("select",{name:u,ref:t.setRef(this,"select"),tabindex:-1,"aria-hidden":!0,title:l,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},[s.createVNode("option",{value:this.$props.valueMap?this.$props.valueMap.call(void 0,this.computedValue):this.computedValue},null)]),this.showLicenseWatermark?s.createVNode(t.WatermarkOverlay,{message:this.licenseMessage},null):null,!I&&s.createVNode(ne.Popup,{style:{width:this.popupWidth,direction:p},ref:t.setRef(this,"popup"),class:t.classNames(o.className,{"k-rtl":p==="rtl"}),popupClass:t.classNames(o.popupClass,"k-dropdowntree-popup","popup-"+this.componentGuid),animate:o.animate,anchor:this.anchor,show:this.isOpen,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,appendTo:o.appendTo},{default:()=>[this.$props.filterable&&s.createVNode(T.ListFilter,{value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:t.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,onBlur:this.onBlur,size:h,rounded:D,fillMode:V},null),v&&s.createVNode("div",{class:"k-list-header"},[v]),n.length>0?s.createVNode(O.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:g,dataItems:n,focusIdField:a,textField:this.$props.textField,selectField:R,expandField:this.$props.expandField,childrenField:$,expandIcons:!0,onItemclick:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,size:h,item:N},null):M,y&&s.createVNode("div",{class:"k-list-footer"},[y])]})])},f=[s.h(se.call(this),{...this.$attrs}),I&&te.call(this)];return l?s.createVNode(le.FloatingLabel,{label:l,editorValue:this.currentValueText,editorPlaceholder:r,editorValid:ie,editorDisabled:d,editorId:i,focused:this.focused,dir:p},L(f)?f:{default:()=>[f]}):f},methods:{calculateMedia(e){for(let i of e)this.windowWidth=i.target.clientWidth},calculatePopupWidth(){this.elementRef&&(this.popupWidth=this.popupSettings.width!==void 0?this.popupSettings.width:this.elementRef.offsetWidth+"px")},focus(){this.$el&&this.$el.focus()},setValidity(){if(this.selectRef&&this.selectRef.setCustomValidity){const{validationMessage:e,valid:i,required:n}=this.$props,a=S({validationMessage:e,valid:i,required:n},this.hasValue);this.selectRef.setCustomValidity(a.valid?"":this.validationMessage===void 0?pe:this.validationMessage)}},openPopup(e){if(!this.isOpen){const i={...e};this.$emit("open",i),this.currentOpened=!0}},closePopup(e){if(this.isOpen){const i={...e};this.$emit("close",i),this.currentOpened=!1}},onWrapperClick(e){if(this.onFilterChange({...e,target:{value:""}}),!e.defaultPrevented&&this.$el){this.focused=!0;const i={event:e,target:this};(this.isOpen?this.closePopup:this.openPopup)(i)}},switchFocus(e){this.skipFocusRef=!0,e(),window.setTimeout(()=>this.skipFocusRef=!1,0)},onWrapperKeyDown(e){const{keyCode:i,altKey:n}=e,a=this.treeViewRef&&this.treeViewRef.$el,o=this.inputRef&&this.inputRef.input;if(this.$props.disabled||e.defaultPrevented&&o===e.target)return;const d={event:e,target:this};if(this.isOpen)if(i===t.Keys.esc||n&&i===t.Keys.up)e.preventDefault(),this.closePopup(d);else if(a&&a.querySelector(".k-focus")&&(i===t.Keys.up||i===t.Keys.down||i===t.Keys.left||i===t.Keys.right||i===t.Keys.home||i===t.Keys.end)){if(i===t.Keys.up&&o){const r=Array.from(a.querySelectorAll(".k-treeview-item")),l=[...r].reverse().find(u=>!!(u&&u.querySelector(".k-focus")));if(l&&r.indexOf(l)===0)return this.switchFocus(()=>{this.focusElement(o)})}this.switchFocus(t.noop)}else i===t.Keys.down&&this.switchFocus(()=>{this.focusElement(o||a)});else n&&i===t.Keys.down&&(e.preventDefault(),this.openPopup(d))},onInputKeyDown(e){const{keyCode:i,altKey:n}=e;if(i===t.Keys.esc)this.onWrapperClick(e);else if(n||i!==t.Keys.up&&i!==t.Keys.down)return;e.preventDefault(),this.switchFocus(i===t.Keys.up?()=>{this.focusElement(this.elementRef)}:()=>{this.focusElement(this.treeViewRef&&this.treeViewRef.$el)})},focusElement(e){e&&this.switchFocus(()=>e.focus())},onPopupOpened(){if(!this.focused&&this.isOpen&&!this.currentOpened)this.closePopup({target:this});else if(this.$props.filterable){const e=this.inputRef&&this.inputRef.input;this.focusElement(e)}else this.focusElement(this.treeViewRef&&this.treeViewRef.$el)},onPopupClosed(){this.focused&&this.focusElement(this.elementRef)},onFocus(e){if(!this.focused&&!this.skipFocusRef){this.focused=!0;const i={event:e,target:this};this.$emit("focus",i)}},onBlur(e){var i;if(this.focused&&!this.skipFocusRef){this.focused=!1;const n={event:e,target:this},a={...n},o=e.relatedTarget||((i=e.event)==null?void 0:i.relatedTarget);!(o!=null&&o.closest(".popup-"+this.componentGuid))&&!this.adaptiveState&&(this.$emit("blur",a),this.closePopup(n))}},onWrapperMouseDown(){this.focused&&this.switchFocus(t.noop)},changeValue(e,i,n){const a={value:i,level:n?E(n):[],...e};this.$emit("changemodel",i),this.$emit("update:modelValue",i),this.$emit("change",a),this.currentValue=i},onChange(e){if(k.areSame(e.item,this.computedValue,this.dataItemKey)||!this.$el)return;const{item:i,itemHierarchicalIndex:n,event:a}=e,o={event:a,target:this};this.changeValue(o,i,n),this.closePopup(o)},onClear(e){const i={event:e,target:this};this.changeValue(i,null),this.closePopup(i),e.preventDefault()},onExpand(e){const{item:i,itemHierarchicalIndex:n,event:a}=e,o={level:E(n),item:i,event:a,target:this};this.$emit("expandchange",o)},onFilterChange(e){const n={filter:{field:this.$props.textField,operator:"contains",value:e.target.value},event:e,target:this};this.$emit("filterchange",n),this.$props.filter===void 0&&(this.filterState=e.target.value)}}});exports.DropDownTree=he;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),t=require("@progress/kendo-vue-common"),ne=require("@progress/kendo-vue-popup"),ae=require("@progress/kendo-vue-intl"),O=require("@progress/kendo-vue-treeview"),b=require("../package-metadata.js"),k=require("../common/utils.js"),oe=require("./ListNoData.js"),c=require("../messages/main.js"),le=require("@progress/kendo-vue-labels"),T=require("../common/ListFilter.js"),B=require("@progress/kendo-vue-buttons"),w=require("@progress/kendo-svg-icons"),K=require("../common/constants.js"),re=require("@progress/kendo-vue-layout"),de=require("../common/DropDownBase.js");function L(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!s.isVNode(e)}const{sizeMap:ue,roundedMap:ce}=t.kendoThemeMaps,pe="Please select a value from the list!",E=e=>e.split("_").map(i=>parseInt(i,10)),S=(e,i)=>{const{validationMessage:n,valid:a,required:o}=e;return{customError:n!==void 0,valid:!!(a!==void 0?a:!o||i),valueMissing:!i}},he=s.defineComponent({name:"KendoDropDownTree",model:{event:"changemodel"},emits:{open:e=>!0,close:e=>!0,focus:e=>!0,blur:e=>!0,change:e=>!0,filterchange:e=>!0,expandchange:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0},props:{opened:{type:Boolean,default:void 0},disabled:Boolean,dir:String,tabIndex:Number,accessKey:String,dataItems:{type:Array,default:function(){return[]}},value:{type:[Object,String,Number,Boolean],default:function(){}},modelValue:{type:[Object,String,Number,Boolean],default:function(){}},valueMap:Function,placeholder:String,dataItemKey:{type:String,required:!0},textField:{type:String,required:!0},selectField:{type:String,default:"selected"},expandField:String,subItemsField:{type:String,default:"items"},className:String,label:String,validationMessage:String,validityStyles:{type:Boolean,default:!0},valid:{type:Boolean,default:void 0},required:Boolean,name:String,id:String,ariaLabel:{type:String,default:void 0},ariaLabelledBy:String,ariaDescribedBy:String,filterable:Boolean,filter:String,loading:Boolean,popupSettings:{type:Object,default:function(){return{animate:!0,height:"200px",anchor:""}}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["flat","outline","solid"].includes(e)}},item:[String,Function,Object],header:[String,Function,Object],footer:[String,Function,Object],valueRender:[String,Function,Object],listNoData:[String,Function,Object],adaptive:{type:Boolean,default:void 0},adaptiveTitle:{type:String,default:void 0}},inject:{kendoLocalizationService:{default:null},adaptiveModeBreakpoints:{default:{small:K.MOBILE_SMALL_DEVICE,medium:K.MOBILE_MEDIUM_DEVICE}}},created(){this.observer=null,t.validatePackage(b.packageMetadata),this.showLicenseWatermark=t.shouldShowValidationUI(b.packageMetadata),this.licenseMessage=t.getLicenseMessage(b.packageMetadata),this.base=new de(this),this.componentGuid=t.guid(),this.anchor=t.guid()},data(){return{showLicenseWatermark:!1,licenseMessage:void 0,currentOpened:!1,focused:!1,filterState:"",currentValue:void 0,popupWidth:"200px",windowWidth:0,initialAdaptiveRenderingValues:void 0}},computed:{wrapperClass(){const{validationMessage:e,valid:i,required:n,validityStyles:a}=this.$props,o=S({validationMessage:e,valid:i,required:n},this.hasValue),d=!a||o.valid,{size:r,rounded:l,fillMode:u}=this.$props;return{"k-dropdowntree":!0,"k-picker":!0,[this.$props.className]:this.$props.className,[`k-picker-${ue[r]||r}`]:r,[`k-rounded-${ce[l]||l}`]:l,[`k-picker-${u}`]:u,"k-focus":this.focused,"k-invalid":!d,"k-loading":this.$props.loading,"k-required":n,"k-disabled":this.$props.disabled}},animationStyles(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?{top:0,width:"100%",height:"100%"}:void 0},classNameAdaptive(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"},adaptiveState(){return this.windowWidth<=this.adaptiveModeBreakpoints.medium&&this.$props.adaptive},isOpen(){return this.opened!==void 0?this.opened:this.currentOpened},computedValue(){return this.value!==void 0?this.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},hasValue(){return k.isPresent(this.computedValue)},currentValueText(){return this.hasValue?k.getItemValue(this.computedValue,this.$props.textField):""}},watch:{isOpen:function(e){e&&this.value?this.initialAdaptiveRenderingValues=[this.value]:this.initialAdaptiveRenderingValues=void 0}},mounted(){this.observer=t.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),document!=null&&document.body&&this.observer&&this.observer.observe(document.body),this.elementRef=t.getRef(this,"kendoAnchor"),this.inputRef=t.getRef(this,"input"),this.selectRef=t.getRef(this,"select"),this.treeViewRef=t.getRef(this,"treeView"),this.skipFocusRef=!1,this.popupRef=t.getRef(this,"popup"),this.calculatePopupWidth()},updated(){this.inputRef=t.getRef(this,"input"),this.treeViewRef=t.getRef(this,"treeView"),this.popupRef&&this.isOpen&&this.hasValue&&this.popupRef.reposition(),this.setValidity(),this.calculatePopupWidth()},render(){let e;const i=this.$props.id||this.componentGuid,{dataItems:n,dataItemKey:a,popupSettings:o,disabled:d,placeholder:r,label:l,name:u,selectField:R,subItemsField:$,validationMessage:q,valid:W,required:F,validityStyles:P,adaptiveTitle:A}=this.$props,g=t.getTabIndex(this.$props.tabIndex,d),x=ae.provideLocalizationService(this),z=S({validationMessage:q,valid:W,required:F},this.hasValue),I=this.adaptiveState,p=this.$props.dir,N=t.templateRendering.call(this,this.item,t.getListeners.call(this)),j=t.templateRendering.call(this,this.valueRender,t.getListeners.call(this)),_=t.templateRendering.call(this,this.$props.header,t.getListeners.call(this)),G=t.templateRendering.call(this,this.$props.footer,t.getListeners.call(this)),v=t.getTemplate.call(this,{h:s.h,template:_}),y=t.getTemplate.call(this,{h:s.h,template:G}),H=t.templateRendering.call(this,this.$props.listNoData,t.getListeners.call(this)),U=s.createVNode(oe.ListNoData,null,L(e=x.toLanguageString(c.nodata,c.messages[c.nodata]))?e:{default:()=>[e]}),M=t.getTemplate.call(this,{h:s.h,defaultRendering:U,template:H}),J=s.createVNode("span",{class:"k-input-value-text"},[this.currentValueText||r]),Q=t.getTemplate.call(this,{h:s.h,defaultRendering:J,template:j,additionalProps:{value:this.computedValue}}),X=()=>[s.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[s.createVNode("div",{class:"k-actionsheet-title"},[s.createVNode("div",{class:"k-text-center"},[A]),s.createVNode("div",{class:"k-actionsheet-subtitle k-text-center"},[r])]),s.createVNode("div",{class:"k-actionsheet-actions"},[s.createVNode(B.Button,{tabIndex:1,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.onWrapperClick,icon:"x",svgIcon:w.xIcon},null)])]),s.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[this.$props.filterable&&s.createVNode(T.ListFilter,{tabIndex:0,value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:t.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,size:h,rounded:D,fillMode:V,onFocus:this.onFocus,onBlur:this.onBlur},null)])],Y=t.templateRendering.call(this,X,t.getListeners.call(this)),Z=()=>{const m=this.base.getTemplateDef.call(this,v,s.h),C=this.base.getTemplateDef.call(this,y,s.h);return[m&&s.createVNode("div",{class:"k-list-header"},[m]),n.length>0?s.createVNode(O.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:g,dataItems:n,focusIdField:a,textField:this.$props.textField,selectField:R,expandField:this.$props.expandField,childrenField:$,expandIcons:!0,onItemclick:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,size:"large",item:N},null):M,C&&s.createVNode("div",{class:"k-list-footer"},[C])]},ee=t.templateRendering.call(this,Z,t.getListeners.call(this)),te=function(){return s.createVNode(re.ActionSheet,{expand:this.isOpen,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,header:Y,content:ee,contentClassName:"!k-overflow-hidden",onClose:this.onWrapperClick,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},ie=!P||z.valid,{size:h,rounded:D,fillMode:V}=this.$props,se=function(){return s.createVNode("span",{class:this.wrapperClass,tabindex:g,accesskey:this.$props.accessKey,id:i,dir:p,ref:t.setRef(this,"kendoAnchor"),onKeydown:this.onWrapperKeyDown,onClick:this.onWrapperClick,onMousedown:this.onWrapperMouseDown,onFocusin:this.onFocus,onFocusout:this.onBlur,role:"combobox","aria-haspopup":"tree","aria-expanded":this.isOpen,"aria-disabled":d,"aria-label":l||this.$props.ariaLabel,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-required":F},[s.createVNode("span",{class:"k-input-inner"},[Q]),this.$props.loading&&s.createVNode(t.Icon,{class:"k-input-loading-icon",name:"loading"},null),this.hasValue&&!d&&s.createVNode("span",{onClick:this.onClear,class:"k-clear-value",title:x.toLanguageString(c.clear,c.messages[c.clear]),role:"button",tabindex:-1,onMousedown:m=>m.preventDefault()},[s.createVNode(t.Icon,{name:"x",icon:w.xIcon},null)]),s.createVNode(B.Button,{tabIndex:-1,type:"button","aria-label":"select",class:"k-input-button",size:h,fillMode:V,themeColor:"base",rounded:null,icon:"chevron-down",svgIcon:w.chevronDownIcon},null),s.createVNode("select",{name:u,ref:t.setRef(this,"select"),tabindex:-1,"aria-hidden":!0,title:l,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},[s.createVNode("option",{value:this.$props.valueMap?this.$props.valueMap.call(void 0,this.computedValue):this.computedValue},null)]),this.showLicenseWatermark?s.createVNode(t.WatermarkOverlay,{message:this.licenseMessage},null):null,!I&&s.createVNode(ne.Popup,{style:{width:this.popupWidth,direction:p},ref:t.setRef(this,"popup"),class:t.classNames(o.className,{"k-rtl":p==="rtl"}),popupClass:t.classNames(o.popupClass,"k-dropdowntree-popup","popup-"+this.componentGuid),animate:o.animate,anchor:this.anchor,show:this.isOpen,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,appendTo:o.appendTo},{default:()=>[this.$props.filterable&&s.createVNode(T.ListFilter,{value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:t.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,onBlur:this.onBlur,size:h,rounded:D,fillMode:V},null),v&&s.createVNode("div",{class:"k-list-header"},[v]),n.length>0?s.createVNode(O.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:g,dataItems:n,focusIdField:a,textField:this.$props.textField,selectField:R,expandField:this.$props.expandField,childrenField:$,expandIcons:!0,onItemclick:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,size:h,item:N},null):M,y&&s.createVNode("div",{class:"k-list-footer"},[y])]})])},f=[s.h(se.call(this),{...this.$attrs}),I&&te.call(this)];return l?s.createVNode(le.FloatingLabel,{label:l,editorValue:this.currentValueText,editorPlaceholder:r,editorValid:ie,editorDisabled:d,editorId:i,focused:this.focused,dir:p},L(f)?f:{default:()=>[f]}):f},methods:{calculateMedia(e){for(let i of e)this.windowWidth=i.target.clientWidth},calculatePopupWidth(){this.elementRef&&(this.popupWidth=this.popupSettings.width!==void 0?this.popupSettings.width:this.elementRef.offsetWidth+"px")},focus(){this.$el&&this.$el.focus()},setValidity(){if(this.selectRef&&this.selectRef.setCustomValidity){const{validationMessage:e,valid:i,required:n}=this.$props,a=S({validationMessage:e,valid:i,required:n},this.hasValue);this.selectRef.setCustomValidity(a.valid?"":this.validationMessage===void 0?pe:this.validationMessage)}},openPopup(e){if(!this.isOpen){const i={...e};this.$emit("open",i),this.currentOpened=!0}},closePopup(e){if(this.isOpen){const i={...e};this.$emit("close",i),this.currentOpened=!1}},onWrapperClick(e){if(this.onFilterChange({...e,target:{value:""}}),!e.defaultPrevented&&this.$el){this.focused=!0;const i={event:e,target:this};(this.isOpen?this.closePopup:this.openPopup)(i)}},switchFocus(e){this.skipFocusRef=!0,e(),window.setTimeout(()=>this.skipFocusRef=!1,0)},onWrapperKeyDown(e){const{keyCode:i,altKey:n}=e,a=this.treeViewRef&&this.treeViewRef.$el,o=this.inputRef&&this.inputRef.input;if(this.$props.disabled||e.defaultPrevented&&o===e.target)return;const d={event:e,target:this};if(this.isOpen)if(i===t.Keys.esc||n&&i===t.Keys.up)e.preventDefault(),this.closePopup(d);else if(a&&a.querySelector(".k-focus")&&(i===t.Keys.up||i===t.Keys.down||i===t.Keys.left||i===t.Keys.right||i===t.Keys.home||i===t.Keys.end)){if(i===t.Keys.up&&o){const r=Array.from(a.querySelectorAll(".k-treeview-item")),l=[...r].reverse().find(u=>!!(u&&u.querySelector(".k-focus")));if(l&&r.indexOf(l)===0)return this.switchFocus(()=>{this.focusElement(o)})}this.switchFocus(t.noop)}else i===t.Keys.down&&this.switchFocus(()=>{this.focusElement(o||a)});else n&&i===t.Keys.down&&(e.preventDefault(),this.openPopup(d))},onInputKeyDown(e){const{keyCode:i,altKey:n}=e;if(i===t.Keys.esc)this.onWrapperClick(e);else if(n||i!==t.Keys.up&&i!==t.Keys.down)return;e.preventDefault(),this.switchFocus(i===t.Keys.up?()=>{this.focusElement(this.elementRef)}:()=>{this.focusElement(this.treeViewRef&&this.treeViewRef.$el)})},focusElement(e){e&&this.switchFocus(()=>e.focus())},onPopupOpened(){if(!this.focused&&this.isOpen&&!this.currentOpened)this.closePopup({target:this});else if(this.$props.filterable){const e=this.inputRef&&this.inputRef.input;this.focusElement(e)}else this.focusElement(this.treeViewRef&&this.treeViewRef.$el)},onPopupClosed(){this.focused&&this.focusElement(this.elementRef)},onFocus(e){if(!this.focused&&!this.skipFocusRef){this.focused=!0;const i={event:e,target:this};this.$emit("focus",i)}},onBlur(e){var i;if(this.focused&&!this.skipFocusRef){this.focused=!1;const n={event:e,target:this},a={...n},o=e.relatedTarget||((i=e.event)==null?void 0:i.relatedTarget);!(o!=null&&o.closest(".popup-"+this.componentGuid))&&!this.adaptiveState&&(this.$emit("blur",a),this.closePopup(n))}},onWrapperMouseDown(){this.focused&&this.switchFocus(t.noop)},changeValue(e,i,n){const a={value:i,level:n?E(n):[],...e};this.$emit("changemodel",i),this.$emit("update:modelValue",i),this.$emit("change",a),this.currentValue=i},onChange(e){if(k.areSame(e.item,this.computedValue,this.dataItemKey)||!this.$el)return;const{item:i,itemHierarchicalIndex:n,event:a}=e,o={event:a,target:this};this.changeValue(o,i,n),this.closePopup(o)},onClear(e){const i={event:e,target:this};this.changeValue(i,null),this.closePopup(i),e.preventDefault()},onExpand(e){const{item:i,itemHierarchicalIndex:n,event:a}=e,o={level:E(n),item:i,event:a,target:this};this.$emit("expandchange",o)},onFilterChange(e){const n={filter:{field:this.$props.textField,operator:"contains",value:e.target.value},event:e,target:this};this.$emit("filterchange",n),this.$props.filter===void 0&&(this.filterState=e.target.value)}}});exports.DropDownTree=he;

package/DropDownTree/DropDownTree.mjs

@@ -388,11 +388,11 @@ const {
         role: "combobox",
         "aria-haspopup": "tree",
         "aria-expanded": this.isOpen,
-        "aria-disabled": d || void 0,
+        "aria-disabled": d,
         "aria-label": l || this.$props.ariaLabel,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
-        "aria-required": D || void 0
+        "aria-required": D
       }, [
         i("span", {
           class: "k-input-inner"