@progress/kendo-vue-dropdowns 8.0.3-develop.4 → 8.1.0-develop.2

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"),i=require("@progress/kendo-vue-common"),ae=require("@progress/kendo-vue-popup"),ne=require("@progress/kendo-vue-intl"),D=require("@progress/kendo-vue-treeview"),oe=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"),E=require("../common/ListFilter.js"),he=require("./utils.js"),L=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:q,roundedMap:me}=i.kendoThemeMaps,ve=e=>e.split("_").map(t=>parseInt(t,10)),A=(e,t)=>{const{validationMessage:a,valid:n,required:o}=e;return{customError:a!==void 0,valid:!!(n!==void 0?n:!o||t),valueMissing:!t}},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:L.MOBILE_SMALL_DEVICE,medium:L.MOBILE_MEDIUM_DEVICE}}},created(){this.observer=null,i.validatePackage(oe.packageMetadata),this.base=new fe(this),this.componentGuid=i.guid(),this.anchor=i.guid()},data(){return{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(t=>({text:y.getItemValue(t,this.$props.textField),data:[t]}))}}},watch:{isOpen:function(e){e&&this.value?this.initialAdaptiveRenderingValues=[...this.value]:this.initialAdaptiveRenderingValues=void 0}},mounted(){this.observer=i.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),document!=null&&document.body&&this.observer&&this.observer.observe(document.body),this.elementRef=i.getRef(this,"kendoAnchor"),this.inputRef=i.getRef(this,"input"),this.selectRef=i.getRef(this,"select"),this.treeViewRef=i.getRef(this,"treeView"),this.skipFocusRef=!1,this.popupRef=i.getRef(this,"popup"),this.calculatePopupWidth()},updated(){this.inputRef=i.getRef(this,"input"),this.treeViewRef=i.getRef(this,"treeView"),this.popupRef&&this.isOpen&&this.hasValue&&this.popupRef.reposition(),this.setValidity(),this.calculatePopupWidth()},render(){let e;const t=this.$props.id||this.componentGuid,{dataItems:a,dataItemKey:n,popupSettings:o={},disabled:d,placeholder:l,label:r,name:c,checkField:g,checkIndeterminateField:k,subItemsField:I,validationMessage:O,valid:P,value:C,required:R,validityStyles:W,adaptiveTitle:z}=this.$props,b=i.getTabIndex(this.$props.tabIndex,d),w=ne.provideLocalizationService(this),j=A({validationMessage:O,valid:P,required:R},this.hasValue),V=this.$props.dir,K=this.adaptiveState,N=i.templateRendering.call(this,this.item,i.getListeners.call(this)),_=i.templateRendering.call(this,this.tag,i.getListeners.call(this)),G=i.templateRendering.call(this,this.$props.header,i.getListeners.call(this)),H=i.templateRendering.call(this,this.$props.footer,i.getListeners.call(this)),x=i.getTemplate.call(this,{h:s.h,template:G}),T=i.getTemplate.call(this,{h:s.h,template:H}),U=i.templateRendering.call(this,this.$props.listNoData,i.getListeners.call(this)),J=s.createVNode(le.ListNoData,null,F(e=w.toLanguageString(p.nodata,p.messages[p.nodata]))?e:{default:()=>[e]}),M=i.getTemplate.call(this,{h:s.h,defaultRendering:J,template:U}),B=!W||j.valid,{size:h,rounded:m,fillMode:v}=this.$props,Q=()=>[s.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[s.createVNode("div",{class:"k-actionsheet-title"},[s.createVNode("div",{class:"k-text-center"},[z]),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(E.ListFilter,{value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:i.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,size:h,rounded:m,fillMode:v,onFocus:this.onFocus,onBlur:this.onBlur},null)])],X=i.templateRendering.call(this,Q,i.getListeners.call(this)),Y=()=>{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]})]},Z=i.templateRendering.call(this,Y,i.getListeners.call(this)),ee=()=>{const u=this.base.getTemplateDef.call(this,x,s.h),f=this.base.getTemplateDef.call(this,T,s.h);return[u&&s.createVNode("div",{class:"k-list-header"},[u]),a.length>0?s.createVNode(D.TreeView,{ref:i.setRef(this,"treeView"),tabIndex:b,dataItems:a,focusIdField:n,textField:this.$props.textField,checkField:g,checkIndeterminateField:k,expandField:this.$props.expandField,childrenField:I,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):M,f&&s.createVNode("div",{class:"k-list-footer"},[f])]},te=i.templateRendering.call(this,ee,i.getListeners.call(this)),ie=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:X,content:te,footer:Z,onClose:this.onCancel,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},se=function(){return s.createVNode("span",{ref:i.setRef(this,"kendoAnchor"),class:i.classNames("k-multiselecttree k-input",this.$props.className,{[`k-input-${q[h]||h}`]:h,[`k-rounded-${me[m]||m}`]:m,[`k-input-${v}`]:v,"k-focus":this.focusedState&&!d,"k-invalid":!B,"k-disabled":d,"k-loading":this.$props.loading,"k-required":R}),tabindex:b,accesskey:this.$props.accessKey,id:t,dir:V,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-"+t,"aria-required":this.$props.required,onClick:this.onWrapperClick},[this.tagsToRenderRef.length>0&&s.createVNode(de.TagList,{id:"tagslist-"+t,class:i.classNames("k-input-values k-chip-list k-selection-multiple",{[`k-chip-list-${q[h]||h}`]:h,"k-readonly":this.hasValue}),tagRender:_,onTagdelete:this.onTagDelete,dataItems:this.tagsToRenderRef,guid:t,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:b,"aria-expanded":this.isOpen,"aria-describedby":"tagslist-"+t,"aria-label":this.$props.ariaLabelledBy},[this.tagsToRenderRef.length===0&&s.createVNode("span",{class:"k-input-value-text"},[l])]),this.$props.loading&&s.createVNode(i.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:i.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)]),!K&&s.createVNode(ae.Popup,{style:{width:this.popupWidth,direction:V},popupClass:i.classNames(o.popupClass,"k-multiselecttree-popup","popup-"+this.componentGuid),class:i.classNames(o.className,{"k-rtl":V==="rtl"}),animate:o.animate,anchor:this.anchor,show:this.isOpen,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,appendTo:o.appendTo,ref:i.setRef(this,"popup")},{default:()=>[this.$props.filterable&&s.createVNode(E.ListFilter,{value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:i.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(D.TreeView,{ref:i.setRef(this,"treeView"),tabIndex:b,dataItems:a,focusIdField:n,textField:this.$props.textField,checkField:g,checkIndeterminateField:k,expandField:this.$props.expandField,childrenField:I,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):M,T&&s.createVNode("div",{class:"k-list-footer"},[T])]})])},S=[s.h(se.call(this),{...this.$attrs}),K&&ie.call(this)];return r?s.createVNode(re.FloatingLabel,{label:r,editorValue:this.hasValue,editorPlaceholder:l,editorValid:B,editorDisabled:d,editorId:t,dir:V},F(S)?S:{default:()=>[S]}):S},methods:{clearFilter(e){this.onFilterChange(e,"")},onCancel(e){const t={event:e,target:this},a={items:[],operation:"toggle",value:this.initialAdaptiveRenderingValues,...t};this.$emit("change",a),this.closePopup(e)},calculateMedia(e){for(let t of e)this.windowWidth=t.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:t,required:a}=this.$props,n=A({validationMessage:e,valid:t,required:a},this.hasValue);this.selectRef.setCustomValidity(n.valid?"":this.validationMessage===void 0?ge:this.validationMessage)}},changeValue(e,t,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:t,operation:a,value:this.computedValue}),d={items:t,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:t,event:a}=e,n={event:a,target:this};this.changeValue(n,[t],"toggle")},openPopup(e){if(!this.isOpen){const t={...e};this.$emit("open",t),this.opened===void 0&&(this.openState=!0)}},closePopup(e){if(this.$props.filterable&&this.clearFilter({...e,target:{...e.target,value:""}}),this.isOpen){const t={...e};this.$emit("close",t),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 t={event:e,target:this};this.$emit("focus",t)}},onBlur(e){var t;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||((t=e.event)==null?void 0:t.relatedTarget);o!=null&&o.closest(".popup-"+this.componentGuid)||(this.$emit("blur",n),this.closePopup(a))}},onWrapperMouseDown(){this.focusedState&&this.switchFocus(i.noop)},onWrapperClick(e){if(!this.$props.disabled&&!e.defaultPrevented){this.focusedState=!0;const t={event:e,target:this};this.isOpen||this.openPopup(t)}},onWrapperKeyDown(e){const{keyCode:t,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&&(t===i.Keys.left||t===i.Keys.right||t===i.Keys.home||t===i.Keys.end||t===i.Keys.delete||t===i.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;t===i.Keys.left?(g?r=Math.max(0,r-1):r=l.length-1,c=l[r]):t===i.Keys.right?g?(r=Math.min(l.length-1,r+1),c=l[r]):c=l[0]:t===i.Keys.home?c=l[0]:t===i.Keys.end?c=l[l.length-1]:(t===i.Keys.delete||t===i.Keys.backspace)&&g&&this.changeValue(d,l[r].data,"delete"),c!==this.focusedTagState&&(this.focusedTagState=c)}if(this.isOpen)if(t===i.Keys.esc||a&&t===i.Keys.up)e.preventDefault(),this.switchFocus(()=>{this.focusElement(this.elementRef)}),this.closePopup(d);else if(n&&n.querySelector(".k-focus")&&(t===i.Keys.up||t===i.Keys.down||t===i.Keys.left||t===i.Keys.right||t===i.Keys.home||t===i.Keys.end)){if(t===i.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(i.noop)}else t===i.Keys.down&&this.switchFocus(()=>{this.focusElement(o||n)});else a&&t===i.Keys.down&&(e.preventDefault(),this.openPopup(d))},onInputKeyDown(e){const{keyCode:t,altKey:a}=e;(t===i.Keys.esc||a&&t===i.Keys.up)&&(e.preventDefault(),this.switchFocus(()=>{this.focusElement(this.elementRef)}),t===i.Keys.esc&&this.adaptiveState?this.onCancel(e):this.closePopup(e)),!(a||t!==i.Keys.up&&t!==i.Keys.down)&&(e.preventDefault(),this.switchFocus(t===i.Keys.up?()=>{this.focusElement(this.elementRef)}:()=>{this.focusElement(this.treeViewRef&&this.treeViewRef.$el)}))},onClear(e){const t={event:e,target:this};this.changeValue(t,[],"clear"),this.closePopup(t),this.filterState="",e.preventDefault()},onTagDelete(e,t){if(this.closePopup({target:this}),!this.focusedState){const a=this.inputRef&&this.inputRef.input;this.focusElement(a)}this.changeValue({event:t,target:this},e,"delete")},onExpand(e){const{item:t,itemHierarchicalIndex:a,event:n}=e,o={level:ve(a),item:t,event:n,target:this};this.$emit("expandchange",o)},onFilterChange(e,t){const a=t?"":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,"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;

package/MultiSelectTree/MultiSelectTree.mjs

@@ -5,32 +5,32 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as me, h as S, createVNode as s, isVNode as ge } from "vue";
-import { Keys as a, noop as N, getTabIndex as ve, templateRendering as u, getListeners as f, getTemplate as D, getRef as g, canUseDOM as be, validatePackage as ke, guid as z, setRef as v, classNames as V, kendoThemeMaps as Se, Icon 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 Re } from "../package-metadata.mjs";
-import { matchTags as j, areSame as xe, getItemValue 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 Ie } from "../MultiSelect/TagList.mjs";
-import { ClearButton as Te } from "../common/ClearButton.mjs";
-import { ListFilter as J } from "../common/ListFilter.mjs";
-import { getMultiSelectTreeValue as Ce } from "./utils.mjs";
-import { MOBILE_MEDIUM_DEVICE as Me, MOBILE_SMALL_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";
+import { defineComponent as ge, h as S, createVNode as s, isVNode as ve } from "vue";
+import { Keys as a, noop as z, getTabIndex as ke, templateRendering as u, getListeners as f, getTemplate as D, getRef as g, canUseDOM as be, validatePackage as Se, shouldShowValidationUI as ye, getLicenseMessage as Fe, guid as q, setRef as v, classNames as V, kendoThemeMaps as we, Icon as Re, WatermarkOverlay as xe } from "@progress/kendo-vue-common";
+import { Popup as Ve } from "@progress/kendo-vue-popup";
+import { provideLocalizationService as $e } from "@progress/kendo-vue-intl";
+import { TreeView as j } from "@progress/kendo-vue-treeview";
+import { packageMetadata as E } from "../package-metadata.mjs";
+import { matchTags as _, areSame as Ie, getItemValue as G } from "../common/utils.mjs";
+import { ListNoData as Te } from "../DropDownTree/ListNoData.mjs";
+import { nodata as H, messages as B, adaptiveModeFooterCancel as U, adaptiveModeFooterApply as J } from "../messages/main.mjs";
+import { FloatingLabel as Ce } from "@progress/kendo-vue-labels";
+import { Button as A } from "@progress/kendo-vue-buttons";
+import { TagList as Me } from "../MultiSelect/TagList.mjs";
+import { ClearButton as De } from "../common/ClearButton.mjs";
+import { ListFilter as Q } from "../common/ListFilter.mjs";
+import { getMultiSelectTreeValue as Ee } from "./utils.mjs";
+import { MOBILE_MEDIUM_DEVICE as Be, MOBILE_SMALL_DEVICE as Ae } from "../common/constants.mjs";
+import { ActionSheet as Oe } from "@progress/kendo-vue-layout";
+import { xIcon as Le } from "@progress/kendo-svg-icons";
+import Pe from "../common/DropDownBase.mjs";
 function $(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ge(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ve(e);
 }
-const Oe = "Please select a value from the list!", {
-  sizeMap: Q,
-  roundedMap: Pe
-} = Se, Ke = (e) => e.split("_").map((t) => parseInt(t, 10)), X = (e, t) => {
+const We = "Please select a value from the list!", {
+  sizeMap: X,
+  roundedMap: Ke
+} = we, Ne = (e) => e.split("_").map((t) => parseInt(t, 10)), Y = (e, t) => {
   const {
     validationMessage: i,
     valid: n,
@@ -41,7 +41,7 @@ const Oe = "Please select a value from the list!", {
     valid: !!(n !== void 0 ? n : !o || t),
     valueMissing: !t
   };
-}, nt = /* @__PURE__ */ me({
+}, rt = /* @__PURE__ */ ge({
   name: "KendoMultiSelectTree",
   model: {
     event: "changemodel"
@@ -165,16 +165,18 @@ const Oe = "Please select a value from the list!", {
     },
     adaptiveModeBreakpoints: {
       default: {
-        small: De,
-        medium: Me
+        small: Ae,
+        medium: Be
       }
     }
   },
   created() {
-    this.observer = null, ke(Re), this.base = new Ae(this), this.componentGuid = z(), this.anchor = z();
+    this.observer = null, Se(E), this.showLicenseWatermark = ye(E), this.licenseMessage = Fe(E), this.base = new Pe(this), this.componentGuid = q(), this.anchor = q();
   },
   data() {
     return {
+      showLicenseWatermark: !1,
+      licenseMessage: void 0,
       focusedTagState: void 0,
       openState: !1,
       focusedState: !1,
@@ -211,13 +213,13 @@ const Oe = "Please select a value from the list!", {
     tagsToRenderRef() {
       if (this.initialAdaptiveRenderingValues === void 0)
         return this.tags === void 0 ? this.computedValue.map((e) => ({
-          text: _(e, this.$props.textField),
+          text: G(e, this.$props.textField),
           data: [e]
         })) : [...this.tags];
       {
         const e = this.initialAdaptiveRenderingValues;
         return e.length > 0 && e.map((t) => ({
-          text: _(t, this.$props.textField),
+          text: G(t, this.$props.textField),
           data: [t]
         }));
       }
@@ -245,46 +247,46 @@ const Oe = "Please select a value from the list!", {
       placeholder: l,
       label: r,
       name: h,
-      checkField: b,
+      checkField: k,
       checkIndeterminateField: F,
-      subItemsField: A,
-      validationMessage: Y,
-      valid: Z,
-      value: O,
+      subItemsField: O,
+      validationMessage: Z,
+      valid: ee,
+      value: L,
       required: I,
-      validityStyles: ee,
-      adaptiveTitle: te
-    } = this.$props, w = ve(this.$props.tabIndex, d), T = we(this), ie = X({
-      validationMessage: Y,
-      valid: Z,
+      validityStyles: te,
+      adaptiveTitle: ie
+    } = this.$props, w = ke(this.$props.tabIndex, d), T = $e(this), se = Y({
+      validationMessage: Z,
+      valid: ee,
       required: I
-    }, 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, {
+    }, this.hasValue), R = this.$props.dir, P = this.adaptiveState, W = u.call(this, this.item, f.call(this)), ae = u.call(this, this.tag, f.call(this)), ne = u.call(this, this.$props.header, f.call(this)), oe = u.call(this, this.$props.footer, f.call(this)), C = D.call(this, {
       h: S,
-      template: ae
+      template: ne
     }), 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 : {
+      template: oe
+    }), le = u.call(this, this.$props.listNoData, f.call(this)), re = s(Te, null, $(e = T.toLanguageString(H, B[H])) ? e : {
       default: () => [e]
-    }), L = D.call(this, {
+    }), K = D.call(this, {
       h: S,
-      defaultRendering: le,
-      template: oe
-    }), W = !ee || ie.valid, {
+      defaultRendering: re,
+      template: le
+    }), N = !te || se.valid, {
       size: c,
-      rounded: k,
+      rounded: b,
       fillMode: y
-    } = this.$props, re = () => [s("div", {
+    } = this.$props, de = () => [s("div", {
       class: "k-actionsheet-titlebar-group k-hbox"
     }, [s("div", {
       class: "k-actionsheet-title"
     }, [s("div", {
       class: "k-text-center"
-    }, [te]), s("div", {
+    }, [ie]), s("div", {
       class: "k-actionsheet-subtitle k-text-center"
     }, [l])]), s("div", {
       class: "k-actionsheet-actions"
-    }, [s(B, {
+    }, [s(A, {
       tabIndex: 5,
       "aria-label": "Cancel",
       "aria-disabled": "false",
@@ -292,22 +294,22 @@ const Oe = "Please select a value from the list!", {
       fillMode: "flat",
       onClick: this.onCancel,
       icon: "x",
-      svgIcon: Be
+      svgIcon: Le
     }, null)])]), s("div", {
       class: "k-actionsheet-titlebar-group k-actionsheet-filter"
-    }, [this.$props.filterable && s(J, {
+    }, [this.$props.filterable && s(Q, {
       value: this.$props.filter === void 0 ? this.filterState : this.$props.filter,
       ref: v(this, "input"),
       onChange: this.onFilterChange,
       onKeydown: this.onInputKeyDown,
       size: c,
-      rounded: k,
+      rounded: b,
       fillMode: y,
       onFocus: this.onFocus,
       onBlur: this.onBlur
-    }, null)])], de = u.call(this, re, f.call(this)), he = () => {
-      const p = T.toLanguageString(H, E[H]), m = T.toLanguageString(U, E[U]);
-      return [s(B, {
+    }, null)])], he = u.call(this, de, f.call(this)), ce = () => {
+      const p = T.toLanguageString(U, B[U]), m = T.toLanguageString(J, B[J]);
+      return [s(A, {
         size: "large",
         "aria-label": p,
         "aria-disabled": "false",
@@ -315,7 +317,7 @@ const Oe = "Please select a value from the list!", {
         onClick: this.onCancel
       }, $(p) ? p : {
         default: () => [p]
-      }), s(B, {
+      }), s(A, {
         themeColor: "primary",
         size: "large",
         "aria-label": m,
@@ -325,20 +327,20 @@ const Oe = "Please select a value from the list!", {
       }, $(m) ? m : {
         default: () => [m]
       })];
-    }, ce = u.call(this, he, f.call(this)), pe = () => {
+    }, pe = u.call(this, ce, f.call(this)), ue = () => {
       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, {
+      }, [p]), i.length > 0 ? s(j, {
         ref: v(this, "treeView"),
         tabIndex: w,
         dataItems: i,
         focusIdField: n,
         textField: this.$props.textField,
-        checkField: b,
+        checkField: k,
         checkIndeterminateField: F,
         expandField: this.$props.expandField,
-        childrenField: A,
+        childrenField: O,
         expandIcons: !0,
         onItemclick: this.onChange,
         onCheckchange: this.onChange,
@@ -348,21 +350,21 @@ const Oe = "Please select a value from the list!", {
         onKeydown: this.onWrapperKeyDown,
         checkboxes: !0,
         size: "large",
-        item: K
-      }, null) : L, m && s("div", {
+        item: W
+      }, null) : K, m && s("div", {
         class: "k-list-footer"
       }, [m])];
-    }, ue = u.call(this, pe, f.call(this)), fe = function() {
-      return s(Ee, {
+    }, fe = u.call(this, ue, f.call(this)), me = function() {
+      return s(Oe, {
         expand: this.isOpen,
         animation: !0,
         animationStyles: this.animationStyles,
         className: this.classNameAdaptive,
         footerClassName: "k-actions k-actions-stretched",
         contentClassName: "!k-overflow-hidden",
-        header: de,
-        content: ue,
-        footer: ce,
+        header: he,
+        content: fe,
+        footer: pe,
         onClose: this.onCancel,
         navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
       }, null);
@@ -370,11 +372,11 @@ const Oe = "Please select a value from the list!", {
       return s("span", {
         ref: v(this, "kendoAnchor"),
         class: V("k-multiselecttree k-input", this.$props.className, {
-          [`k-input-${Q[c] || c}`]: c,
-          [`k-rounded-${Pe[k] || k}`]: k,
+          [`k-input-${X[c] || c}`]: c,
+          [`k-rounded-${Ke[b] || b}`]: b,
           [`k-input-${y}`]: y,
           "k-focus": this.focusedState && !d,
-          "k-invalid": !W,
+          "k-invalid": !N,
           "k-disabled": d,
           "k-loading": this.$props.loading,
           "k-required": I
@@ -397,18 +399,18 @@ const Oe = "Please select a value from the list!", {
         "aria-required": this.$props.required,
         onClick: this.onWrapperClick
       }, [
-        this.tagsToRenderRef.length > 0 && s(Ie, {
+        this.tagsToRenderRef.length > 0 && s(Me, {
           id: "tagslist-" + t,
           class: V("k-input-values k-chip-list k-selection-multiple", {
-            [`k-chip-list-${Q[c] || c}`]: c,
+            [`k-chip-list-${X[c] || c}`]: c,
             "k-readonly": this.hasValue
           }),
-          tagRender: se,
+          tagRender: ae,
           onTagdelete: this.onTagDelete,
           dataItems: this.tagsToRenderRef,
           guid: t,
-          focused: this.focusedTagState ? this.tagsToRenderRef.find((p) => this.focusedTagState && j(p, this.focusedTagState, n)) : void 0,
-          tagsRounded: k,
+          focused: this.focusedTagState ? this.tagsToRenderRef.find((p) => this.focusedTagState && _(p, this.focusedTagState, n)) : void 0,
+          tagsRounded: b,
           size: c,
           fillMode: y
         }, null),
@@ -422,11 +424,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(Re, {
           class: "k-input-loading-icon",
           name: "loading"
         }, null),
-        this.hasValue && !d && s(Te, {
+        this.hasValue && !d && s(De, {
           onClearclick: this.onClear
         }, null),
         /* Dummy component to support forms */
@@ -446,9 +448,12 @@ const Oe = "Please select a value from the list!", {
             left: "50%"
           }
         }, [s("option", {
-          value: this.$props.valueMap ? this.$props.valueMap.call(void 0, O) : O
+          value: this.$props.valueMap ? this.$props.valueMap.call(void 0, L) : L
         }, null)]),
-        !P && s(Fe, {
+        this.showLicenseWatermark ? s(xe, {
+          message: this.licenseMessage
+        }, null) : null,
+        !P && s(Ve, {
           style: {
             width: this.popupWidth,
             direction: R
@@ -465,28 +470,28 @@ const Oe = "Please select a value from the list!", {
           appendTo: o.appendTo,
           ref: v(this, "popup")
         }, {
-          default: () => [this.$props.filterable && s(J, {
+          default: () => [this.$props.filterable && s(Q, {
             value: this.$props.filter === void 0 ? this.filterState : this.$props.filter,
             ref: v(this, "input"),
             onChange: this.onFilterChange,
             onKeydown: this.onInputKeyDown,
             size: c,
-            rounded: k,
+            rounded: b,
             fillMode: y,
             onFocus: this.onFocus,
             onBlur: this.onBlur
           }, null), C && s("div", {
             class: "k-list-header"
-          }, [C]), i.length > 0 ? s(q, {
+          }, [C]), i.length > 0 ? s(j, {
             ref: v(this, "treeView"),
             tabIndex: w,
             dataItems: i,
             focusIdField: n,
             textField: this.$props.textField,
-            checkField: b,
+            checkField: k,
             checkIndeterminateField: F,
             expandField: this.$props.expandField,
-            childrenField: A,
+            childrenField: O,
             expandIcons: !0,
             onItemclick: this.onChange,
             onCheckchange: this.onChange,
@@ -496,20 +501,20 @@ const Oe = "Please select a value from the list!", {
             onKeydown: this.onWrapperKeyDown,
             checkboxes: !0,
             size: c,
-            item: K
-          }, null) : L, M && s("div", {
+            item: W
+          }, null) : K, M && s("div", {
             class: "k-list-footer"
           }, [M])]
         })
       ]);
     }.call(this), {
       ...this.$attrs
-    }), P && fe.call(this)];
-    return r ? s($e, {
+    }), P && me.call(this)];
+    return r ? s(Ce, {
       label: r,
       editorValue: this.hasValue,
       editorPlaceholder: l,
-      editorValid: W,
+      editorValid: N,
       editorDisabled: d,
       editorId: t,
       dir: R
@@ -549,12 +554,12 @@ const Oe = "Please select a value from the list!", {
           validationMessage: e,
           valid: t,
           required: i
-        } = this.$props, n = X({
+        } = this.$props, n = Y({
           validationMessage: e,
           valid: t,
           required: i
         }, this.hasValue);
-        this.selectRef.setCustomValidity(n.valid ? "" : this.validationMessage === void 0 ? Oe : this.validationMessage);
+        this.selectRef.setCustomValidity(n.valid ? "" : this.validationMessage === void 0 ? We : this.validationMessage);
       }
     },
     changeValue(e, t, i) {
@@ -564,7 +569,7 @@ const Oe = "Please select a value from the list!", {
         checkIndeterminateField: this.checkIndeterminateField,
         expandField: this.expandField,
         subItemsField: this.subItemsField
-      }, o = Ce(this.dataItems, {
+      }, o = Ee(this.dataItems, {
         ...n,
         items: t,
         operation: i,
@@ -578,7 +583,7 @@ const Oe = "Please select a value from the list!", {
       this.$emit("changemodel", o), this.$emit("update:modelValue", o), this.$emit("change", d);
     },
     onChange(e) {
-      if (xe(e.item, this.computedValue, this.dataItemKey))
+      if (Ie(e.item, this.computedValue, this.dataItemKey))
         return;
       const {
         item: t,
@@ -655,7 +660,7 @@ const Oe = "Please select a value from the list!", {
       }
     },
     onWrapperMouseDown() {
-      this.focusedState && this.switchFocus(N);
+      this.focusedState && this.switchFocus(z);
     },
     onWrapperClick(e) {
       if (!this.$props.disabled && !e.defaultPrevented) {
@@ -680,9 +685,9 @@ const Oe = "Please select a value from the list!", {
       };
       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) => j(F, this.focusedTagState, this.dataItemKey)) : -1, h;
-        const b = r !== -1;
-        t === a.left ? (b ? r = Math.max(0, r - 1) : r = l.length - 1, h = l[r]) : t === a.right ? b ? (r = Math.min(l.length - 1, r + 1), h = l[r]) : 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(d, l[r].data, "delete"), h !== this.focusedTagState && (this.focusedTagState = h);
+        let r = this.focusedTagState ? l.findIndex((F) => _(F, this.focusedTagState, this.dataItemKey)) : -1, h;
+        const k = r !== -1;
+        t === a.left ? (k ? r = Math.max(0, r - 1) : r = l.length - 1, h = l[r]) : t === a.right ? k ? (r = Math.min(l.length - 1, r + 1), h = l[r]) : h = l[0] : t === a.home ? h = l[0] : t === a.end ? h = l[l.length - 1] : (t === a.delete || t === a.backspace) && k && this.changeValue(d, l[r].data, "delete"), h !== this.focusedTagState && (this.focusedTagState = h);
       }
       if (this.isOpen)
         if (t === a.esc || i && t === a.up)
@@ -697,7 +702,7 @@ const Oe = "Please select a value from the list!", {
                 this.focusElement(o || this.elementRef);
               });
           }
-          this.switchFocus(N);
+          this.switchFocus(z);
         } else t === a.down && this.switchFocus(() => {
           this.focusElement(o || n);
         });
@@ -742,7 +747,7 @@ const Oe = "Please select a value from the list!", {
         itemHierarchicalIndex: i,
         event: n
       } = e, o = {
-        level: Ke(i),
+        level: Ne(i),
         item: t,
         event: n,
         target: this
@@ -764,5 +769,5 @@ const Oe = "Please select a value from the list!", {
   }
 });
 export {
-  nt as MultiSelectTree
+  rt as MultiSelectTree
 };