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

package/MultiSelect/MultiSelect.mjs

@@ -5,29 +5,29 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as $e, h as _, createVNode as l, ref as Q, inject as Fe, isVNode as Te } from "vue";
-import { templateRendering as b, getListeners as I, Keys as f, canUseDOM as Oe, getRef as X, guid as Z, classNames as R, kendoThemeMaps as Ve, setRef as we, Icon as Re } from "@progress/kendo-vue-common";
-import { ListContainer as De } from "../common/ListContainer.mjs";
-import { List as Be } from "../common/List.mjs";
+import { defineComponent as $e, h as j, createVNode as l, ref as Q, inject as Fe, isVNode as Te } from "vue";
+import { templateRendering as b, getListeners as I, Keys as f, canUseDOM as Oe, getRef as X, guid as Z, classNames as w, kendoThemeMaps as De, setRef as Ve, Icon as Be } from "@progress/kendo-vue-common";
+import { ListContainer as we } from "../common/ListContainer.mjs";
+import { List as Re } from "../common/List.mjs";
 import { TagList as Me } from "./TagList.mjs";
 import { SearchBar as Ae } from "../common/SearchBar.mjs";
 import Le from "../common/DropDownBase.mjs";
 import { GroupStickyHeader as ee } from "../common/GroupStickyHeader.mjs";
 import { ClearButton as He } from "../common/ClearButton.mjs";
-import { ActiveDescendant as L } from "../common/settings.mjs";
-import { getItemValue as x, itemIndexStartsWith as Ee, areSame as te, removeDataItems as H, isPresent as Pe, preventDefaultNonInputs as Ne, matchDataCollections as Ke } from "../common/utils.mjs";
+import { ActiveDescendant as E } from "../common/settings.mjs";
+import { getItemValue as C, itemIndexStartsWith as Ee, areSame as te, removeDataItems as P, isPresent as Pe, preventDefaultNonInputs as Ne, matchDataCollections as Ke } from "../common/utils.mjs";
 import { xIcon as _e, plusIcon as je } from "@progress/kendo-svg-icons";
-import { Button as j } from "@progress/kendo-vue-buttons";
+import { Button as z } from "@progress/kendo-vue-buttons";
 import { MOBILE_MEDIUM_DEVICE as ze, MOBILE_SMALL_DEVICE as We } from "../common/constants.mjs";
 import { ActionSheet as Ge } from "@progress/kendo-vue-layout";
 import { ListFilter as qe } from "../common/ListFilter.mjs";
 import { provideLocalizationService as Ue } from "@progress/kendo-vue-intl";
 import { adaptiveModeFooterCancel as se, messages as ie, adaptiveModeFooterApply as ne } from "../messages/main.mjs";
 const {
-  sizeMap: z,
+  sizeMap: W,
   roundedMap: Ye
-} = Ve;
-function E(e) {
+} = De;
+function N(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Te(e);
 }
 const Je = "Please enter a valid value!", Qe = (e) => e.preventDefault(), ae = (e, t, s) => !!e != !!t || e.text !== t.text ? !1 : e === t || Ke(e.data, t.data, s), oe = (e) => e === S.CustomItem;
@@ -182,7 +182,7 @@ const vt = /* @__PURE__ */ $e({
   },
   computed: {
     spanClassNames() {
-      const e = !this.hasMounted || !this.$props.validityStyles || this.validity().valid, t = this.currentText || x(this.computedValue()[0], this.$props.textField);
+      const e = !this.hasMounted || !this.$props.validityStyles || this.validity().valid, t = this.currentText || C(this.computedValue()[0], this.$props.textField);
       return {
         "k-floating-label-container": !0,
         "k-focus": this.currentFocused,
@@ -236,7 +236,7 @@ const vt = /* @__PURE__ */ $e({
         last: ""
       },
       suggested: "",
-      activedescendant: L.PopupList,
+      activedescendant: E.PopupList,
       group: void 0,
       isScrolling: !1,
       itemHeight: 0,
@@ -297,12 +297,12 @@ const vt = /* @__PURE__ */ $e({
     },
     findByFieldValue(e, t) {
       return t.map((i) => {
-        const n = this.dataItems.findIndex((o) => x(o, e) === i);
+        const n = this.dataItems.findIndex((o) => C(o, e) === i);
         return this.dataItems[n] || i;
       });
     },
     primitiveValue() {
-      const e = this.computedValue(), t = e.map((s) => x(s, this.valueField));
+      const e = this.computedValue(), t = e.map((s) => C(s, this.valueField));
       return this.valuePrimitive ? t : e;
     },
     validity() {
@@ -326,7 +326,7 @@ const vt = /* @__PURE__ */ $e({
       const s = this.isOpen, i = this.base.initState();
       i.event = t, s && this.base.togglePopup(i), this.currentFocused || (i.data.currentFocused = !0);
       const n = this.computedValue();
-      H(n, e, this.$props.dataItemKey), this.triggerOnChange(n, i), this.applyState(i);
+      P(n, e, this.$props.dataItemKey), this.triggerOnChange(n, i), this.applyState(i);
     },
     onNavigate(e, t) {
       const {
@@ -357,7 +357,7 @@ const vt = /* @__PURE__ */ $e({
       } = this.$props, o = n ? n.skip : 0, r = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
         focusedIndex: d
       } = this.getFocusedState(), c = i && r, a = s[e - o];
-      a && d !== e ? this.currentFocusedIndex !== e && (t.data.currentFocusedIndex = e, t.data.activedescendant = L.PopupList) : c && e === -1 && this.currentFocusedIndex !== void 0 && (t.data.currentFocusedIndex = void 0), this.base.triggerPageChangeCornerItems(a, t);
+      a && d !== e ? this.currentFocusedIndex !== e && (t.data.currentFocusedIndex = e, t.data.activedescendant = E.PopupList) : c && e === -1 && this.currentFocusedIndex !== void 0 && (t.data.currentFocusedIndex = void 0), this.base.triggerPageChangeCornerItems(a, t);
     },
     searchBarRef() {
       this.input && this.currentFocused && setTimeout(() => this.input.focus(), 0);
@@ -399,18 +399,18 @@ const vt = /* @__PURE__ */ $e({
       else if (s === f.delete) {
         if (c) {
           const a = this.computedValue();
-          H(a, n[r].data, o), this.triggerOnChange(a, t);
+          P(a, n[r].data, o), this.triggerOnChange(a, t);
         }
       } else if (s === f.backspace) {
         const a = this.computedValue();
         if (c)
-          H(a, n[r].data, o), this.triggerOnChange(a, t);
+          P(a, n[r].data, o), this.triggerOnChange(a, t);
         else if (!c && n.length) {
           const h = n.pop();
-          H(a, h.data, o), this.triggerOnChange(a, t);
+          P(a, h.data, o), this.triggerOnChange(a, t);
         }
       }
-      d !== i && (t.data.currentFocusedTag = d, t.data.activedescendant = L.TagsList), this.applyState(t);
+      d !== i && (t.data.currentFocusedTag = d, t.data.activedescendant = E.TagsList), this.applyState(t);
     },
     triggerOnChange(e, t) {
       this.$props.value === void 0 && (t.data.currentValue = [...e]), this.valuesItemsDuringOnChange = [], this.setItems(e, this.valuesItemsDuringOnChange), t.events.push({
@@ -596,25 +596,25 @@ const vt = /* @__PURE__ */ $e({
       tagsRounded: m,
       removeTagIcon: $,
       adaptiveTitle: re,
-      header: P,
-      footer: W,
+      header: K,
+      footer: G,
       inputAttributes: le,
       groupStickyHeaderItemRender: de,
       dataItems: F = []
-    } = this.$props, ue = this.currentFocused, D = Object.assign({}, {
+    } = this.$props, ue = this.currentFocused, R = Object.assign({}, {
       animate: !0,
       height: "200px"
-    }, this.$props.popupSettings), B = this.currentFocusedTag, G = this.computedValue(), M = (this.$props.filter !== void 0 ? this.$props.filter : this.currentText) || "", ce = !c && (!!M || G.length > 0), y = this.base.vs, N = this.$props.id || this.inputId, pe = b.call(this, this.$props.tagRender, I.call(this)), A = this.isOpen, T = this.adaptiveState, q = Ue(this);
-    this.group === void 0 && this.$props.groupField !== void 0 && (this.group = x(this.$props.dataItems[0], this.$props.groupField)), y.enabled = d !== void 0, d !== void 0 && (y.skip = d.skip, y.total = d.total, y.pageSize = d.pageSize);
+    }, this.$props.popupSettings), M = this.currentFocusedTag, q = this.computedValue(), A = (this.$props.filter !== void 0 ? this.$props.filter : this.currentText) || "", ce = !c && !i && (!!A || q.length > 0), y = this.base.vs, _ = this.$props.id || this.inputId, pe = b.call(this, this.$props.tagRender, I.call(this)), L = this.isOpen, T = this.adaptiveState, U = Ue(this);
+    this.group === void 0 && this.$props.groupField !== void 0 && (this.group = C(this.$props.dataItems[0], this.$props.groupField)), y.enabled = d !== void 0, d !== void 0 && (y.skip = d.skip, y.total = d.total, y.pageSize = d.pageSize);
     let v = [];
     this.initialAdaptiveRenderingValues ? [...this.initialAdaptiveRenderingValues].forEach((p) => {
       v.push({
-        text: x(p, o),
+        text: C(p, o),
         data: [p]
       });
     }) : n === void 0 ? this.computedValue().forEach((u) => {
       v.push({
-        text: x(u, o),
+        text: C(u, o),
         data: [u]
       });
     }) : v.push(...n), v.length > 0 && this.setItems(v, this._tags);
@@ -623,63 +623,63 @@ const vt = /* @__PURE__ */ $e({
         placeholder: k
       } = this.$props, {
         focusedIndex: O
-      } = this.getFocusedState(), C = v.length === 0 || G.length === 0 && !M ? k : void 0, V = p === L.TagsList && B !== void 0 ? `tag-${this.base.guid}-${B.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${O}`;
+      } = this.getFocusedState(), x = v.length === 0 || q.length === 0 && !A ? k : void 0, D = p === E.TagsList && M !== void 0 ? `tag-${this.base.guid}-${M.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${O}`, V = this.$props.ariaDescribedBy ? " " + this.$props.ariaDescribedBy : "", B = v.length > 0 ? `tagslist-${this.base.guid}${V}` : this.$props.ariaDescribedBy;
       return l(Ae, {
         id: u,
-        size: Math.max((C || "").length, M.length, 1),
+        size: Math.max((x || "").length, A.length, 1),
         tabIndex: this.$props.tabIndex,
         accessKey: this.$props.accessKey,
-        placeholder: C,
-        value: T ? "" : M,
+        placeholder: x,
+        value: T ? "" : A,
         onChange: this.onChangeHandler,
         onBlur: this.handleBlur,
         onKeydown: this.onInputKeyDown,
-        ref: (w) => {
-          this.inputRef = w;
+        ref: (H) => {
+          this.inputRef = H;
         },
         disabled: i,
-        expanded: A,
+        expanded: L,
         owns: this.base.listBoxId,
-        activedescendant: V,
-        "aria-describedBy": `tagslist-${this.base.guid}${this.$props.ariaDescribedBy ? " " + this.$props.ariaDescribedBy : ""}`,
+        activedescendant: D,
+        ariaDescribedBy: B,
         "aria-labelledBy": this.$props.ariaLabelledBy,
         "aria-label": this.$props.ariaLabel,
         inputAttributes: le
       }, null);
-    }, U = function() {
+    }, Y = function() {
       let u;
       const {
         groupField: p
-      } = this.$props, k = b.call(this, this.$props.itemRender, I.call(this)), O = b.call(this, this.$props.groupHeaderItemRender, I.call(this)), C = b.call(this, this.$props.listNoDataRender, I.call(this)), V = d ? d.skip : 0, {
-        focusedIndex: w
-      } = this.getFocusedState(), K = `translateY(${y.translate}px)`;
-      let J = F;
-      return p && (J = this.base.getGroupedDataModernMode(F, p)), l(Be, {
+      } = this.$props, k = b.call(this, this.$props.itemRender, I.call(this)), O = b.call(this, this.$props.groupHeaderItemRender, I.call(this)), x = b.call(this, this.$props.listNoDataRender, I.call(this)), D = d ? d.skip : 0, {
+        focusedIndex: V
+      } = this.getFocusedState(), B = `translateY(${y.translate}px)`;
+      let H = F;
+      return p && (H = this.base.getGroupedDataModernMode(F, p)), l(Re, {
         id: this.base.listBoxId,
-        show: A,
-        dataItems: J.slice(),
-        focusedIndex: w,
+        show: L,
+        dataItems: H.slice(),
+        focusedIndex: V,
         value: this.computedValue(),
         textField: o,
         valueField: r,
         optionsGuid: this.base.guid,
         ref: "list",
         wrapperStyle: {
-          maxHeight: T ? void 0 : D.height
+          maxHeight: T ? void 0 : R.height
         },
         wrapperCssClass: "k-list-content",
         listStyle: y.enabled ? {
-          transform: K
+          transform: B
         } : void 0,
         key: "listKey",
-        skip: V,
+        skip: D,
         onListclick: this.handleItemClick,
         itemRender: k,
         groupHeaderItemRender: O,
-        noDataRender: C,
+        noDataRender: x,
         groupField: p,
         onScroll: this.onScroll
-      }, E(u = ge.call(this)) ? u : {
+      }, N(u = ge.call(this)) ? u : {
         default: () => [u]
       });
     }, ge = function() {
@@ -690,51 +690,51 @@ const vt = /* @__PURE__ */ $e({
     }, me = function() {
       const u = this.base, {
         allowCustom: p
-      } = this.$props, k = b.call(this, this.$props.groupStickyHeaderItemRender, I.call(this)), O = u.getTemplateDef.call(this, P), C = u.getTemplateDef.call(this, W), V = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
-        focusedType: w
-      } = this.getFocusedState(), K = p && V && l("div", {
+      } = this.$props, k = b.call(this, this.$props.groupStickyHeaderItemRender, I.call(this)), O = u.getTemplateDef.call(this, K), x = u.getTemplateDef.call(this, G), D = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, {
+        focusedType: V
+      } = this.getFocusedState(), B = p && D && l("div", {
         class: "k-list",
         key: "customitem",
         onClick: this.customItemSelect
       }, [l("div", {
-        class: R("k-item k-custom-item", {
-          "k-focus": oe(w)
+        class: w("k-item k-custom-item", {
+          "k-focus": oe(V)
         })
-      }, [V, l(Re, {
+      }, [D, l(Be, {
         name: "plus",
         icon: je,
         style: {
           float: "right"
         }
       }, null)])]);
-      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = x(F[0], this.$props.groupField)), l(De, {
+      return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = C(F[0], this.$props.groupField)), l(we, {
         ref: "container",
         onMousedown: Qe,
         dir: s !== void 0 ? s : u.dirCalculated,
         onBlur: this.handleBlur,
         width: this.popupWidth,
         popupSettings: {
-          ...D,
+          ...R,
           anchor: this.anchor,
-          show: A,
+          show: L,
           onOpen: this.onPopupOpened,
           onClose: this.onPopupClosed,
-          popupClass: R(D.popupClass, "k-list", {
-            [`k-list-${z[a] || a}`]: a,
+          popupClass: w(R.popupClass, "k-list", {
+            [`k-list-${W[a] || a}`]: a,
             "k-virtual-list": this.base.vs.enabled
           }),
-          className: R("k-list-container", D.className)
+          className: w("k-list-container", R.className)
         },
         itemsCount: F.length
       }, {
         default: () => [O && l("div", {
           class: "k-list-header"
-        }, [O]), K, this.group && F.length !== 0 && l(ee, {
+        }, [O]), B, this.group && F.length !== 0 && l(ee, {
           group: this.group,
           render: k
-        }, null), U.call(this), C && l("div", {
+        }, null), Y.call(this), x && l("div", {
           class: "k-list-footer"
-        }, [C]), d && P]
+        }, [x]), d && K]
       });
     }, ve = function() {
       const u = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
@@ -757,7 +757,7 @@ const vt = /* @__PURE__ */ $e({
       class: "k-actionsheet-subtitle k-text-center"
     }, null)]), l("div", {
       class: "k-actionsheet-actions"
-    }, [l(j, {
+    }, [l(z, {
       tabIndex: 5,
       "aria-label": "Cancel",
       "aria-disabled": "false",
@@ -769,63 +769,63 @@ const vt = /* @__PURE__ */ $e({
     }, null)])]), l("div", {
       class: "k-actionsheet-titlebar-group k-actionsheet-filter"
     }, [ve.call(this)])], Ie = b.call(this, be, I.call(this)), Se = () => {
-      const u = q.toLanguageString(se, ie[se]), p = q.toLanguageString(ne, ie[ne]);
-      return [l(j, {
+      const u = U.toLanguageString(se, ie[se]), p = U.toLanguageString(ne, ie[ne]);
+      return [l(z, {
         size: "large",
         "aria-label": u,
         "aria-disabled": "false",
         type: "button",
         onClick: this.onCancel
-      }, E(u) ? u : {
+      }, N(u) ? u : {
         default: () => [u]
-      }), l(j, {
+      }), l(z, {
         themeColor: "primary",
         size: "large",
         "aria-label": p,
         "aria-disabled": "false",
         type: "button",
         onClick: this.handleWrapperClick
-      }, E(p) ? p : {
+      }, N(p) ? p : {
         default: () => [p]
       })];
     }, ye = b.call(this, Se, I.call(this)), ke = () => {
-      const u = this.base.getTemplateDef.call(this, P, _), p = this.base.getTemplateDef.call(this, W, _), k = b.call(this, de, I.call(this));
+      const u = this.base.getTemplateDef.call(this, K, j), p = this.base.getTemplateDef.call(this, G, j), k = b.call(this, de, I.call(this));
       return l("div", {
         class: "k-list-container"
       }, [u && l("div", {
         class: "k-list-header"
       }, [u]), l("div", {
-        class: R("k-list", {
-          [`k-list-${z[a] || a}`]: T ? !1 : a,
+        class: w("k-list", {
+          [`k-list-${W[a] || a}`]: T ? !1 : a,
           "k-list-lg": !!T,
           "k-virtual-list": y.enabled
         })
       }, [this.group && F.length !== 0 && l(ee, {
         group: this.group,
         render: k
-      }, null), U.call(this), p && l("div", {
+      }, null), Y.call(this), p && l("div", {
         class: "k-list-footer"
       }, [p])])]);
-    }, Ce = b.call(this, ke, I.call(this)), xe = function() {
+    }, xe = b.call(this, ke, I.call(this)), Ce = function() {
       return l(Ge, {
-        expand: A,
+        expand: L,
         animation: !0,
         animationStyles: this.animationStyles,
         className: this.classNameAdaptive,
         contentClassName: "!k-overflow-hidden",
         footerClassName: "k-actions k-actions-stretched",
         header: Ie,
-        content: Ce,
+        content: xe,
         footer: ye,
         onClose: this.onCancel,
         navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
       }, null);
-    }, Y = [_(function() {
+    }, J = [j(function() {
       let u;
       return l("span", {
-        ref: we(this, "kendoAnchor"),
-        class: R("k-multiselect", "k-input", {
-          [`k-input-${z[a] || a}`]: a,
+        ref: Ve(this, "kendoAnchor"),
+        class: w("k-multiselect", "k-input", {
+          [`k-input-${W[a] || a}`]: a,
           [`k-rounded-${Ye[g] || g}`]: g,
           [`k-input-${h}`]: h,
           "k-focus": ue && !i,
@@ -851,8 +851,8 @@ const vt = /* @__PURE__ */ $e({
         onTagdelete: this.onTagDelete,
         dataItems: v,
         guid: this.base.guid,
-        focused: B ? v.find((p) => ae(p, B, r)) : void 0
-      }, E(u = fe.call(this, N)) ? u : {
+        focused: M ? v.find((p) => ae(p, M, r)) : void 0
+      }, N(u = fe.call(this, _)) ? u : {
         default: () => [u]
       }), v.length > 0 && ce && l(He, {
         onClearclick: this.clearButtonClick
@@ -861,16 +861,16 @@ const vt = /* @__PURE__ */ $e({
       }, null), !T && me.call(this)]);
     }.call(this), {
       ...this.$attrs
-    }), T && xe.call(this)];
+    }), T && Ce.call(this)];
     return t ? l("span", {
       class: this.spanClassNames,
       dir: this.$props.dir
-    }, [Y, this.$props.label ? N ? l("label", {
-      for: N,
+    }, [J, this.$props.label ? _ ? l("label", {
+      for: _,
       class: "k-floating-label"
     }, [this.$props.label]) : l("span", {
       class: "k-label"
-    }, [this.$props.label]) : null]) : Y;
+    }, [this.$props.label]) : null]) : J;
   }
 });
 export {

package/MultiSelect/TagList.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 i=require("vue"),n=require("@progress/kendo-vue-common"),v=require("@progress/kendo-vue-buttons"),S=e=>e.preventDefault(),T=e=>e.event.stopPropagation(),b=i.defineComponent({name:"TagList",inheritAttrs:!1,props:{removeTagIcon:String,dataItems:Array,guid:String,focused:Object,tagRender:[String,Function,Object],tagsRounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},id:String,className:String,size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},onTagdelete:Function},computed:{wrapperClass(){const{size:e,disabled:t}=this.$props;return{"k-chip-list":!0,[`k-chip-list-${n.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-disabled":t}}},methods:{onTagDelete(e,t){this.$emit("tagdelete",e,t)}},render(){const e=n.getDefaultSlots(this),{dataItems:t,guid:o,size:d,disabled:l,tagsRounded:u,removeTagIcon:c,id:p,className:g}=this.$props;return i.createVNode("div",{class:n.classNames("k-input-values",g),id:p,style:this.$attrs.style},[i.createVNode("div",{class:this.wrapperClass,role:"listbox",id:"tagslist-"+o},[t.map(function(s,r){const m=`tag-${o}-${s.text.toString().replace(/\s+/g,"-")}`,a=s===this.$props.focused,h=i.createVNode(v.Chip,{id:m,tabIndex:-1,"aria-selected":a,role:"option","aria-setsize":t.length,key:s.text+r,text:s.text,disabled:l,removable:!0,onRemove:f=>this.onTagDelete(s.data,f),removeIcon:c,onMousedown:S,onClick:T,class:a?"k-focus":void 0,rounded:u,size:d},null);return n.getTemplate.call(this,{h:i.h,template:this.$props.tagRender,defaultRendering:h,additionalProps:{...this.$props,tagData:s,index:r},additionalListeners:{tagdelete:this.onTagDelete}})},this)]),e])}});exports.TagList=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),n=require("@progress/kendo-vue-common"),v=require("@progress/kendo-vue-buttons"),S=e=>e.preventDefault(),b=e=>e.event.stopPropagation(),T=i.defineComponent({name:"TagList",inheritAttrs:!1,props:{removeTagIcon:String,dataItems:Array,guid:String,focused:Object,tagRender:[String,Function,Object],tagsRounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},id:String,className:String,size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},onTagdelete:Function},computed:{wrapperClass(){const{size:e,disabled:t}=this.$props;return{"k-chip-list":!0,[`k-chip-list-${n.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-disabled":t}}},methods:{onTagDelete(e,t){this.$emit("tagdelete",e,t)}},render(){const e=n.getDefaultSlots(this),{dataItems:t,guid:o,size:l,disabled:d,tagsRounded:u,removeTagIcon:c,id:p,className:g}=this.$props;return i.createVNode("div",{class:n.classNames("k-input-values",g),id:p,style:this.$attrs.style},[i.createVNode("div",{class:this.wrapperClass,role:"listbox","aria-label":"chip list","aria-orientation":"horizontal",id:"tagslist-"+o},[t.map(function(s,a){const m=`tag-${o}-${s.text.toString().replace(/\s+/g,"-")}`,r=s===this.$props.focused,h=i.createVNode(v.Chip,{id:m,tabIndex:-1,"aria-selected":r,role:"option","aria-setsize":t.length,key:s.text+a,text:s.text,disabled:d,removable:!0,onRemove:f=>this.onTagDelete(s.data,f),removeIcon:c,onMousedown:S,onClick:b,class:r?"k-focus":void 0,rounded:u,size:l},null);return n.getTemplate.call(this,{h:i.h,template:this.$props.tagRender,defaultRendering:h,additionalProps:{...this.$props,tagData:s,index:a},additionalListeners:{tagdelete:this.onTagDelete}})},this)]),e])}});exports.TagList=T;

package/MultiSelect/TagList.mjs

@@ -5,10 +5,10 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as h, createVNode as i, h as v } from "vue";
-import { getDefaultSlots as S, classNames as T, getTemplate as $, kendoThemeMaps as b } from "@progress/kendo-vue-common";
+import { defineComponent as f, createVNode as s, h as v } from "vue";
+import { getDefaultSlots as S, classNames as b, getTemplate as T, kendoThemeMaps as $ } from "@progress/kendo-vue-common";
 import { Chip as k } from "@progress/kendo-vue-buttons";
-const x = (e) => e.preventDefault(), y = (e) => e.event.stopPropagation(), C = /* @__PURE__ */ h({
+const x = (e) => e.preventDefault(), y = (e) => e.event.stopPropagation(), C = /* @__PURE__ */ f({
   name: "TagList",
   inheritAttrs: !1,
   props: {
@@ -47,7 +47,7 @@ const x = (e) => e.preventDefault(), y = (e) => e.event.stopPropagation(), C = /
       } = this.$props;
       return {
         "k-chip-list": !0,
-        [`k-chip-list-${b.sizeMap[e] || e}`]: e,
+        [`k-chip-list-${$.sizeMap[e] || e}`]: e,
         "k-disabled": t
       };
     }
@@ -61,47 +61,49 @@ const x = (e) => e.preventDefault(), y = (e) => e.event.stopPropagation(), C = /
     const e = S(this), {
       dataItems: t,
       guid: n,
-      size: a,
+      size: r,
       disabled: l,
       tagsRounded: d,
-      removeTagIcon: u,
-      id: p,
+      removeTagIcon: p,
+      id: u,
       className: c
     } = this.$props;
-    return i("div", {
-      class: T("k-input-values", c),
-      id: p,
+    return s("div", {
+      class: b("k-input-values", c),
+      id: u,
       style: this.$attrs.style
-    }, [i("div", {
+    }, [s("div", {
       class: this.wrapperClass,
       role: "listbox",
+      "aria-label": "chip list",
+      "aria-orientation": "horizontal",
       id: "tagslist-" + n
-    }, [t.map(function(s, o) {
-      const g = `tag-${n}-${s.text.toString().replace(/\s+/g, "-")}`, r = s === this.$props.focused, m = i(k, {
+    }, [t.map(function(i, o) {
+      const g = `tag-${n}-${i.text.toString().replace(/\s+/g, "-")}`, a = i === this.$props.focused, m = s(k, {
         id: g,
         tabIndex: -1,
-        "aria-selected": r,
+        "aria-selected": a,
         role: "option",
         "aria-setsize": t.length,
-        key: s.text + o,
-        text: s.text,
+        key: i.text + o,
+        text: i.text,
         disabled: l,
         removable: !0,
-        onRemove: (f) => this.onTagDelete(s.data, f),
-        removeIcon: u,
+        onRemove: (h) => this.onTagDelete(i.data, h),
+        removeIcon: p,
         onMousedown: x,
         onClick: y,
-        class: r ? "k-focus" : void 0,
+        class: a ? "k-focus" : void 0,
         rounded: d,
-        size: a
+        size: r
       }, null);
-      return $.call(this, {
+      return T.call(this, {
         h: v,
         template: this.$props.tagRender,
         defaultRendering: m,
         additionalProps: {
           ...this.$props,
-          tagData: s,
+          tagData: i,
           index: o
         },
         additionalListeners: {

package/MultiSelectTree/MultiSelectTree.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"),oe=require("@progress/kendo-vue-intl"),E=require("@progress/kendo-vue-treeview"),T=require("../package-metadata.js"),y=require("../common/utils.js"),le=require("../DropDownTree/ListNoData.js"),p=require("../messages/main.js"),re=require("@progress/kendo-vue-labels"),$=require("@progress/kendo-vue-buttons"),de=require("../MultiSelect/TagList.js"),ce=require("../common/ClearButton.js"),L=require("../common/ListFilter.js"),he=require("./utils.js"),q=require("../common/constants.js"),ue=require("@progress/kendo-vue-layout"),pe=require("@progress/kendo-svg-icons"),fe=require("../common/DropDownBase.js");function F(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!s.isVNode(e)}const ge="Please select a value from the list!",{sizeMap:A,roundedMap:me}=t.kendoThemeMaps,ve=e=>e.split("_").map(i=>parseInt(i,10)),O=(e,i)=>{const{validationMessage:a,valid:n,required:o}=e;return{customError:a!==void 0,valid:!!(n!==void 0?n:!o||i),valueMissing:!i}},ye=s.defineComponent({name:"KendoMultiSelectTree",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:Array,modelValue:Array,valueMap:Function,placeholder:String,dataItemKey:{type:String,required:!0},textField:{type:String,required:!0},checkField:{type:String,default:"checkField"},checkIndeterminateField:{type:String,default:"checkIndeterminateField"},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,ariaLabelledBy:String,ariaDescribedBy:String,filterable:Boolean,filter:String,loading:Boolean,tags:Array,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],tag:[String,Function,Object],header:[String,Function,Object],footer:[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:q.MOBILE_SMALL_DEVICE,medium:q.MOBILE_MEDIUM_DEVICE}}},created(){this.observer=null,t.validatePackage(T.packageMetadata),this.showLicenseWatermark=t.shouldShowValidationUI(T.packageMetadata),this.licenseMessage=t.getLicenseMessage(T.packageMetadata),this.base=new fe(this),this.componentGuid=t.guid(),this.anchor=t.guid()},data(){return{showLicenseWatermark:!1,licenseMessage:void 0,focusedTagState:void 0,openState:!1,focusedState:!1,filterState:"",currentValue:[],popupWidth:"200px",windowWidth:0,initialAdaptiveRenderingValues:void 0}},computed:{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.openState},computedValue(){return this.value!==void 0?this.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},hasValue(){return!!this.computedValue.length},tagsToRenderRef(){if(this.initialAdaptiveRenderingValues===void 0)return this.tags===void 0?this.computedValue.map(e=>({text:y.getItemValue(e,this.$props.textField),data:[e]})):[...this.tags];{const e=this.initialAdaptiveRenderingValues;return e.length>0&&e.map(i=>({text:y.getItemValue(i,this.$props.textField),data:[i]}))}}},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:a,dataItemKey:n,popupSettings:o={},disabled:d,placeholder:l,label:r,name:c,checkField:g,checkIndeterminateField:k,subItemsField:M,validationMessage:P,valid:W,value:C,required:R,validityStyles:z,adaptiveTitle:j}=this.$props,V=t.getTabIndex(this.$props.tabIndex,d),w=oe.provideLocalizationService(this),_=O({validationMessage:P,valid:W,required:R},this.hasValue),b=this.$props.dir,K=this.adaptiveState,N=t.templateRendering.call(this,this.item,t.getListeners.call(this)),G=t.templateRendering.call(this,this.tag,t.getListeners.call(this)),H=t.templateRendering.call(this,this.$props.header,t.getListeners.call(this)),U=t.templateRendering.call(this,this.$props.footer,t.getListeners.call(this)),x=t.getTemplate.call(this,{h:s.h,template:H}),I=t.getTemplate.call(this,{h:s.h,template:U}),J=t.templateRendering.call(this,this.$props.listNoData,t.getListeners.call(this)),Q=s.createVNode(le.ListNoData,null,F(e=w.toLanguageString(p.nodata,p.messages[p.nodata]))?e:{default:()=>[e]}),B=t.getTemplate.call(this,{h:s.h,defaultRendering:Q,template:J}),D=!z||_.valid,{size:h,rounded:m,fillMode:v}=this.$props,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"},[j]),s.createVNode("div",{class:"k-actionsheet-subtitle k-text-center"},[l])]),s.createVNode("div",{class:"k-actionsheet-actions"},[s.createVNode($.Button,{tabIndex:5,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.onCancel,icon:"x",svgIcon:pe.xIcon},null)])]),s.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[this.$props.filterable&&s.createVNode(L.ListFilter,{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:m,fillMode:v,onFocus:this.onFocus,onBlur:this.onBlur},null)])],Y=t.templateRendering.call(this,X,t.getListeners.call(this)),Z=()=>{const u=w.toLanguageString(p.adaptiveModeFooterCancel,p.messages[p.adaptiveModeFooterCancel]),f=w.toLanguageString(p.adaptiveModeFooterApply,p.messages[p.adaptiveModeFooterApply]);return[s.createVNode($.Button,{size:"large","aria-label":u,"aria-disabled":"false",type:"button",onClick:this.onCancel},F(u)?u:{default:()=>[u]}),s.createVNode($.Button,{themeColor:"primary",size:"large","aria-label":f,"aria-disabled":"false",type:"button",onClick:this.closePopup},F(f)?f:{default:()=>[f]})]},ee=t.templateRendering.call(this,Z,t.getListeners.call(this)),te=()=>{const u=this.base.getTemplateDef.call(this,x,s.h),f=this.base.getTemplateDef.call(this,I,s.h);return[u&&s.createVNode("div",{class:"k-list-header"},[u]),a.length>0?s.createVNode(E.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:V,dataItems:a,focusIdField:n,textField:this.$props.textField,checkField:g,checkIndeterminateField:k,expandField:this.$props.expandField,childrenField:M,expandIcons:!0,onItemclick:this.onChange,onCheckchange:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,checkboxes:!0,size:"large",item:N},null):B,f&&s.createVNode("div",{class:"k-list-footer"},[f])]},ie=t.templateRendering.call(this,te,t.getListeners.call(this)),se=function(){return s.createVNode(ue.ActionSheet,{expand:this.isOpen,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,footerClassName:"k-actions k-actions-stretched",contentClassName:"!k-overflow-hidden",header:Y,content:ie,footer:ee,onClose:this.onCancel,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},ae=function(){return s.createVNode("span",{ref:t.setRef(this,"kendoAnchor"),class:t.classNames("k-multiselecttree k-input",this.$props.className,{[`k-input-${A[h]||h}`]:h,[`k-rounded-${me[m]||m}`]:m,[`k-input-${v}`]:v,"k-focus":this.focusedState&&!d,"k-invalid":!D,"k-disabled":d,"k-loading":this.$props.loading,"k-required":R}),tabindex:V,accesskey:this.$props.accessKey,id:i,dir:b,onKeydown:this.onWrapperKeyDown,onMousedown:this.onWrapperMouseDown,onFocusin:this.onFocus,onFocusout:this.onBlur,role:"combobox","aria-haspopup":"tree","aria-expanded":this.isOpen,"aria-disabled":d,"aria-label":r,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaLabelledBy?this.$props.ariaLabelledBy:"tagslist-"+i,"aria-required":this.$props.required,onClick:this.onWrapperClick},[this.tagsToRenderRef.length>0&&s.createVNode(de.TagList,{id:"tagslist-"+i,class:t.classNames("k-input-values k-chip-list k-selection-multiple",{[`k-chip-list-${A[h]||h}`]:h,"k-readonly":this.hasValue}),tagRender:G,onTagdelete:this.onTagDelete,dataItems:this.tagsToRenderRef,guid:i,focused:this.focusedTagState?this.tagsToRenderRef.find(u=>this.focusedTagState&&y.matchTags(u,this.focusedTagState,n)):void 0,tagsRounded:m,size:h,fillMode:v},null),s.createVNode("span",{class:"k-input-inner",role:"combobox",tabindex:V,"aria-expanded":this.isOpen,"aria-describedby":"tagslist-"+i,"aria-label":this.$props.ariaLabelledBy},[this.tagsToRenderRef.length===0&&s.createVNode("span",{class:"k-input-value-text"},[l])]),this.$props.loading&&s.createVNode(t.Icon,{class:"k-input-loading-icon",name:"loading"},null),this.hasValue&&!d&&s.createVNode(ce.ClearButton,{onClearclick:this.onClear},null),s.createVNode("select",{name:c,ref:t.setRef(this,"select"),tabindex:-1,"aria-hidden":!0,required:R,title:r,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,C):C},null)]),this.showLicenseWatermark?s.createVNode(t.WatermarkOverlay,{message:this.licenseMessage},null):null,!K&&s.createVNode(ne.Popup,{style:{width:this.popupWidth,direction:b},popupClass:t.classNames(o.popupClass,"k-multiselecttree-popup","popup-"+this.componentGuid),class:t.classNames(o.className,{"k-rtl":b==="rtl"}),animate:o.animate,anchor:this.anchor,show:this.isOpen,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,appendTo:o.appendTo,ref:t.setRef(this,"popup")},{default:()=>[this.$props.filterable&&s.createVNode(L.ListFilter,{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:m,fillMode:v,onFocus:this.onFocus,onBlur:this.onBlur},null),x&&s.createVNode("div",{class:"k-list-header"},[x]),a.length>0?s.createVNode(E.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:V,dataItems:a,focusIdField:n,textField:this.$props.textField,checkField:g,checkIndeterminateField:k,expandField:this.$props.expandField,childrenField:M,expandIcons:!0,onItemclick:this.onChange,onCheckchange:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,checkboxes:!0,size:h,item:N},null):B,I&&s.createVNode("div",{class:"k-list-footer"},[I])]})])},S=[s.h(ae.call(this),{...this.$attrs}),K&&se.call(this)];return r?s.createVNode(re.FloatingLabel,{label:r,editorValue:this.hasValue,editorPlaceholder:l,editorValid:D,editorDisabled:d,editorId:i,dir:b},F(S)?S:{default:()=>[S]}):S},methods:{clearFilter(e){this.onFilterChange(e,"")},onCancel(e){const i={event:e,target:this},a={items:[],operation:"toggle",value:this.initialAdaptiveRenderingValues,...i};this.$emit("change",a),this.closePopup(e)},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:a}=this.$props,n=O({validationMessage:e,valid:i,required:a},this.hasValue);this.selectRef.setCustomValidity(n.valid?"":this.validationMessage===void 0?ge:this.validationMessage)}},changeValue(e,i,a){const n={dataItemKey:this.dataItemKey,checkField:this.checkField,checkIndeterminateField:this.checkIndeterminateField,expandField:this.expandField,subItemsField:this.subItemsField},o=he.getMultiSelectTreeValue(this.dataItems,{...n,items:i,operation:a,value:this.computedValue}),d={items:i,operation:a,value:o,...e};this.$emit("changemodel",o),this.$emit("update:modelValue",o),this.$emit("change",d)},onChange(e){if(y.areSame(e.item,this.computedValue,this.dataItemKey))return;const{item:i,event:a}=e,n={event:a,target:this};this.changeValue(n,[i],"toggle")},openPopup(e){if(!this.isOpen){const i={...e};this.$emit("open",i),this.opened===void 0&&(this.openState=!0)}},closePopup(e){if(this.$props.filterable&&this.clearFilter({...e,target:{...e.target,value:""}}),this.isOpen){const i={...e};this.$emit("close",i),this.opened===void 0&&(this.openState=!1)}},switchFocus(e){this.skipFocusRef=!0,e(),window.setTimeout(()=>this.skipFocusRef=!1,0)},focusElement(e){e&&this.switchFocus(()=>e.focus())},onPopupOpened(){if(!this.focusedState&&this.isOpen)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.input)},onPopupClosed(){this.focusedState&&this.focusElement(this.elementRef)},onFocus(e){if(!this.focusedState&&!this.skipFocusRef){this.focusedState=!0;const i={event:e,target:this};this.$emit("focus",i)}},onBlur(e){var i;if(this.focusedState&&!this.skipFocusRef&&!this.adaptiveState){this.focusedTagState=void 0,this.focusedState=!1;const a={event:e,target:this},n={...a},o=e.relatedTarget||((i=e.event)==null?void 0:i.relatedTarget);o!=null&&o.closest(".popup-"+this.componentGuid)||(this.$emit("blur",n),this.closePopup(a))}},onWrapperMouseDown(){this.focusedState&&this.switchFocus(t.noop)},onWrapperClick(e){if(!this.$props.disabled&&!e.defaultPrevented){this.focusedState=!0;const i={event:e,target:this};this.isOpen||this.openPopup(i)}},onWrapperKeyDown(e){const{keyCode:i,altKey:a}=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={event:e,target:this};if(this.computedValue&&this.computedValue.length>0&&(i===t.Keys.left||i===t.Keys.right||i===t.Keys.home||i===t.Keys.end||i===t.Keys.delete||i===t.Keys.backspace)){const l=this.tagsToRenderRef;let r=this.focusedTagState?l.findIndex(k=>y.matchTags(k,this.focusedTagState,this.dataItemKey)):-1,c;const g=r!==-1;i===t.Keys.left?(g?r=Math.max(0,r-1):r=l.length-1,c=l[r]):i===t.Keys.right?g?(r=Math.min(l.length-1,r+1),c=l[r]):c=l[0]:i===t.Keys.home?c=l[0]:i===t.Keys.end?c=l[l.length-1]:(i===t.Keys.delete||i===t.Keys.backspace)&&g&&this.changeValue(d,l[r].data,"delete"),c!==this.focusedTagState&&(this.focusedTagState=c)}if(this.isOpen)if(i===t.Keys.esc||a&&i===t.Keys.up)e.preventDefault(),this.switchFocus(()=>{this.focusElement(this.elementRef)}),this.closePopup(d);else if(n&&n.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){const l=Array.from(n.querySelectorAll(".k-treeview-item")),r=[...l].reverse().find(c=>!!(c&&c.querySelector(".k-focus")));if(r&&l.indexOf(r)===0)return this.switchFocus(()=>{this.focusElement(o||this.elementRef)})}this.switchFocus(t.noop)}else i===t.Keys.down&&this.switchFocus(()=>{this.focusElement(o||n)});else a&&i===t.Keys.down&&(e.preventDefault(),this.openPopup(d))},onInputKeyDown(e){const{keyCode:i,altKey:a}=e;(i===t.Keys.esc||a&&i===t.Keys.up)&&(e.preventDefault(),this.switchFocus(()=>{this.focusElement(this.elementRef)}),i===t.Keys.esc&&this.adaptiveState?this.onCancel(e):this.closePopup(e)),!(a||i!==t.Keys.up&&i!==t.Keys.down)&&(e.preventDefault(),this.switchFocus(i===t.Keys.up?()=>{this.focusElement(this.elementRef)}:()=>{this.focusElement(this.treeViewRef&&this.treeViewRef.$el)}))},onClear(e){const i={event:e,target:this};this.changeValue(i,[],"clear"),this.closePopup(i),this.filterState="",e.preventDefault()},onTagDelete(e,i){if(this.closePopup({target:this}),!this.focusedState){const a=this.inputRef&&this.inputRef.input;this.focusElement(a)}this.changeValue({event:i,target:this},e,"delete")},onExpand(e){const{item:i,itemHierarchicalIndex:a,event:n}=e,o={level:ve(a),item:i,event:n,target:this};this.$emit("expandchange",o)},onFilterChange(e,i){const a=i?"":e.target.value,o={filter:{field:this.$props.textField,operator:"contains",value:a},event:e,target:this};this.$emit("filterchange",o),this.$props.filter===void 0&&(this.filterState=a)}}});exports.MultiSelectTree=ye;
+"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"),oe=require("@progress/kendo-vue-intl"),E=require("@progress/kendo-vue-treeview"),T=require("../package-metadata.js"),y=require("../common/utils.js"),le=require("../DropDownTree/ListNoData.js"),p=require("../messages/main.js"),re=require("@progress/kendo-vue-labels"),$=require("@progress/kendo-vue-buttons"),de=require("../MultiSelect/TagList.js"),ce=require("../common/ClearButton.js"),L=require("../common/ListFilter.js"),he=require("./utils.js"),q=require("../common/constants.js"),ue=require("@progress/kendo-vue-layout"),pe=require("@progress/kendo-svg-icons"),fe=require("../common/DropDownBase.js");function F(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!s.isVNode(e)}const ge="Please select a value from the list!",{sizeMap:A,roundedMap:me}=t.kendoThemeMaps,ve=e=>e.split("_").map(i=>parseInt(i,10)),O=(e,i)=>{const{validationMessage:a,valid:n,required:o}=e;return{customError:a!==void 0,valid:!!(n!==void 0?n:!o||i),valueMissing:!i}},ye=s.defineComponent({name:"KendoMultiSelectTree",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:Array,modelValue:Array,valueMap:Function,placeholder:String,dataItemKey:{type:String,required:!0},textField:{type:String,required:!0},checkField:{type:String,default:"checkField"},checkIndeterminateField:{type:String,default:"checkIndeterminateField"},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,ariaLabelledBy:String,ariaDescribedBy:String,filterable:Boolean,filter:String,loading:Boolean,tags:Array,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],tag:[String,Function,Object],header:[String,Function,Object],footer:[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:q.MOBILE_SMALL_DEVICE,medium:q.MOBILE_MEDIUM_DEVICE}}},created(){this.observer=null,t.validatePackage(T.packageMetadata),this.showLicenseWatermark=t.shouldShowValidationUI(T.packageMetadata),this.licenseMessage=t.getLicenseMessage(T.packageMetadata),this.base=new fe(this),this.componentGuid=t.guid(),this.anchor=t.guid()},data(){return{showLicenseWatermark:!1,licenseMessage:void 0,focusedTagState:void 0,openState:!1,focusedState:!1,filterState:"",currentValue:[],popupWidth:"200px",windowWidth:0,initialAdaptiveRenderingValues:void 0}},computed:{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.openState},computedValue(){return this.value!==void 0?this.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},hasValue(){return!!this.computedValue.length},tagsToRenderRef(){if(this.initialAdaptiveRenderingValues===void 0)return this.tags===void 0?this.computedValue.map(e=>({text:y.getItemValue(e,this.$props.textField),data:[e]})):[...this.tags];{const e=this.initialAdaptiveRenderingValues;return e.length>0&&e.map(i=>({text:y.getItemValue(i,this.$props.textField),data:[i]}))}}},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:a,dataItemKey:n,popupSettings:o={},disabled:d,placeholder:l,label:r,name:c,checkField:g,checkIndeterminateField:k,subItemsField:M,validationMessage:P,valid:W,value:C,required:R,validityStyles:z,adaptiveTitle:j}=this.$props,V=t.getTabIndex(this.$props.tabIndex,d),w=oe.provideLocalizationService(this),_=O({validationMessage:P,valid:W,required:R},this.hasValue),b=this.$props.dir,K=this.adaptiveState,N=t.templateRendering.call(this,this.item,t.getListeners.call(this)),G=t.templateRendering.call(this,this.tag,t.getListeners.call(this)),H=t.templateRendering.call(this,this.$props.header,t.getListeners.call(this)),U=t.templateRendering.call(this,this.$props.footer,t.getListeners.call(this)),x=t.getTemplate.call(this,{h:s.h,template:H}),I=t.getTemplate.call(this,{h:s.h,template:U}),J=t.templateRendering.call(this,this.$props.listNoData,t.getListeners.call(this)),Q=s.createVNode(le.ListNoData,null,F(e=w.toLanguageString(p.nodata,p.messages[p.nodata]))?e:{default:()=>[e]}),B=t.getTemplate.call(this,{h:s.h,defaultRendering:Q,template:J}),D=!z||_.valid,{size:h,rounded:m,fillMode:v}=this.$props,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"},[j]),s.createVNode("div",{class:"k-actionsheet-subtitle k-text-center"},[l])]),s.createVNode("div",{class:"k-actionsheet-actions"},[s.createVNode($.Button,{tabIndex:5,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.onCancel,icon:"x",svgIcon:pe.xIcon},null)])]),s.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[this.$props.filterable&&s.createVNode(L.ListFilter,{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:m,fillMode:v,onFocus:this.onFocus,onBlur:this.onBlur},null)])],Y=t.templateRendering.call(this,X,t.getListeners.call(this)),Z=()=>{const u=w.toLanguageString(p.adaptiveModeFooterCancel,p.messages[p.adaptiveModeFooterCancel]),f=w.toLanguageString(p.adaptiveModeFooterApply,p.messages[p.adaptiveModeFooterApply]);return[s.createVNode($.Button,{size:"large","aria-label":u,"aria-disabled":"false",type:"button",onClick:this.onCancel},F(u)?u:{default:()=>[u]}),s.createVNode($.Button,{themeColor:"primary",size:"large","aria-label":f,"aria-disabled":"false",type:"button",onClick:this.closePopup},F(f)?f:{default:()=>[f]})]},ee=t.templateRendering.call(this,Z,t.getListeners.call(this)),te=()=>{const u=this.base.getTemplateDef.call(this,x,s.h),f=this.base.getTemplateDef.call(this,I,s.h);return[u&&s.createVNode("div",{class:"k-list-header"},[u]),a.length>0?s.createVNode(E.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:V,dataItems:a,focusIdField:n,textField:this.$props.textField,checkField:g,checkIndeterminateField:k,expandField:this.$props.expandField,childrenField:M,expandIcons:!0,onItemclick:this.onChange,onCheckchange:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,checkboxes:!0,size:"large",item:N},null):B,f&&s.createVNode("div",{class:"k-list-footer"},[f])]},ie=t.templateRendering.call(this,te,t.getListeners.call(this)),se=function(){return s.createVNode(ue.ActionSheet,{expand:this.isOpen,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,footerClassName:"k-actions k-actions-stretched",contentClassName:"!k-overflow-hidden",header:Y,content:ie,footer:ee,onClose:this.onCancel,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},ae=function(){return s.createVNode("span",{ref:t.setRef(this,"kendoAnchor"),class:t.classNames("k-multiselecttree k-input",this.$props.className,{[`k-input-${A[h]||h}`]:h,[`k-rounded-${me[m]||m}`]:m,[`k-input-${v}`]:v,"k-focus":this.focusedState&&!d,"k-invalid":!D,"k-disabled":d,"k-loading":this.$props.loading,"k-required":R}),tabindex:V,accesskey:this.$props.accessKey,id:i,dir:b,onKeydown:this.onWrapperKeyDown,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":r,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaLabelledBy?this.$props.ariaLabelledBy:"tagslist-"+i,"aria-required":this.$props.required||void 0,onClick:this.onWrapperClick},[this.tagsToRenderRef.length>0&&s.createVNode(de.TagList,{id:"tagslist-"+i,class:t.classNames("k-input-values k-chip-list k-selection-multiple",{[`k-chip-list-${A[h]||h}`]:h,"k-readonly":this.hasValue}),tagRender:G,onTagdelete:this.onTagDelete,dataItems:this.tagsToRenderRef,guid:i,focused:this.focusedTagState?this.tagsToRenderRef.find(u=>this.focusedTagState&&y.matchTags(u,this.focusedTagState,n)):void 0,tagsRounded:m,size:h,fillMode:v},null),s.createVNode("span",{class:"k-input-inner",role:"combobox",tabindex:V,"aria-expanded":this.isOpen,"aria-describedby":"tagslist-"+i,"aria-label":this.$props.ariaLabelledBy},[this.tagsToRenderRef.length===0&&s.createVNode("span",{class:"k-input-value-text"},[l])]),this.$props.loading&&s.createVNode(t.Icon,{class:"k-input-loading-icon",name:"loading"},null),this.hasValue&&!d&&s.createVNode(ce.ClearButton,{onClearclick:this.onClear},null),s.createVNode("select",{name:c,ref:t.setRef(this,"select"),tabindex:-1,"aria-hidden":!0,required:R,title:r,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,C):C},null)]),this.showLicenseWatermark?s.createVNode(t.WatermarkOverlay,{message:this.licenseMessage},null):null,!K&&s.createVNode(ne.Popup,{style:{width:this.popupWidth,direction:b},popupClass:t.classNames(o.popupClass,"k-multiselecttree-popup","popup-"+this.componentGuid),class:t.classNames(o.className,{"k-rtl":b==="rtl"}),animate:o.animate,anchor:this.anchor,show:this.isOpen,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,appendTo:o.appendTo,ref:t.setRef(this,"popup")},{default:()=>[this.$props.filterable&&s.createVNode(L.ListFilter,{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:m,fillMode:v,onFocus:this.onFocus,onBlur:this.onBlur},null),x&&s.createVNode("div",{class:"k-list-header"},[x]),a.length>0?s.createVNode(E.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:V,dataItems:a,focusIdField:n,textField:this.$props.textField,checkField:g,checkIndeterminateField:k,expandField:this.$props.expandField,childrenField:M,expandIcons:!0,onItemclick:this.onChange,onCheckchange:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,checkboxes:!0,size:h,item:N},null):B,I&&s.createVNode("div",{class:"k-list-footer"},[I])]})])},S=[s.h(ae.call(this),{...this.$attrs}),K&&se.call(this)];return r?s.createVNode(re.FloatingLabel,{label:r,editorValue:this.hasValue,editorPlaceholder:l,editorValid:D,editorDisabled:d,editorId:i,dir:b},F(S)?S:{default:()=>[S]}):S},methods:{clearFilter(e){this.onFilterChange(e,"")},onCancel(e){const i={event:e,target:this},a={items:[],operation:"toggle",value:this.initialAdaptiveRenderingValues,...i};this.$emit("change",a),this.closePopup(e)},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:a}=this.$props,n=O({validationMessage:e,valid:i,required:a},this.hasValue);this.selectRef.setCustomValidity(n.valid?"":this.validationMessage===void 0?ge:this.validationMessage)}},changeValue(e,i,a){const n={dataItemKey:this.dataItemKey,checkField:this.checkField,checkIndeterminateField:this.checkIndeterminateField,expandField:this.expandField,subItemsField:this.subItemsField},o=he.getMultiSelectTreeValue(this.dataItems,{...n,items:i,operation:a,value:this.computedValue}),d={items:i,operation:a,value:o,...e};this.$emit("changemodel",o),this.$emit("update:modelValue",o),this.$emit("change",d)},onChange(e){if(y.areSame(e.item,this.computedValue,this.dataItemKey))return;const{item:i,event:a}=e,n={event:a,target:this};this.changeValue(n,[i],"toggle")},openPopup(e){if(!this.isOpen){const i={...e};this.$emit("open",i),this.opened===void 0&&(this.openState=!0)}},closePopup(e){if(this.$props.filterable&&this.clearFilter({...e,target:{...e.target,value:""}}),this.isOpen){const i={...e};this.$emit("close",i),this.opened===void 0&&(this.openState=!1)}},switchFocus(e){this.skipFocusRef=!0,e(),window.setTimeout(()=>this.skipFocusRef=!1,0)},focusElement(e){e&&this.switchFocus(()=>e.focus())},onPopupOpened(){if(!this.focusedState&&this.isOpen)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.input)},onPopupClosed(){this.focusedState&&this.focusElement(this.elementRef)},onFocus(e){if(!this.focusedState&&!this.skipFocusRef){this.focusedState=!0;const i={event:e,target:this};this.$emit("focus",i)}},onBlur(e){var i;if(this.focusedState&&!this.skipFocusRef&&!this.adaptiveState){this.focusedTagState=void 0,this.focusedState=!1;const a={event:e,target:this},n={...a},o=e.relatedTarget||((i=e.event)==null?void 0:i.relatedTarget);o!=null&&o.closest(".popup-"+this.componentGuid)||(this.$emit("blur",n),this.closePopup(a))}},onWrapperMouseDown(){this.focusedState&&this.switchFocus(t.noop)},onWrapperClick(e){if(!this.$props.disabled&&!e.defaultPrevented){this.focusedState=!0;const i={event:e,target:this};this.isOpen||this.openPopup(i)}},onWrapperKeyDown(e){const{keyCode:i,altKey:a}=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={event:e,target:this};if(this.computedValue&&this.computedValue.length>0&&(i===t.Keys.left||i===t.Keys.right||i===t.Keys.home||i===t.Keys.end||i===t.Keys.delete||i===t.Keys.backspace)){const l=this.tagsToRenderRef;let r=this.focusedTagState?l.findIndex(k=>y.matchTags(k,this.focusedTagState,this.dataItemKey)):-1,c;const g=r!==-1;i===t.Keys.left?(g?r=Math.max(0,r-1):r=l.length-1,c=l[r]):i===t.Keys.right?g?(r=Math.min(l.length-1,r+1),c=l[r]):c=l[0]:i===t.Keys.home?c=l[0]:i===t.Keys.end?c=l[l.length-1]:(i===t.Keys.delete||i===t.Keys.backspace)&&g&&this.changeValue(d,l[r].data,"delete"),c!==this.focusedTagState&&(this.focusedTagState=c)}if(this.isOpen)if(i===t.Keys.esc||a&&i===t.Keys.up)e.preventDefault(),this.switchFocus(()=>{this.focusElement(this.elementRef)}),this.closePopup(d);else if(n&&n.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){const l=Array.from(n.querySelectorAll(".k-treeview-item")),r=[...l].reverse().find(c=>!!(c&&c.querySelector(".k-focus")));if(r&&l.indexOf(r)===0)return this.switchFocus(()=>{this.focusElement(o||this.elementRef)})}this.switchFocus(t.noop)}else i===t.Keys.down&&this.switchFocus(()=>{this.focusElement(o||n)});else a&&i===t.Keys.down&&(e.preventDefault(),this.openPopup(d))},onInputKeyDown(e){const{keyCode:i,altKey:a}=e;(i===t.Keys.esc||a&&i===t.Keys.up)&&(e.preventDefault(),this.switchFocus(()=>{this.focusElement(this.elementRef)}),i===t.Keys.esc&&this.adaptiveState?this.onCancel(e):this.closePopup(e)),!(a||i!==t.Keys.up&&i!==t.Keys.down)&&(e.preventDefault(),this.switchFocus(i===t.Keys.up?()=>{this.focusElement(this.elementRef)}:()=>{this.focusElement(this.treeViewRef&&this.treeViewRef.$el)}))},onClear(e){const i={event:e,target:this};this.changeValue(i,[],"clear"),this.closePopup(i),this.filterState="",e.preventDefault()},onTagDelete(e,i){if(this.closePopup({target:this}),!this.focusedState){const a=this.inputRef&&this.inputRef.input;this.focusElement(a)}this.changeValue({event:i,target:this},e,"delete")},onExpand(e){const{item:i,itemHierarchicalIndex:a,event:n}=e,o={level:ve(a),item:i,event:n,target:this};this.$emit("expandchange",o)},onFilterChange(e,i){const a=i?"":e.target.value,o={filter:{field:this.$props.textField,operator:"contains",value:a},event:e,target:this};this.$emit("filterchange",o),this.$props.filter===void 0&&(this.filterState=a)}}});exports.MultiSelectTree=ye;

package/MultiSelectTree/MultiSelectTree.mjs

@@ -392,11 +392,11 @@ const We = "Please select a value from the list!", {
         role: "combobox",
         "aria-haspopup": "tree",
         "aria-expanded": this.isOpen,
-        "aria-disabled": d,
+        "aria-disabled": d || void 0,
         "aria-label": r,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaLabelledBy ? this.$props.ariaLabelledBy : "tagslist-" + t,
-        "aria-required": this.$props.required,
+        "aria-required": this.$props.required || void 0,
         onClick: this.onWrapperClick
       }, [
         this.tagsToRenderRef.length > 0 && s(Me, {