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

package/FloatingActionButton/FloatingActionButton.mjs

@@ -6,9 +6,9 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as w, createVNode as o, ref as g } from "vue";
-import { templateRendering as A, getListeners as S, getTabIndex as M, Icon as k, classNames as c, setRef as $, Keys as n, canUseDOM as F, kendoThemeMaps as I, getRef as x, validatePackage as R, guid as h } from "@progress/kendo-vue-common";
-import { FloatingActionButtonItem as E } from "./FloatingActionButtonItem.mjs";
-import { packageMetadata as B } from "../package-metadata.mjs";
+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 B } from "./FloatingActionButtonItem.mjs";
+import { packageMetadata as E } from "../package-metadata.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({
@@ -44,7 +44,9 @@ const G = /* @__PURE__ */ w({
     },
     positionMode: {
       type: String,
-      default: void 0
+      default: function() {
+        return "fixed";
+      }
     },
     popupSettings: {
       type: Object,
@@ -83,7 +85,7 @@ const G = /* @__PURE__ */ w({
     };
   },
   created() {
-    R(B), this.element = void 0, this._anchor = h(), this.listId = h(), this.buttonId = h();
+    R(E), 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 && O(this.$el, this.$props.align, this.$props.alignOffset, this.isRtl);
@@ -97,8 +99,7 @@ const G = /* @__PURE__ */ w({
         size: e,
         themeColor: t,
         fillMode: i,
-        rounded: s,
-        positionMode: d
+        rounded: s
       } = this.$props;
       return {
         "k-fab": !0,
@@ -108,15 +109,17 @@ const G = /* @__PURE__ */ w({
         [`k-fab-${t}`]: t,
         "k-disabled": this.$props.disabled,
         "k-focus": this.currentFocused,
-        "k-pos-absolute": d === "absolute",
-        "k-pos-fixed": d === "fixed",
-        [`k-${this.$props.align.vertical}-${this.$props.align.horizontal}`]: !!d
+        [`k-${this.$props.align.vertical}-${this.$props.align.horizontal}`]: !0
       };
     },
     computedOpened() {
       return this.$props.opened === void 0 ? this.currentOpened : this.$props.opened;
     },
     rootClassNames() {
+      return p({
+        "k-pos-absolute": this.$props.positionMode === "absolute",
+        "k-pos-fixed": this.$props.positionMode === "fixed"
+      });
     }
   },
   methods: {
@@ -132,7 +135,7 @@ const G = /* @__PURE__ */ w({
           this.$emit("click", e, void 0);
         else {
           const t = !this.computedOpened;
-          this.currentOpened = t, this.currentFocused = !0, this.focusedIndex = t ? 0 : -1, this.dispatchPopupEvent(e, !this.computedOpened);
+          this.currentOpened = t, this.currentFocused = !0, this.focusedIndex = t ? 0 : -1, this.dispatchPopupEvent(e, t);
         }
     },
     handleFocus(e) {
@@ -141,9 +144,10 @@ const G = /* @__PURE__ */ w({
       });
     },
     handleBlur(e) {
+      const t = this.computedOpened;
       this.currentFocused = !1, this.currentOpened = !1, this.focusedIndex = -1, this.$emit("blur", {
         event: e
-      }), this.computedOpened && this.dispatchPopupEvent(e, !1);
+      }), t && this.dispatchPopupEvent(e, !1);
     },
     handleMouseDown(e) {
       e.preventDefault(), this.$emit("mousedown", e);
@@ -204,45 +208,45 @@ const G = /* @__PURE__ */ w({
       disabled: t,
       icon: i,
       svgIcon: s,
-      iconClass: d,
+      iconClass: h,
       id: f,
       items: r,
-      text: u,
+      text: a,
       tabIndex: v,
       accessKey: C,
       popupSettings: l
-    } = this.$props, y = A.call(this, this.$props.item, S.call(this)), D = function() {
-      return r && r.map(function(a, p) {
-        return o(E, {
-          key: p,
-          index: p,
-          id: `${this.listId}-${p}`,
-          disabled: t || a.disabled,
-          focused: this.focusedIndex === p,
-          dataItem: a,
+    } = this.$props, y = M.call(this, this.$props.item, S.call(this)), D = function() {
+      return r && r.map(function(d, u) {
+        return o(B, {
+          key: u,
+          index: u,
+          id: `${this.listId}-${u}`,
+          disabled: t || d.disabled,
+          focused: this.focusedIndex === u,
+          dataItem: d,
           item: y,
-          class: c(a.className, K(this.currentDir || "ltr", e.horizontal)),
+          class: p(d.className, K(this.currentDir || "ltr", e.horizontal)),
           onClick: this.handleItemClick,
           onDown: this.handleItemDown
         }, null);
       }, this);
-    }, m = i && !u, 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: (a) => {
-        this.kendoAnchorRef = a;
+      ref: (d) => {
+        this.kendoAnchorRef = d;
       },
       id: f || this.buttonId,
-      role: r ? "menubutton" : void 0,
+      role: r ? "menubutton" : "button",
       type: "button",
-      "aria-disabled": t || void 0,
+      "aria-disabled": t,
       "aria-expanded": r ? this.computedOpened : void 0,
-      "aria-haspopup": r ? !0 : void 0,
-      "aria-label": !u && (i || s || d) ? "Action" : 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: M(v, t),
+      tabindex: A(v, t),
       accesskey: C,
       dir: this.currentDir,
       disabled: t,
@@ -253,20 +257,20 @@ const G = /* @__PURE__ */ w({
       onFocusin: this.handleFocus,
       onBlur: this.handleBlur,
       onKeydown: this.handleKeyDown
-    }, [i || s ? o(k, {
+    }, [i || s ? o($, {
       name: i,
       icon: s,
       class: "k-fab-icon"
-    }, null) : d ? o(k, {
-      class: d
-    }, null) : null, u && o("span", {
+    }, null) : h ? o($, {
+      class: h
+    }, null) : null, a && o("span", {
       class: "k-fab-text"
-    }, [u])]), o(j, {
-      ref: $(this, "popup"),
+    }, [a])]), o(j, {
+      ref: k(this, "popup"),
       show: this.computedOpened,
       anchor: this._anchor,
       animate: l.animate,
-      popupClass: c("k-popup-transparent k-fab-popup", l.popupClass),
+      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: {
@@ -274,11 +278,11 @@ const G = /* @__PURE__ */ w({
       }
     }, {
       default: () => [o("ul", {
-        ref: $(this, "list"),
+        ref: k(this, "list"),
         role: "menu",
         "aria-labelledby": f,
         id: this.listId,
-        class: c("k-fab-items", {
+        class: p("k-fab-items", {
           "k-fab-items-bottom": e.vertical !== "bottom",
           "k-fab-items-top": e.vertical === "bottom"
         }),

package/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts

@@ -154,16 +154,10 @@ export interface FloatingActionButtonProps extends Omit<any, 'onBlur' | 'onFocus
      * [see example]({% slug appearance_floatingactionbutton %}).
      *
      * The possible values are:
-     * * `primary` (Default)&mdash;Applies coloring based on the primary theme color.
+        * * `base` (Default)&mdash;Applies base coloring.
+        * * `primary`&mdash;Applies coloring based on the primary theme color.
      * * `secondary`&mdash;Applies coloring based on the secondary theme color.
      * * `tertiary`&mdash; Applies coloring based on the tertiary theme color.
-     * * `info`&mdash;Applies coloring based on the info theme color.
-     * * `success`&mdash; Applies coloring based on the success theme color.
-     * * `warning`&mdash; Applies coloring based on the warning theme color.
-     * * `error`&mdash; Applies coloring based on the error theme color.
-     * * `dark`&mdash; Applies coloring based on the dark theme color.
-     * * `light`&mdash; Applies coloring based on the light theme color.
-     * * `inverse`&mdash; Applies coloring based on the inverse theme color.
      *
      */
     themeColor?: FloatingActionButtonThemeColor;

package/FloatingActionButton/models/theme-color.d.ts

@@ -9,16 +9,10 @@
  * Specifies the theme color of the Floating Action Button..
  *
  * The possible values are:
- * * `primary` (Default)—Applies coloring based on the primary theme color.
+ * * `base` (Default)—Applies base coloring.
+ * * `primary`—Applies coloring based on the primary theme color.
  * * `secondary`—Applies coloring based on the secondary theme color.
  * * `tertiary`— Applies coloring based on the tertiary theme color.
- * * `info`—Applies coloring based on the info theme color.
- * * `success`— Applies coloring based on the success theme color.
- * * `warning`— Applies coloring based on the warning theme color.
- * * `error`— Applies coloring based on the error theme color.
- * * `dark`— Applies coloring based on the dark theme color.
- * * `light`— Applies coloring based on the light theme color.
- * * `inverse`— Applies coloring based on the inverse theme color.
  *
  */
-export type FloatingActionButtonThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+export type FloatingActionButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary';

package/ListButton/ButtonItem.d.ts

@@ -19,8 +19,6 @@ export interface ButtonItemProps {
     id?: string;
     textField?: string;
     role?: string;
-    first?: boolean;
-    last?: boolean;
 }
 /**
  * @hidden
@@ -34,8 +32,6 @@ declare const ButtonItem: import('vue').DefineComponent<import('vue').ExtractPro
     id: PropType<string>;
     textField: PropType<string>;
     role: PropType<string>;
-    first: PropType<boolean>;
-    last: PropType<boolean>;
 }>, {}, {}, {
     wrapperClass(): object;
     innerClass(): object;
@@ -54,8 +50,6 @@ declare const ButtonItem: import('vue').DefineComponent<import('vue').ExtractPro
     id: PropType<string>;
     textField: PropType<string>;
     role: PropType<string>;
-    first: PropType<boolean>;
-    last: PropType<boolean>;
 }>> & Readonly<{
     onClick?: (event: any, index: number) => any;
     onDown?: (event: any, index: number) => any;

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"),o=require("@progress/kendo-vue-common"),c=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,first:Boolean,last:Boolean},computed:{wrapperClass(){return{"k-item":!0,"k-menu-item":!0,"k-first":this.$props.first,"k-last":this.$props.last,"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,a=function(){const{textField:s,index:l}=this.$props,i=e.text!==void 0?e.text:s?e[s]:e,d=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),i&&t.createVNode("span",{class:"k-menu-link-text"},[i])]);return o.getTemplate.call(this,{h:t.h,template:this.$props.dataItem.render||r,defaultRendering:d,additionalProps:{item:e,itemIndex:l,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},[a.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,9 +5,9 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as d, createVNode as t, 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 f = /* @__PURE__ */ d({
+const x = /* @__PURE__ */ a({
   name: "KendoButtonItem",
   emits: {
     click: (e, n) => !0,
@@ -21,17 +21,12 @@ const f = /* @__PURE__ */ d({
     dataItem: [String, Object],
     id: String,
     textField: String,
-    role: String,
-    first: Boolean,
-    last: Boolean
+    role: String
   },
   computed: {
     wrapperClass() {
       return {
         "k-item": !0,
-        "k-menu-item": !0,
-        "k-first": this.$props.first,
-        "k-last": this.$props.last,
         "k-focus": this.$props.focused
       };
     },
@@ -61,9 +56,9 @@ const f = /* @__PURE__ */ d({
       render: o
     } = this.$props, r = function() {
       const {
-        textField: s,
+        textField: i,
         index: l
-      } = this.$props, i = e.text !== void 0 ? e.text : s ? e[s] : e, a = t("span", {
+      } = this.$props, s = e.text !== void 0 ? e.text : i ? e[i] : e, d = t("span", {
         tabindex: -1,
         class: this.innerClass,
         key: "icon"
@@ -80,13 +75,13 @@ const f = /* @__PURE__ */ d({
         src: e.imageUrl,
         role: "presentation",
         key: "image"
-      }, null), i && t("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,
@@ -107,5 +102,5 @@ const f = /* @__PURE__ */ d({
   }
 });
 export {
-  f as ButtonItem
+  x as ButtonItem
 };

package/ListButton/DropDownButton.d.ts

@@ -73,14 +73,14 @@ declare const DropDownButton: import('vue').DefineComponent<import('vue').Extrac
     popupSettings: PropType<import('..').ButtonsPopupSettings>;
     itemRender: PropType<any>;
     item: PropType<any>;
-    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: {
@@ -97,7 +97,10 @@ declare const DropDownButton: import('vue').DefineComponent<import('vue').Extrac
     focusedIndex: number;
 }, {
     computedOpened(): boolean;
-    wrapperClass(): any;
+    wrapperClass(): {
+        'k-dropdown-button': boolean;
+        'k-focus': any;
+    };
 }, {
     element(): HTMLButtonElement | null;
     onKeyDown(event: any): void;
@@ -136,14 +139,14 @@ declare const DropDownButton: import('vue').DefineComponent<import('vue').Extrac
     popupSettings: PropType<import('..').ButtonsPopupSettings>;
     itemRender: PropType<any>;
     item: PropType<any>;
-    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/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"),b=require("../Button.js"),s=require("@progress/kendo-vue-common"),$=require("./utils/navigation.js"),C=require("./ButtonItem.js"),k=require("@progress/kendo-vue-popup"),l=require("./utils/popup.js"),I=require("../package-metadata.js"),D=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(I.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(){}},setup(){return{kendoAnchorRef:i.ref(null)}},render(){const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:n,disabled:d}=this.$props,c=s.getDefaultSlots(this);this.buttonsData=this.$props.items;const h=function(){const{item:o,itemRender:p,textField:g}=this.$props,a=this.buttonsData.length;return a>0?this.buttonsData.map(function(u,r){const y=typeof u!="string"?{...u,render:s.templateRendering.call(this,u.render,s.getListeners.call(this))}:u;return i.createVNode(C.ButtonItem,{dataItem:y,textField:g,focused:this.focusedIndex===r,onClick:this.onItemClick,onDown:this.onItemDown,render:s.templateRendering.call(this,p,s.getListeners.call(this)),item:o,index:r,key:r,id:`${this.guid}-${r}`,first:r===0,last:r===a-1},null)},this):null},f=function(){const{popupSettings:o={},size:p}=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||l.getAnchorAlign(e),popupAlign:o.popupAlign||l.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[i.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 i.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[i.createVNode(b.Button,{size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:this.onClickMainButton,onMousedown:this.mouseDown,disabled:d||void 0,tabIndex:n,accessKey:this.$props.accessKey,icon:this.$props.icon,svgIcon:this.$props.svgIcon,iconClass:this.$props.iconClass,class:s.classNames("k-menu-button",this.$props.buttonClass),imageUrl:this.$props.imageUrl,dir:t,ref:this._anchor,type:"button","aria-disabled":d||void 0,"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},m),f.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=$(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=D;
+"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"),c=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","error","info","inverse","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,a=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||c.getAnchorAlign(e),popupAlign:o.popupAlign||c.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,a]}),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;