@progress/kendo-vue-buttons 7.0.1-develop.2 → 7.0.1-develop.3

package/FloatingActionButton/FloatingActionButtonItem.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 t=require("vue"),n=require("@progress/kendo-vue-common"),m=t.defineComponent({name:"KendoVueFloatingActionButtonItem",props:{id:String,disabled:Boolean,focused:Boolean,index:Number,icon:String,item:[String,Function,Object],dataItem:Object,text:String,tabIndex:Number,customProp:[String,Function,Object],class:String},emits:{click:null,down:null},mounted(){this.element=n.getRef(this,"element")},computed:{itemClassNames(){return n.classNames("k-fab-item",{"k-focus":this.focused,"k-disabled":this.disabled})}},methods:{handleClick(e){this.$props.index!==void 0&&!this.$props.disabled&&this.$emit("click",e,this.$props.index)},focusElement(){this.$el&&this.$el.focus()},onMouseDown(e){this.$emit("down",e)}},setup(){return{elementRef:t.ref(null)}},render(){const{disabled:e,id:a,tabIndex:d,dataItem:c}=this.$props,{text:i,icon:o,svgIcon:s}=c;let l;const r=t.createVNode("li",{ref:n.setRef(this,"element"),id:a,class:this.itemClassNames,role:"menuitem",tabindex:n.getTabIndex(d,e),"aria-disabled":e,"aria-label":`${i||""} floatingactionbutton item`,onClick:this.handleClick,onMousedown:this.onMouseDown,onPointerdown:this.onMouseDown},[i&&t.createVNode("span",{class:"k-fab-item-text"},[i]),(s||o)&&t.createVNode(n.Icon,{name:o,icon:s,class:"k-fab-item-icon"},null)]);return l=n.getTemplate.call(this,{h:t.h,template:this.$props.item,defaultRendering:r,additionalProps:this.$props,additionalListeners:{click:this.handleClick}}),l}});exports.FloatingActionButtonItem=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),n=require("@progress/kendo-vue-common"),m=t.defineComponent({name:"KendoVueFloatingActionButtonItem",props:{id:String,disabled:Boolean,focused:Boolean,index:Number,icon:String,item:[String,Function,Object],dataItem:Object,text:String,tabIndex:Number,customProp:[String,Function,Object],class:String},emits:{click:(e,o)=>!0,down:e=>!0},mounted(){this.element=n.getRef(this,"element")},computed:{itemClassNames(){return n.classNames("k-fab-item",{"k-focus":this.focused,"k-disabled":this.disabled})}},methods:{handleClick(e){this.$props.index!==void 0&&!this.$props.disabled&&this.$emit("click",e,this.$props.index)},focusElement(){this.$el&&this.$el.focus()},onMouseDown(e){this.$emit("down",e)}},setup(){return{elementRef:t.ref(null)}},render(){const{disabled:e,id:o,tabIndex:d,dataItem:c}=this.$props,{text:i,icon:s,svgIcon:a}=c;let l;const r=t.createVNode("li",{ref:n.setRef(this,"element"),id:o,class:this.itemClassNames,role:"menuitem",tabindex:n.getTabIndex(d,e),"aria-disabled":e,"aria-label":`${i||""} floatingactionbutton item`,onClick:this.handleClick,onMousedown:this.onMouseDown,onPointerdown:this.onMouseDown},[i&&t.createVNode("span",{class:"k-fab-item-text"},[i]),(a||s)&&t.createVNode(n.Icon,{name:s,icon:a,class:"k-fab-item-icon"},null)]);return l=n.getTemplate.call(this,{h:t.h,template:this.$props.item,defaultRendering:r,additionalProps:this.$props,additionalListeners:{click:this.handleClick}}),l}});exports.FloatingActionButtonItem=m;

package/FloatingActionButton/FloatingActionButtonItem.mjs

@@ -23,8 +23,8 @@ const I = /* @__PURE__ */ m({
     class: String
   },
   emits: {
-    click: null,
-    down: null
+    click: (e, n) => !0,
+    down: (e) => !0
   },
   mounted() {
     this.element = k(this, "element");
@@ -56,21 +56,21 @@ const I = /* @__PURE__ */ m({
   render() {
     const {
       disabled: e,
-      id: l,
-      tabIndex: a,
+      id: n,
+      tabIndex: l,
       dataItem: d
     } = this.$props, {
       text: t,
-      icon: n,
-      svgIcon: s
+      icon: s,
+      svgIcon: o
     } = d;
-    let o;
+    let a;
     const c = i("li", {
       ref: p(this, "element"),
-      id: l,
+      id: n,
       class: this.itemClassNames,
       role: "menuitem",
-      tabindex: h(a, e),
+      tabindex: h(l, e),
       "aria-disabled": e,
       "aria-label": `${t || ""} floatingactionbutton item`,
       onClick: this.handleClick,
@@ -78,12 +78,12 @@ const I = /* @__PURE__ */ m({
       onPointerdown: this.onMouseDown
     }, [t && i("span", {
       class: "k-fab-item-text"
-    }, [t]), (s || n) && i(f, {
-      name: n,
-      icon: s,
+    }, [t]), (o || s) && i(f, {
+      name: s,
+      icon: o,
       class: "k-fab-item-icon"
     }, null)]);
-    return o = b.call(this, {
+    return a = b.call(this, {
       h: r,
       template: this.$props.item,
       defaultRendering: c,
@@ -91,7 +91,7 @@ const I = /* @__PURE__ */ m({
       additionalListeners: {
         click: this.handleClick
       }
-    }), o;
+    }), a;
   }
 });
 export {

package/ListButton/ButtonItem.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 t=require("vue"),i=require("@progress/kendo-vue-common"),c=t.defineComponent({name:"KendoButtonItem",emits:{click:null,down:null},props:{focused:Boolean,index:Number,item:Object,render:[String,Object,Function],dataItem:[String,Object],id:String,textField:String,role:String},computed:{wrapperClass(){return{"k-item":!0,"k-focus":this.$props.focused}},innerClass(){const{dataItem:e}=this.$props;return{"k-link k-menu-link":!0,"k-selected":e.selected,"k-disabled":e.disabled}}},methods:{onClick(e){this.$emit("click",e,this.$props.index)},onDown(e){this.$emit("down",e,this.$props.index)}},render(){const{dataItem:e,id:o,render:r}=this.$props,l=function(){const{textField:n,index:a}=this.$props,s=e.text!==void 0?e.text:n?e[n]:e,d=t.createVNode("span",{tabindex:-1,class:this.innerClass,key:"icon"},[e.icon||e.svgIcon?t.createVNode(i.Icon,{name:e.icon,icon:e.svgIcon,class:e.iconClass},null):e.iconClass&&t.createVNode("span",{class:e.iconClass,role:"presentation"},null),e.imageUrl&&t.createVNode("img",{class:"k-icon",alt:"",src:e.imageUrl,role:"presentation",key:"image"},null),s&&t.createVNode("span",{class:"k-menu-link-text"},[s])]);return i.getTemplate.call(this,{h:t.h,template:this.$props.dataItem.render||r,defaultRendering:d,additionalProps:{item:e,itemIndex:a,innerClass:this.innerClass,focused:this.focused}})};return t.createVNode("li",{id:o,class:this.wrapperClass,onClick:this.onClick,onMousedown:this.onDown,onPointerdown:this.onDown,role:"menuitem","aria-disabled":e.disabled||void 0},[l.call(this)])}});exports.ButtonItem=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),o=require("@progress/kendo-vue-common"),l=t.defineComponent({name:"KendoButtonItem",emits:{click:(e,n)=>!0,down:(e,n)=>!0},props:{focused:Boolean,index:Number,item:Object,render:[String,Object,Function],dataItem:[String,Object],id:String,textField:String,role:String},computed:{wrapperClass(){return{"k-item":!0,"k-focus":this.$props.focused}},innerClass(){const{dataItem:e}=this.$props;return{"k-link k-menu-link":!0,"k-selected":e.selected,"k-disabled":e.disabled}}},methods:{onClick(e){this.$emit("click",e,this.$props.index)},onDown(e){this.$emit("down",e,this.$props.index)}},render(){const{dataItem:e,id:n,render:r}=this.$props,d=function(){const{textField:i,index:a}=this.$props,s=e.text!==void 0?e.text:i?e[i]:e,c=t.createVNode("span",{tabindex:-1,class:this.innerClass,key:"icon"},[e.icon||e.svgIcon?t.createVNode(o.Icon,{name:e.icon,icon:e.svgIcon,class:e.iconClass},null):e.iconClass&&t.createVNode("span",{class:e.iconClass,role:"presentation"},null),e.imageUrl&&t.createVNode("img",{class:"k-icon",alt:"",src:e.imageUrl,role:"presentation",key:"image"},null),s&&t.createVNode("span",{class:"k-menu-link-text"},[s])]);return o.getTemplate.call(this,{h:t.h,template:this.$props.dataItem.render||r,defaultRendering:c,additionalProps:{item:e,itemIndex:a,innerClass:this.innerClass,focused:this.focused}})};return t.createVNode("li",{id:n,class:this.wrapperClass,onClick:this.onClick,onMousedown:this.onDown,onPointerdown:this.onDown,role:"menuitem","aria-disabled":e.disabled||void 0},[d.call(this)])}});exports.ButtonItem=l;

package/ListButton/ButtonItem.mjs

@@ -5,13 +5,13 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as d, createVNode as n, h as c } from "vue";
+import { defineComponent as a, createVNode as t, h as c } from "vue";
 import { Icon as m, getTemplate as p } from "@progress/kendo-vue-common";
-const C = /* @__PURE__ */ d({
+const x = /* @__PURE__ */ a({
   name: "KendoButtonItem",
   emits: {
-    click: null,
-    down: null
+    click: (e, n) => !0,
+    down: (e, n) => !0
   },
   props: {
     focused: Boolean,
@@ -52,36 +52,36 @@ const C = /* @__PURE__ */ d({
   render() {
     const {
       dataItem: e,
-      id: s,
+      id: n,
       render: o
     } = this.$props, r = function() {
       const {
-        textField: t,
+        textField: i,
         index: l
-      } = this.$props, i = e.text !== void 0 ? e.text : t ? e[t] : e, a = n("span", {
+      } = this.$props, s = e.text !== void 0 ? e.text : i ? e[i] : e, d = t("span", {
         tabindex: -1,
         class: this.innerClass,
         key: "icon"
-      }, [e.icon || e.svgIcon ? n(m, {
+      }, [e.icon || e.svgIcon ? t(m, {
         name: e.icon,
         icon: e.svgIcon,
         class: e.iconClass
-      }, null) : e.iconClass && n("span", {
+      }, null) : e.iconClass && t("span", {
         class: e.iconClass,
         role: "presentation"
-      }, null), e.imageUrl && n("img", {
+      }, null), e.imageUrl && t("img", {
         class: "k-icon",
         alt: "",
         src: e.imageUrl,
         role: "presentation",
         key: "image"
-      }, null), i && n("span", {
+      }, null), s && t("span", {
         class: "k-menu-link-text"
-      }, [i])]);
+      }, [s])]);
       return p.call(this, {
         h: c,
         template: this.$props.dataItem.render || o,
-        defaultRendering: a,
+        defaultRendering: d,
         additionalProps: {
           item: e,
           itemIndex: l,
@@ -90,8 +90,8 @@ const C = /* @__PURE__ */ d({
         }
       });
     };
-    return n("li", {
-      id: s,
+    return t("li", {
+      id: n,
       class: this.wrapperClass,
       onClick: this.onClick,
       onMousedown: this.onDown,
@@ -102,5 +102,5 @@ const C = /* @__PURE__ */ d({
   }
 });
 export {
-  C as ButtonItem
+  x as ButtonItem
 };

package/ListButton/DropDownButton.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"),g=require("../Button.js"),s=require("@progress/kendo-vue-common"),y=require("./utils/navigation.js"),b=require("./ButtonItem.js"),k=require("@progress/kendo-vue-popup"),p=require("./utils/popup.js"),$=require("../package-metadata.js"),C=i.defineComponent({name:"KendoDropDownButton",emits:{focus:null,blur:null,itemclick:null,open:null,close:null},props:{accessKey:String,items:{type:Array,default:function(){return[]}},ariaLabel:String,text:String,textField:String,tabIndex:Number,disabled:Boolean,icon:String,svgIcon:Object,iconClass:String,imageUrl:String,popupSettings:Object,itemRender:[String,Object,Function],item:Function,size:{type:String,default:"medium"},shape:{type:String,default:"rectangle",validator:function(e){return[null,"rectangle","square"].includes(e)}},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid",validator:function(e){return[null,"flat","link","outline","solid"].includes(e)}},themeColor:{type:String,default:"base",validator:function(e){return[null,"base","dark","error","info","inverse","inverse","light","primary","secondary","success","tertiary","warning"].includes(e)}},opened:{type:Boolean,default:void 0},buttonClass:String,dir:String},created(){this._blurTimeout=null,this._anchor=s.guid(),this.wrapper=null,this.mainButton=null,this.guid=s.guid(),this.buttonsData=[],s.validatePackage($.packageMetadata)},mounted(){this.mainButton=this.$refs[this._anchor],(this.$props.dir===void 0&&this.isRtl()||this.computedOpened)&&this.$forceUpdate()},updated(){this.focused&&this.element()&&(this.mainButton=this.$refs[this._anchor],this.mainButton.focus())},data(){return{currentOpened:!1,focused:!1,focusedIndex:-1}},computed:{computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},wrapperClass(){return{"k-dropdown-button":!0,"k-focus":this.focused}}},setup(){return{kendoAnchorRef:i.ref(null)}},render(){const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:o,disabled:a}=this.$props,c=s.getDefaultSlots(this);this.buttonsData=this.$props.items;const l=function(){const{item:n,itemRender:r,textField:f}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(u,d){const m=typeof u!="string"?{...u,render:s.templateRendering.call(this,u.render,s.getListeners.call(this))}:u;return i.createVNode(b.ButtonItem,{class:"k-menu-item",dataItem:m,textField:f,focused:this.focusedIndex===d,onClick:this.onItemClick,onDown:this.onItemDown,render:s.templateRendering.call(this,r,s.getListeners.call(this)),item:n,index:d,key:d,id:`${this.guid}-${d}`},null)},this):null},h=function(){const{popupSettings:n={},size:r}=this.$props;return i.createVNode(k.Popup,{anchor:this._anchor,show:this.computedOpened,animate:n.animate,popupClass:s.classNames("k-menu-popup",n.popupClass),anchorAlign:n.anchorAlign||p.getAnchorAlign(e),popupAlign:n.popupAlign||p.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[i.createVNode("ul",{class:`k-group k-menu-group k-reset k-menu-group-${s.kendoThemeMaps.sizeMap[r]||r}`,role:"menu",id:this.guid},[l.call(this)])]})};return i.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[i.createVNode(g.Button,{size:this.$props.size,shape:this.$props.shape,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:this.onClickMainButton,onMousedown:this.mouseDown,disabled:a||void 0,tabIndex:o,accessKey:this.$props.accessKey,icon:this.$props.icon,svgIcon:this.$props.svgIcon,iconClass:this.$props.iconClass,class:this.$props.buttonClass,imageUrl:this.$props.imageUrl,dir:t,ref:this._anchor,type:"button","aria-disabled":a,"aria-haspopup":"menu","aria-expanded":this.computedOpened,"aria-label":this.$props.ariaLabel||`${this.$props.text||""} dropdownbutton`,"aria-controls":this.guid,"aria-activedescendant":this.focusedIndex!==void 0&&this.focusedIndex>=0?`${this.guid}-${this.focusedIndex}`:void 0},{default:()=>[this.$props.text,c]}),h.call(this)])},methods:{element(){return this.mainButton},onKeyDown(e){if(e.altKey){!this.computedOpened&&e.keyCode===s.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===s.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}if(e.keyCode===s.Keys.enter||e.keyCode===s.Keys.space?(this.focusedIndex!==void 0&&this.focusedIndex>=0&&this.dispatchClickEvent(e,this.focusedIndex),e.preventDefault(),this.focusedIndex=this.computedOpened?-1:0,this.currentOpened=!this.computedOpened,this.dispatchPopupEvent(e,this.currentOpened)):this.computedOpened&&e.keyCode===s.Keys.esc&&(this.focusedIndex=-1,this.currentOpened=!1,this.dispatchPopupEvent(e,this.currentOpened)),this.computedOpened){const t=y(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);this.focusedIndex=t;const o=e.keyCode===s.Keys.up||e.keyCode===s.Keys.down||e.keyCode===s.Keys.left||e.keyCode===s.Keys.right;!e.altKey&&o&&e.preventDefault()}},onFocus(e){this.focused||(this.focused=!0,this.$emit("focus",e,this,void 0)),this.focusedIndex=this.computedOpened?0:-1,clearTimeout(this._blurTimeout)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{s.canUseDOM&&document.activeElement!==t.$el&&(t.focused=!1,t.focusedIndex=-1,t.$emit("blur",e,t,void 0),t.computedOpened&&(t.currentOpened=!1,t.dispatchPopupEvent(e,!1)))},200)},onItemClick(e,t){this.focusedIndex=-1,this.currentOpened=!1,this.dispatchClickEvent(e,t),this.dispatchPopupEvent(e,!1)},onItemDown(e){document.activeElement===this.element()&&e.preventDefault()},mouseDown(e){e.preventDefault()},dispatchClickEvent(e,t){this.isItemDisabled(t)||this.$emit("itemclick",{event:e,item:this.buttonsData[t],itemIndex:t})},onClickMainButton(e){if(!this.buttonsData.length)return;const t=!this.computedOpened;this.currentOpened=t,this.focused=!0,this.focusedIndex=t?0:-1,this.dispatchPopupEvent(e,t)},dispatchPopupEvent(e,t){this.$emit(t?"open":"close",e,this,void 0)},isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.$props.disabled},isRtl(){return this.$props.dir!==void 0?this.$props.dir==="rtl":!!this.$el&&getComputedStyle(this.$el).direction==="rtl"}}});exports.DropDownButton=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),g=require("../Button.js"),s=require("@progress/kendo-vue-common"),y=require("./utils/navigation.js"),b=require("./ButtonItem.js"),k=require("@progress/kendo-vue-popup"),p=require("./utils/popup.js"),$=require("../package-metadata.js"),C=i.defineComponent({name:"KendoDropDownButton",emits:{focus:e=>!0,blur:e=>!0,itemclick:e=>!0,open:e=>!0,close:e=>!0},props:{accessKey:String,items:{type:Array,default:function(){return[]}},ariaLabel:String,text:String,textField:String,tabIndex:Number,disabled:Boolean,icon:String,svgIcon:Object,iconClass:String,imageUrl:String,popupSettings:Object,itemRender:[String,Object,Function],item:Function,size:{type:String,default:"medium"},shape:{type:String,default:"rectangle",validator:function(e){return[null,"rectangle","square"].includes(e)}},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid",validator:function(e){return[null,"flat","link","outline","solid"].includes(e)}},themeColor:{type:String,default:"base",validator:function(e){return[null,"base","dark","error","info","inverse","inverse","light","primary","secondary","success","tertiary","warning"].includes(e)}},opened:{type:Boolean,default:void 0},buttonClass:String,dir:String},created(){this._blurTimeout=null,this._anchor=s.guid(),this.wrapper=null,this.mainButton=null,this.guid=s.guid(),this.buttonsData=[],s.validatePackage($.packageMetadata)},mounted(){this.mainButton=this.$refs[this._anchor],(this.$props.dir===void 0&&this.isRtl()||this.computedOpened)&&this.$forceUpdate()},updated(){this.focused&&this.element()&&(this.mainButton=this.$refs[this._anchor],this.mainButton.focus())},data(){return{currentOpened:!1,focused:!1,focusedIndex:-1}},computed:{computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},wrapperClass(){return{"k-dropdown-button":!0,"k-focus":this.focused}}},setup(){return{kendoAnchorRef:i.ref(null)}},render(){const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:n,disabled:a}=this.$props,c=s.getDefaultSlots(this);this.buttonsData=this.$props.items;const l=function(){const{item:o,itemRender:r,textField:f}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(u,d){const m=typeof u!="string"?{...u,render:s.templateRendering.call(this,u.render,s.getListeners.call(this))}:u;return i.createVNode(b.ButtonItem,{class:"k-menu-item",dataItem:m,textField:f,focused:this.focusedIndex===d,onClick:this.onItemClick,onDown:this.onItemDown,render:s.templateRendering.call(this,r,s.getListeners.call(this)),item:o,index:d,key:d,id:`${this.guid}-${d}`},null)},this):null},h=function(){const{popupSettings:o={},size:r}=this.$props;return i.createVNode(k.Popup,{anchor:this._anchor,show:this.computedOpened,animate:o.animate,popupClass:s.classNames("k-menu-popup",o.popupClass),anchorAlign:o.anchorAlign||p.getAnchorAlign(e),popupAlign:o.popupAlign||p.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[i.createVNode("ul",{class:`k-group k-menu-group k-reset k-menu-group-${s.kendoThemeMaps.sizeMap[r]||r}`,role:"menu",id:this.guid},[l.call(this)])]})};return i.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[i.createVNode(g.Button,{size:this.$props.size,shape:this.$props.shape,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:this.onClickMainButton,onMousedown:this.mouseDown,disabled:a||void 0,tabIndex:n,accessKey:this.$props.accessKey,icon:this.$props.icon,svgIcon:this.$props.svgIcon,iconClass:this.$props.iconClass,class:this.$props.buttonClass,imageUrl:this.$props.imageUrl,dir:t,ref:this._anchor,type:"button","aria-disabled":a,"aria-haspopup":"menu","aria-expanded":this.computedOpened,"aria-label":this.$props.ariaLabel||`${this.$props.text||""} dropdownbutton`,"aria-controls":this.guid,"aria-activedescendant":this.focusedIndex!==void 0&&this.focusedIndex>=0?`${this.guid}-${this.focusedIndex}`:void 0},{default:()=>[this.$props.text,c]}),h.call(this)])},methods:{element(){return this.mainButton},onKeyDown(e){if(e.altKey){!this.computedOpened&&e.keyCode===s.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===s.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}if(e.keyCode===s.Keys.enter||e.keyCode===s.Keys.space?(this.focusedIndex!==void 0&&this.focusedIndex>=0&&this.dispatchClickEvent(e,this.focusedIndex),e.preventDefault(),this.focusedIndex=this.computedOpened?-1:0,this.currentOpened=!this.computedOpened,this.dispatchPopupEvent(e,this.currentOpened)):this.computedOpened&&e.keyCode===s.Keys.esc&&(this.focusedIndex=-1,this.currentOpened=!1,this.dispatchPopupEvent(e,this.currentOpened)),this.computedOpened){const t=y(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);this.focusedIndex=t;const n=e.keyCode===s.Keys.up||e.keyCode===s.Keys.down||e.keyCode===s.Keys.left||e.keyCode===s.Keys.right;!e.altKey&&n&&e.preventDefault()}},onFocus(e){this.focused||(this.focused=!0,this.$emit("focus",{event:e})),this.focusedIndex=this.computedOpened?0:-1,clearTimeout(this._blurTimeout)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{s.canUseDOM&&document.activeElement!==t.$el&&(t.focused=!1,t.focusedIndex=-1,t.$emit("blur",{event:e}),t.computedOpened&&(t.currentOpened=!1,t.dispatchPopupEvent(e,!1)))},200)},onItemClick(e,t){this.focusedIndex=-1,this.currentOpened=!1,this.dispatchClickEvent(e,t),this.dispatchPopupEvent(e,!1)},onItemDown(e){document.activeElement===this.element()&&e.preventDefault()},mouseDown(e){e.preventDefault()},dispatchClickEvent(e,t){this.isItemDisabled(t)||this.$emit("itemclick",{event:e,item:this.buttonsData[t],itemIndex:t})},onClickMainButton(e){if(!this.buttonsData.length)return;const t=!this.computedOpened;this.currentOpened=t,this.focused=!0,this.focusedIndex=t?0:-1,this.dispatchPopupEvent(e,t)},dispatchPopupEvent(e,t){const n={event:e};this.$emit(t?"open":"close",n)},isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.$props.disabled},isRtl(){return this.$props.dir!==void 0?this.$props.dir==="rtl":!!this.$el&&getComputedStyle(this.$el).direction==="rtl"}}});exports.DropDownButton=C;

package/ListButton/DropDownButton.mjs

@@ -5,22 +5,22 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as $, createVNode as n, ref as k } from "vue";
+import { defineComponent as $, createVNode as o, ref as k } from "vue";
 import { Button as y } from "../Button.mjs";
-import { canUseDOM as C, Keys as i, getDefaultSlots as I, guid as a, validatePackage as D, classNames as O, kendoThemeMaps as x, templateRendering as l, getListeners as c } from "@progress/kendo-vue-common";
+import { canUseDOM as C, Keys as s, getDefaultSlots as I, guid as a, validatePackage as D, classNames as O, kendoThemeMaps as x, templateRendering as c, getListeners as l } from "@progress/kendo-vue-common";
 import w from "./utils/navigation.mjs";
 import { ButtonItem as S } from "./ButtonItem.mjs";
-import { Popup as B } from "@progress/kendo-vue-popup";
-import { getPopupAlign as E, getAnchorAlign as K } from "./utils/popup.mjs";
-import { packageMetadata as P } from "../package-metadata.mjs";
+import { Popup as v } from "@progress/kendo-vue-popup";
+import { getPopupAlign as B, getAnchorAlign as E } from "./utils/popup.mjs";
+import { packageMetadata as K } from "../package-metadata.mjs";
 const U = /* @__PURE__ */ $({
   name: "KendoDropDownButton",
   emits: {
-    focus: null,
-    blur: null,
-    itemclick: null,
-    open: null,
-    close: null
+    focus: (e) => !0,
+    blur: (e) => !0,
+    itemclick: (e) => !0,
+    open: (e) => !0,
+    close: (e) => !0
   },
   props: {
     accessKey: String,
@@ -79,7 +79,7 @@ const U = /* @__PURE__ */ $({
     dir: String
   },
   created() {
-    this._blurTimeout = null, this._anchor = a(), this.wrapper = null, this.mainButton = null, this.guid = a(), this.buttonsData = [], D(P);
+    this._blurTimeout = null, this._anchor = a(), this.wrapper = null, this.mainButton = null, this.guid = a(), this.buttonsData = [], D(K);
   },
   mounted() {
     this.mainButton = this.$refs[this._anchor], (this.$props.dir === void 0 && this.isRtl() || this.computedOpened) && this.$forceUpdate();
@@ -112,30 +112,30 @@ const U = /* @__PURE__ */ $({
   },
   render() {
     const e = this.isRtl(), t = e ? "rtl" : void 0, {
-      tabIndex: o,
+      tabIndex: i,
       disabled: p
     } = this.$props, h = I(this);
     this.buttonsData = this.$props.items;
     const f = function() {
       const {
-        item: s,
+        item: n,
         itemRender: r,
         textField: g
       } = this.$props;
       return this.buttonsData.length > 0 ? this.buttonsData.map(function(u, d) {
         const b = typeof u != "string" ? {
           ...u,
-          render: l.call(this, u.render, c.call(this))
+          render: c.call(this, u.render, l.call(this))
         } : u;
-        return n(S, {
+        return o(S, {
           class: "k-menu-item",
           dataItem: b,
           textField: g,
           focused: this.focusedIndex === d,
           onClick: this.onItemClick,
           onDown: this.onItemDown,
-          render: l.call(this, r, c.call(this)),
-          item: s,
+          render: c.call(this, r, l.call(this)),
+          item: n,
           index: d,
           key: d,
           id: `${this.guid}-${d}`
@@ -143,34 +143,34 @@ const U = /* @__PURE__ */ $({
       }, this) : null;
     }, m = function() {
       const {
-        popupSettings: s = {},
+        popupSettings: n = {},
         size: r
       } = this.$props;
-      return n(B, {
+      return o(v, {
         anchor: this._anchor,
         show: this.computedOpened,
-        animate: s.animate,
-        popupClass: O("k-menu-popup", s.popupClass),
-        anchorAlign: s.anchorAlign || K(e),
-        popupAlign: s.popupAlign || E(e),
+        animate: n.animate,
+        popupClass: O("k-menu-popup", n.popupClass),
+        anchorAlign: n.anchorAlign || E(e),
+        popupAlign: n.popupAlign || B(e),
         style: e ? {
           direction: "rtl"
         } : void 0
       }, {
-        default: () => [n("ul", {
+        default: () => [o("ul", {
           class: `k-group k-menu-group k-reset k-menu-group-${x.sizeMap[r] || r}`,
           role: "menu",
           id: this.guid
         }, [f.call(this)])]
       });
     };
-    return n("div", {
+    return o("div", {
       class: this.wrapperClass,
       onKeydown: this.onKeyDown,
       onFocusin: this.onFocus,
       onFocusout: this.onBlur,
       dir: t
-    }, [n(y, {
+    }, [o(y, {
       size: this.$props.size,
       shape: this.$props.shape,
       rounded: this.$props.rounded,
@@ -179,7 +179,7 @@ const U = /* @__PURE__ */ $({
       onClick: this.onClickMainButton,
       onMousedown: this.mouseDown,
       disabled: p || void 0,
-      tabIndex: o,
+      tabIndex: i,
       accessKey: this.$props.accessKey,
       icon: this.$props.icon,
       svgIcon: this.$props.svgIcon,
@@ -205,18 +205,20 @@ const U = /* @__PURE__ */ $({
     },
     onKeyDown(e) {
       if (e.altKey) {
-        !this.computedOpened && e.keyCode === i.down ? (this.dispatchPopupEvent(e, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && e.keyCode === i.up && (this.dispatchPopupEvent(e, !1), this.focusedIndex = -1, this.currentOpened = !1);
+        !this.computedOpened && e.keyCode === s.down ? (this.dispatchPopupEvent(e, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && e.keyCode === s.up && (this.dispatchPopupEvent(e, !1), this.focusedIndex = -1, this.currentOpened = !1);
         return;
       }
-      if (e.keyCode === i.enter || e.keyCode === i.space ? (this.focusedIndex !== void 0 && this.focusedIndex >= 0 && this.dispatchClickEvent(e, this.focusedIndex), e.preventDefault(), this.focusedIndex = this.computedOpened ? -1 : 0, this.currentOpened = !this.computedOpened, this.dispatchPopupEvent(e, this.currentOpened)) : this.computedOpened && e.keyCode === i.esc && (this.focusedIndex = -1, this.currentOpened = !1, this.dispatchPopupEvent(e, this.currentOpened)), this.computedOpened) {
+      if (e.keyCode === s.enter || e.keyCode === s.space ? (this.focusedIndex !== void 0 && this.focusedIndex >= 0 && this.dispatchClickEvent(e, this.focusedIndex), e.preventDefault(), this.focusedIndex = this.computedOpened ? -1 : 0, this.currentOpened = !this.computedOpened, this.dispatchPopupEvent(e, this.currentOpened)) : this.computedOpened && e.keyCode === s.esc && (this.focusedIndex = -1, this.currentOpened = !1, this.dispatchPopupEvent(e, this.currentOpened)), this.computedOpened) {
         const t = w(this.focusedIndex, e.keyCode, e.altKey, this.buttonsData.length);
         this.focusedIndex = t;
-        const o = e.keyCode === i.up || e.keyCode === i.down || e.keyCode === i.left || e.keyCode === i.right;
-        !e.altKey && o && e.preventDefault();
+        const i = e.keyCode === s.up || e.keyCode === s.down || e.keyCode === s.left || e.keyCode === s.right;
+        !e.altKey && i && e.preventDefault();
       }
     },
     onFocus(e) {
-      this.focused || (this.focused = !0, this.$emit("focus", e, this, void 0)), this.focusedIndex = this.computedOpened ? 0 : -1, clearTimeout(this._blurTimeout);
+      this.focused || (this.focused = !0, this.$emit("focus", {
+        event: e
+      })), this.focusedIndex = this.computedOpened ? 0 : -1, clearTimeout(this._blurTimeout);
     },
     onBlur(e) {
       clearTimeout(this._blurTimeout), this.createBlurTimeout(e);
@@ -224,7 +226,9 @@ const U = /* @__PURE__ */ $({
     createBlurTimeout(e) {
       const t = this;
       this._blurTimeout = setTimeout(() => {
-        C && document.activeElement !== t.$el && (t.focused = !1, t.focusedIndex = -1, t.$emit("blur", e, t, void 0), t.computedOpened && (t.currentOpened = !1, t.dispatchPopupEvent(e, !1)));
+        C && document.activeElement !== t.$el && (t.focused = !1, t.focusedIndex = -1, t.$emit("blur", {
+          event: e
+        }), t.computedOpened && (t.currentOpened = !1, t.dispatchPopupEvent(e, !1)));
       }, 200);
     },
     onItemClick(e, t) {
@@ -250,7 +254,10 @@ const U = /* @__PURE__ */ $({
       this.currentOpened = t, this.focused = !0, this.focusedIndex = t ? 0 : -1, this.dispatchPopupEvent(e, t);
     },
     dispatchPopupEvent(e, t) {
-      this.$emit(t ? "open" : "close", e, this, void 0);
+      const i = {
+        event: e
+      };
+      this.$emit(t ? "open" : "close", i);
     },
     isItemDisabled(e) {
       return this.buttonsData[e] ? this.buttonsData[e].disabled : this.$props.disabled;

package/ListButton/SplitButton.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 o=require("vue"),a=require("../Button.js"),i=require("@progress/kendo-vue-common"),b=require("./ButtonItem.js"),y=require("./utils/navigation.js"),k=require("@progress/kendo-vue-popup"),c=require("./utils/popup.js"),$=require("@progress/kendo-svg-icons"),C=require("../package-metadata.js"),I=o.defineComponent({name:"KendoSplitButton",emits:{focus:null,blur:null,buttonclick:null,itemclick:null,open:null,close:null},props:{accessKey:String,ariaLabel:String,text:String,items:{type:Array,default:function(){return[]}},textField:String,tabIndex:Number,disabled:Boolean,icon:String,svgIcon:Object,size:{type:String,default:"medium"},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid",validator:function(e){return[null,"flat","link","outline","solid"].includes(e)}},themeColor:{type:String,default:"base",validator:function(e){return[null,"base","dark","error","info","inverse","inverse","light","primary","secondary","success","tertiary","warning"].includes(e)}},opened:{type:Boolean,default:void 0},iconClass:String,imageUrl:String,popupSettings:Object,itemRender:[String,Function,Object],item:[String,Function,Object],className:String,buttonClass:String,dir:String},data(){return{focused:!1,focusedIndex:-1,currentOpened:!1}},created(){this._blurTimeout=null,this._anchor=i.guid(),this.mainButton=null,this.guid=i.guid(),this.buttonsData=[],i.validatePackage(C.packageMetadata)},mounted(){this.mainButton=this.$refs[this._anchor],(this.$props.dir===void 0&&this.isRtl()||this.computedOpened)&&this.$forceUpdate()},updated(){this.focused&&this.element()&&(this.mainButton=this.$refs[this._anchor],this.mainButton.focus())},computed:{computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},wrapperClass(){return{"k-split-button":!0,"k-button-group":!0,"k-focus":this.focused}}},setup(){return{kendoAnchorRef:o.ref(null)}},render(){this.buttonsData=this.$props.items;const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:s,disabled:r}=this.$props,p=i.getDefaultSlots(this),h=function(){const{item:n,itemRender:u,textField:m}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(d,l){const g=typeof d!="string"?{...d,render:i.templateRendering.call(this,d.render,i.getListeners.call(this))}:d;return o.createVNode(b.ButtonItem,{class:"k-menu-item",role:"menuitem",dataItem:g,textField:m,focused:this.focusedIndex===l,onClick:this.onItemClick,onDown:this.onItemDown,render:i.templateRendering.call(this,u,i.getListeners.call(this)),item:n,key:l,index:l,id:`${this.guid}-${l}`},null)},this):null},f=function(){const{popupSettings:n={},size:u}=this.$props;return o.createVNode(k.Popup,{anchor:this._anchor,show:this.computedOpened,animate:n.animate,popupClass:i.classNames("k-menu-popup",n.popupClass),anchorAlign:n.anchorAlign||c.getAnchorAlign(e),popupAlign:n.popupAlign||c.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[o.createVNode("ul",{class:`k-group k-menu-group k-reset k-menu-group-${i.kendoThemeMaps.sizeMap[u]||u}`,role:"menu",id:this.guid,"aria-labelledby":this._anchor},[h.call(this)])]})};return o.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[o.createVNode(a.Button,{size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:n=>this.onItemClick(n,-1),disabled:r||void 0,tabIndex:s,accessKey:this.$props.accessKey,class:this.$props.buttonClass,icon:this.$props.icon,svgIcon:this.$props.svgIcon,iconClass:this.$props.iconClass,imageUrl:this.$props.imageUrl,dir:t,id:this._anchor,ref:this._anchor,type:"button","aria-disabled":r,"aria-haspopup":"menu","aria-expanded":this.computedOpened,"aria-label":this.$props.ariaLabel||`${this.$props.text||""} splitbutton`,"aria-controls":this.guid,"aria-activedescendant":this.focusedIndex!==void 0&&this.focusedIndex>=0?`${this.guid}-${this.focusedIndex}`:void 0},{default:()=>[this.$props.text,p]}),o.createVNode(a.Button,{svgIcon:$.caretAltDownIcon,size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,icon:"caret-alt-down",disabled:r||void 0,tabIndex:-1,onClick:this.onSplitPartClick,onMousedown:this.onDownSplitPart,onPointerdown:this.onDownSplitPart,dir:t,"aria-label":"menu toggling button"},null),f.call(this)])},methods:{element(){return this.mainButton},onKeyDown(e){if(e.altKey){!this.computedOpened&&e.keyCode===i.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===i.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}let t;if(e.keyCode===i.Keys.enter||e.keyCode===i.Keys.space?(e.preventDefault(),this.dispatchClickEvent(e,this.focusedIndex),this.focusedIndex!==void 0&&this.focusedIndex>=0&&(t={focusedIndex:this.computedOpened?-1:0,currentOpened:!this.computedOpened},this.dispatchPopupEvent(e,t.currentOpened))):this.computedOpened&&e.keyCode===i.Keys.esc&&(t={focusedIndex:-1,currentOpened:!1},this.dispatchPopupEvent(e,t.currentOpened)),this.computedOpened){const s=y(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);s!==this.focusedIndex&&(t=t||{},t.focusedIndex=s);const r=e.keyCode===i.Keys.up||e.keyCode===i.Keys.down||e.keyCode===i.Keys.left||e.keyCode===i.Keys.right;!e.altKey&&r&&e.preventDefault()}t&&(this.focusedIndex=t.focusedIndex,this.focused=t.focused,t.currentOpened!==void 0&&(this.currentOpened=t.currentOpened))},onFocus(e){this.focused||(this.$emit("focus",e,this,void 0),this.focused=!0),this.focusedIndex=-1,clearTimeout(this._blurTimeout)},onItemClick(e,t){const s=this.computedOpened;s&&(this.focusedIndex=0,this.currentOpened=!1),this.dispatchClickEvent(e,t),s&&this.dispatchPopupEvent(e,!1)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{i.canUseDOM&&document.activeElement!==t.mainButton&&(t.focused=!1,t.focusedIndex=-1,t.$emit("blur",e,this,void 0),t.computedOpened&&(t.currentOpened=!1,t.dispatchPopupEvent(e,!1)))},200)},dispatchClickEvent(e,t){this.isItemDisabled(t)||(t===-1?this.$emit("buttonclick",e,this,void 0):this.$emit("itemclick",{event:e,component:this,item:this.buttonsData[t],itemIndex:t}))},onSplitPartClick(e){if(this.buttonsData.length){const t=!this.computedOpened;this.dispatchPopupEvent(e,t),this.focusedIndex=t?0:-1,this.currentOpened=t,this.focused=!0}},onDownSplitPart(e){e.preventDefault(),this.element()&&document.activeElement!==this.element()&&this.element().focus()},onItemDown(e){document.activeElement===this.element()&&e.preventDefault()},dispatchPopupEvent(e,t){this.$emit(t?"open":"close",e,this,void 0)},isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.$props.disabled},isRtl(){return this.$props.dir!==void 0?this.$props.dir==="rtl":!!this.$el&&getComputedStyle(this.$el).direction==="rtl"}}});exports.SplitButton=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),c=require("../Button.js"),i=require("@progress/kendo-vue-common"),b=require("./ButtonItem.js"),y=require("./utils/navigation.js"),k=require("@progress/kendo-vue-popup"),p=require("./utils/popup.js"),$=require("@progress/kendo-svg-icons"),C=require("../package-metadata.js"),I=o.defineComponent({name:"KendoSplitButton",emits:{focus:e=>!0,blur:e=>!0,buttonclick:e=>!0,itemclick:e=>!0,open:e=>!0,close:e=>!0},props:{accessKey:String,ariaLabel:String,text:String,items:{type:Array,default:function(){return[]}},textField:String,tabIndex:Number,disabled:Boolean,icon:String,svgIcon:Object,size:{type:String,default:"medium"},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid",validator:function(e){return[null,"flat","link","outline","solid"].includes(e)}},themeColor:{type:String,default:"base",validator:function(e){return[null,"base","dark","error","info","inverse","inverse","light","primary","secondary","success","tertiary","warning"].includes(e)}},opened:{type:Boolean,default:void 0},iconClass:String,imageUrl:String,popupSettings:Object,itemRender:[String,Function,Object],item:[String,Function,Object],className:String,buttonClass:String,dir:String},data(){return{focused:!1,focusedIndex:-1,currentOpened:!1}},created(){this._blurTimeout=null,this._anchor=i.guid(),this.mainButton=null,this.guid=i.guid(),this.buttonsData=[],i.validatePackage(C.packageMetadata)},mounted(){this.mainButton=this.$refs[this._anchor],(this.$props.dir===void 0&&this.isRtl()||this.computedOpened)&&this.$forceUpdate()},updated(){this.focused&&this.element()&&(this.mainButton=this.$refs[this._anchor],this.mainButton.focus())},computed:{computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},wrapperClass(){return{"k-split-button":!0,"k-button-group":!0,"k-focus":this.focused}}},setup(){return{kendoAnchorRef:o.ref(null)}},render(){this.buttonsData=this.$props.items;const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:s,disabled:r}=this.$props,l=i.getDefaultSlots(this),h=function(){const{item:n,itemRender:u,textField:m}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(d,a){const g=typeof d!="string"?{...d,render:i.templateRendering.call(this,d.render,i.getListeners.call(this))}:d;return o.createVNode(b.ButtonItem,{class:"k-menu-item",role:"menuitem",dataItem:g,textField:m,focused:this.focusedIndex===a,onClick:this.onItemClick,onDown:this.onItemDown,render:i.templateRendering.call(this,u,i.getListeners.call(this)),item:n,key:a,index:a,id:`${this.guid}-${a}`},null)},this):null},f=function(){const{popupSettings:n={},size:u}=this.$props;return o.createVNode(k.Popup,{anchor:this._anchor,show:this.computedOpened,animate:n.animate,popupClass:i.classNames("k-menu-popup",n.popupClass),anchorAlign:n.anchorAlign||p.getAnchorAlign(e),popupAlign:n.popupAlign||p.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[o.createVNode("ul",{class:`k-group k-menu-group k-reset k-menu-group-${i.kendoThemeMaps.sizeMap[u]||u}`,role:"menu",id:this.guid,"aria-labelledby":this._anchor},[h.call(this)])]})};return o.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[o.createVNode(c.Button,{size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:n=>this.onItemClick(n,-1),disabled:r||void 0,tabIndex:s,accessKey:this.$props.accessKey,class:this.$props.buttonClass,icon:this.$props.icon,svgIcon:this.$props.svgIcon,iconClass:this.$props.iconClass,imageUrl:this.$props.imageUrl,dir:t,id:this._anchor,ref:this._anchor,type:"button","aria-disabled":r,"aria-haspopup":"menu","aria-expanded":this.computedOpened,"aria-label":this.$props.ariaLabel||`${this.$props.text||""} splitbutton`,"aria-controls":this.guid,"aria-activedescendant":this.focusedIndex!==void 0&&this.focusedIndex>=0?`${this.guid}-${this.focusedIndex}`:void 0},{default:()=>[this.$props.text,l]}),o.createVNode(c.Button,{svgIcon:$.caretAltDownIcon,size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,icon:"caret-alt-down",disabled:r||void 0,tabIndex:-1,onClick:this.onSplitPartClick,onMousedown:this.onDownSplitPart,onPointerdown:this.onDownSplitPart,dir:t,"aria-label":"menu toggling button"},null),f.call(this)])},methods:{element(){return this.mainButton},onKeyDown(e){if(e.altKey){!this.computedOpened&&e.keyCode===i.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===i.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}let t;if(e.keyCode===i.Keys.enter||e.keyCode===i.Keys.space?(e.preventDefault(),this.dispatchClickEvent(e,this.focusedIndex),this.focusedIndex!==void 0&&this.focusedIndex>=0&&(t={focusedIndex:this.computedOpened?-1:0,currentOpened:!this.computedOpened},this.dispatchPopupEvent(e,t.currentOpened))):this.computedOpened&&e.keyCode===i.Keys.esc&&(t={focusedIndex:-1,currentOpened:!1},this.dispatchPopupEvent(e,t.currentOpened)),this.computedOpened){const s=y(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);s!==this.focusedIndex&&(t=t||{},t.focusedIndex=s);const r=e.keyCode===i.Keys.up||e.keyCode===i.Keys.down||e.keyCode===i.Keys.left||e.keyCode===i.Keys.right;!e.altKey&&r&&e.preventDefault()}t&&(this.focusedIndex=t.focusedIndex,this.focused=t.focused,t.currentOpened!==void 0&&(this.currentOpened=t.currentOpened))},onFocus(e){this.focused||(this.$emit("focus",{event:e}),this.focused=!0),this.focusedIndex=-1,clearTimeout(this._blurTimeout)},onItemClick(e,t){const s=this.computedOpened;s&&(this.focusedIndex=0,this.currentOpened=!1),this.dispatchClickEvent(e,t),s&&this.dispatchPopupEvent(e,!1)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{i.canUseDOM&&document.activeElement!==t.mainButton&&(t.focused=!1,t.focusedIndex=-1,t.$emit("blur",{event:e}),t.computedOpened&&(t.currentOpened=!1,t.dispatchPopupEvent(e,!1)))},200)},dispatchClickEvent(e,t){this.isItemDisabled(t)||(t===-1?this.$emit("buttonclick",{event:e}):this.$emit("itemclick",{event:e,component:this,item:this.buttonsData[t],itemIndex:t}))},onSplitPartClick(e){if(this.buttonsData.length){const t=!this.computedOpened;this.dispatchPopupEvent(e,t),this.focusedIndex=t?0:-1,this.currentOpened=t,this.focused=!0}},onDownSplitPart(e){e.preventDefault(),this.element()&&document.activeElement!==this.element()&&this.element().focus()},onItemDown(e){document.activeElement===this.element()&&e.preventDefault()},dispatchPopupEvent(e,t){const s={event:e};this.$emit(t?"open":"close",s)},isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.$props.disabled},isRtl(){return this.$props.dir!==void 0?this.$props.dir==="rtl":!!this.$el&&getComputedStyle(this.$el).direction==="rtl"}}});exports.SplitButton=I;

package/ListButton/SplitButton.mjs

@@ -6,23 +6,23 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as C, createVNode as o, ref as k } from "vue";
-import { Button as p } from "../Button.mjs";
-import { canUseDOM as y, Keys as i, getDefaultSlots as I, guid as a, validatePackage as O, classNames as S, kendoThemeMaps as x, templateRendering as c, getListeners as h } from "@progress/kendo-vue-common";
+import { Button as a } from "../Button.mjs";
+import { canUseDOM as y, Keys as s, getDefaultSlots as I, guid as l, validatePackage as O, classNames as S, kendoThemeMaps as x, templateRendering as c, getListeners as h } from "@progress/kendo-vue-common";
 import { ButtonItem as D } from "./ButtonItem.mjs";
 import w from "./utils/navigation.mjs";
-import { Popup as P } from "@progress/kendo-vue-popup";
-import { getPopupAlign as B, getAnchorAlign as E } from "./utils/popup.mjs";
-import { caretAltDownIcon as K } from "@progress/kendo-svg-icons";
-import { packageMetadata as v } from "../package-metadata.mjs";
+import { Popup as v } from "@progress/kendo-vue-popup";
+import { getPopupAlign as P, getAnchorAlign as B } from "./utils/popup.mjs";
+import { caretAltDownIcon as E } from "@progress/kendo-svg-icons";
+import { packageMetadata as K } from "../package-metadata.mjs";
 const N = /* @__PURE__ */ C({
   name: "KendoSplitButton",
   emits: {
-    focus: null,
-    blur: null,
-    buttonclick: null,
-    itemclick: null,
-    open: null,
-    close: null
+    focus: (e) => !0,
+    blur: (e) => !0,
+    buttonclick: (e) => !0,
+    itemclick: (e) => !0,
+    open: (e) => !0,
+    close: (e) => !0
   },
   props: {
     accessKey: String,
@@ -82,7 +82,7 @@ const N = /* @__PURE__ */ C({
     };
   },
   created() {
-    this._blurTimeout = null, this._anchor = a(), this.mainButton = null, this.guid = a(), this.buttonsData = [], O(v);
+    this._blurTimeout = null, this._anchor = l(), this.mainButton = null, this.guid = l(), this.buttonsData = [], O(K);
   },
   mounted() {
     this.mainButton = this.$refs[this._anchor], (this.$props.dir === void 0 && this.isRtl() || this.computedOpened) && this.$forceUpdate();
@@ -110,7 +110,7 @@ const N = /* @__PURE__ */ C({
   render() {
     this.buttonsData = this.$props.items;
     const e = this.isRtl(), t = e ? "rtl" : void 0, {
-      tabIndex: s,
+      tabIndex: i,
       disabled: r
     } = this.$props, f = I(this), m = function() {
       const {
@@ -118,7 +118,7 @@ const N = /* @__PURE__ */ C({
         itemRender: d,
         textField: b
       } = this.$props;
-      return this.buttonsData.length > 0 ? this.buttonsData.map(function(u, l) {
+      return this.buttonsData.length > 0 ? this.buttonsData.map(function(u, p) {
         const $ = typeof u != "string" ? {
           ...u,
           render: c.call(this, u.render, h.call(this))
@@ -128,14 +128,14 @@ const N = /* @__PURE__ */ C({
           role: "menuitem",
           dataItem: $,
           textField: b,
-          focused: this.focusedIndex === l,
+          focused: this.focusedIndex === p,
           onClick: this.onItemClick,
           onDown: this.onItemDown,
           render: c.call(this, d, h.call(this)),
           item: n,
-          key: l,
-          index: l,
-          id: `${this.guid}-${l}`
+          key: p,
+          index: p,
+          id: `${this.guid}-${p}`
         }, null);
       }, this) : null;
     }, g = function() {
@@ -143,13 +143,13 @@ const N = /* @__PURE__ */ C({
         popupSettings: n = {},
         size: d
       } = this.$props;
-      return o(P, {
+      return o(v, {
         anchor: this._anchor,
         show: this.computedOpened,
         animate: n.animate,
         popupClass: S("k-menu-popup", n.popupClass),
-        anchorAlign: n.anchorAlign || E(e),
-        popupAlign: n.popupAlign || B(e),
+        anchorAlign: n.anchorAlign || B(e),
+        popupAlign: n.popupAlign || P(e),
         style: e ? {
           direction: "rtl"
         } : void 0
@@ -168,14 +168,14 @@ const N = /* @__PURE__ */ C({
       onFocusin: this.onFocus,
       onFocusout: this.onBlur,
       dir: t
-    }, [o(p, {
+    }, [o(a, {
       size: this.$props.size,
       rounded: this.$props.rounded,
       fillMode: this.$props.fillMode,
       themeColor: this.$props.themeColor,
       onClick: (n) => this.onItemClick(n, -1),
       disabled: r || void 0,
-      tabIndex: s,
+      tabIndex: i,
       accessKey: this.$props.accessKey,
       class: this.$props.buttonClass,
       icon: this.$props.icon,
@@ -194,8 +194,8 @@ const N = /* @__PURE__ */ C({
       "aria-activedescendant": this.focusedIndex !== void 0 && this.focusedIndex >= 0 ? `${this.guid}-${this.focusedIndex}` : void 0
     }, {
       default: () => [this.$props.text, f]
-    }), o(p, {
-      svgIcon: K,
+    }), o(a, {
+      svgIcon: E,
       size: this.$props.size,
       rounded: this.$props.rounded,
       fillMode: this.$props.fillMode,
@@ -216,30 +216,32 @@ const N = /* @__PURE__ */ C({
     },
     onKeyDown(e) {
       if (e.altKey) {
-        !this.computedOpened && e.keyCode === i.down ? (this.dispatchPopupEvent(e, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && e.keyCode === i.up && (this.dispatchPopupEvent(e, !1), this.focusedIndex = -1, this.currentOpened = !1);
+        !this.computedOpened && e.keyCode === s.down ? (this.dispatchPopupEvent(e, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && e.keyCode === s.up && (this.dispatchPopupEvent(e, !1), this.focusedIndex = -1, this.currentOpened = !1);
         return;
       }
       let t;
-      if (e.keyCode === i.enter || e.keyCode === i.space ? (e.preventDefault(), this.dispatchClickEvent(e, this.focusedIndex), this.focusedIndex !== void 0 && this.focusedIndex >= 0 && (t = {
+      if (e.keyCode === s.enter || e.keyCode === s.space ? (e.preventDefault(), this.dispatchClickEvent(e, this.focusedIndex), this.focusedIndex !== void 0 && this.focusedIndex >= 0 && (t = {
         focusedIndex: this.computedOpened ? -1 : 0,
         currentOpened: !this.computedOpened
-      }, this.dispatchPopupEvent(e, t.currentOpened))) : this.computedOpened && e.keyCode === i.esc && (t = {
+      }, this.dispatchPopupEvent(e, t.currentOpened))) : this.computedOpened && e.keyCode === s.esc && (t = {
         focusedIndex: -1,
         currentOpened: !1
       }, this.dispatchPopupEvent(e, t.currentOpened)), this.computedOpened) {
-        const s = w(this.focusedIndex, e.keyCode, e.altKey, this.buttonsData.length);
-        s !== this.focusedIndex && (t = t || {}, t.focusedIndex = s);
-        const r = e.keyCode === i.up || e.keyCode === i.down || e.keyCode === i.left || e.keyCode === i.right;
+        const i = w(this.focusedIndex, e.keyCode, e.altKey, this.buttonsData.length);
+        i !== this.focusedIndex && (t = t || {}, t.focusedIndex = i);
+        const r = e.keyCode === s.up || e.keyCode === s.down || e.keyCode === s.left || e.keyCode === s.right;
         !e.altKey && r && e.preventDefault();
       }
       t && (this.focusedIndex = t.focusedIndex, this.focused = t.focused, t.currentOpened !== void 0 && (this.currentOpened = t.currentOpened));
     },
     onFocus(e) {
-      this.focused || (this.$emit("focus", e, this, void 0), this.focused = !0), this.focusedIndex = -1, clearTimeout(this._blurTimeout);
+      this.focused || (this.$emit("focus", {
+        event: e
+      }), this.focused = !0), this.focusedIndex = -1, clearTimeout(this._blurTimeout);
     },
     onItemClick(e, t) {
-      const s = this.computedOpened;
-      s && (this.focusedIndex = 0, this.currentOpened = !1), this.dispatchClickEvent(e, t), s && this.dispatchPopupEvent(e, !1);
+      const i = this.computedOpened;
+      i && (this.focusedIndex = 0, this.currentOpened = !1), this.dispatchClickEvent(e, t), i && this.dispatchPopupEvent(e, !1);
     },
     onBlur(e) {
       clearTimeout(this._blurTimeout), this.createBlurTimeout(e);
@@ -247,11 +249,15 @@ const N = /* @__PURE__ */ C({
     createBlurTimeout(e) {
       const t = this;
       this._blurTimeout = setTimeout(() => {
-        y && document.activeElement !== t.mainButton && (t.focused = !1, t.focusedIndex = -1, t.$emit("blur", e, this, void 0), t.computedOpened && (t.currentOpened = !1, t.dispatchPopupEvent(e, !1)));
+        y && document.activeElement !== t.mainButton && (t.focused = !1, t.focusedIndex = -1, t.$emit("blur", {
+          event: e
+        }), t.computedOpened && (t.currentOpened = !1, t.dispatchPopupEvent(e, !1)));
       }, 200);
     },
     dispatchClickEvent(e, t) {
-      this.isItemDisabled(t) || (t === -1 ? this.$emit("buttonclick", e, this, void 0) : this.$emit("itemclick", {
+      this.isItemDisabled(t) || (t === -1 ? this.$emit("buttonclick", {
+        event: e
+      }) : this.$emit("itemclick", {
         event: e,
         component: this,
         item: this.buttonsData[t],
@@ -271,7 +277,10 @@ const N = /* @__PURE__ */ C({
       document.activeElement === this.element() && e.preventDefault();
     },
     dispatchPopupEvent(e, t) {
-      this.$emit(t ? "open" : "close", e, this, void 0);
+      const i = {
+        event: e
+      };
+      this.$emit(t ? "open" : "close", i);
     },
     isItemDisabled(e) {
       return this.buttonsData[e] ? this.buttonsData[e].disabled : this.$props.disabled;