@progress/kendo-vue-dropdowns 8.0.0-develop.4 → 8.0.0-develop.5

package/common/DropDownBase.mjs

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

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

package/common/List.mjs

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

package/common/ListGroupItem.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 e=require("vue"),s=require("@progress/kendo-vue-common"),d=e.defineComponent({name:"KendoListItem",inheritAttrs:!1,props:{id:String,group:String,render:Object},render(){const{id:t,group:r,virtual:i,render:n}=this.$props,o=e.createVNode("li",{id:t,role:"group",class:"k-list-group-item",style:{position:i?"relative":"unset"}},[e.createVNode("span",{class:n?void 0:"k-list-item-text"},[r])]);return s.getTemplate.call(this,{h:e.h,template:this.$props.render,defaultRendering:o,additionalProps:{...this.$props}})}});exports.ListGroupItem=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),c=require("@progress/kendo-vue-common"),a=require("./ListItemIcon.js"),p=t.defineComponent({name:"ListGroupItem",inheritAttrs:!1,props:{id:String,group:String,render:Object,iconField:String,svgIconField:String,groupItem:Object,isMultiColumn:Boolean},render(){const{id:r,group:s,virtual:i,render:l,iconField:n,svgIconField:o,groupItem:e,isMultiColumn:d=!1}=this.$props,u=t.createVNode("li",{id:r,role:"presentation",class:"k-list-group-item",style:d?{boxSizing:"inherit",position:i?"relative":"unset"}:{position:i?"relative":"unset"}},[(o||n)&&t.createVNode(a.ListItemIcon,{icon:n?e==null?void 0:e.groupIcon:void 0,svgIcon:o?e==null?void 0:e.groupSvgIcon:void 0},null),t.createVNode("span",{class:l?void 0:"k-list-item-text"},[s])]);return c.getTemplate.call(this,{h:t.h,template:this.$props.render,defaultRendering:u,additionalProps:{...this.$props}})}});exports.ListGroupItem=p;