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

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

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 k, createVNode as n, h as z } from "vue";
+import { getDefaultSlots as R, classNames as C, getTemplate as I, kendoThemeMaps as w } from "@progress/kendo-vue-common";
+import { Chip as m } from "@progress/kendo-vue-buttons";
+const c = (e) => e.preventDefault(), p = (e) => e.event.stopPropagation(), F = /* @__PURE__ */ k({
   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,69 @@ 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, T = s && t.length > s, b = 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,
+      id: "tagslist-" + o
+    }, [S.map(function(i, d) {
+      const y = `tag-${o}-${i.text.toString().replace(/\s+/g, "-")}`, u = i === this.$props.focused, $ = n(m, {
+        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: c,
+        onClick: p,
+        class: u ? "k-focus" : void 0,
+        rounded: l,
+        size: r
       }, null);
-      return $.call(this, {
-        h: v,
+      return I.call(this, {
+        h: z,
         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), T && n(m, {
+      text: v || `+${b} more`,
+      disabled: a,
+      removable: !1,
+      onMousedown: c,
+      onClick: p,
+      rounded: l,
+      size: r
+    }, null)]), e]);
   }
 });
 export {
-  C as TagList
+  F as TagList
 };

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;

package/common/List.mjs

@@ -5,14 +5,14 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as H, createVNode as d, ref as V, inject as T, h as q } from "vue";
-import { ListItem as J } from "./ListItem.mjs";
-import { ListGroupItem as K } from "./ListGroupItem.mjs";
-import { areSame as G } from "./utils.mjs";
-import { getDefaultSlots as M, getRef as P, setRef as j, getTemplate as Q } from "@progress/kendo-vue-common";
-import { provideLocalizationService as U } from "@progress/kendo-vue-intl";
-import { nodata as N, messages as W } from "../messages/main.mjs";
-const de = /* @__PURE__ */ H({
+import { defineComponent as V, createVNode as d, ref as T, inject as q, h as J } from "vue";
+import { ListItem as K } from "./ListItem.mjs";
+import { ListGroupItem as M } from "./ListGroupItem.mjs";
+import { areSame as C } from "./utils.mjs";
+import { getDefaultSlots as P, getRef as Q, setRef as G, getTemplate as U } from "@progress/kendo-vue-common";
+import { provideLocalizationService as W } from "@progress/kendo-vue-intl";
+import { nodata as b, messages as X } from "../messages/main.mjs";
+const ce = /* @__PURE__ */ V({
   name: "list",
   emits: {
     listclick: (l) => !0,
@@ -45,7 +45,8 @@ const de = /* @__PURE__ */ H({
     descriptionField: String,
     iconField: String,
     svgIconField: String,
-    checkboxField: String
+    checkboxField: String,
+    showSelectionCheckbox: Boolean
   },
   inject: {
     kendoLocalizationService: {
@@ -53,14 +54,14 @@ const de = /* @__PURE__ */ H({
     }
   },
   setup() {
-    const l = V(null), a = T("kendoLocalizationService", {});
+    const l = T(null), a = q("kendoLocalizationService", {});
     return {
       listRef: l,
       kendoLocalizationService: a
     };
   },
   mounted() {
-    this.list = P(this, "list");
+    this.list = Q(this, "list");
   },
   methods: {
     handleClick(l, a) {
@@ -71,63 +72,64 @@ const de = /* @__PURE__ */ H({
     }
   },
   render() {
-    const l = M(this), a = U(this), {
+    const l = P(this), a = W(this), {
       id: g,
       show: S,
-      wrapperCssClass: C,
-      wrapperStyle: O,
+      wrapperCssClass: j,
+      wrapperStyle: w,
       listStyle: m,
-      listRef: X
-    } = this.$props, b = function() {
-      const t = this.$props.noDataRender, i = d("div", {
+      listRef: Y
+    } = this.$props, N = function() {
+      const t = this.$props.noDataRender, n = d("div", {
         class: "k-nodata",
         "aria-live": "polite"
-      }, [d("div", null, [a.toLanguageString(N, W[N])])]);
-      return Q.call(this, {
-        h: q,
+      }, [d("div", null, [a.toLanguageString(b, X[b])])]);
+      return U.call(this, {
+        h: J,
         template: t,
-        defaultRendering: i
+        defaultRendering: n
       });
     }, F = function() {
       const {
         textField: t,
-        valueField: i,
+        valueField: n,
         optionsGuid: e,
         skip: p = 0,
         focusedIndex: c,
-        highlightSelected: n,
+        highlightSelected: i,
         value: s,
-        groupField: r,
+        groupField: o,
         itemRender: k,
         groupHeaderItemRender: u,
         dataItems: h,
         actionsField: A,
         descriptionField: z,
         iconField: v,
-        svgIconField: I,
-        checkboxField: D
-      } = this.$props, x = Array.isArray(s);
+        svgIconField: x,
+        checkboxField: B,
+        showSelectionCheckbox: D
+      } = this.$props, I = Array.isArray(s);
       let $ = 0;
-      return h.map(function(o, L) {
+      return h.map(function(r, L) {
         const R = p + L;
-        if (r && (o == null ? void 0 : o[r]) !== void 0 && (t ? o[t] === void 0 : Object.keys(o).length === 1))
-          return d(K, {
+        if (o && (r == null ? void 0 : r[o]) !== void 0 && (t ? r[t] === void 0 : Object.keys(r).length === 1))
+          return d(M, {
             id: `option-${e}-${R}`,
             key: L + "-group-item",
-            group: o[r],
+            group: r[o],
             render: u,
             iconField: v,
-            svgIconField: I,
-            groupItem: o
+            svgIconField: x,
+            groupItem: r
           }, null);
         const f = p + $;
         $ += 1;
-        const B = n && (!x && G(o, s, i) || x && s.findIndex((E) => G(E, o, i)) !== -1), _ = c === f;
-        return d(J, {
+        const _ = i && (!I && C(r, s, n) || I && s.findIndex((H) => C(H, r, n)) !== -1), E = c === f;
+        return d(K, {
           id: `option-${e}-${R}`,
-          dataItem: o,
-          selected: B,
-          focused: _,
+          dataItem: r,
+          selected: _,
+          focused: E,
           index: f,
           key: `item-${f}`,
           onItemClick: this.handleClick,
@@ -136,52 +138,53 @@ const de = /* @__PURE__ */ H({
           actionsField: A,
           descriptionField: z,
           iconField: v,
-          svgIconField: I,
-          checkboxField: D
+          svgIconField: x,
+          checkboxField: B,
+          showSelectionCheckbox: D
         }, null);
       }, this);
-    }.call(this), y = F.filter((t) => t), w = function() {
+    }.call(this), y = F.filter((t) => t), O = function() {
       if (!this.$props.groupField)
         return d("ul", {
           id: g,
           role: "listbox",
           "aria-hidden": S ? void 0 : !0,
           class: "k-list-ul",
-          ref: j(this, "list"),
+          ref: G(this, "list"),
           style: m
         }, [y]);
       const t = [];
-      let i = [];
+      let n = [];
       return y.forEach((e) => {
-        var n, s;
-        (((n = e == null ? void 0 : e.type) == null ? void 0 : n.name) || ((s = e == null ? void 0 : e.type) == null ? void 0 : s.__name) || "") === "ListGroupItem" ? (i.length > 0 && t.push(i), i = [e]) : e && i.push(e);
-      }), i.length > 0 && t.push(i), t.map((e, p) => {
+        var i, s;
+        (((i = e == null ? void 0 : e.type) == null ? void 0 : i.name) || ((s = e == null ? void 0 : e.type) == null ? void 0 : s.__name) || "") === "ListGroupItem" ? (n.length > 0 && t.push(n), n = [e]) : e && n.push(e);
+      }), n.length > 0 && t.push(n), t.map((e, p) => {
         var s;
-        const c = e.find((r) => {
+        const c = e.find((o) => {
           var u, h;
-          return (((u = r == null ? void 0 : r.type) == null ? void 0 : u.name) || ((h = r == null ? void 0 : r.type) == null ? void 0 : h.__name) || "") === "ListGroupItem";
-        }), n = (s = c == null ? void 0 : c.props) == null ? void 0 : s.id;
+          return (((u = o == null ? void 0 : o.type) == null ? void 0 : u.name) || ((h = o == null ? void 0 : o.type) == null ? void 0 : h.__name) || "") === "ListGroupItem";
+        }), i = (s = c == null ? void 0 : c.props) == null ? void 0 : s.id;
         return d("ul", {
-          id: n ? void 0 : g,
-          key: n || `group-${p}`,
-          role: n ? "group" : void 0,
-          "aria-labelledby": n,
+          id: i ? void 0 : g,
+          key: i || `group-${p}`,
+          role: i ? "group" : void 0,
+          "aria-labelledby": i,
           class: "k-list-ul",
-          ref: n ? void 0 : j(this, "list"),
+          ref: i ? void 0 : G(this, "list"),
           style: m
         }, [e]);
       });
     };
     return F.length ? d("div", {
-      class: C,
-      style: O,
+      class: j,
+      style: w,
       role: this.$props.groupField ? "listbox" : void 0,
       "aria-hidden": this.$props.groupField && !S ? !0 : void 0,
       unselectable: "on",
       onScroll: this.handleScroll
-    }, [w.call(this), l]) : b.call(this);
+    }, [O.call(this), l]) : N.call(this);
   }
 });
 export {
-  de as List
+  ce as List
 };

package/common/ListItem.d.ts

@@ -79,6 +79,11 @@ export interface ListItemProps {
      * The field name in the dataItem that contains the checkbox state.
      */
     checkboxField?: string;
+    /**
+     * @hidden
+     * When true, renders a checkbox whose checked state reflects the item's selected state.
+     */
+    showSelectionCheckbox?: boolean;
 }
 /**
  * @hidden
@@ -100,6 +105,7 @@ declare const ListItem: import('vue').DefineComponent<import('vue').ExtractPropT
     iconField: PropType<string>;
     svgIconField: PropType<string>;
     checkboxField: PropType<string>;
+    showSelectionCheckbox: PropType<boolean>;
 }>, {}, {}, {
     itemClass(): {
         'k-list-item': boolean;
@@ -125,5 +131,6 @@ declare const ListItem: import('vue').DefineComponent<import('vue').ExtractPropT
     iconField: PropType<string>;
     svgIconField: PropType<string>;
     checkboxField: PropType<string>;
+    showSelectionCheckbox: PropType<boolean>;
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { ListItem };