@progress/kendo-vue-buttons 8.4.0-develop.3 → 8.4.0-develop.5

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 I, createVNode as r, ref as k } from "vue";
-import { Button as O } from "../Button.mjs";
-import { canUseDOM as D, Keys as s, getDefaultSlots as x, classNames as h, guid as l, validatePackage as w, templateRendering as f, getListeners as m } from "@progress/kendo-vue-common";
-import S from "./utils/navigation.mjs";
-import { ButtonItem as v } from "./ButtonItem.mjs";
+import { defineComponent as $, createVNode as o, ref as k } from "vue";
+import { Button as C } from "../Button.mjs";
+import { canUseDOM as y, Keys as s, getDefaultSlots as I, guid as a, validatePackage as D, classNames as O, kendoThemeMaps as x, templateRendering as c, getListeners as h } 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";
-const j = /* @__PURE__ */ I({
+import { getPopupAlign as v, getAnchorAlign as E } from "./utils/popup.mjs";
+import { packageMetadata as K } from "../package-metadata.mjs";
+const U = /* @__PURE__ */ $({
   name: "KendoDropDownButton",
   emits: {
-    focus: (t) => !0,
-    blur: (t) => !0,
-    itemclick: (t) => !0,
-    open: (t) => !0,
-    close: (t) => !0
+    focus: (e) => !0,
+    blur: (e) => !0,
+    itemclick: (e) => !0,
+    open: (e) => !0,
+    close: (e) => !0
   },
   props: {
     accessKey: String,
@@ -46,14 +46,14 @@ const j = /* @__PURE__ */ I({
     rounded: String,
     fillMode: {
       type: String,
-      validator: function(t) {
-        return ["flat", "link", "outline", "solid"].includes(t);
+      validator: function(e) {
+        return ["flat", "link", "outline", "solid"].includes(e);
       }
     },
     themeColor: {
       type: String,
-      validator: function(t) {
-        return ["base", "dark", "error", "info", "inverse", "light", "primary", "secondary", "success", "tertiary", "warning"].includes(t);
+      validator: function(e) {
+        return ["base", "error", "info", "inverse", "primary", "secondary", "success", "tertiary", "warning"].includes(e);
       }
     },
     opened: {
@@ -64,7 +64,7 @@ const j = /* @__PURE__ */ I({
     dir: String
   },
   created() {
-    this._blurTimeout = null, this._anchor = l(), this.wrapper = null, this.mainButton = null, this.guid = l(), this.buttonsData = [], w(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();
@@ -84,6 +84,10 @@ const j = /* @__PURE__ */ I({
       return this.$props.opened === void 0 ? this.currentOpened : this.$props.opened;
     },
     wrapperClass() {
+      return {
+        "k-dropdown-button": !0,
+        "k-focus": this.focused
+      };
     }
   },
   setup() {
@@ -92,155 +96,155 @@ const j = /* @__PURE__ */ I({
     };
   },
   render() {
-    const t = this.isRtl(), e = t ? "rtl" : void 0, {
+    const e = this.isRtl(), t = e ? "rtl" : void 0, {
       tabIndex: i,
-      disabled: u
-    } = this.$props, p = x(this);
+      disabled: p
+    } = this.$props, l = I(this);
     this.buttonsData = this.$props.items;
-    const g = function() {
+    const f = function() {
       const {
         item: n,
-        itemRender: c,
-        textField: C
-      } = this.$props, a = this.buttonsData.length;
-      return a > 0 ? this.buttonsData.map(function(d, o) {
-        const y = typeof d != "string" ? {
-          ...d,
-          render: f.call(this, d.render, m.call(this))
-        } : d;
-        return r(v, {
-          dataItem: y,
-          textField: C,
-          focused: this.focusedIndex === o,
+        itemRender: r,
+        textField: g
+      } = this.$props;
+      return this.buttonsData.length > 0 ? this.buttonsData.map(function(u, d) {
+        const b = typeof u != "string" ? {
+          ...u,
+          render: c.call(this, u.render, h.call(this))
+        } : u;
+        return o(S, {
+          class: "k-menu-item",
+          dataItem: b,
+          textField: g,
+          focused: this.focusedIndex === d,
           onClick: this.onItemClick,
           onDown: this.onItemDown,
-          render: f.call(this, c, m.call(this)),
+          render: c.call(this, r, h.call(this)),
           item: n,
-          index: o,
-          key: o,
-          id: `${this.guid}-${o}`,
-          first: o === 0,
-          last: o === a - 1
+          index: d,
+          key: d,
+          id: `${this.guid}-${d}`
         }, null);
       }, this) : null;
-    }, $ = function() {
+    }, m = function() {
       const {
         popupSettings: n = {},
-        size: c
+        size: r
       } = this.$props;
-      return r(B, {
+      return o(B, {
         anchor: this._anchor,
         show: this.computedOpened,
         animate: n.animate,
-        popupClass: h("k-menu-popup", n.popupClass),
-        anchorAlign: n.anchorAlign || K(t),
-        popupAlign: n.popupAlign || E(t),
-        style: t ? {
+        popupClass: O("k-menu-popup", n.popupClass),
+        anchorAlign: n.anchorAlign || E(e),
+        popupAlign: n.popupAlign || v(e),
+        style: e ? {
           direction: "rtl"
         } : void 0
       }, {
-        default: () => [r("ul", {
-          class: "k-menu-group",
+        default: () => [o("ul", {
+          class: `k-group k-menu-group k-reset k-menu-group-${x.sizeMap[r] || r}`,
           role: "menu",
           id: this.guid
-        }, [g.call(this)])]
+        }, [f.call(this)])]
       });
-    }, b = this.$props.text || p ? {
-      default: () => [this.$props.text, p]
-    } : {};
-    return r("div", {
+    };
+    return o("div", {
       class: this.wrapperClass,
       onKeydown: this.onKeyDown,
       onFocusin: this.onFocus,
       onFocusout: this.onBlur,
-      dir: e
-    }, [r(O, {
+      dir: t
+    }, [o(C, {
       size: this.$props.size,
       rounded: this.$props.rounded,
       fillMode: this.$props.fillMode,
       themeColor: this.$props.themeColor,
       onClick: this.onClickMainButton,
       onMousedown: this.mouseDown,
-      disabled: u || void 0,
+      disabled: p || void 0,
       tabIndex: i,
       accessKey: this.$props.accessKey,
       icon: this.$props.icon,
       svgIcon: this.$props.svgIcon,
       iconClass: this.$props.iconClass,
-      class: h("k-menu-button", this.$props.buttonClass),
+      class: this.$props.buttonClass,
       imageUrl: this.$props.imageUrl,
-      dir: e,
+      dir: t,
       ref: this._anchor,
       type: "button",
-      "aria-disabled": u || void 0,
+      "aria-disabled": p,
+      "aria-haspopup": "menu",
       "aria-expanded": this.computedOpened,
-      "aria-label": this.$props.ariaLabel || (this.$props.svgIcon || this.$props.icon || this.$props.iconClass ? "Menu" : void 0),
-      "aria-controls": this.computedOpened ? this.guid : void 0,
-      "aria-activedescendant": this.computedOpened && this.focusedIndex !== void 0 && this.focusedIndex >= 0 ? `${this.guid}-${this.focusedIndex}` : void 0
-    }, b), $.call(this)]);
+      "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, l]
+    }), m.call(this)]);
   },
   methods: {
     element() {
       return this.mainButton;
     },
-    onKeyDown(t) {
-      if (t.altKey) {
-        !this.computedOpened && t.keyCode === s.down ? (this.dispatchPopupEvent(t, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && t.keyCode === s.up && (this.dispatchPopupEvent(t, !1), this.focusedIndex = -1, this.currentOpened = !1);
+    onKeyDown(e) {
+      if (e.altKey) {
+        !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 (t.keyCode === s.enter || t.keyCode === s.space ? (this.focusedIndex !== void 0 && this.focusedIndex >= 0 && this.dispatchClickEvent(t, this.focusedIndex), t.preventDefault(), this.focusedIndex = this.computedOpened ? -1 : 0, this.currentOpened = !this.computedOpened, this.dispatchPopupEvent(t, this.currentOpened)) : this.computedOpened && t.keyCode === s.esc && (this.focusedIndex = -1, this.currentOpened = !1, this.dispatchPopupEvent(t, this.currentOpened)), this.computedOpened) {
-        const e = S(this.focusedIndex, t.keyCode, t.altKey, this.buttonsData.length);
-        this.focusedIndex = e;
-        const i = t.keyCode === s.up || t.keyCode === s.down || t.keyCode === s.left || t.keyCode === s.right;
-        !t.altKey && i && t.preventDefault();
+      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 i = e.keyCode === s.up || e.keyCode === s.down || e.keyCode === s.left || e.keyCode === s.right;
+        !e.altKey && i && e.preventDefault();
       }
     },
-    onFocus(t) {
+    onFocus(e) {
       this.focused || (this.focused = !0, this.$emit("focus", {
-        event: t
+        event: e
       })), this.focusedIndex = this.computedOpened ? 0 : -1, clearTimeout(this._blurTimeout);
     },
-    onBlur(t) {
-      clearTimeout(this._blurTimeout), this.createBlurTimeout(t);
+    onBlur(e) {
+      clearTimeout(this._blurTimeout), this.createBlurTimeout(e);
     },
-    createBlurTimeout(t) {
-      const e = this;
+    createBlurTimeout(e) {
+      const t = this;
       this._blurTimeout = setTimeout(() => {
-        D && document.activeElement !== e.$el && (e.focused = !1, e.focusedIndex = -1, e.$emit("blur", {
-          event: t
-        }), e.computedOpened && (e.currentOpened = !1, e.dispatchPopupEvent(t, !1)));
+        y && 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(t, e) {
-      this.focusedIndex = -1, this.currentOpened = !1, this.dispatchClickEvent(t, e), this.dispatchPopupEvent(t, !1);
+    onItemClick(e, t) {
+      this.focusedIndex = -1, this.currentOpened = !1, this.dispatchClickEvent(e, t), this.dispatchPopupEvent(e, !1);
     },
-    onItemDown(t) {
-      document.activeElement === this.element() && t.preventDefault();
+    onItemDown(e) {
+      document.activeElement === this.element() && e.preventDefault();
     },
-    mouseDown(t) {
-      t.preventDefault();
+    mouseDown(e) {
+      e.preventDefault();
     },
-    dispatchClickEvent(t, e) {
-      this.isItemDisabled(e) || this.$emit("itemclick", {
-        event: t,
-        item: this.buttonsData[e],
-        itemIndex: e
+    dispatchClickEvent(e, t) {
+      this.isItemDisabled(t) || this.$emit("itemclick", {
+        event: e,
+        item: this.buttonsData[t],
+        itemIndex: t
       });
     },
-    onClickMainButton(t) {
+    onClickMainButton(e) {
       if (!this.buttonsData.length)
         return;
-      const e = !this.computedOpened;
-      this.currentOpened = e, this.focused = !0, this.focusedIndex = e ? 0 : -1, this.dispatchPopupEvent(t, e);
+      const t = !this.computedOpened;
+      this.currentOpened = t, this.focused = !0, this.focusedIndex = t ? 0 : -1, this.dispatchPopupEvent(e, t);
     },
-    dispatchPopupEvent(t, e) {
+    dispatchPopupEvent(e, t) {
       const i = {
-        event: t
+        event: e
       };
-      this.$emit(e ? "open" : "close", i);
+      this.$emit(t ? "open" : "close", i);
     },
-    isItemDisabled(t) {
-      return this.buttonsData[t] ? this.buttonsData[t].disabled : this.$props.disabled;
+    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";
@@ -248,5 +252,5 @@ const j = /* @__PURE__ */ I({
   }
 });
 export {
-  j as DropDownButton
+  U as DropDownButton
 };

package/ListButton/SplitButton.d.ts

@@ -69,14 +69,14 @@ declare const SplitButton: import('vue').DefineComponent<import('vue').ExtractPr
     disabled: PropType<boolean>;
     icon: PropType<string>;
     svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xs" | "large">;
     rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     fillMode: {
         type: PropType<"flat" | "link" | "solid" | "outline">;
         validator: (value: string) => boolean;
     };
     themeColor: {
-        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse">;
         validator: (value: string) => boolean;
     };
     opened: {
@@ -138,14 +138,14 @@ declare const SplitButton: import('vue').DefineComponent<import('vue').ExtractPr
     disabled: PropType<boolean>;
     icon: PropType<string>;
     svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xs" | "large">;
     rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     fillMode: {
         type: PropType<"flat" | "link" | "solid" | "outline">;
         validator: (value: string) => boolean;
     };
     themeColor: {
-        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse">;
         validator: (value: string) => boolean;
     };
     opened: {

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"),l=require("../Button.js"),s=require("@progress/kendo-vue-common"),C=require("./ButtonItem.js"),$=require("./utils/navigation.js"),k=require("@progress/kendo-vue-popup"),h=require("./utils/popup.js"),O=require("@progress/kendo-svg-icons"),S=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:String,rounded:String,fillMode:{type:String,validator:function(e){return["flat","link","outline","solid"].includes(e)}},themeColor:{type:String,validator:function(e){return["base","dark","error","info","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=s.guid(),this.mainButton=null,this.guid=s.guid(),this.buttonsData=[],s.validatePackage(S.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:i,disabled:u}=this.$props,c=s.getDefaultSlots(this),f=function(){const{item:n,itemRender:p,textField:b}=this.$props,a=this.buttonsData.length;return a>0?this.buttonsData.map(function(d,r){const y=typeof d!="string"?{...d,render:s.templateRendering.call(this,d.render,s.getListeners.call(this))}:d;return o.createVNode(C.ButtonItem,{role:"menuitem",dataItem:y,textField:b,focused:this.focusedIndex===r,onClick:this.onItemClick,onDown:this.onItemDown,render:s.templateRendering.call(this,p,s.getListeners.call(this)),item:n,key:r,index:r,id:`${this.guid}-${r}`,first:r===0,last:r===a-1},null)},this):null},m=function(){const{popupSettings:n={},size:p}=this.$props;return o.createVNode(k.Popup,{anchor:this._anchor,show:this.computedOpened,animate:n.animate,popupClass:s.classNames("k-menu-popup",n.popupClass),anchorAlign:n.anchorAlign||h.getAnchorAlign(e),popupAlign:n.popupAlign||h.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[o.createVNode("ul",{class:"k-menu-group",role:"menu",id:this.guid},[f.call(this)])]})},g=this.$props.text||c?{default:()=>[this.$props.text,c]}:{};return o.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[o.createVNode(l.Button,{size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:n=>this.onItemClick(n,-1),disabled:u||void 0,tabIndex:i,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":u||void 0,"aria-label":this.$props.ariaLabel||(!this.$props.text&&!c&&(this.$props.svgIcon||this.$props.icon||this.$props.iconClass)?"Action":void 0)},g),o.createVNode(l.Button,{svgIcon:O.chevronDownIcon,size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,icon:"chevron-down",class:"k-split-button-arrow",disabled:u||void 0,tabIndex:-1,onClick:this.onSplitPartClick,onMousedown:this.onDownSplitPart,onPointerdown:this.onDownSplitPart,dir:t,"aria-label":"Toggle dropdown","aria-expanded":this.computedOpened,"aria-controls":this.computedOpened?this.guid:void 0},null),m.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}let t;if(e.keyCode===s.Keys.enter||e.keyCode===s.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===s.Keys.esc&&(t={focusedIndex:-1,currentOpened:!1},this.dispatchPopupEvent(e,t.currentOpened)),this.computedOpened){const i=$(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);i!==this.focusedIndex&&(t=t||{},t.focusedIndex=i);const u=e.keyCode===s.Keys.up||e.keyCode===s.Keys.down||e.keyCode===s.Keys.left||e.keyCode===s.Keys.right;!e.altKey&&u&&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 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)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{s.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 i={event:e};this.$emit(t?"open":"close",i)},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"),a=require("../Button.js"),i=require("@progress/kendo-vue-common"),y=require("./ButtonItem.js"),C=require("./utils/navigation.js"),$=require("@progress/kendo-vue-popup"),l=require("./utils/popup.js"),k=require("@progress/kendo-svg-icons"),O=require("../package-metadata.js"),S=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:String,rounded:String,fillMode:{type:String,validator:function(e){return["flat","link","outline","solid"].includes(e)}},themeColor:{type:String,validator:function(e){return["base","error","info","inverse","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(O.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,c=i.getDefaultSlots(this),h=function(){const{item:n,itemRender:p,textField:g}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(u,d){const b=typeof u!="string"?{...u,render:i.templateRendering.call(this,u.render,i.getListeners.call(this))}:u;return o.createVNode(y.ButtonItem,{role:"menuitem",dataItem:b,textField:g,focused:this.focusedIndex===d,onClick:this.onItemClick,onDown:this.onItemDown,render:i.templateRendering.call(this,p,i.getListeners.call(this)),item:n,key:d,index:d,id:`${this.guid}-${d}`},null)},this):null},f=function(){const{popupSettings:n={},size:p}=this.$props;return o.createVNode($.Popup,{anchor:this._anchor,show:this.computedOpened,animate:n.animate,popupClass:i.classNames("k-menu-popup",n.popupClass),anchorAlign:n.anchorAlign||l.getAnchorAlign(e),popupAlign:n.popupAlign||l.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[o.createVNode("ul",{class:"k-menu-group",role:"menu",id:this.guid},[h.call(this)])]})},m=this.$props.text||c?{default:()=>[this.$props.text,c]}:{};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||void 0,"aria-label":this.$props.ariaLabel||(!this.$props.text&&!c&&(this.$props.svgIcon||this.$props.icon||this.$props.iconClass)?"Action":void 0)},m),o.createVNode(a.Button,{svgIcon:k.chevronDownIcon,size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,icon:"chevron-down",class:"k-split-button-arrow",disabled:r||void 0,tabIndex:-1,onClick:this.onSplitPartClick,onMousedown:this.onDownSplitPart,onPointerdown:this.onDownSplitPart,dir:t,"aria-label":"Toggle dropdown","aria-expanded":this.computedOpened,"aria-controls":this.computedOpened?this.guid:void 0},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=C(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=S;

package/ListButton/SplitButton.mjs

@@ -5,16 +5,16 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as y, createVNode as r, ref as O } from "vue";
-import { Button as a } from "../Button.mjs";
-import { canUseDOM as I, Keys as s, getDefaultSlots as S, guid as h, validatePackage as D, classNames as w, templateRendering as f, getListeners as m } from "@progress/kendo-vue-common";
+import { defineComponent as k, createVNode as o, ref as y } from "vue";
+import { Button as l } from "../Button.mjs";
+import { canUseDOM as O, Keys as s, getDefaultSlots as I, guid as a, validatePackage as S, classNames as D, templateRendering as h, getListeners as f } from "@progress/kendo-vue-common";
 import { ButtonItem as x } from "./ButtonItem.mjs";
-import v 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 { chevronDownIcon as K } from "@progress/kendo-svg-icons";
-import { packageMetadata as A } from "../package-metadata.mjs";
-const L = /* @__PURE__ */ y({
+import w from "./utils/navigation.mjs";
+import { Popup as v } from "@progress/kendo-vue-popup";
+import { getPopupAlign as P, getAnchorAlign as B } from "./utils/popup.mjs";
+import { chevronDownIcon as E } from "@progress/kendo-svg-icons";
+import { packageMetadata as K } from "../package-metadata.mjs";
+const L = /* @__PURE__ */ k({
   name: "KendoSplitButton",
   emits: {
     focus: (t) => !0,
@@ -50,7 +50,7 @@ const L = /* @__PURE__ */ y({
     themeColor: {
       type: String,
       validator: function(t) {
-        return ["base", "dark", "error", "info", "inverse", "light", "primary", "secondary", "success", "tertiary", "warning"].includes(t);
+        return ["base", "error", "info", "inverse", "primary", "secondary", "success", "tertiary", "warning"].includes(t);
       }
     },
     opened: {
@@ -74,7 +74,7 @@ const L = /* @__PURE__ */ y({
     };
   },
   created() {
-    this._blurTimeout = null, this._anchor = h(), this.mainButton = null, this.guid = h(), this.buttonsData = [], D(A);
+    this._blurTimeout = null, this._anchor = a(), this.mainButton = null, this.guid = a(), this.buttonsData = [], S(K);
   },
   mounted() {
     this.mainButton = this.$refs[this._anchor], (this.$props.dir === void 0 && this.isRtl() || this.computedOpened) && this.$forceUpdate();
@@ -96,79 +96,77 @@ const L = /* @__PURE__ */ y({
   },
   setup() {
     return {
-      kendoAnchorRef: O(null)
+      kendoAnchorRef: y(null)
     };
   },
   render() {
     this.buttonsData = this.$props.items;
     const t = this.isRtl(), e = t ? "rtl" : void 0, {
       tabIndex: i,
-      disabled: d
-    } = this.$props, p = S(this), g = function() {
+      disabled: r
+    } = this.$props, p = I(this), m = function() {
       const {
         item: n,
         itemRender: c,
         textField: C
-      } = this.$props, l = this.buttonsData.length;
-      return l > 0 ? this.buttonsData.map(function(u, o) {
-        const k = typeof u != "string" ? {
-          ...u,
-          render: f.call(this, u.render, m.call(this))
-        } : u;
-        return r(x, {
+      } = this.$props;
+      return this.buttonsData.length > 0 ? this.buttonsData.map(function(d, u) {
+        const $ = typeof d != "string" ? {
+          ...d,
+          render: h.call(this, d.render, f.call(this))
+        } : d;
+        return o(x, {
           role: "menuitem",
-          dataItem: k,
+          dataItem: $,
           textField: C,
-          focused: this.focusedIndex === o,
+          focused: this.focusedIndex === u,
           onClick: this.onItemClick,
           onDown: this.onItemDown,
-          render: f.call(this, c, m.call(this)),
+          render: h.call(this, c, f.call(this)),
           item: n,
-          key: o,
-          index: o,
-          id: `${this.guid}-${o}`,
-          first: o === 0,
-          last: o === l - 1
+          key: u,
+          index: u,
+          id: `${this.guid}-${u}`
         }, null);
       }, this) : null;
-    }, b = function() {
+    }, g = function() {
       const {
         popupSettings: n = {},
         size: c
       } = this.$props;
-      return r(P, {
+      return o(v, {
         anchor: this._anchor,
         show: this.computedOpened,
         animate: n.animate,
-        popupClass: w("k-menu-popup", n.popupClass),
-        anchorAlign: n.anchorAlign || E(t),
-        popupAlign: n.popupAlign || B(t),
+        popupClass: D("k-menu-popup", n.popupClass),
+        anchorAlign: n.anchorAlign || B(t),
+        popupAlign: n.popupAlign || P(t),
         style: t ? {
           direction: "rtl"
         } : void 0
       }, {
-        default: () => [r("ul", {
+        default: () => [o("ul", {
           class: "k-menu-group",
           role: "menu",
           id: this.guid
-        }, [g.call(this)])]
+        }, [m.call(this)])]
       });
-    }, $ = this.$props.text || p ? {
+    }, b = this.$props.text || p ? {
       default: () => [this.$props.text, p]
     } : {};
-    return r("div", {
+    return o("div", {
       class: this.wrapperClass,
       onKeydown: this.onKeyDown,
       onFocusin: this.onFocus,
       onFocusout: this.onBlur,
       dir: e
-    }, [r(a, {
+    }, [o(l, {
       size: this.$props.size,
       rounded: this.$props.rounded,
       fillMode: this.$props.fillMode,
       themeColor: this.$props.themeColor,
       onClick: (n) => this.onItemClick(n, -1),
-      disabled: d || void 0,
+      disabled: r || void 0,
       tabIndex: i,
       accessKey: this.$props.accessKey,
       class: this.$props.buttonClass,
@@ -180,17 +178,17 @@ const L = /* @__PURE__ */ y({
       id: this._anchor,
       ref: this._anchor,
       type: "button",
-      "aria-disabled": d || void 0,
+      "aria-disabled": r || void 0,
       "aria-label": this.$props.ariaLabel || (!this.$props.text && !p && (this.$props.svgIcon || this.$props.icon || this.$props.iconClass) ? "Action" : void 0)
-    }, $), r(a, {
-      svgIcon: K,
+    }, b), o(l, {
+      svgIcon: E,
       size: this.$props.size,
       rounded: this.$props.rounded,
       fillMode: this.$props.fillMode,
       themeColor: this.$props.themeColor,
       icon: "chevron-down",
       class: "k-split-button-arrow",
-      disabled: d || void 0,
+      disabled: r || void 0,
       tabIndex: -1,
       onClick: this.onSplitPartClick,
       onMousedown: this.onDownSplitPart,
@@ -199,7 +197,7 @@ const L = /* @__PURE__ */ y({
       "aria-label": "Toggle dropdown",
       "aria-expanded": this.computedOpened,
       "aria-controls": this.computedOpened ? this.guid : void 0
-    }, null), b.call(this)]);
+    }, null), g.call(this)]);
   },
   methods: {
     element() {
@@ -218,10 +216,10 @@ const L = /* @__PURE__ */ y({
         focusedIndex: -1,
         currentOpened: !1
       }, this.dispatchPopupEvent(t, e.currentOpened)), this.computedOpened) {
-        const i = v(this.focusedIndex, t.keyCode, t.altKey, this.buttonsData.length);
+        const i = w(this.focusedIndex, t.keyCode, t.altKey, this.buttonsData.length);
         i !== this.focusedIndex && (e = e || {}, e.focusedIndex = i);
-        const d = t.keyCode === s.up || t.keyCode === s.down || t.keyCode === s.left || t.keyCode === s.right;
-        !t.altKey && d && t.preventDefault();
+        const r = t.keyCode === s.up || t.keyCode === s.down || t.keyCode === s.left || t.keyCode === s.right;
+        !t.altKey && r && t.preventDefault();
       }
       e && (this.focusedIndex = e.focusedIndex, this.focused = e.focused, e.currentOpened !== void 0 && (this.currentOpened = e.currentOpened));
     },
@@ -240,7 +238,7 @@ const L = /* @__PURE__ */ y({
     createBlurTimeout(t) {
       const e = this;
       this._blurTimeout = setTimeout(() => {
-        I && document.activeElement !== e.mainButton && (e.focused = !1, e.focusedIndex = -1, e.$emit("blur", {
+        O && document.activeElement !== e.mainButton && (e.focused = !1, e.focusedIndex = -1, e.$emit("blur", {
           event: t
         }), e.computedOpened && (e.currentOpened = !1, e.dispatchPopupEvent(t, !1)));
       }, 200);