@progress/kendo-vue-buttons 7.1.0-develop.6 → 7.1.0-develop.7

package/FloatingActionButton/FloatingActionButton.mjs

@@ -6,10 +6,10 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as w, createVNode as o, ref as g } from "vue";
-import { templateRendering as S, getListeners as M, getTabIndex as A, Icon as $, classNames as h, setRef as k, Keys as n, canUseDOM as F, kendoThemeMaps as I, getRef as x, validatePackage as R, guid as f } from "@progress/kendo-vue-common";
+import { templateRendering as M, getListeners as S, getTabIndex as A, Icon as $, classNames as p, setRef as k, Keys as n, canUseDOM as F, kendoThemeMaps as I, getRef as x, validatePackage as R, guid as c } from "@progress/kendo-vue-common";
 import { FloatingActionButtonItem as E } from "./FloatingActionButtonItem.mjs";
 import { packageMetadata as B } from "../package-metadata.mjs";
-import { getPopupAlign as N, getAnchorAlign as P, position as y, getTextDirectionClass as K } from "./utils.mjs";
+import { getPopupAlign as N, getAnchorAlign as P, position as O, getTextDirectionClass as K } from "./utils.mjs";
 import { Popup as j } from "@progress/kendo-vue-popup";
 const G = /* @__PURE__ */ w({
   name: "KendoVueFloatingActionButton",
@@ -54,35 +54,15 @@ const G = /* @__PURE__ */ w({
         return {};
       }
     },
-    shape: {
-      type: String,
-      default: function() {
-        return "rectangle";
-      }
-    },
-    rounded: {
-      type: String,
-      default: "full"
-    },
+    rounded: String,
     fillMode: {
       type: String,
-      default: "solid",
       validator: function(e) {
-        return [null, "flat", "link", "outline", "solid"].includes(e);
-      }
-    },
-    size: {
-      type: String,
-      default: function() {
-        return "medium";
+        return ["flat", "link", "outline", "solid"].includes(e);
       }
     },
-    themeColor: {
-      type: String,
-      default: function() {
-        return "primary";
-      }
-    }
+    size: String,
+    themeColor: String
   },
   emits: {
     click: (e) => !0,
@@ -105,31 +85,28 @@ const G = /* @__PURE__ */ w({
     };
   },
   created() {
-    R(B), this.element = void 0, this._anchor = f(), this.listId = f(), this.buttonId = f();
+    R(B), this.element = void 0, this._anchor = c(), this.listId = c(), this.buttonId = c();
   },
   mounted() {
-    this.element = this.kendoAnchorRef, this.list = x(this, "list"), this.popup = x(this, "popup"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : this.$el && getComputedStyle(this.$el).direction === "rtl" || !1, this.isRtl = this.currentDir === "rtl", this.opened !== void 0 && y(this.$el, this.$props.align, this.$props.alignOffset, this.isRtl);
+    this.element = this.kendoAnchorRef, this.list = x(this, "list"), this.popup = x(this, "popup"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : this.$el && getComputedStyle(this.$el).direction === "rtl" || !1, this.isRtl = this.currentDir === "rtl", this.opened !== void 0 && O(this.$el, this.$props.align, this.$props.alignOffset, this.isRtl);
   },
   updated() {
-    y(this.$el, this.$props.align, this.$props.alignOffset, this.isRtl), this.currentFocused && this.element && this.element.focus();
+    O(this.$el, this.$props.align, this.$props.alignOffset, this.isRtl), this.currentFocused && this.element && this.element.focus();
   },
   computed: {
     buttonClassNames() {
       const {
         size: e,
-        icon: t,
-        shape: s,
-        themeColor: i,
-        fillMode: r,
-        rounded: a
+        themeColor: t,
+        fillMode: i,
+        rounded: s
       } = this.$props;
       return {
         "k-fab": !0,
-        [`k-fab-${s || "rectangle"}`]: s !== null,
         [`k-fab-${I.sizeMap[e] || e}`]: e,
-        [`k-rounded-${I.roundedMap[a] || a}`]: a,
-        [`k-fab-${r}`]: r,
-        [`k-fab-${r}-${i}`]: r && i,
+        [`k-rounded-${I.roundedMap[s] || s}`]: s,
+        [`k-fab-${i}`]: i,
+        [`k-fab-${t}`]: t,
         "k-disabled": this.$props.disabled,
         "k-focus": this.currentFocused,
         [`k-${this.$props.align.vertical}-${this.$props.align.horizontal}`]: !0
@@ -139,7 +116,7 @@ const G = /* @__PURE__ */ w({
       return this.$props.opened === void 0 ? this.currentOpened : this.$props.opened;
     },
     rootClassNames() {
-      return h({
+      return p({
         "k-pos-absolute": this.$props.positionMode === "absolute",
         "k-pos-fixed": this.$props.positionMode === "fixed"
       });
@@ -190,7 +167,7 @@ const G = /* @__PURE__ */ w({
       F && document.activeElement === this.element && e.preventDefault();
     },
     handleKeyDown(e) {
-      const t = this.focusedIndex, s = this.$props.items ? this.$props.items.length - 1 : -1, i = this.$props.align.vertical === "bottom";
+      const t = this.focusedIndex, i = this.$props.items ? this.$props.items.length - 1 : -1, s = this.$props.align.vertical === "bottom";
       switch (e.keyCode) {
         case n.enter:
         case n.space:
@@ -203,15 +180,15 @@ const G = /* @__PURE__ */ w({
           e.preventDefault(), this.focusedIndex = 0;
           break;
         case n.end:
-          e.preventDefault(), this.focusedIndex = s;
+          e.preventDefault(), this.focusedIndex = i;
           break;
         case n.down:
         case n.right:
-          e.preventDefault(), t < s && !i && (this.focusedIndex = t + 1), t > 0 && i && (this.focusedIndex = t - 1);
+          e.preventDefault(), t < i && !s && (this.focusedIndex = t + 1), t > 0 && s && (this.focusedIndex = t - 1);
           break;
         case n.up:
         case n.left:
-          e.preventDefault(), t > 0 && !i && (this.focusedIndex = t - 1), t < s && i && (this.focusedIndex = t + 1);
+          e.preventDefault(), t > 0 && !s && (this.focusedIndex = t - 1), t < i && s && (this.focusedIndex = t + 1);
           break;
       }
       this.$emit("keydown", e, void 0);
@@ -228,48 +205,48 @@ const G = /* @__PURE__ */ w({
     const {
       align: e,
       disabled: t,
-      icon: s,
-      svgIcon: i,
-      iconClass: r,
-      id: a,
-      items: d,
-      text: l,
-      tabIndex: O,
-      accessKey: v,
-      popupSettings: p
-    } = this.$props, C = S.call(this, this.$props.item, M.call(this)), D = function() {
-      return d && d.map(function(u, c) {
+      icon: i,
+      svgIcon: s,
+      iconClass: h,
+      id: f,
+      items: r,
+      text: a,
+      tabIndex: v,
+      accessKey: C,
+      popupSettings: l
+    } = this.$props, y = M.call(this, this.$props.item, S.call(this)), D = function() {
+      return r && r.map(function(d, u) {
         return o(E, {
-          key: c,
-          index: c,
-          id: `${this.listId}-${c}`,
-          disabled: t || u.disabled,
-          focused: this.focusedIndex === c,
-          dataItem: u,
-          item: C,
-          class: h(u.className, K(this.currentDir || "ltr", e.horizontal)),
+          key: u,
+          index: u,
+          id: `${this.listId}-${u}`,
+          disabled: t || d.disabled,
+          focused: this.focusedIndex === u,
+          dataItem: d,
+          item: y,
+          class: p(d.className, K(this.currentDir || "ltr", e.horizontal)),
           onClick: this.handleItemClick,
           onDown: this.handleItemDown
         }, null);
       }, this);
-    }, m = s && !l, b = (this.element ? this.element.offsetWidth : 0) / 2 - 32 / 2;
+    }, m = i && !a, b = (this.element ? this.element.offsetWidth : 0) / 2 - 32 / 2;
     return o("div", {
       class: this.rootClassNames
     }, [o("button", {
-      ref: (u) => {
-        this.kendoAnchorRef = u;
+      ref: (d) => {
+        this.kendoAnchorRef = d;
       },
-      id: a || this.buttonId,
-      role: d ? "menubutton" : "button",
+      id: f || this.buttonId,
+      role: r ? "menubutton" : "button",
       type: "button",
       "aria-disabled": t,
-      "aria-expanded": d ? this.computedOpened : void 0,
-      "aria-haspopup": !!d,
-      "aria-label": `${l || ""} floatingactionbutton`,
-      "aria-owns": d ? this.listId : void 0,
-      "aria-activedescendant": this.focusedIndex >= 0 && d ? `${this.listId}-${this.focusedIndex}` : void 0,
-      tabindex: A(O, t),
-      accesskey: v,
+      "aria-expanded": r ? this.computedOpened : void 0,
+      "aria-haspopup": !!r,
+      "aria-label": `${a || ""} floatingactionbutton`,
+      "aria-owns": r ? this.listId : void 0,
+      "aria-activedescendant": this.focusedIndex >= 0 && r ? `${this.listId}-${this.focusedIndex}` : void 0,
+      tabindex: A(v, t),
+      accesskey: C,
       dir: this.currentDir,
       disabled: t,
       class: this.buttonClassNames,
@@ -279,22 +256,22 @@ const G = /* @__PURE__ */ w({
       onFocusin: this.handleFocus,
       onBlur: this.handleBlur,
       onKeydown: this.handleKeyDown
-    }, [s || i ? o($, {
-      name: s,
-      icon: i,
+    }, [i || s ? o($, {
+      name: i,
+      icon: s,
       class: "k-fab-icon"
-    }, null) : r ? o($, {
-      class: r
-    }, null) : null, l && o("span", {
+    }, null) : h ? o($, {
+      class: h
+    }, null) : null, a && o("span", {
       class: "k-fab-text"
-    }, [l])]), o(j, {
+    }, [a])]), o(j, {
       ref: k(this, "popup"),
       show: this.computedOpened,
       anchor: this._anchor,
-      animate: p.animate,
-      popupClass: h("k-popup-transparent k-fab-popup", p.popupClass),
-      anchorAlign: p.anchorAlign || P(e, this.isRtl),
-      popupAlign: p.popupAlign || N(e, this.isRtl),
+      animate: l.animate,
+      popupClass: p("k-popup-transparent k-fab-popup", l.popupClass),
+      anchorAlign: l.anchorAlign || P(e, this.isRtl),
+      popupAlign: l.popupAlign || N(e, this.isRtl),
       style: {
         boxShadow: "none"
       }
@@ -302,9 +279,9 @@ const G = /* @__PURE__ */ w({
       default: () => [o("ul", {
         ref: k(this, "list"),
         role: "menu",
-        "aria-labelledby": a,
+        "aria-labelledby": f,
         id: this.listId,
-        class: h("k-fab-items", {
+        class: p("k-fab-items", {
           "k-fab-items-bottom": e.vertical !== "bottom",
           "k-fab-items-top": e.vertical === "bottom"
         }),

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: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;
+"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"),a=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: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},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:p}=this.$props,c=s.getDefaultSlots(this);this.buttonsData=this.$props.items;const h=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},l=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||a.getAnchorAlign(e),popupAlign:o.popupAlign||a.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},[h.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,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:this.onClickMainButton,onMousedown:this.mouseDown,disabled:p||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":p,"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]}),l.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

@@ -6,12 +6,12 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as $, createVNode as o, ref as k } from "vue";
-import { Button as y } from "../Button.mjs";
-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 { 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 v } from "@progress/kendo-vue-popup";
-import { getPopupAlign as B, getAnchorAlign as E } from "./utils/popup.mjs";
+import { Popup as B } from "@progress/kendo-vue-popup";
+import { getPopupAlign as v, getAnchorAlign as E } from "./utils/popup.mjs";
 import { packageMetadata as K } from "../package-metadata.mjs";
 const U = /* @__PURE__ */ $({
   name: "KendoDropDownButton",
@@ -42,33 +42,18 @@ const U = /* @__PURE__ */ $({
     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"
-    },
+    size: String,
+    rounded: String,
     fillMode: {
       type: String,
-      default: "solid",
       validator: function(e) {
-        return [null, "flat", "link", "outline", "solid"].includes(e);
+        return ["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);
+        return ["base", "dark", "error", "info", "inverse", "light", "primary", "secondary", "success", "tertiary", "warning"].includes(e);
       }
     },
     opened: {
@@ -114,7 +99,7 @@ const U = /* @__PURE__ */ $({
     const e = this.isRtl(), t = e ? "rtl" : void 0, {
       tabIndex: i,
       disabled: p
-    } = this.$props, h = I(this);
+    } = this.$props, l = I(this);
     this.buttonsData = this.$props.items;
     const f = function() {
       const {
@@ -122,23 +107,23 @@ const U = /* @__PURE__ */ $({
         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, l.call(this))
-        } : u;
+      return this.buttonsData.length > 0 ? this.buttonsData.map(function(d, u) {
+        const b = typeof d != "string" ? {
+          ...d,
+          render: c.call(this, d.render, h.call(this))
+        } : d;
         return o(S, {
           class: "k-menu-item",
           dataItem: b,
           textField: g,
-          focused: this.focusedIndex === d,
+          focused: this.focusedIndex === u,
           onClick: this.onItemClick,
           onDown: this.onItemDown,
-          render: c.call(this, r, l.call(this)),
+          render: c.call(this, r, h.call(this)),
           item: n,
-          index: d,
-          key: d,
-          id: `${this.guid}-${d}`
+          index: u,
+          key: u,
+          id: `${this.guid}-${u}`
         }, null);
       }, this) : null;
     }, m = function() {
@@ -146,13 +131,13 @@ const U = /* @__PURE__ */ $({
         popupSettings: n = {},
         size: r
       } = this.$props;
-      return o(v, {
+      return o(B, {
         anchor: this._anchor,
         show: this.computedOpened,
         animate: n.animate,
         popupClass: O("k-menu-popup", n.popupClass),
         anchorAlign: n.anchorAlign || E(e),
-        popupAlign: n.popupAlign || B(e),
+        popupAlign: n.popupAlign || v(e),
         style: e ? {
           direction: "rtl"
         } : void 0
@@ -170,9 +155,8 @@ const U = /* @__PURE__ */ $({
       onFocusin: this.onFocus,
       onFocusout: this.onBlur,
       dir: t
-    }, [o(y, {
+    }, [o(C, {
       size: this.$props.size,
-      shape: this.$props.shape,
       rounded: this.$props.rounded,
       fillMode: this.$props.fillMode,
       themeColor: this.$props.themeColor,
@@ -196,7 +180,7 @@ const U = /* @__PURE__ */ $({
       "aria-controls": this.guid,
       "aria-activedescendant": this.focusedIndex !== void 0 && this.focusedIndex >= 0 ? `${this.guid}-${this.focusedIndex}` : void 0
     }, {
-      default: () => [this.$props.text, h]
+      default: () => [this.$props.text, l]
     }), m.call(this)]);
   },
   methods: {
@@ -226,7 +210,7 @@ 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", {
+        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);

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"),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;
+"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"),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: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=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,c){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===c,onClick:this.onItemClick,onDown:this.onItemDown,render:i.templateRendering.call(this,u,i.getListeners.call(this)),item:n,key:c,index:c,id:`${this.guid}-${c}`},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(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,l]}),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",{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

@@ -7,7 +7,7 @@
  */
 import { defineComponent as C, createVNode as o, ref as k } from "vue";
 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 { canUseDOM as y, Keys as s, getDefaultSlots as I, guid as c, validatePackage as O, classNames as S, kendoThemeMaps as x, templateRendering as l, getListeners as h } from "@progress/kendo-vue-common";
 import { ButtonItem as D } from "./ButtonItem.mjs";
 import w from "./utils/navigation.mjs";
 import { Popup as v } from "@progress/kendo-vue-popup";
@@ -39,26 +39,18 @@ const N = /* @__PURE__ */ C({
     disabled: Boolean,
     icon: String,
     svgIcon: Object,
-    size: {
-      type: String,
-      default: "medium"
-    },
-    rounded: {
-      type: String,
-      default: "medium"
-    },
+    size: String,
+    rounded: String,
     fillMode: {
       type: String,
-      default: "solid",
       validator: function(e) {
-        return [null, "flat", "link", "outline", "solid"].includes(e);
+        return ["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);
+        return ["base", "dark", "error", "info", "inverse", "light", "primary", "secondary", "success", "tertiary", "warning"].includes(e);
       }
     },
     opened: {
@@ -82,7 +74,7 @@ const N = /* @__PURE__ */ C({
     };
   },
   created() {
-    this._blurTimeout = null, this._anchor = l(), this.mainButton = null, this.guid = l(), this.buttonsData = [], O(K);
+    this._blurTimeout = null, this._anchor = c(), this.mainButton = null, this.guid = c(), this.buttonsData = [], O(K);
   },
   mounted() {
     this.mainButton = this.$refs[this._anchor], (this.$props.dir === void 0 && this.isRtl() || this.computedOpened) && this.$forceUpdate();
@@ -121,7 +113,7 @@ const N = /* @__PURE__ */ C({
       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))
+          render: l.call(this, u.render, h.call(this))
         } : u;
         return o(D, {
           class: "k-menu-item",
@@ -131,7 +123,7 @@ const N = /* @__PURE__ */ C({
           focused: this.focusedIndex === p,
           onClick: this.onItemClick,
           onDown: this.onItemDown,
-          render: c.call(this, d, h.call(this)),
+          render: l.call(this, d, h.call(this)),
           item: n,
           key: p,
           index: p,

package/SpeechToText/SpeechToTextButton.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"),x=require("@progress/kendo-webspeech-common"),k=require("../Button.js"),m=require("@progress/kendo-svg-icons");function T(e){return new x.KendoSpeechRecognition(e)}let d=function(e){return e.WebSpeech="WebSpeech",e.None="None",e}({});const E=i.defineComponent({name:"KendoSpeechToTextButton",props:{lang:{type:String,default:"en-US"},continuous:{type:Boolean,default:!1},interimResults:{type:Boolean,default:!1},maxAlternatives:{type:Number,default:1},integrationMode:{type:String,default:d.WebSpeech},onStart:{type:Function},onResult:{type:Function},onEnd:{type:Function},onError:{type:Function},svgIcon:{type:Object,default:m.microphoneOutlineIcon},iconSize:{type:String,default:"medium"},disabled:{type:Boolean,default:void 0},size:{type:String,default:"medium"},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid"},themeColor:{type:String,default:"base"},title:{type:String,default:"Speech to Text Button"},ariaLabel:{type:String,default:"Start speech recognition"}},setup(e,{emit:u,expose:f}){const o=i.ref(null),n=i.ref(!1),S=()=>{var t;return(t=o.value)==null?void 0:t.isActive()},a=()=>e.integrationMode!==d.None,s=typeof window!="undefined"&&!("webkitSpeechRecognition"in window||"SpeechRecognition"in window)?(e.onError&&e.onError({errorMessage:"Speech Recognition API is not supported in this browser."}),!1):!0,l=()=>{var t;n.value||(a&&((t=o.value)==null||t.start()),n.value=!0)},r=()=>{var t;n.value&&(a&&((t=o.value)==null||t.stop()),n.value=!1)},g=()=>{var t;n.value&&a&&((t=o.value)==null||t.abort(),n.value=!1)},v=()=>{s&&(n.value?p():c())},c=async()=>{n.value||e.onStart&&(await e.onStart(),l())},R=t=>{const b=t.results,B=b.length-1,w=b[B],M=Array.from(w).map(I=>({transcript:I.transcript,confidence:I.confidence}));u("result",{isFinal:w.isFinal,alternatives:M})},p=async()=>{n.value&&e.onEnd&&(await e.onEnd(),r())},A=t=>{u("error",t)},y=()=>{var t;s&&e.integrationMode===d.WebSpeech&&((t=o.value)!=null&&t.isActive()&&r(),o.value=T({lang:e.lang,continuous:e.continuous,interimResults:e.interimResults,integrationMode:e.integrationMode,maxAlternatives:e.maxAlternatives,events:{start:c,result:R,end:p,error:A}}))};return i.watch(()=>({lang:e.lang,continuous:e.continuous,interimResults:e.interimResults,integrationMode:e.integrationMode,maxAlternatives:e.maxAlternatives}),()=>{y()},{deep:!0}),i.onMounted(()=>{y()}),i.onUnmounted(()=>{var t;(t=o.value)!=null&&t.isInActiveState&&r()}),f({start:l,stop:r,abort:g,isActive:S}),{clickHandler:v,isInActiveState:n}},render(){const{ariaLabel:e,svgIcon:u,fillMode:f,rounded:o,size:n,disabled:S,themeColor:a,iconSize:h,title:s}=this.$props,{className:l,style:r,id:g}=this.$attrs,v=i.computed(()=>["k-speech-to-text-button",l,{"k-listening":this.isInActiveState}]),c=i.computed(()=>this.isInActiveState?m.stopSmIcon:u||m.microphoneOutlineIcon);return i.createVNode(k.Button,{id:g,style:r,class:v.value,onClick:this.clickHandler,svgIcon:c.value,iconSize:h,fillMode:f,rounded:o,size:n,themeColor:a,"aria-label":e,disabled:S,title:s},null)}});exports.SpeechToTextButton=E;exports.SpeechToTextButtonMode=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),x=require("@progress/kendo-webspeech-common"),k=require("../Button.js"),h=require("@progress/kendo-svg-icons");function T(e){return new x.KendoSpeechRecognition(e)}let d=function(e){return e.WebSpeech="WebSpeech",e.None="None",e}({});const E=i.defineComponent({name:"KendoSpeechToTextButton",props:{lang:{type:String,default:"en-US"},continuous:{type:Boolean,default:!1},interimResults:{type:Boolean,default:!1},maxAlternatives:{type:Number,default:1},integrationMode:{type:String,default:d.WebSpeech},onStart:{type:Function},onResult:{type:Function},onEnd:{type:Function},onError:{type:Function},svgIcon:{type:Object,default:h.microphoneOutlineIcon},iconSize:{type:String},disabled:{type:Boolean,default:void 0},size:String,rounded:String,fillMode:String,themeColor:String,title:{type:String,default:"Speech to Text Button"},ariaLabel:{type:String,default:"Start speech recognition"}},setup(e,{emit:s,expose:f}){const o=i.ref(null),n=i.ref(!1),S=()=>{var t;return(t=o.value)==null?void 0:t.isActive()},a=()=>e.integrationMode!==d.None,c=typeof window!="undefined"&&!("webkitSpeechRecognition"in window||"SpeechRecognition"in window)?(e.onError&&e.onError({errorMessage:"Speech Recognition API is not supported in this browser."}),!1):!0,l=()=>{var t;n.value||(a&&((t=o.value)==null||t.start()),n.value=!0)},r=()=>{var t;n.value&&(a&&((t=o.value)==null||t.stop()),n.value=!1)},g=()=>{var t;n.value&&a&&((t=o.value)==null||t.abort(),n.value=!1)},v=()=>{c&&(n.value?p():u())},u=async()=>{n.value||e.onStart&&(await e.onStart(),l())},R=t=>{const b=t.results,B=b.length-1,w=b[B],M=Array.from(w).map(I=>({transcript:I.transcript,confidence:I.confidence}));s("result",{isFinal:w.isFinal,alternatives:M})},p=async()=>{n.value&&e.onEnd&&(await e.onEnd(),r())},A=t=>{s("error",t)},y=()=>{var t;c&&e.integrationMode===d.WebSpeech&&((t=o.value)!=null&&t.isActive()&&r(),o.value=T({lang:e.lang,continuous:e.continuous,interimResults:e.interimResults,integrationMode:e.integrationMode,maxAlternatives:e.maxAlternatives,events:{start:u,result:R,end:p,error:A}}))};return i.watch(()=>({lang:e.lang,continuous:e.continuous,interimResults:e.interimResults,integrationMode:e.integrationMode,maxAlternatives:e.maxAlternatives}),()=>{y()},{deep:!0}),i.onMounted(()=>{y()}),i.onUnmounted(()=>{var t;(t=o.value)!=null&&t.isInActiveState&&r()}),f({start:l,stop:r,abort:g,isActive:S}),{clickHandler:v,isInActiveState:n}},render(){const{ariaLabel:e,svgIcon:s,fillMode:f,rounded:o,size:n,disabled:S,themeColor:a,iconSize:m,title:c}=this.$props,{className:l,style:r,id:g}=this.$attrs,v=i.computed(()=>["k-speech-to-text-button",l,{"k-listening":this.isInActiveState}]),u=i.computed(()=>this.isInActiveState?h.stopSmIcon:s||h.microphoneOutlineIcon);return i.createVNode(k.Button,{id:g,style:r,class:v.value,onClick:this.clickHandler,svgIcon:u.value,iconSize:m,fillMode:f,rounded:o,size:n,themeColor:a,"aria-label":e,disabled:S,title:c},null)}});exports.SpeechToTextButton=E;exports.SpeechToTextButtonMode=d;