@progress/kendo-vue-dropdowns 6.1.0-develop.5 → 6.1.0-develop.7

package/MultiSelectTree/MultiSelectTree.mjs

@@ -5,43 +5,43 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as ge, h as k, createVNode as s, isVNode as ve } from "vue";
-import { validatePackage as be, guid as N, canUseDOM as Se, getRef as g, getTabIndex as ke, templateRendering as u, getListeners as f, getTemplate as E, noop as z, Keys as n, setRef as v, classNames as V, Icon as ye, kendoThemeMaps as Fe } from "@progress/kendo-vue-common";
-import { Popup as we } from "@progress/kendo-vue-popup";
-import { provideLocalizationService as Re } from "@progress/kendo-vue-intl";
+import { defineComponent as me, h as S, createVNode as s, isVNode as ge } from "vue";
+import { validatePackage as ve, guid as N, canUseDOM as be, getRef as g, getTabIndex as ke, templateRendering as u, getListeners as f, getTemplate as D, noop as z, Keys as a, setRef as v, classNames as V, Icon as Se, kendoThemeMaps as ye } from "@progress/kendo-vue-common";
+import { Popup as Fe } from "@progress/kendo-vue-popup";
+import { provideLocalizationService as we } from "@progress/kendo-vue-intl";
 import { TreeView as q } from "@progress/kendo-vue-treeview";
-import { packageMetadata as xe } from "../package-metadata.mjs";
-import { getItemValue as j, areSame as Ve, matchTags as _ } from "../common/utils.mjs";
-import { ListNoData as $e } from "../DropDownTree/ListNoData.mjs";
-import { nodata as G, messages as M, adaptiveModeFooterCancel as H, adaptiveModeFooterApply as U } from "../messages/main.mjs";
-import { FloatingLabel as Ie } from "@progress/kendo-vue-labels";
+import { packageMetadata as Re } from "../package-metadata.mjs";
+import { getItemValue as j, areSame as xe, matchTags as _ } from "../common/utils.mjs";
+import { ListNoData as Ve } from "../DropDownTree/ListNoData.mjs";
+import { nodata as G, messages as E, adaptiveModeFooterCancel as H, adaptiveModeFooterApply as U } from "../messages/main.mjs";
+import { FloatingLabel as $e } from "@progress/kendo-vue-labels";
 import { Button as B } from "@progress/kendo-vue-buttons";
-import { TagList as Te } from "../MultiSelect/TagList.mjs";
-import { ClearButton as Ce } from "../common/ClearButton.mjs";
+import { TagList as Ie } from "../MultiSelect/TagList.mjs";
+import { ClearButton as Te } from "../common/ClearButton.mjs";
 import { ListFilter as J } from "../common/ListFilter.mjs";
-import { getMultiSelectTreeValue as De } from "./utils.mjs";
-import { MOBILE_SMALL_DEVICE as Q, MOBILE_MEDIUM_DEVICE as Ee } from "../common/constants.mjs";
-import { ActionSheet as Me } from "@progress/kendo-vue-layout";
+import { getMultiSelectTreeValue as Ce } from "./utils.mjs";
+import { MOBILE_SMALL_DEVICE as Me, MOBILE_MEDIUM_DEVICE as De } from "../common/constants.mjs";
+import { ActionSheet as Ee } from "@progress/kendo-vue-layout";
 import { xIcon as Be } from "@progress/kendo-svg-icons";
 import Ae from "../common/DropDownBase.mjs";
 function $(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ve(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ge(e);
 }
 const Oe = "Please select a value from the list!", {
-  sizeMap: X,
+  sizeMap: Q,
   roundedMap: Pe
-} = Fe, Ke = (e) => e.split("_").map((t) => parseInt(t, 10)), Y = (e, t) => {
+} = ye, Ke = (e) => e.split("_").map((t) => parseInt(t, 10)), X = (e, t) => {
   const {
     validationMessage: i,
-    valid: a,
+    valid: n,
     required: o
   } = e;
   return {
     customError: i !== void 0,
-    valid: !!(a !== void 0 ? a : !o || t),
+    valid: !!(n !== void 0 ? n : !o || t),
     valueMissing: !t
   };
-}, at = /* @__PURE__ */ ge({
+}, nt = /* @__PURE__ */ me({
   name: "KendoMultiSelectTree",
   model: {
     event: "changemodel"
@@ -165,10 +165,16 @@ const Oe = "Please select a value from the list!", {
   inject: {
     kendoLocalizationService: {
       default: null
+    },
+    adaptiveModeBreakpoints: {
+      default: {
+        small: Me,
+        medium: De
+      }
     }
   },
   created() {
-    this.observer = null, be(xe), this.base = new Ae(this), this.componentGuid = N(), this.anchor = N();
+    this.observer = null, ve(Re), this.base = new Ae(this), this.componentGuid = N(), this.anchor = N();
   },
   data() {
     return {
@@ -184,17 +190,17 @@ const Oe = "Please select a value from the list!", {
   },
   computed: {
     animationStyles() {
-      return this.windowWidth <= Q ? {
+      return this.windowWidth <= this.adaptiveModeBreakpoints.small ? {
         top: 0,
         width: "100%",
         height: "100%"
       } : void 0;
     },
     classNameAdaptive() {
-      return this.windowWidth <= Q ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom";
+      return this.windowWidth <= this.adaptiveModeBreakpoints.small ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom";
     },
     adaptiveState() {
-      return this.windowWidth <= Ee && this.$props.adaptive;
+      return this.windowWidth <= this.adaptiveModeBreakpoints.medium && this.$props.adaptive;
     },
     isOpen() {
       return this.opened !== void 0 ? this.opened : this.openState;
@@ -227,7 +233,7 @@ const Oe = "Please select a value from the list!", {
     }
   },
   mounted() {
-    this.observer = Se && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.elementRef = g(this, "kendoAnchor"), this.inputRef = g(this, "input"), this.selectRef = g(this, "select"), this.treeViewRef = g(this, "treeView"), this.skipFocusRef = !1, this.popupRef = g(this, "popup"), this.calculatePopupWidth();
+    this.observer = be && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.elementRef = g(this, "kendoAnchor"), this.inputRef = g(this, "input"), this.selectRef = g(this, "select"), this.treeViewRef = g(this, "treeView"), this.skipFocusRef = !1, this.popupRef = g(this, "popup"), this.calculatePopupWidth();
   },
   updated() {
     this.inputRef = g(this, "input"), this.treeViewRef = g(this, "treeView"), this.popupRef && this.isOpen && this.hasValue && this.popupRef.reposition(), this.setValidity(), this.calculatePopupWidth();
@@ -236,40 +242,40 @@ const Oe = "Please select a value from the list!", {
     let e;
     const t = this.$props.id || this.componentGuid, {
       dataItems: i,
-      dataItemKey: a,
+      dataItemKey: n,
       popupSettings: o = {},
-      disabled: d,
+      disabled: r,
       placeholder: l,
-      label: r,
+      label: d,
       name: h,
       checkField: b,
       checkIndeterminateField: F,
       subItemsField: A,
-      validationMessage: Z,
-      valid: ee,
+      validationMessage: Y,
+      valid: Z,
       value: O,
       required: I,
-      validityStyles: te,
-      adaptiveTitle: ie
-    } = this.$props, w = ke(this.$props.tabIndex, d), T = Re(this), se = Y({
-      validationMessage: Z,
-      valid: ee,
+      validityStyles: ee,
+      adaptiveTitle: te
+    } = this.$props, w = ke(this.$props.tabIndex, r), T = we(this), ie = X({
+      validationMessage: Y,
+      valid: Z,
       required: I
-    }, this.hasValue), R = this.$props.dir, P = this.adaptiveState, K = u.call(this, this.item, f.call(this)), ne = u.call(this, this.tag, f.call(this)), ae = u.call(this, this.$props.header, f.call(this)), oe = u.call(this, this.$props.footer, f.call(this)), C = E.call(this, {
-      h: k,
+    }, this.hasValue), R = this.$props.dir, P = this.adaptiveState, K = u.call(this, this.item, f.call(this)), se = u.call(this, this.tag, f.call(this)), ae = u.call(this, this.$props.header, f.call(this)), ne = u.call(this, this.$props.footer, f.call(this)), C = D.call(this, {
+      h: S,
       template: ae
-    }), D = E.call(this, {
-      h: k,
-      template: oe
-    }), le = u.call(this, this.$props.listNoData, f.call(this)), re = s($e, null, $(e = T.toLanguageString(G, M[G])) ? e : {
+    }), M = D.call(this, {
+      h: S,
+      template: ne
+    }), oe = u.call(this, this.$props.listNoData, f.call(this)), le = s(Ve, null, $(e = T.toLanguageString(G, E[G])) ? e : {
       default: () => [e]
-    }), L = E.call(this, {
-      h: k,
-      defaultRendering: re,
-      template: le
-    }), W = !te || se.valid, {
+    }), L = D.call(this, {
+      h: S,
+      defaultRendering: le,
+      template: oe
+    }), W = !ee || ie.valid, {
       size: c,
-      rounded: S,
+      rounded: k,
       fillMode: y
     } = this.$props, de = () => [s("div", {
       class: "k-actionsheet-titlebar-group k-hbox"
@@ -277,7 +283,7 @@ const Oe = "Please select a value from the list!", {
       class: "k-actionsheet-title"
     }, [s("div", {
       class: "k-text-center"
-    }, [ie]), s("div", {
+    }, [te]), s("div", {
       class: "k-actionsheet-subtitle k-text-center"
     }, [l])]), s("div", {
       class: "k-actionsheet-actions"
@@ -298,12 +304,12 @@ const Oe = "Please select a value from the list!", {
       onChange: this.onFilterChange,
       onKeydown: this.onInputKeyDown,
       size: c,
-      rounded: S,
+      rounded: k,
       fillMode: y,
       onFocus: this.onFocus,
       onBlur: this.onBlur
-    }, null)])], he = u.call(this, de, f.call(this)), ce = () => {
-      const p = T.toLanguageString(H, M[H]), m = T.toLanguageString(U, M[U]);
+    }, null)])], re = u.call(this, de, f.call(this)), he = () => {
+      const p = T.toLanguageString(H, E[H]), m = T.toLanguageString(U, E[U]);
       return [s(B, {
         size: "large",
         "aria-label": p,
@@ -322,15 +328,15 @@ const Oe = "Please select a value from the list!", {
       }, $(m) ? m : {
         default: () => [m]
       })];
-    }, pe = u.call(this, ce, f.call(this)), ue = () => {
-      const p = this.base.getTemplateDef.call(this, C, k), m = this.base.getTemplateDef.call(this, D, k);
+    }, ce = u.call(this, he, f.call(this)), pe = () => {
+      const p = this.base.getTemplateDef.call(this, C, S), m = this.base.getTemplateDef.call(this, M, S);
       return [p && s("div", {
         class: "k-list-header"
       }, [p]), i.length > 0 ? s(q, {
         ref: v(this, "treeView"),
         tabIndex: w,
         dataItems: i,
-        focusIdField: a,
+        focusIdField: n,
         textField: this.$props.textField,
         checkField: b,
         checkIndeterminateField: F,
@@ -349,30 +355,30 @@ const Oe = "Please select a value from the list!", {
       }, null) : L, m && s("div", {
         class: "k-list-footer"
       }, [m])];
-    }, fe = u.call(this, ue, f.call(this)), me = function() {
-      return s(Me, {
+    }, ue = u.call(this, pe, f.call(this)), fe = function() {
+      return s(Ee, {
         expand: this.isOpen,
         animation: !0,
         animationStyles: this.animationStyles,
         className: this.classNameAdaptive,
         footerClassName: "k-actions k-actions-stretched",
         contentClassName: "!k-overflow-hidden",
-        header: he,
-        content: fe,
-        footer: pe,
+        header: re,
+        content: ue,
+        footer: ce,
         onClose: this.onCancel,
         navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
       }, null);
-    }, x = [k(function() {
+    }, x = [S(function() {
       return s("span", {
         ref: v(this, "kendoAnchor"),
         class: V("k-multiselecttree k-input", this.$props.className, {
-          [`k-input-${X[c] || c}`]: c,
-          [`k-rounded-${Pe[S] || S}`]: S,
+          [`k-input-${Q[c] || c}`]: c,
+          [`k-rounded-${Pe[k] || k}`]: k,
           [`k-input-${y}`]: y,
-          "k-focus": this.focusedState && !d,
+          "k-focus": this.focusedState && !r,
           "k-invalid": !W,
-          "k-disabled": d,
+          "k-disabled": r,
           "k-loading": this.$props.loading,
           "k-required": I
         }),
@@ -387,25 +393,25 @@ const Oe = "Please select a value from the list!", {
         role: "combobox",
         "aria-haspopup": "tree",
         "aria-expanded": this.isOpen,
-        "aria-disabled": d,
-        "aria-label": r,
+        "aria-disabled": r,
+        "aria-label": d,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaLabelledBy ? this.$props.ariaLabelledBy : "tagslist-" + t,
         "aria-required": this.$props.required,
         onClick: this.onWrapperClick
       }, [
-        this.tagsToRenderRef.length > 0 && s(Te, {
+        this.tagsToRenderRef.length > 0 && s(Ie, {
           id: "tagslist-" + t,
           class: V("k-input-values k-chip-list k-selection-multiple", {
-            [`k-chip-list-${X[c] || c}`]: c,
+            [`k-chip-list-${Q[c] || c}`]: c,
             "k-readonly": this.hasValue
           }),
-          tagRender: ne,
+          tagRender: se,
           onTagdelete: this.onTagDelete,
           dataItems: this.tagsToRenderRef,
           guid: t,
-          focused: this.focusedTagState ? this.tagsToRenderRef.find((p) => this.focusedTagState && _(p, this.focusedTagState, a)) : void 0,
-          tagsRounded: S,
+          focused: this.focusedTagState ? this.tagsToRenderRef.find((p) => this.focusedTagState && _(p, this.focusedTagState, n)) : void 0,
+          tagsRounded: k,
           size: c,
           fillMode: y
         }, null),
@@ -419,11 +425,11 @@ const Oe = "Please select a value from the list!", {
         }, [this.tagsToRenderRef.length === 0 && s("span", {
           class: "k-input-value-text"
         }, [l])]),
-        this.$props.loading && s(ye, {
+        this.$props.loading && s(Se, {
           class: "k-input-loading-icon",
           name: "loading"
         }, null),
-        this.hasValue && !d && s(Ce, {
+        this.hasValue && !r && s(Te, {
           onClearclick: this.onClear
         }, null),
         /* Dummy component to support forms */
@@ -433,7 +439,7 @@ const Oe = "Please select a value from the list!", {
           tabindex: -1,
           "aria-hidden": !0,
           required: I,
-          title: r,
+          title: d,
           style: {
             opacity: 0,
             width: 1,
@@ -445,7 +451,7 @@ const Oe = "Please select a value from the list!", {
         }, [s("option", {
           value: this.$props.valueMap ? this.$props.valueMap.call(void 0, O) : O
         }, null)]),
-        !P && s(we, {
+        !P && s(Fe, {
           style: {
             width: this.popupWidth,
             direction: R
@@ -468,7 +474,7 @@ const Oe = "Please select a value from the list!", {
             onChange: this.onFilterChange,
             onKeydown: this.onInputKeyDown,
             size: c,
-            rounded: S,
+            rounded: k,
             fillMode: y,
             onFocus: this.onFocus,
             onBlur: this.onBlur
@@ -478,7 +484,7 @@ const Oe = "Please select a value from the list!", {
             ref: v(this, "treeView"),
             tabIndex: w,
             dataItems: i,
-            focusIdField: a,
+            focusIdField: n,
             textField: this.$props.textField,
             checkField: b,
             checkIndeterminateField: F,
@@ -494,20 +500,20 @@ const Oe = "Please select a value from the list!", {
             checkboxes: !0,
             size: c,
             item: K
-          }, null) : L, D && s("div", {
+          }, null) : L, M && s("div", {
             class: "k-list-footer"
-          }, [D])]
+          }, [M])]
         })
       ]);
     }.call(this), {
       ...this.$attrs
-    }), P && me.call(this)];
-    return r ? s(Ie, {
-      label: r,
+    }), P && fe.call(this)];
+    return d ? s($e, {
+      label: d,
       editorValue: this.hasValue,
       editorPlaceholder: l,
       editorValid: W,
-      editorDisabled: d,
+      editorDisabled: r,
       editorId: t,
       dir: R
     }, $(x) ? x : {
@@ -546,45 +552,45 @@ const Oe = "Please select a value from the list!", {
           validationMessage: e,
           valid: t,
           required: i
-        } = this.$props, a = Y({
+        } = this.$props, n = X({
           validationMessage: e,
           valid: t,
           required: i
         }, this.hasValue);
-        this.selectRef.setCustomValidity(a.valid ? "" : this.validationMessage === void 0 ? Oe : this.validationMessage);
+        this.selectRef.setCustomValidity(n.valid ? "" : this.validationMessage === void 0 ? Oe : this.validationMessage);
       }
     },
     changeValue(e, t, i) {
-      const a = {
+      const n = {
         dataItemKey: this.dataItemKey,
         checkField: this.checkField,
         checkIndeterminateField: this.checkIndeterminateField,
         expandField: this.expandField,
         subItemsField: this.subItemsField
-      }, o = De(this.dataItems, {
-        ...a,
+      }, o = Ce(this.dataItems, {
+        ...n,
         items: t,
         operation: i,
         value: this.computedValue
-      }), d = {
+      }), r = {
         items: t,
         operation: i,
         value: o,
         ...e
       };
-      this.$emit("changemodel", o), this.$emit("update:modelValue", o), this.$emit("change", d);
+      this.$emit("changemodel", o), this.$emit("update:modelValue", o), this.$emit("change", r);
     },
     onChange(e) {
-      if (Ve(e.item, this.computedValue, this.dataItemKey))
+      if (xe(e.item, this.computedValue, this.dataItemKey))
         return;
       const {
         item: t,
         event: i
-      } = e, a = {
+      } = e, n = {
         event: i,
         target: this
       };
-      this.changeValue(a, [t], "toggle");
+      this.changeValue(n, [t], "toggle");
     },
     openPopup(e) {
       if (!this.isOpen) {
@@ -661,47 +667,47 @@ const Oe = "Please select a value from the list!", {
       const {
         keyCode: t,
         altKey: i
-      } = e, a = this.treeViewRef && this.treeViewRef.$el, o = this.inputRef && this.inputRef.input;
+      } = e, n = this.treeViewRef && this.treeViewRef.$el, o = this.inputRef && this.inputRef.input;
       if (this.$props.disabled || e.defaultPrevented && o === e.target)
         return;
-      const d = {
+      const r = {
         event: e,
         target: this
       };
-      if (this.computedValue && this.computedValue.length > 0 && (t === n.left || t === n.right || t === n.home || t === n.end || t === n.delete || t === n.backspace)) {
+      if (this.computedValue && this.computedValue.length > 0 && (t === a.left || t === a.right || t === a.home || t === a.end || t === a.delete || t === a.backspace)) {
         const l = this.tagsToRenderRef;
-        let r = this.focusedTagState ? l.findIndex((F) => _(F, this.focusedTagState, this.dataItemKey)) : -1, h;
-        const b = r !== -1;
-        t === n.left ? (b ? r = Math.max(0, r - 1) : r = l.length - 1, h = l[r]) : t === n.right ? b ? (r = Math.min(l.length - 1, r + 1), h = l[r]) : h = l[0] : t === n.home ? h = l[0] : t === n.end ? h = l[l.length - 1] : (t === n.delete || t === n.backspace) && b && this.changeValue(d, l[r].data, "delete"), h !== this.focusedTagState && (this.focusedTagState = h);
+        let d = this.focusedTagState ? l.findIndex((F) => _(F, this.focusedTagState, this.dataItemKey)) : -1, h;
+        const b = d !== -1;
+        t === a.left ? (b ? d = Math.max(0, d - 1) : d = l.length - 1, h = l[d]) : t === a.right ? b ? (d = Math.min(l.length - 1, d + 1), h = l[d]) : h = l[0] : t === a.home ? h = l[0] : t === a.end ? h = l[l.length - 1] : (t === a.delete || t === a.backspace) && b && this.changeValue(r, l[d].data, "delete"), h !== this.focusedTagState && (this.focusedTagState = h);
       }
       if (this.isOpen)
-        if (t === n.esc || i && t === n.up)
+        if (t === a.esc || i && t === a.up)
           e.preventDefault(), this.switchFocus(() => {
             this.focusElement(this.elementRef);
-          }), this.closePopup(d);
-        else if (a && a.querySelector(".k-focus") && (t === n.up || t === n.down || t === n.left || t === n.right || t === n.home || t === n.end)) {
-          if (t === n.up) {
-            const l = Array.from(a.querySelectorAll(".k-treeview-item")), r = [...l].reverse().find((h) => !!(h && h.querySelector(".k-focus")));
-            if (r && l.indexOf(r) === 0)
+          }), this.closePopup(r);
+        else if (n && n.querySelector(".k-focus") && (t === a.up || t === a.down || t === a.left || t === a.right || t === a.home || t === a.end)) {
+          if (t === a.up) {
+            const l = Array.from(n.querySelectorAll(".k-treeview-item")), d = [...l].reverse().find((h) => !!(h && h.querySelector(".k-focus")));
+            if (d && l.indexOf(d) === 0)
               return this.switchFocus(() => {
                 this.focusElement(o || this.elementRef);
               });
           }
           this.switchFocus(z);
-        } else t === n.down && this.switchFocus(() => {
-          this.focusElement(o || a);
+        } else t === a.down && this.switchFocus(() => {
+          this.focusElement(o || n);
         });
       else
-        i && t === n.down && (e.preventDefault(), this.openPopup(d));
+        i && t === a.down && (e.preventDefault(), this.openPopup(r));
     },
     onInputKeyDown(e) {
       const {
         keyCode: t,
         altKey: i
       } = e;
-      (t === n.esc || i && t === n.up) && (e.preventDefault(), this.switchFocus(() => {
+      (t === a.esc || i && t === a.up) && (e.preventDefault(), this.switchFocus(() => {
         this.focusElement(this.elementRef);
-      }), t === n.esc && this.adaptiveState ? this.onCancel(e) : this.closePopup(e)), !(i || t !== n.up && t !== n.down) && (e.preventDefault(), this.switchFocus(t === n.up ? () => {
+      }), t === a.esc && this.adaptiveState ? this.onCancel(e) : this.closePopup(e)), !(i || t !== a.up && t !== a.down) && (e.preventDefault(), this.switchFocus(t === a.up ? () => {
         this.focusElement(this.elementRef);
       } : () => {
         this.focusElement(this.treeViewRef && this.treeViewRef.$el);
@@ -730,11 +736,11 @@ const Oe = "Please select a value from the list!", {
       const {
         item: t,
         itemHierarchicalIndex: i,
-        event: a
+        event: n
       } = e, o = {
         level: Ke(i),
         item: t,
-        event: a,
+        event: n,
         target: this
       };
       this.$emit("expandchange", o);
@@ -754,5 +760,5 @@ const Oe = "Please select a value from the list!", {
   }
 });
 export {
-  at as MultiSelectTree
+  nt as MultiSelectTree
 };