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

package/MultiSelect/MultiSelectProps.d.ts

@@ -44,6 +44,31 @@ export interface MultiSelectBlurEvent extends BlurEvent {
  */
 export interface MultiSelectPageChangeEvent extends PageChangeEvent {
 }
+/**
+ * Represents the object of the `selectAllChange` MultiSelect event.
+ */
+export interface MultiSelectSelectAllChangeEvent {
+    /**
+     * A native DOM event.
+     */
+    event: any;
+    /**
+     * An event target.
+     */
+    target: any;
+    /**
+     * Indicates whether all items should be selected (`true`) or deselected (`false`).
+     */
+    allSelected: boolean;
+    /**
+     * Indicates whether `preventDefault()` was called on this event.
+     */
+    defaultPrevented?: boolean;
+    /**
+     * Call this method to skip the built-in select-all toggle and apply custom selection logic instead.
+     */
+    preventDefault(): void;
+}
 /**
  * Represents the props of the [Kendo UI for Vue MultiSelect component]({% slug overview_multiselect %}).
  */
@@ -297,4 +322,32 @@ export interface MultiSelectProps extends FormComponentProps {
      * Attributes which are essential for certain component functionalities cannot be changed.
      */
     inputAttributes?: Object;
+    /**
+     * Controls whether a built-in `Select all` option appears at the top of the popup list.
+     * Selecting this option toggles all currently applicable items.
+     *
+     * @default false
+     */
+    selectAll?: boolean;
+    /**
+     * Controls whether checkboxes are rendered in the select-all header and in each list item.
+     * The checkbox state reflects the selected state of the items.
+     *
+     * @default false
+     */
+    checkboxes?: boolean;
+    /**
+     * Specifies the maximum number of individual tag chips to display before showing a summary tag.
+     * When the number of selected items exceeds this value, the first `summarizeAfter` items
+     * are shown as individual chips and the remaining items are collapsed into a summary chip.
+     *
+     * @default 10
+     */
+    summarizeAfter?: number;
+    /**
+     * Fires when the select-all item is clicked.
+     * When provided, the component delegates the select-all logic to the consumer.
+     * Useful for virtualization scenarios where the consumer manages the full dataset.
+     */
+    onSelectAllChange?: (event: MultiSelectSelectAllChangeEvent) => void;
 }

package/MultiSelect/TagList.d.ts

@@ -32,6 +32,8 @@ export interface TagListProps {
     size?: 'small' | 'medium' | 'large';
     fillMode?: 'solid' | 'outline' | 'flat';
     tagsRounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
+    summarizeAfter?: number;
+    summaryText?: string;
 }
 /**
  * @hidden
@@ -56,6 +58,11 @@ declare const TagList: import('vue').DefineComponent<import('vue').ExtractPropTy
         type: StringConstructor;
         validator: (value: string) => boolean;
     };
+    summarizeAfter: {
+        type: NumberConstructor;
+        default: number;
+    };
+    summaryText: StringConstructor;
     onTagdelete: FunctionConstructor;
 }>, {}, {}, {
     wrapperClass(): {
@@ -85,6 +92,13 @@ declare const TagList: import('vue').DefineComponent<import('vue').ExtractPropTy
         type: StringConstructor;
         validator: (value: string) => boolean;
     };
+    summarizeAfter: {
+        type: NumberConstructor;
+        default: number;
+    };
+    summaryText: StringConstructor;
     onTagdelete: FunctionConstructor;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {
+    summarizeAfter: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { TagList };

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 n=require("vue"),o=require("@progress/kendo-vue-common"),m=require("@progress/kendo-vue-buttons"),p=e=>e.preventDefault(),g=e=>e.event.stopPropagation(),x=n.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)}},summarizeAfter:{type:Number,default:10},summaryText:String,onTagdelete:Function},computed:{wrapperClass(){const{size:e,disabled:t}=this.$props;return{"k-chip-list":!0,[`k-chip-list-${o.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-disabled":t}}},methods:{onTagDelete(e,t){this.$emit("tagdelete",e,t)}},render(){const e=o.getDefaultSlots(this),{dataItems:t,guid:r,size:a,disabled:l,tagsRounded:d,removeTagIcon:h,id:f,className:v,summarizeAfter:s,summaryText:S}=this.$props,b=s&&t.length>s?t.slice(0,s):t,T=s&&t.length>s,y=t.length-(s||0);return n.createVNode("div",{class:o.classNames("k-input-values",v),id:f,style:this.$attrs.style},[n.createVNode("div",{class:this.wrapperClass,role:"listbox","aria-label":"chip list","aria-orientation":"horizontal",id:"tagslist-"+r},[b.map(function(i,u){const k=`tag-${r}-${i.text.toString().replace(/\s+/g,"-")}`,c=i===this.$props.focused,$=n.createVNode(m.Chip,{id:k,tabIndex:-1,"aria-selected":c,role:"option","aria-setsize":t.length,key:i.text+u,text:i.text,disabled:l,removable:!0,onRemove:z=>this.onTagDelete(i.data,z),removeIcon:h,onMousedown:p,onClick:g,class:c?"k-focus":void 0,rounded:d,size:a},null);return o.getTemplate.call(this,{h:n.h,template:this.$props.tagRender,defaultRendering:$,additionalProps:{...this.$props,tagData:i,index:u},additionalListeners:{tagdelete:this.onTagDelete}})},this),T&&n.createVNode(m.Chip,{text:S||`+${y} more`,disabled:l,removable:!1,onMousedown:p,onClick:g,rounded:d,size:a},null)]),e])}});exports.TagList=x;

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 { Chip as k } from "@progress/kendo-vue-buttons";
-const x = (e) => e.preventDefault(), y = (e) => e.event.stopPropagation(), C = /* @__PURE__ */ h({
+import { defineComponent as z, createVNode as n, h as k } from "vue";
+import { getDefaultSlots as R, classNames as C, getTemplate as I, kendoThemeMaps as w } from "@progress/kendo-vue-common";
+import { Chip as c } from "@progress/kendo-vue-buttons";
+const m = (e) => e.preventDefault(), p = (e) => e.event.stopPropagation(), F = /* @__PURE__ */ z({
   name: "TagList",
   inheritAttrs: !1,
   props: {
@@ -37,6 +37,11 @@ const x = (e) => e.preventDefault(), y = (e) => e.event.stopPropagation(), C = /
         return ["small", "medium", "large"].includes(e);
       }
     },
+    summarizeAfter: {
+      type: Number,
+      default: 10
+    },
+    summaryText: String,
     onTagdelete: Function
   },
   computed: {
@@ -47,7 +52,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-${w.sizeMap[e] || e}`]: e,
         "k-disabled": t
       };
     }
@@ -58,59 +63,71 @@ const x = (e) => e.preventDefault(), y = (e) => e.event.stopPropagation(), C = /
     }
   },
   render() {
-    const e = S(this), {
+    const e = R(this), {
       dataItems: t,
-      guid: n,
-      size: a,
-      disabled: l,
-      tagsRounded: d,
-      removeTagIcon: u,
-      id: p,
-      className: c
-    } = this.$props;
-    return i("div", {
-      class: T("k-input-values", c),
-      id: p,
+      guid: o,
+      size: r,
+      disabled: a,
+      tagsRounded: l,
+      removeTagIcon: g,
+      id: h,
+      className: f,
+      summarizeAfter: s,
+      summaryText: v
+    } = this.$props, S = s && t.length > s ? t.slice(0, s) : t, b = s && t.length > s, T = t.length - (s || 0);
+    return n("div", {
+      class: C("k-input-values", f),
+      id: h,
       style: this.$attrs.style
-    }, [i("div", {
+    }, [n("div", {
       class: this.wrapperClass,
       role: "listbox",
-      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, {
-        id: g,
+      "aria-label": "chip list",
+      "aria-orientation": "horizontal",
+      id: "tagslist-" + o
+    }, [S.map(function(i, d) {
+      const y = `tag-${o}-${i.text.toString().replace(/\s+/g, "-")}`, u = i === this.$props.focused, $ = n(c, {
+        id: y,
         tabIndex: -1,
-        "aria-selected": r,
+        "aria-selected": u,
         role: "option",
         "aria-setsize": t.length,
-        key: s.text + o,
-        text: s.text,
-        disabled: l,
+        key: i.text + d,
+        text: i.text,
+        disabled: a,
         removable: !0,
-        onRemove: (f) => this.onTagDelete(s.data, f),
-        removeIcon: u,
-        onMousedown: x,
-        onClick: y,
-        class: r ? "k-focus" : void 0,
-        rounded: d,
-        size: a
+        onRemove: (x) => this.onTagDelete(i.data, x),
+        removeIcon: g,
+        onMousedown: m,
+        onClick: p,
+        class: u ? "k-focus" : void 0,
+        rounded: l,
+        size: r
       }, null);
-      return $.call(this, {
-        h: v,
+      return I.call(this, {
+        h: k,
         template: this.$props.tagRender,
-        defaultRendering: m,
+        defaultRendering: $,
         additionalProps: {
           ...this.$props,
-          tagData: s,
-          index: o
+          tagData: i,
+          index: d
         },
         additionalListeners: {
           tagdelete: this.onTagDelete
         }
       });
-    }, this)]), e]);
+    }, this), b && n(c, {
+      text: v || `+${T} more`,
+      disabled: a,
+      removable: !1,
+      onMousedown: m,
+      onClick: p,
+      rounded: l,
+      size: r
+    }, null)]), e]);
   }
 });
 export {
-  C as TagList
+  F as TagList
 };

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"),$=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"),I=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($.packageMetadata),this.showLicenseWatermark=t.shouldShowValidationUI($.packageMetadata),this.licenseMessage=t.getLicenseMessage($.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:K,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,C=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}),T=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(I.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(I.Button,{size:"large","aria-label":u,"aria-disabled":"false",type:"button",onClick:this.onCancel},F(u)?u:{default:()=>[u]}),s.createVNode(I.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,T,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,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,K):K},null)]),this.showLicenseWatermark?s.createVNode(t.WatermarkOverlay,{message:this.licenseMessage},null):null,!C&&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,onCheckchange:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,checkboxes:!0,size:h,item:N},null):B,T&&s.createVNode("div",{class:"k-list-footer"},[T])]})])},S=[s.h(ae.call(this),{...this.$attrs}),C&&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"),$=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"),I=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($.packageMetadata),this.showLicenseWatermark=t.shouldShowValidationUI($.packageMetadata),this.licenseMessage=t.getLicenseMessage($.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:K,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,C=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}),T=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(I.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(I.Button,{size:"large","aria-label":u,"aria-disabled":"false",type:"button",onClick:this.onCancel},F(u)?u:{default:()=>[u]}),s.createVNode(I.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,T,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,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,K):K},null)]),this.showLicenseWatermark?s.createVNode(t.WatermarkOverlay,{message:this.licenseMessage},null):null,!C&&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,onCheckchange:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,checkboxes:!0,size:h,item:N},null):B,T&&s.createVNode("div",{class:"k-list-footer"},[T])]})])},S=[s.h(ae.call(this),{...this.$attrs}),C&&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

@@ -391,11 +391,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, {

package/common/DropDownBase.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";var f=Object.defineProperty;var S=(c,t,o)=>t in c?f(c,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):c[t]=o;var p=(c,t,o)=>S(c,typeof t!="symbol"?t+"":t,o);const v=require("./VirtualScroll.js"),k=require("./Navigation.js"),l=require("./utils.js"),a=require("@progress/kendo-vue-common"),y=require("../package-metadata.js");class g{constructor(t){p(this,"vs",new v);p(this,"navigation",new k.Navigation);p(this,"handleItemClick",(t,o)=>{const e=this.initState();e.event=o,this.component.handleItemSelect(t,e),this.togglePopup(e),this.applyState(e)});p(this,"handleFocus",t=>{if(!this.component.currentFocused){const o=this.initState();o.data.currentFocused=!0,o.events.push({type:"focus"}),o.event=t,this.applyState(o)}});p(this,"filterChanged",(t,o)=>{const e=this.component,{textField:i,filterable:n}=e.$props;n&&(o.events.push({type:"filterchange",filter:{field:i,operator:"contains",ignoreCase:!0,value:t}}),this.repositionPopup())});p(this,"togglePopup",t=>{const o=this.component.$props,e=o.opened!==void 0?o.opened:this.component.currentOpened;o.opened===void 0&&(t.data.currentOpened=!e),e?t.events.push({type:"close"}):(t.events.push({type:"open"}),this.calculatePopupWidth())});p(this,"pageChange",(t,o)=>{const e=this.initState();e.event=o,this.triggerOnPageChange(e,t.skip,t.take),this.applyState(e)});p(this,"scrollChange",t=>{this.component.$emit("scroll",t)});p(this,"scrollToVirtualItem",(t,o)=>{const e=this.vs;if(e.enabled=!1,t.skip===0)e.reset();else if(t.skip+t.pageSize===t.total)e.scrollToEnd();else{let i=e.translate;i===0&&(e.calcScrollElementHeight(),i=e.itemHeight*t.skip,e.translateTo(i-e.itemHeight)),e.container&&(e.container.scrollTop=i),this.scrollToItem(o,!0)}setTimeout(()=>e.enabled=!0,10)});p(this,"getGroupedDataModernMode",(t,o)=>{const e=[];return t.forEach((i,n)=>{t[n-1]&&i[o]!==t[n-1][o]&&e.push({[o]:i[o]}),e.push(t[n])}),e});p(this,"resetGroupStickyHeader",(t,o)=>{const e=this.initState();t!==o.group&&o.state&&(o.state.data.group=t,this.applyState(e))});a.validatePackage(y.packageMetadata),this.listBoxId=a.guid(),this.guid=a.guid(),this.component=t,this.vs.PageChange=this.pageChange,this.vs.ScrollChange=this.scrollChange}didMount(){const t=this.component.$props,o=t.popupSettings,e=t.style,i=o&&o.width;let n=t.opened===!0;i===void 0&&this.calculatePopupWidth(),t.dir===void 0&&e&&e.direction===void 0&&(this.calculateDir(),n=!0),n&&this.component.$forceUpdate()}calculateDir(){this.component.element&&(this.dirCalculated=window.getComputedStyle(this.component.element).direction||void 0)}calculatePopupWidth(){const t=this.component.$props,o=t.popupSettings,e=o&&o.width;this.wrapper&&!e&&(this.component.popupWidth=t.popupSettings.width!==void 0?t.popupSettings.width:this.wrapper.offsetWidth+"px")}scrollVirtualized(t){const o=this.list||this.vs.list,e=o==null?void 0:o.querySelector(".k-list-item");if(!e)return;const i=this.vs,n=i.container||(o==null?void 0:o.parentNode);n&&l.scrollToItem(n,e.offsetHeight,t,i.translate)}scrollNonVirtualized(t,o){const e=o.parentNode;if(!e||e.scrollHeight<=e.offsetHeight)return;const n=e.querySelectorAll(".k-list-item, .k-list-group-item")[t];if(!n)return;const s=n.getBoundingClientRect(),h=e.getBoundingClientRect(),r=s.top-h.top+e.scrollTop,d=r+s.height,u=e.scrollTop,m=u+e.offsetHeight;d>m?e.scrollTop=r+s.height-e.offsetHeight:r<u&&(e.scrollTop=r)}scrollToItem(t,o){const e=this.list||this.vs.list;if(!e||t<0)return;(o!=null?o:this.vs.enabled)?this.scrollVirtualized(t):this.scrollNonVirtualized(t,e)}repositionPopup(){const t=this.component;setTimeout(function(){const o=t.$refs.container;if(o){const e=o.$refs.popup;e&&e.show&&e.reposition()}},5)}initState(){return{data:{},events:[],event:void 0}}applyState(t){Object.keys(t.data).length>0&&Object.keys(t.data).forEach(i=>{this.component[i]=t.data[i]});const o=this.component.primitiveValue(),e={event:t.event,component:this.component,target:{name:this.component.$props.name,value:o},value:o};t.events.forEach(i=>{const{type:n}=i;delete i.type,n&&(n==="change"&&(this.component.$emit("changemodel",o),this.component.$emit("update:modelValue",o)),this.component.$emit(n,{...e,...i}))})}triggerOnPageChange(t,o,e){const i=this.component.$props.virtual;if(i){const n=Math.min(Math.max(0,o),Math.max(0,i.total-e));n!==i.skip&&t.events.push({type:"pagechange",page:{skip:n,take:e}})}}triggerPageChangeCornerItems(t,o){const e=this.component.$props,{dataItems:i=[],dataItemKey:n,virtual:s}=e,h=e.opened!==void 0?e.opened:this.component.currentOpened;t&&s&&this.vs.enabled&&(s.skip>0&&l.areSame(t,i[0],n)?this.triggerOnPageChange(o,s.skip-1,s.pageSize):s.skip+s.pageSize<s.total&&l.areSame(t,i[i.length-1],n)?this.triggerOnPageChange(o,s.skip+1,s.pageSize):!h&&s.skip+s.pageSize<s.total&&l.areSame(t,i[i.length-1],n)&&this.triggerOnPageChange(o,s.skip+1,s.pageSize))}getTemplateDef(t,o){const e=a.templateRendering.call(this,t,a.getListeners.call(this));return a.getTemplate.call(this,{h:o,template:e})}getListItemHeight(t){const o=t&&window.getComputedStyle(t);return o?o.height.slice(0,o.height.length-2):0}}p(g,"defaultProps",{popupSettings:{animate:!0,height:"200px"},required:!1,validityStyles:!0});module.exports=g;
+"use strict";var f=Object.defineProperty;var S=(c,t,i)=>t in c?f(c,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):c[t]=i;var p=(c,t,i)=>S(c,typeof t!="symbol"?t+"":t,i);const v=require("./VirtualScroll.js"),y=require("./Navigation.js"),l=require("./utils.js"),r=require("@progress/kendo-vue-common"),k=require("../package-metadata.js");class g{constructor(t){p(this,"vs",new v);p(this,"navigation",new y.Navigation);p(this,"handleItemClick",(t,i)=>{const e=this.initState();e.event=i,this.component.handleItemSelect(t,e),this.togglePopup(e),this.applyState(e)});p(this,"handleFocus",t=>{if(!this.component.currentFocused){const i=this.initState();i.data.currentFocused=!0,i.events.push({type:"focus"}),i.event=t,this.applyState(i)}});p(this,"filterChanged",(t,i)=>{const e=this.component,{textField:o,filterable:n}=e.$props;n&&(i.events.push({type:"filterchange",filter:{field:o,operator:"contains",ignoreCase:!0,value:t}}),this.repositionPopup())});p(this,"togglePopup",t=>{const i=this.component.$props,e=i.opened!==void 0?i.opened:this.component.currentOpened;i.opened===void 0&&(t.data.currentOpened=!e),e?t.events.push({type:"close"}):(t.events.push({type:"open"}),this.calculatePopupWidth())});p(this,"pageChange",(t,i)=>{const e=this.initState();e.event=i,this.triggerOnPageChange(e,t.skip,t.take),this.applyState(e)});p(this,"scrollChange",t=>{this.component.$emit("scroll",t)});p(this,"scrollToVirtualItem",(t,i)=>{const e=this.vs;if(e.scrollSyncing=!0,t.skip===0)e.reset(),i>0&&e.container&&e.itemHeight>0&&(e.container.scrollTop=e.itemHeight*i);else{let o=e.translate;o===0&&(e.calcScrollElementHeight(),o=e.itemHeight*t.skip,e.translateTo(o)),i<0&&o>0&&(o+=e.itemHeight*(t.pageSize/4)),e.container&&(e.container.scrollTop=o),this.scrollToItem(i,!0)}setTimeout(()=>{e.scrollSyncing=!1},0)});p(this,"getGroupedDataModernMode",(t,i)=>{const e=[];return t.forEach((o,n)=>{t[n-1]&&o[i]!==t[n-1][i]&&e.push({[i]:o[i]}),e.push(t[n])}),e});p(this,"resetGroupStickyHeader",(t,i)=>{const e=this.initState();t!==i.group&&i.state&&(i.state.data.group=t,this.applyState(e))});r.validatePackage(k.packageMetadata),this.listBoxId=r.guid(),this.guid=r.guid(),this.component=t,this.vs.PageChange=this.pageChange,this.vs.ScrollChange=this.scrollChange}didMount(){const t=this.component.$props,i=t.popupSettings,e=t.style,o=i&&i.width;let n=t.opened===!0;o===void 0&&this.calculatePopupWidth(),t.dir===void 0&&e&&e.direction===void 0&&(this.calculateDir(),n=!0),n&&this.component.$forceUpdate()}calculateDir(){this.component.element&&(this.dirCalculated=window.getComputedStyle(this.component.element).direction||void 0)}calculatePopupWidth(){const t=this.component.$props,i=t.popupSettings,e=i&&i.width;this.wrapper&&!e&&(this.component.popupWidth=t.popupSettings.width!==void 0?t.popupSettings.width:this.wrapper.offsetWidth+"px")}scrollVirtualized(t){const i=this.list||this.vs.list,e=i==null?void 0:i.querySelector(".k-list-item");if(!e)return;const o=this.vs,n=o.container||(i==null?void 0:i.parentNode);n&&l.scrollToItem(n,e.offsetHeight,t,o.translate)}scrollNonVirtualized(t,i){const e=i.parentNode;if(!e||e.scrollHeight<=e.offsetHeight)return;const n=e.querySelectorAll(".k-list-item, .k-list-group-item")[t];if(!n)return;const s=n.getBoundingClientRect(),h=e.getBoundingClientRect(),a=s.top-h.top+e.scrollTop,d=a+s.height,u=e.scrollTop,m=u+e.offsetHeight;d>m?e.scrollTop=a+s.height-e.offsetHeight:a<u&&(e.scrollTop=a)}scrollToItem(t,i){const e=this.list||this.vs.list;if(!e||t<0)return;(i!=null?i:this.vs.enabled)?this.scrollVirtualized(t):this.scrollNonVirtualized(t,e)}repositionPopup(){const t=this.component;setTimeout(function(){const i=t.$refs.container;if(i){const e=i.$refs.popup;e&&e.show&&e.reposition()}},5)}initState(){return{data:{},events:[],event:void 0}}applyState(t){Object.keys(t.data).length>0&&Object.keys(t.data).forEach(o=>{this.component[o]=t.data[o]});const i=this.component.primitiveValue(),e={event:t.event,component:this.component,target:{name:this.component.$props.name,value:i},value:i};t.events.forEach(o=>{const{type:n}=o;delete o.type,n&&(n==="change"&&(this.component.$emit("changemodel",i),this.component.$emit("update:modelValue",i)),this.component.$emit(n,{...e,...o}))})}triggerOnPageChange(t,i,e){const o=this.component.$props.virtual;if(o){const n=Math.min(Math.max(0,i),Math.max(0,o.total-e));n!==o.skip&&t.events.push({type:"pagechange",page:{skip:n,take:e}})}}triggerPageChangeCornerItems(t,i){const e=this.component.$props,{dataItems:o=[],dataItemKey:n,virtual:s}=e,h=e.opened!==void 0?e.opened:this.component.currentOpened;t&&s&&this.vs.enabled&&(s.skip>0&&l.areSame(t,o[0],n)?this.triggerOnPageChange(i,s.skip-1,s.pageSize):s.skip+s.pageSize<s.total&&l.areSame(t,o[o.length-1],n)?this.triggerOnPageChange(i,s.skip+1,s.pageSize):!h&&s.skip+s.pageSize<s.total&&l.areSame(t,o[o.length-1],n)&&this.triggerOnPageChange(i,s.skip+1,s.pageSize))}getTemplateDef(t,i){const e=r.templateRendering.call(this,t,r.getListeners.call(this));return r.getTemplate.call(this,{h:i,template:e})}getListItemHeight(t){const i=t&&window.getComputedStyle(t);return i?i.height.slice(0,i.height.length-2):0}}p(g,"defaultProps",{popupSettings:{animate:!0,height:"200px"},required:!1,validityStyles:!0});module.exports=g;

package/common/DropDownBase.mjs

@@ -5,9 +5,9 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-var m = Object.defineProperty;
-var f = (l, t, o) => t in l ? m(l, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : l[t] = o;
-var p = (l, t, o) => f(l, typeof t != "symbol" ? t + "" : t, o);
+var f = Object.defineProperty;
+var d = (r, t, o) => t in r ? f(r, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[t] = o;
+var p = (r, t, o) => d(r, typeof t != "symbol" ? t + "" : t, o);
 import S from "./VirtualScroll.mjs";
 import { Navigation as v } from "./Navigation.mjs";
 import { scrollToItem as y, areSame as a } from "./utils.mjs";
@@ -61,15 +61,15 @@ class $ {
     });
     p(this, "scrollToVirtualItem", (t, o) => {
       const e = this.vs;
-      if (e.enabled = !1, t.skip === 0)
-        e.reset();
-      else if (t.skip + t.pageSize === t.total)
-        e.scrollToEnd();
+      if (e.scrollSyncing = !0, t.skip === 0)
+        e.reset(), o > 0 && e.container && e.itemHeight > 0 && (e.container.scrollTop = e.itemHeight * o);
       else {
         let i = e.translate;
-        i === 0 && (e.calcScrollElementHeight(), i = e.itemHeight * t.skip, e.translateTo(i - e.itemHeight)), e.container && (e.container.scrollTop = i), this.scrollToItem(o, !0);
+        i === 0 && (e.calcScrollElementHeight(), i = e.itemHeight * t.skip, e.translateTo(i)), o < 0 && i > 0 && (i += e.itemHeight * (t.pageSize / 4)), e.container && (e.container.scrollTop = i), this.scrollToItem(o, !0);
       }
-      setTimeout(() => e.enabled = !0, 10);
+      setTimeout(() => {
+        e.scrollSyncing = !1;
+      }, 0);
     });
     p(this, "getGroupedDataModernMode", (t, o) => {
       const e = [];
@@ -111,8 +111,8 @@ class $ {
     const n = e.querySelectorAll(".k-list-item, .k-list-group-item")[t];
     if (!n)
       return;
-    const s = n.getBoundingClientRect(), c = e.getBoundingClientRect(), r = s.top - c.top + e.scrollTop, g = r + s.height, h = e.scrollTop, d = h + e.offsetHeight;
-    g > d ? e.scrollTop = r + s.height - e.offsetHeight : r < h && (e.scrollTop = r);
+    const s = n.getBoundingClientRect(), l = e.getBoundingClientRect(), c = s.top - l.top + e.scrollTop, g = c + s.height, h = e.scrollTop, m = h + e.offsetHeight;
+    g > m ? e.scrollTop = c + s.height - e.offsetHeight : c < h && (e.scrollTop = c);
   }
   scrollToItem(t, o) {
     const e = this.list || this.vs.list;
@@ -178,8 +178,8 @@ class $ {
       dataItems: i = [],
       dataItemKey: n,
       virtual: s
-    } = e, c = e.opened !== void 0 ? e.opened : this.component.currentOpened;
-    t && s && this.vs.enabled && (s.skip > 0 && a(t, i[0], n) ? this.triggerOnPageChange(o, s.skip - 1, s.pageSize) : s.skip + s.pageSize < s.total && a(t, i[i.length - 1], n) ? this.triggerOnPageChange(o, s.skip + 1, s.pageSize) : !c && s.skip + s.pageSize < s.total && a(t, i[i.length - 1], n) && this.triggerOnPageChange(o, s.skip + 1, s.pageSize));
+    } = e, l = e.opened !== void 0 ? e.opened : this.component.currentOpened;
+    t && s && this.vs.enabled && (s.skip > 0 && a(t, i[0], n) ? this.triggerOnPageChange(o, s.skip - 1, s.pageSize) : s.skip + s.pageSize < s.total && a(t, i[i.length - 1], n) ? this.triggerOnPageChange(o, s.skip + 1, s.pageSize) : !l && s.skip + s.pageSize < s.total && a(t, i[i.length - 1], n) && this.triggerOnPageChange(o, s.skip + 1, s.pageSize));
   }
   getTemplateDef(t, o) {
     const e = C.call(this, t, T.call(this));

package/common/List.d.ts

@@ -35,6 +35,7 @@ export interface ListProps {
     iconField?: string;
     svgIconField?: string;
     checkboxField?: string;
+    showSelectionCheckbox?: boolean;
 }
 /**
  * @hidden
@@ -66,6 +67,7 @@ declare const List: import('vue').DefineComponent<import('vue').ExtractPropTypes
     iconField: PropType<string>;
     svgIconField: PropType<string>;
     checkboxField: PropType<string>;
+    showSelectionCheckbox: PropType<boolean>;
 }>, {
     listRef: import('vue').Ref<any, any>;
     kendoLocalizationService: {};
@@ -102,6 +104,7 @@ declare const List: import('vue').DefineComponent<import('vue').ExtractPropTypes
     iconField: PropType<string>;
     svgIconField: PropType<string>;
     checkboxField: PropType<string>;
+    showSelectionCheckbox: PropType<boolean>;
 }>> & Readonly<{
     onScroll?: (event: Event) => any;
     onListclick?: (event: MouseEvent) => any;

package/common/List.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"),_=require("./ListItem.js"),E=require("./ListGroupItem.js"),j=require("./utils.js"),p=require("@progress/kendo-vue-common"),H=require("@progress/kendo-vue-intl"),S=require("../messages/main.js"),T=i.defineComponent({name:"list",emits:{listclick:s=>!0,scroll:s=>!0},inheritAttrs:!1,props:{id:String,show:Boolean,dataItems:Array,value:[Object,String,Number,Boolean,Array],textField:String,valueField:String,optionsGuid:String,wrapperCssClass:String,wrapperStyle:Object,listStyle:Object,skip:Number,focusedIndex:Number,highlightSelected:{type:Boolean,default:!0},itemRender:[String,Function,Object],groupHeaderItemRender:[String,Function,Object],noDataRender:[String,Function,Object],scroller:Boolean,groupField:String,actionsField:String,descriptionField:String,iconField:String,svgIconField:String,checkboxField:String},inject:{kendoLocalizationService:{default:null}},setup(){const s=i.ref(null),a=i.inject("kendoLocalizationService",{});return{listRef:s,kendoLocalizationService:a}},mounted(){this.list=p.getRef(this,"list")},methods:{handleClick(s,a){this.$emit("listclick",s,a)},handleScroll(s){this.$emit("scroll",s)}},render(){const s=p.getDefaultSlots(this),a=H.provideLocalizationService(this),{id:F,show:y,wrapperCssClass:V,wrapperStyle:C,listStyle:m,listRef:M}=this.$props,b=function(){const t=this.$props.noDataRender,n=i.createVNode("div",{class:"k-nodata","aria-live":"polite"},[i.createVNode("div",null,[a.toLanguageString(S.nodata,S.messages[S.nodata])])]);return p.getTemplate.call(this,{h:i.h,template:t,defaultRendering:n})},k=function(){const{textField:t,valueField:n,optionsGuid:e,skip:u=0,focusedIndex:c,highlightSelected:r,value:d,groupField:o,itemRender:I,groupHeaderItemRender:h,dataItems:g,actionsField:q,descriptionField:w,iconField:x,svgIconField:L,checkboxField:A}=this.$props,N=Array.isArray(d);let $=0;return g.map(function(l,R){const G=u+R;if(o&&(l==null?void 0:l[o])!==void 0&&(t?l[t]===void 0:Object.keys(l).length===1))return i.createVNode(E.ListGroupItem,{id:`option-${e}-${G}`,key:R+"-group-item",group:l[o],render:h,iconField:x,svgIconField:L,groupItem:l},null);const f=u+$;$+=1;const z=r&&(!N&&j.areSame(l,d,n)||N&&d.findIndex(B=>j.areSame(B,l,n))!==-1),D=c===f;return i.createVNode(_.ListItem,{id:`option-${e}-${G}`,dataItem:l,selected:z,focused:D,index:f,key:`item-${f}`,onItemClick:this.handleClick,textField:t,render:I,actionsField:q,descriptionField:w,iconField:x,svgIconField:L,checkboxField:A},null)},this)}.call(this),v=k.filter(t=>t),O=function(){if(!this.$props.groupField)return i.createVNode("ul",{id:F,role:"listbox","aria-hidden":y?void 0:!0,class:"k-list-ul",ref:p.setRef(this,"list"),style:m},[v]);const t=[];let n=[];return v.forEach(e=>{var r,d;(((r=e==null?void 0:e.type)==null?void 0:r.name)||((d=e==null?void 0:e.type)==null?void 0:d.__name)||"")==="ListGroupItem"?(n.length>0&&t.push(n),n=[e]):e&&n.push(e)}),n.length>0&&t.push(n),t.map((e,u)=>{var d;const c=e.find(o=>{var h,g;return(((h=o==null?void 0:o.type)==null?void 0:h.name)||((g=o==null?void 0:o.type)==null?void 0:g.__name)||"")==="ListGroupItem"}),r=(d=c==null?void 0:c.props)==null?void 0:d.id;return i.createVNode("ul",{id:r?void 0:F,key:r||`group-${u}`,role:r?"group":void 0,"aria-labelledby":r,class:"k-list-ul",ref:r?void 0:p.setRef(this,"list"),style:m},[e])})};return k.length?i.createVNode("div",{class:V,style:C,role:this.$props.groupField?"listbox":void 0,"aria-hidden":this.$props.groupField&&!y?!0:void 0,unselectable:"on",onScroll:this.handleScroll},[O.call(this),s]):b.call(this)}});exports.List=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),E=require("./ListItem.js"),H=require("./ListGroupItem.js"),G=require("./utils.js"),p=require("@progress/kendo-vue-common"),T=require("@progress/kendo-vue-intl"),S=require("../messages/main.js"),M=i.defineComponent({name:"list",emits:{listclick:s=>!0,scroll:s=>!0},inheritAttrs:!1,props:{id:String,show:Boolean,dataItems:Array,value:[Object,String,Number,Boolean,Array],textField:String,valueField:String,optionsGuid:String,wrapperCssClass:String,wrapperStyle:Object,listStyle:Object,skip:Number,focusedIndex:Number,highlightSelected:{type:Boolean,default:!0},itemRender:[String,Function,Object],groupHeaderItemRender:[String,Function,Object],noDataRender:[String,Function,Object],scroller:Boolean,groupField:String,actionsField:String,descriptionField:String,iconField:String,svgIconField:String,checkboxField:String,showSelectionCheckbox:Boolean},inject:{kendoLocalizationService:{default:null}},setup(){const s=i.ref(null),a=i.inject("kendoLocalizationService",{});return{listRef:s,kendoLocalizationService:a}},mounted(){this.list=p.getRef(this,"list")},methods:{handleClick(s,a){this.$emit("listclick",s,a)},handleScroll(s){this.$emit("scroll",s)}},render(){const s=p.getDefaultSlots(this),a=T.provideLocalizationService(this),{id:F,show:y,wrapperCssClass:b,wrapperStyle:j,listStyle:k,listRef:P}=this.$props,V=function(){const t=this.$props.noDataRender,n=i.createVNode("div",{class:"k-nodata","aria-live":"polite"},[i.createVNode("div",null,[a.toLanguageString(S.nodata,S.messages[S.nodata])])]);return p.getTemplate.call(this,{h:i.h,template:t,defaultRendering:n})},m=function(){const{textField:t,valueField:n,optionsGuid:e,skip:u=0,focusedIndex:c,highlightSelected:r,value:d,groupField:o,itemRender:I,groupHeaderItemRender:h,dataItems:g,actionsField:O,descriptionField:q,iconField:x,svgIconField:L,checkboxField:A,showSelectionCheckbox:z}=this.$props,N=Array.isArray(d);let $=0;return g.map(function(l,R){const C=u+R;if(o&&(l==null?void 0:l[o])!==void 0&&(t?l[t]===void 0:Object.keys(l).length===1))return i.createVNode(H.ListGroupItem,{id:`option-${e}-${C}`,key:R+"-group-item",group:l[o],render:h,iconField:x,svgIconField:L,groupItem:l},null);const f=u+$;$+=1;const B=r&&(!N&&G.areSame(l,d,n)||N&&d.findIndex(_=>G.areSame(_,l,n))!==-1),D=c===f;return i.createVNode(E.ListItem,{id:`option-${e}-${C}`,dataItem:l,selected:B,focused:D,index:f,key:`item-${f}`,onItemClick:this.handleClick,textField:t,render:I,actionsField:O,descriptionField:q,iconField:x,svgIconField:L,checkboxField:A,showSelectionCheckbox:z},null)},this)}.call(this),v=m.filter(t=>t),w=function(){if(!this.$props.groupField)return i.createVNode("ul",{id:F,role:"listbox","aria-hidden":y?void 0:!0,class:"k-list-ul",ref:p.setRef(this,"list"),style:k},[v]);const t=[];let n=[];return v.forEach(e=>{var r,d;(((r=e==null?void 0:e.type)==null?void 0:r.name)||((d=e==null?void 0:e.type)==null?void 0:d.__name)||"")==="ListGroupItem"?(n.length>0&&t.push(n),n=[e]):e&&n.push(e)}),n.length>0&&t.push(n),t.map((e,u)=>{var d;const c=e.find(o=>{var h,g;return(((h=o==null?void 0:o.type)==null?void 0:h.name)||((g=o==null?void 0:o.type)==null?void 0:g.__name)||"")==="ListGroupItem"}),r=(d=c==null?void 0:c.props)==null?void 0:d.id;return i.createVNode("ul",{id:r?void 0:F,key:r||`group-${u}`,role:r?"group":void 0,"aria-labelledby":r,class:"k-list-ul",ref:r?void 0:p.setRef(this,"list"),style:k},[e])})};return m.length?i.createVNode("div",{class:b,style:j,role:this.$props.groupField?"listbox":void 0,"aria-hidden":this.$props.groupField&&!y?!0:void 0,unselectable:"on",onScroll:this.handleScroll},[w.call(this),s]):V.call(this)}});exports.List=M;