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

package/Button.d.ts

@@ -19,14 +19,14 @@ export interface ButtonProps extends ButtonInterface {
      * Configures the `size` of the Button.
      *
      * The available options are:
-     * - xsmall
+     * - xs
      * - small
      * - medium
      * - large
      *
      * @default `undefined`
      */
-    size?: 'xsmall' | 'small' | 'medium' | 'large';
+    size?: 'xs' | 'small' | 'medium' | 'large';
     /**
      * Configures the `roundness` of the Button.
      *
@@ -64,13 +64,12 @@ export interface ButtonProps extends ButtonInterface {
      * - info
      * - success
      * - warning
-     * - dark
-     * - light
+     * - error
      * - inverse
      *
      * @default `undefined`
      */
-    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse';
+    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
     /**
      * Sets the `tabIndex` property of the Button.
      */
@@ -165,10 +164,10 @@ declare const Button: import('vue').DefineComponent<import('vue').ExtractPropTyp
         type: PropType<boolean>;
         default: any;
     };
-    size: PropType<"small" | "medium" | "xsmall" | "large">;
+    size: PropType<"small" | "medium" | "xs" | "large">;
     rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     fillMode: PropType<"flat" | "link" | "solid" | "outline">;
-    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse">;
     tabIndex: PropType<number>;
     accessKey: PropType<string>;
     id: PropType<string>;
@@ -243,10 +242,10 @@ declare const Button: import('vue').DefineComponent<import('vue').ExtractPropTyp
         type: PropType<boolean>;
         default: any;
     };
-    size: PropType<"small" | "medium" | "xsmall" | "large">;
+    size: PropType<"small" | "medium" | "xs" | "large">;
     rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     fillMode: PropType<"flat" | "link" | "solid" | "outline">;
-    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+    themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse">;
     tabIndex: PropType<number>;
     accessKey: PropType<string>;
     id: PropType<string>;

package/Chip/Chip.d.ts

@@ -171,10 +171,6 @@ export interface ChipProps {
      * For example these elements could contain error or hint message.
      */
     ariaDescribedBy?: string;
-    /**
-     * Identifies the accessible name for the Chip component.
-     */
-    ariaLabel?: string;
     /**
      * @hidden
      */
@@ -256,7 +252,6 @@ declare const Chip: import('vue').DefineComponent<import('vue').ExtractPropTypes
         default: string;
     };
     tabIndex: PropType<number>;
-    ariaLabel: PropType<string>;
     onMousedown: PropType<(event: any) => void>;
 }>, {
     chipRef: import('vue').Ref<any, any>;
@@ -335,7 +330,6 @@ declare const Chip: import('vue').DefineComponent<import('vue').ExtractPropTypes
         default: string;
     };
     tabIndex: PropType<number>;
-    ariaLabel: PropType<string>;
     onMousedown: PropType<(event: any) => void>;
 }>> & Readonly<{
     onClick?: (event: ChipMouseEvent) => any;

package/Chip/Chip.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 a=require("vue"),t=require("@progress/kendo-vue-common"),m=require("@progress/kendo-svg-icons"),o=require("./focus-reducer.js"),$=require("./data-reducer.js"),l=require("./selection-reducer.js"),S=require("../package-metadata.js"),b=a.defineComponent({name:"KendoVueChip",props:{id:String,text:String,avatar:{type:[String,Function,Object],default:function(){}},value:[String,Object],dir:{type:String,default:function(){return"ltr"}},removable:{type:Boolean,default:!1},removeIcon:{type:String,default:function(){return"x-circle"}},removeSvgIcon:{type:Object,default:function(){return m.xCircleIcon}},disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,selectedIcon:{type:String,default:function(){return"check"}},selectedSvgIcon:{type:Object,default:function(){return m.checkIcon}},size:String,rounded:String,fillMode:{type:String,validator:function(e){return["flat","outline","solid"].includes(e)}},themeColor:{type:String,validator:function(e){return["base","error","info","success","warning"].includes(e)}},dataItem:Object,selected:Boolean,ariaDescribedBy:String,role:{type:String,default:"button"},tabIndex:Number,ariaLabel:String,onMousedown:Function},emits:{click:e=>!0,keydown:e=>!0,blur:e=>!0,focus:e=>!0,remove:e=>!0},inject:{kendoSelection:{default:{value:null}},kendoFocused:{default:{value:null}},kendoDataItems:{default:null},handleDispatchDataItems:{default:t.noop},handleDispatchSelection:{default:t.noop},handleDispatchFocus:{default:t.noop}},created(){this.currentDir=void 0,t.validatePackage(S.packageMetadata)},mounted(){this.chip=t.getRef(this,"chip"),this.currentDir=this.$props.dir!==void 0?this.$props.dir==="rtl":this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1},updated(){this.kendoFocused.value===this.$props.value&&this.$el&&this.$el.focus()},computed:{currentSelected(){return this.$props.selected||(Array.isArray(this.kendoSelection.value)?this.kendoSelection.value.some(e=>e===this.$props.value):this.kendoSelection.value===this.$props.value)},chipLabelClass(){return{"k-chip-label":!0}}},methods:{computedFocused(){return this.kendoFocused.value===this.$props.value},handleMouseDown(e){this.$emit("mousedown",e)},handleClick(e){this.handleDispatchSelection&&this.handleDispatchSelection({type:l.SELECTION_ACTION.toggle,payload:this.$props.value,event:e}),this.$emit("click",{target:this.target,event:e})},handleRemove(e){e.stopPropagation(),this.$props.removable&&(this.handleDispatchFocus&&(this.handleDispatchDataItems({type:$.DATA_ACTION.remove,payload:this.$props.value,event:e}),this.handleDispatchFocus({type:o.FOCUS_ACTION.reset,payload:this.$props.value,event:e}),this.handleDispatchSelection({type:l.SELECTION_ACTION.remove,payload:this.$props.value,event:e})),this.$emit("remove",{target:this.target,event:e}))},handleKeyDown(e){switch(e.keyCode){case t.Keys.left:this.handleDispatchFocus&&this.handleDispatchFocus({type:o.FOCUS_ACTION.prev,payload:this.$props.value,event:e});break;case t.Keys.right:this.handleDispatchFocus&&this.handleDispatchFocus({type:o.FOCUS_ACTION.next,payload:this.$props.value,event:e});break;case t.Keys.enter:this.handleDispatchFocus&&this.handleDispatchSelection({type:l.SELECTION_ACTION.toggle,payload:this.$props.value,event:e});break;case t.Keys.delete:this.handleRemove(e);break}this.$emit("keydown",{target:this.target,event:e})},handleFocus(e){this.handleDispatchFocus&&this.handleDispatchFocus({payload:this.$props.value,type:o.FOCUS_ACTION.current,event:e}),this.$emit("focus",{target:this.target,event:e})},handleBlur(e){this.$emit("blur",{target:this.target,event:e})}},setup(){return{chipRef:a.ref(null)}},render(){const{size:e,rounded:n,themeColor:c,fillMode:r,look:s,avatar:i,icon:d,svgIcon:h,selectedIcon:u,selectedSvgIcon:p,removeIcon:f,removeSvgIcon:v}=this.$props,g=t.templateRendering.call(this,i,t.getListeners.call(this)),k=i?a.createVNode("div",{class:`k-chip-avatar k-avatar k-rounded-${i.rounded||"medium"} k-avatar-${t.kendoThemeMaps.sizeMap[e]||e} k-avatar-solid k-avatar-solid-primary`,style:i.style},[a.createVNode("span",{class:"k-avatar-image"},[a.createVNode("img",{src:i.imageUrl,alt:i.imageAlt},null)])]):null,y=t.getTemplate.call(this,{h:a.h,template:g});return a.createVNode("div",{role:this.$props.role,id:this.$props.value,ref:t.setRef(this,"chip"),dir:this.currentDir,tabindex:t.getTabIndex(this.$props.tabIndex,this.$props.disabled,void 0),class:t.classNames("k-chip",{"k-rtl":this.currentDir==="rtl","k-disabled":this.$props.disabled,"k-selected":this.currentSelected,"k-focus":this.computedFocused(),[`k-chip-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${t.kendoThemeMaps.roundedMap[n]||n}`]:n,[`k-chip-${r}`]:r,[`k-chip-${c}`]:c,"k-chip-outline":s==="outline"||s==="outlined","k-chip-solid":s==="solid"||s==="filled"||r==="solid"}),"aria-pressed":this.$props.role==="button"?this.currentSelected:void 0,"aria-selected":this.$props.role==="option"?this.currentSelected:void 0,"aria-disabled":this.$props.disabled||void 0,"aria-label":this.$props.ariaLabel,"aria-describedby":this.$props.ariaDescribedBy,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleClick,onKeydown:this.handleKeyDown,onMousedown:this.handleMouseDown},[this.currentSelected&&(u||p)&&a.createVNode(t.Icon,{name:t.getIconName(u),icon:p,size:"small"},null),(d||h)&&a.createVNode(t.Icon,{name:t.getIconName(d),icon:h,size:"small",class:"k-chip-icon"},null),i?i.imageUrl?k:y:null,a.createVNode("span",{class:"k-chip-content"},[this.$props.text&&a.createVNode("span",{class:this.chipLabelClass},[this.$props.text])]),this.$props.removable&&a.createVNode("span",{class:"k-chip-actions"},[a.createVNode("span",{class:"k-chip-action k-chip-remove-action"},[a.createVNode(t.Icon,{name:t.getIconName(f),icon:v,size:"small",onClick:this.handleRemove},null)])])])}});exports.Chip=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),t=require("@progress/kendo-vue-common"),p=require("@progress/kendo-svg-icons"),i=require("./focus-reducer.js"),y=require("./data-reducer.js"),n=require("./selection-reducer.js"),$=require("../package-metadata.js"),S=a.defineComponent({name:"KendoVueChip",props:{id:String,text:String,avatar:{type:[String,Function,Object],default:function(){}},value:[String,Object],dir:{type:String,default:function(){return"ltr"}},removable:{type:Boolean,default:!1},removeIcon:{type:String,default:function(){return"x-circle"}},removeSvgIcon:{type:Object,default:function(){return p.xCircleIcon}},disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,selectedIcon:{type:String,default:function(){return"check"}},selectedSvgIcon:{type:Object,default:function(){return p.checkIcon}},size:String,rounded:String,fillMode:{type:String,validator:function(e){return["flat","outline","solid"].includes(e)}},themeColor:{type:String,validator:function(e){return["base","error","info","success","warning"].includes(e)}},dataItem:Object,selected:Boolean,ariaDescribedBy:String,role:{type:String,default:"button"},tabIndex:Number,onMousedown:Function},emits:{click:e=>!0,keydown:e=>!0,blur:e=>!0,focus:e=>!0,remove:e=>!0},inject:{kendoSelection:{default:{value:null}},kendoFocused:{default:{value:null}},kendoDataItems:{default:null},handleDispatchDataItems:{default:t.noop},handleDispatchSelection:{default:t.noop},handleDispatchFocus:{default:t.noop}},created(){this.currentDir=void 0,t.validatePackage($.packageMetadata)},mounted(){this.chip=t.getRef(this,"chip"),this.currentDir=this.$props.dir!==void 0?this.$props.dir==="rtl":this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1},updated(){this.kendoFocused.value===this.$props.value&&this.$el&&this.$el.focus()},computed:{currentSelected(){return this.$props.selected||(Array.isArray(this.kendoSelection.value)?this.kendoSelection.value.some(e=>e===this.$props.value):this.kendoSelection.value===this.$props.value)},chipLabelClass(){return{"k-chip-label":!0}}},methods:{computedFocused(){return this.kendoFocused.value===this.$props.value},handleMouseDown(e){this.$emit("mousedown",e)},handleClick(e){this.handleDispatchSelection&&this.handleDispatchSelection({type:n.SELECTION_ACTION.toggle,payload:this.$props.value,event:e}),this.$emit("click",{target:this.target,event:e})},handleRemove(e){e.stopPropagation(),this.$props.removable&&(this.handleDispatchFocus&&(this.handleDispatchDataItems({type:y.DATA_ACTION.remove,payload:this.$props.value,event:e}),this.handleDispatchFocus({type:i.FOCUS_ACTION.reset,payload:this.$props.value,event:e}),this.handleDispatchSelection({type:n.SELECTION_ACTION.remove,payload:this.$props.value,event:e})),this.$emit("remove",{target:this.target,event:e}))},handleKeyDown(e){switch(e.keyCode){case t.Keys.left:this.handleDispatchFocus&&this.handleDispatchFocus({type:i.FOCUS_ACTION.prev,payload:this.$props.value,event:e});break;case t.Keys.right:this.handleDispatchFocus&&this.handleDispatchFocus({type:i.FOCUS_ACTION.next,payload:this.$props.value,event:e});break;case t.Keys.enter:this.handleDispatchFocus&&this.handleDispatchSelection({type:n.SELECTION_ACTION.toggle,payload:this.$props.value,event:e});break;case t.Keys.delete:this.handleRemove(e);break}this.$emit("keydown",{target:this.target,event:e})},handleFocus(e){this.handleDispatchFocus&&this.handleDispatchFocus({payload:this.$props.value,type:i.FOCUS_ACTION.current,event:e}),this.$emit("focus",{target:this.target,event:e})},handleBlur(e){this.$emit("blur",{target:this.target,event:e})}},setup(){return{chipRef:a.ref(null)}},render(){const{size:e,rounded:o,themeColor:r,fillMode:l,avatar:s,icon:c,svgIcon:d,selectedIcon:h,selectedSvgIcon:u,removeIcon:m,removeSvgIcon:v}=this.$props,f=t.templateRendering.call(this,s,t.getListeners.call(this)),g=s?a.createVNode("div",{class:`k-chip-avatar k-avatar k-rounded-${s.rounded||"medium"} k-avatar-${t.kendoThemeMaps.sizeMap[e]||e} k-avatar-solid k-avatar-solid-primary`,style:s.style},[a.createVNode("span",{class:"k-avatar-image"},[a.createVNode("img",{src:s.imageUrl,alt:s.imageAlt},null)])]):null,k=t.getTemplate.call(this,{h:a.h,template:f});return a.createVNode("div",{role:this.$props.role,id:this.$props.value,ref:t.setRef(this,"chip"),dir:this.currentDir,tabindex:t.getTabIndex(this.$props.tabIndex,this.$props.disabled,void 0),class:t.classNames("k-chip",{"k-rtl":this.currentDir==="rtl","k-disabled":this.$props.disabled,"k-selected":this.currentSelected,"k-focus":this.computedFocused(),[`k-chip-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${t.kendoThemeMaps.roundedMap[o]||o}`]:o,[`k-chip-${r}`]:r,[`k-chip-${l}`]:l}),"aria-pressed":this.$props.role==="button"?this.currentSelected:void 0,"aria-selected":this.$props.role==="option"?this.currentSelected:void 0,"aria-disabled":this.$props.disabled,"aria-describedby":this.$props.ariaDescribedBy,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleClick,onKeydown:this.handleKeyDown,onMousedown:this.handleMouseDown},[this.currentSelected&&(h||u)&&a.createVNode(t.Icon,{name:t.getIconName(h),icon:u,size:"small"},null),(c||d)&&a.createVNode(t.Icon,{name:t.getIconName(c),icon:d,size:"small"},null),s?s.imageUrl?g:k:null,a.createVNode("span",{class:"k-chip-content"},[this.$props.text&&a.createVNode("span",{"aria-label":this.$props.text,class:this.chipLabelClass},[this.$props.text])]),this.$props.removable&&a.createVNode("span",{class:"k-chip-actions"},[a.createVNode("span",{class:"k-chip-action k-chip-remove-action"},[a.createVNode(t.Icon,{name:t.getIconName(m),icon:v,size:"small",onClick:this.handleRemove},null)])])])}});exports.Chip=S;

package/Chip/Chip.mjs

@@ -5,14 +5,14 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as D, createVNode as t, h as I, ref as F } from "vue";
-import { noop as r, templateRendering as C, getListeners as w, kendoThemeMaps as c, getTemplate as x, classNames as M, getTabIndex as O, setRef as R, Icon as d, getIconName as h, Keys as s, getRef as T, validatePackage as A } from "@progress/kendo-vue-common";
-import { checkIcon as B, xCircleIcon as N } from "@progress/kendo-svg-icons";
-import { FOCUS_ACTION as o } from "./focus-reducer.mjs";
-import { DATA_ACTION as j } from "./data-reducer.mjs";
-import { SELECTION_ACTION as p } from "./selection-reducer.mjs";
-import { packageMetadata as z } from "../package-metadata.mjs";
-const q = /* @__PURE__ */ D({
+import { defineComponent as S, createVNode as t, h as D, ref as I } from "vue";
+import { noop as o, templateRendering as F, getListeners as C, kendoThemeMaps as n, getTemplate as w, classNames as x, getTabIndex as M, setRef as O, Icon as l, getIconName as c, Keys as a, getRef as R, validatePackage as T } from "@progress/kendo-vue-common";
+import { checkIcon as A, xCircleIcon as B } from "@progress/kendo-svg-icons";
+import { FOCUS_ACTION as s } from "./focus-reducer.mjs";
+import { DATA_ACTION as N } from "./data-reducer.mjs";
+import { SELECTION_ACTION as d } from "./selection-reducer.mjs";
+import { packageMetadata as j } from "../package-metadata.mjs";
+const V = /* @__PURE__ */ S({
   name: "KendoVueChip",
   props: {
     id: String,
@@ -42,7 +42,7 @@ const q = /* @__PURE__ */ D({
     removeSvgIcon: {
       type: Object,
       default: function() {
-        return N;
+        return B;
       }
     },
     disabled: {
@@ -60,7 +60,7 @@ const q = /* @__PURE__ */ D({
     selectedSvgIcon: {
       type: Object,
       default: function() {
-        return B;
+        return A;
       }
     },
     size: String,
@@ -85,7 +85,6 @@ const q = /* @__PURE__ */ D({
       default: "button"
     },
     tabIndex: Number,
-    ariaLabel: String,
     onMousedown: Function
   },
   emits: {
@@ -110,20 +109,20 @@ const q = /* @__PURE__ */ D({
       default: null
     },
     handleDispatchDataItems: {
-      default: r
+      default: o
     },
     handleDispatchSelection: {
-      default: r
+      default: o
     },
     handleDispatchFocus: {
-      default: r
+      default: o
     }
   },
   created() {
-    this.currentDir = void 0, A(z);
+    this.currentDir = void 0, T(j);
   },
   mounted() {
-    this.chip = T(this, "chip"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir === "rtl" : this.$el && getComputedStyle(this.$el).direction === "rtl" || !1;
+    this.chip = R(this, "chip"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir === "rtl" : this.$el && getComputedStyle(this.$el).direction === "rtl" || !1;
   },
   updated() {
     this.kendoFocused.value === this.$props.value && this.$el && this.$el.focus();
@@ -147,7 +146,7 @@ const q = /* @__PURE__ */ D({
     },
     handleClick(e) {
       this.handleDispatchSelection && this.handleDispatchSelection({
-        type: p.toggle,
+        type: d.toggle,
         payload: this.$props.value,
         event: e
       }), this.$emit("click", {
@@ -157,15 +156,15 @@ const q = /* @__PURE__ */ D({
     },
     handleRemove(e) {
       e.stopPropagation(), this.$props.removable && (this.handleDispatchFocus && (this.handleDispatchDataItems({
-        type: j.remove,
+        type: N.remove,
         payload: this.$props.value,
         event: e
       }), this.handleDispatchFocus({
-        type: o.reset,
+        type: s.reset,
         payload: this.$props.value,
         event: e
       }), this.handleDispatchSelection({
-        type: p.remove,
+        type: d.remove,
         payload: this.$props.value,
         event: e
       })), this.$emit("remove", {
@@ -175,28 +174,28 @@ const q = /* @__PURE__ */ D({
     },
     handleKeyDown(e) {
       switch (e.keyCode) {
-        case s.left:
+        case a.left:
           this.handleDispatchFocus && this.handleDispatchFocus({
-            type: o.prev,
+            type: s.prev,
             payload: this.$props.value,
             event: e
           });
           break;
-        case s.right:
+        case a.right:
           this.handleDispatchFocus && this.handleDispatchFocus({
-            type: o.next,
+            type: s.next,
             payload: this.$props.value,
             event: e
           });
           break;
-        case s.enter:
+        case a.enter:
           this.handleDispatchFocus && this.handleDispatchSelection({
-            type: p.toggle,
+            type: d.toggle,
             payload: this.$props.value,
             event: e
           });
           break;
-        case s.delete:
+        case a.delete:
           this.handleRemove(e);
           break;
       }
@@ -208,7 +207,7 @@ const q = /* @__PURE__ */ D({
     handleFocus(e) {
       this.handleDispatchFocus && this.handleDispatchFocus({
         payload: this.$props.value,
-        type: o.current,
+        type: s.current,
         event: e
       }), this.$emit("focus", {
         target: this.target,
@@ -224,88 +223,84 @@ const q = /* @__PURE__ */ D({
   },
   setup() {
     return {
-      chipRef: F(null)
+      chipRef: I(null)
     };
   },
   render() {
     const {
       size: e,
-      rounded: l,
-      themeColor: u,
-      fillMode: n,
-      look: a,
+      rounded: r,
+      themeColor: h,
+      fillMode: p,
       avatar: i,
-      icon: m,
-      svgIcon: f,
-      selectedIcon: v,
-      selectedSvgIcon: g,
-      removeIcon: k,
-      removeSvgIcon: $
-    } = this.$props, y = C.call(this, i, w.call(this)), b = i ? t("div", {
-      class: `k-chip-avatar k-avatar k-rounded-${i.rounded || "medium"} k-avatar-${c.sizeMap[e] || e} k-avatar-solid k-avatar-solid-primary`,
+      icon: u,
+      svgIcon: m,
+      selectedIcon: f,
+      selectedSvgIcon: v,
+      removeIcon: g,
+      removeSvgIcon: k
+    } = this.$props, $ = F.call(this, i, C.call(this)), y = i ? t("div", {
+      class: `k-chip-avatar k-avatar k-rounded-${i.rounded || "medium"} k-avatar-${n.sizeMap[e] || e} k-avatar-solid k-avatar-solid-primary`,
       style: i.style
     }, [t("span", {
       class: "k-avatar-image"
     }, [t("img", {
       src: i.imageUrl,
       alt: i.imageAlt
-    }, null)])]) : null, S = x.call(this, {
-      h: I,
-      template: y
+    }, null)])]) : null, b = w.call(this, {
+      h: D,
+      template: $
     });
     return t("div", {
       role: this.$props.role,
       id: this.$props.value,
-      ref: R(this, "chip"),
+      ref: O(this, "chip"),
       dir: this.currentDir,
-      tabindex: O(this.$props.tabIndex, this.$props.disabled, void 0),
-      class: M("k-chip", {
+      tabindex: M(this.$props.tabIndex, this.$props.disabled, void 0),
+      class: x("k-chip", {
         "k-rtl": this.currentDir === "rtl",
         "k-disabled": this.$props.disabled,
         "k-selected": this.currentSelected,
         "k-focus": this.computedFocused(),
-        [`k-chip-${c.sizeMap[e] || e}`]: e,
-        [`k-rounded-${c.roundedMap[l] || l}`]: l,
-        [`k-chip-${n}`]: n,
-        [`k-chip-${u}`]: u,
-        "k-chip-outline": a === "outline" || a === "outlined",
-        "k-chip-solid": a === "solid" || a === "filled" || n === "solid"
+        [`k-chip-${n.sizeMap[e] || e}`]: e,
+        [`k-rounded-${n.roundedMap[r] || r}`]: r,
+        [`k-chip-${h}`]: h,
+        [`k-chip-${p}`]: p
       }),
       "aria-pressed": this.$props.role === "button" ? this.currentSelected : void 0,
       "aria-selected": this.$props.role === "option" ? this.currentSelected : void 0,
-      "aria-disabled": this.$props.disabled || void 0,
-      "aria-label": this.$props.ariaLabel,
+      "aria-disabled": this.$props.disabled,
       "aria-describedby": this.$props.ariaDescribedBy,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       onClick: this.handleClick,
       onKeydown: this.handleKeyDown,
       onMousedown: this.handleMouseDown
-    }, [this.currentSelected && (v || g) && t(d, {
-      name: h(v),
-      icon: g,
+    }, [this.currentSelected && (f || v) && t(l, {
+      name: c(f),
+      icon: v,
       size: "small"
-    }, null), (m || f) && t(d, {
-      name: h(m),
-      icon: f,
-      size: "small",
-      class: "k-chip-icon"
-    }, null), i ? i.imageUrl ? b : S : null, t("span", {
+    }, null), (u || m) && t(l, {
+      name: c(u),
+      icon: m,
+      size: "small"
+    }, null), i ? i.imageUrl ? y : b : null, t("span", {
       class: "k-chip-content"
     }, [this.$props.text && t("span", {
+      "aria-label": this.$props.text,
       class: this.chipLabelClass
     }, [this.$props.text])]), this.$props.removable && t("span", {
       class: "k-chip-actions"
     }, [t("span", {
       class: "k-chip-action k-chip-remove-action"
-    }, [t(d, {
-      name: h(k),
-      icon: $,
+    }, [t(l, {
+      name: c(g),
+      icon: k,
       size: "small",
       onClick: this.handleRemove
     }, null)])])]);
   }
 });
 export {
-  q as Chip
+  V as Chip
 };

package/FloatingActionButton/FloatingActionButton.d.ts

@@ -40,7 +40,7 @@ declare const FloatingActionButton: import('vue').DefineComponent<import('vue').
     };
     positionMode: {
         type: PropType<FloatingActionButtonPositionMode>;
-        default: any;
+        default: () => FloatingActionButtonPositionMode;
     };
     popupSettings: {
         type: PropType<import('..').FloatingActionButtonPopupSettings>;
@@ -68,11 +68,9 @@ declare const FloatingActionButton: import('vue').DefineComponent<import('vue').
         'k-fab': boolean;
         'k-disabled': any;
         'k-focus': any;
-        'k-pos-absolute': boolean;
-        'k-pos-fixed': boolean;
     };
     computedOpened(): any;
-    rootClassNames(): any;
+    rootClassNames(): string;
 }, {
     dispatchPopupEvent(dispatchedEvent: any, isOpen?: boolean): void;
     handleClick(event: any): void;
@@ -120,7 +118,7 @@ declare const FloatingActionButton: import('vue').DefineComponent<import('vue').
     };
     positionMode: {
         type: PropType<FloatingActionButtonPositionMode>;
-        default: any;
+        default: () => FloatingActionButtonPositionMode;
     };
     popupSettings: {
         type: PropType<import('..').FloatingActionButtonPopupSettings>;

package/FloatingActionButton/FloatingActionButton.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"),s=require("@progress/kendo-vue-common"),I=require("./FloatingActionButtonItem.js"),y=require("../package-metadata.js"),u=require("./utils.js"),x=require("@progress/kendo-vue-popup"),v=o.defineComponent({name:"KendoVueFloatingActionButton",props:{id:String,dir:String,tabIndex:Number,accessKey:String,disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,iconClass:String,items:[Object,Array],item:[String,Function,Object],text:String,alignOffset:Object,opened:{type:Boolean,default:void 0},align:{type:Object,default:function(){return{vertical:"bottom",horizontal:"end"}}},positionMode:{type:String,default:void 0},popupSettings:{type:Object,default:function(){return{}}},rounded:String,fillMode:{type:String,validator:function(e){return["flat","link","outline","solid"].includes(e)}},size:String,themeColor:String},emits:{click:e=>!0,mousedown:e=>!0,mouseup:e=>!0,open:e=>!0,close:e=>!0,itemclick:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0},data(){return{currentOpened:!1,currentFocused:!1,focusedIndex:-1,currentDir:"ltr",isRtl:!1}},created(){s.validatePackage(y.packageMetadata),this.element=void 0,this._anchor=s.guid(),this.listId=s.guid(),this.buttonId=s.guid()},mounted(){this.element=this.kendoAnchorRef,this.list=s.getRef(this,"list"),this.popup=s.getRef(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&&u.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl)},updated(){u.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl),this.currentFocused&&this.element&&this.element.focus()},computed:{buttonClassNames(){const{size:e,themeColor:t,fillMode:n,rounded:i,positionMode:d}=this.$props;return{"k-fab":!0,[`k-fab-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${s.kendoThemeMaps.roundedMap[i]||i}`]:i,[`k-fab-${n}`]:n,[`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}},computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},rootClassNames(){}},methods:{dispatchPopupEvent(e,t){this.$props.items&&this.$emit(t?"open":"close",{event:e,isOpened:!t})},handleClick(e){if(!(!e.target||this.$props.disabled))if(!this.$props.items)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)}},handleFocus(e){this.currentFocused=!0,this.focusedIndex=this.computedOpened?0:-1,this.$emit("focus",{event:e})},handleBlur(e){this.currentFocused=!1,this.currentOpened=!1,this.focusedIndex=-1,this.$emit("blur",{event:e}),this.computedOpened&&this.dispatchPopupEvent(e,!1)},handleMouseDown(e){e.preventDefault(),this.$emit("mousedown",e)},handleMouseUp(e){this.$emit("mouseup",e)},dispatchItemClickEvent(e,t){this.$props.items&&(this.$props.items[t].disabled||this.$emit("itemclick",e,{itemProps:this.$props.items[t],itemIndex:t}))},handleItemClick(e,t){!e.target||!this.$props.items||(this.focusedIndex=t,this.currentOpened=!1,this.dispatchItemClickEvent(e,t),this.dispatchPopupEvent(e,!1))},handleItemDown(e){s.canUseDOM&&document.activeElement===this.element&&e.preventDefault()},handleKeyDown(e){const t=this.focusedIndex,n=this.$props.items?this.$props.items.length-1:-1,i=this.$props.align.vertical==="bottom";switch(e.keyCode){case s.Keys.enter:case s.Keys.space:t>=0&&this.dispatchItemClickEvent(e,t),e.preventDefault(),this.currentOpened=!this.currentOpened,this.focusedIndex=this.currentOpened?-1:0;break;case s.Keys.esc:e.preventDefault(),this.currentOpened=!1,this.focusedIndex=-1;break;case s.Keys.home:e.preventDefault(),this.focusedIndex=0;break;case s.Keys.end:e.preventDefault(),this.focusedIndex=n;break;case s.Keys.down:case s.Keys.right:e.preventDefault(),t<n&&!i&&(this.focusedIndex=t+1),t>0&&i&&(this.focusedIndex=t-1);break;case s.Keys.up:case s.Keys.left:e.preventDefault(),t>0&&!i&&(this.focusedIndex=t-1),t<n&&i&&(this.focusedIndex=t+1);break}this.$emit("keydown",e,void 0)}},setup(){const e=o.ref(null),t=o.ref(null);return{chipRef:e,kendoAnchorRef:t}},render(){const{align:e,disabled:t,icon:n,svgIcon:i,iconClass:d,id:h,items:r,text:c,tabIndex:g,accessKey:b,popupSettings:l}=this.$props,k=s.templateRendering.call(this,this.$props.item,s.getListeners.call(this)),$=function(){return r&&r.map(function(a,p){return o.createVNode(I.FloatingActionButtonItem,{key:p,index:p,id:`${this.listId}-${p}`,disabled:t||a.disabled,focused:this.focusedIndex===p,dataItem:a,item:k,class:s.classNames(a.className,u.getTextDirectionClass(this.currentDir||"ltr",e.horizontal)),onClick:this.handleItemClick,onDown:this.handleItemDown},null)},this)},f=n&&!c,m=(this.element?this.element.offsetWidth:0)/2-32/2;return o.createVNode("div",{class:this.rootClassNames},[o.createVNode("button",{ref:a=>{this.kendoAnchorRef=a},id:h||this.buttonId,role:r?"menubutton":void 0,type:"button","aria-disabled":t||void 0,"aria-expanded":r?this.computedOpened:void 0,"aria-haspopup":r?!0:void 0,"aria-label":!c&&(n||i||d)?"Action":void 0,"aria-owns":r?this.listId:void 0,"aria-activedescendant":this.focusedIndex>=0&&r?`${this.listId}-${this.focusedIndex}`:void 0,tabindex:s.getTabIndex(g,t),accesskey:b,dir:this.currentDir,disabled:t,class:this.buttonClassNames,onClick:this.handleClick,onMousedown:this.handleMouseDown,onMouseup:this.handleMouseUp,onFocusin:this.handleFocus,onBlur:this.handleBlur,onKeydown:this.handleKeyDown},[n||i?o.createVNode(s.Icon,{name:n,icon:i,class:"k-fab-icon"},null):d?o.createVNode(s.Icon,{class:d},null):null,c&&o.createVNode("span",{class:"k-fab-text"},[c])]),o.createVNode(x.Popup,{ref:s.setRef(this,"popup"),show:this.computedOpened,anchor:this._anchor,animate:l.animate,popupClass:s.classNames("k-popup-transparent k-fab-popup",l.popupClass),anchorAlign:l.anchorAlign||u.getAnchorAlign(e,this.isRtl),popupAlign:l.popupAlign||u.getPopupAlign(e,this.isRtl),style:{boxShadow:"none"}},{default:()=>[o.createVNode("ul",{ref:s.setRef(this,"list"),role:"menu","aria-labelledby":h,id:this.listId,class:s.classNames("k-fab-items",{"k-fab-items-bottom":e.vertical!=="bottom","k-fab-items-top":e.vertical==="bottom"}),style:{paddingLeft:f?m+"px":void 0,paddingRight:f?m+"px":void 0}},[$.call(this)])]})])}});exports.FloatingActionButton=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),s=require("@progress/kendo-vue-common"),I=require("./FloatingActionButtonItem.js"),y=require("../package-metadata.js"),d=require("./utils.js"),x=require("@progress/kendo-vue-popup"),v=n.defineComponent({name:"KendoVueFloatingActionButton",props:{id:String,dir:String,tabIndex:Number,accessKey:String,disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,iconClass:String,items:[Object,Array],item:[String,Function,Object],text:String,alignOffset:Object,opened:{type:Boolean,default:void 0},align:{type:Object,default:function(){return{vertical:"bottom",horizontal:"end"}}},positionMode:{type:String,default:function(){return"fixed"}},popupSettings:{type:Object,default:function(){return{}}},rounded:String,fillMode:{type:String,validator:function(e){return["flat","link","outline","solid"].includes(e)}},size:String,themeColor:String},emits:{click:e=>!0,mousedown:e=>!0,mouseup:e=>!0,open:e=>!0,close:e=>!0,itemclick:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0},data(){return{currentOpened:!1,currentFocused:!1,focusedIndex:-1,currentDir:"ltr",isRtl:!1}},created(){s.validatePackage(y.packageMetadata),this.element=void 0,this._anchor=s.guid(),this.listId=s.guid(),this.buttonId=s.guid()},mounted(){this.element=this.kendoAnchorRef,this.list=s.getRef(this,"list"),this.popup=s.getRef(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&&d.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl)},updated(){d.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl),this.currentFocused&&this.element&&this.element.focus()},computed:{buttonClassNames(){const{size:e,themeColor:t,fillMode:o,rounded:i}=this.$props;return{"k-fab":!0,[`k-fab-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${s.kendoThemeMaps.roundedMap[i]||i}`]:i,[`k-fab-${o}`]:o,[`k-fab-${t}`]:t,"k-disabled":this.$props.disabled,"k-focus":this.currentFocused,[`k-${this.$props.align.vertical}-${this.$props.align.horizontal}`]:!0}},computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},rootClassNames(){return s.classNames({"k-pos-absolute":this.$props.positionMode==="absolute","k-pos-fixed":this.$props.positionMode==="fixed"})}},methods:{dispatchPopupEvent(e,t){this.$props.items&&this.$emit(t?"open":"close",{event:e,isOpened:!t})},handleClick(e){if(!(!e.target||this.$props.disabled))if(!this.$props.items)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,t)}},handleFocus(e){this.currentFocused=!0,this.focusedIndex=this.computedOpened?0:-1,this.$emit("focus",{event:e})},handleBlur(e){const t=this.computedOpened;this.currentFocused=!1,this.currentOpened=!1,this.focusedIndex=-1,this.$emit("blur",{event:e}),t&&this.dispatchPopupEvent(e,!1)},handleMouseDown(e){e.preventDefault(),this.$emit("mousedown",e)},handleMouseUp(e){this.$emit("mouseup",e)},dispatchItemClickEvent(e,t){this.$props.items&&(this.$props.items[t].disabled||this.$emit("itemclick",e,{itemProps:this.$props.items[t],itemIndex:t}))},handleItemClick(e,t){!e.target||!this.$props.items||(this.focusedIndex=t,this.currentOpened=!1,this.dispatchItemClickEvent(e,t),this.dispatchPopupEvent(e,!1))},handleItemDown(e){s.canUseDOM&&document.activeElement===this.element&&e.preventDefault()},handleKeyDown(e){const t=this.focusedIndex,o=this.$props.items?this.$props.items.length-1:-1,i=this.$props.align.vertical==="bottom";switch(e.keyCode){case s.Keys.enter:case s.Keys.space:t>=0&&this.dispatchItemClickEvent(e,t),e.preventDefault(),this.currentOpened=!this.currentOpened,this.focusedIndex=this.currentOpened?-1:0;break;case s.Keys.esc:e.preventDefault(),this.currentOpened=!1,this.focusedIndex=-1;break;case s.Keys.home:e.preventDefault(),this.focusedIndex=0;break;case s.Keys.end:e.preventDefault(),this.focusedIndex=o;break;case s.Keys.down:case s.Keys.right:e.preventDefault(),t<o&&!i&&(this.focusedIndex=t+1),t>0&&i&&(this.focusedIndex=t-1);break;case s.Keys.up:case s.Keys.left:e.preventDefault(),t>0&&!i&&(this.focusedIndex=t-1),t<o&&i&&(this.focusedIndex=t+1);break}this.$emit("keydown",e,void 0)}},setup(){const e=n.ref(null),t=n.ref(null);return{chipRef:e,kendoAnchorRef:t}},render(){const{align:e,disabled:t,icon:o,svgIcon:i,iconClass:p,id:h,items:r,text:u,tabIndex:b,accessKey:g,popupSettings:c}=this.$props,k=s.templateRendering.call(this,this.$props.item,s.getListeners.call(this)),$=function(){return r&&r.map(function(a,l){return n.createVNode(I.FloatingActionButtonItem,{key:l,index:l,id:`${this.listId}-${l}`,disabled:t||a.disabled,focused:this.focusedIndex===l,dataItem:a,item:k,class:s.classNames(a.className,d.getTextDirectionClass(this.currentDir||"ltr",e.horizontal)),onClick:this.handleItemClick,onDown:this.handleItemDown},null)},this)},f=o&&!u,m=(this.element?this.element.offsetWidth:0)/2-32/2;return n.createVNode("div",{class:this.rootClassNames},[n.createVNode("button",{ref:a=>{this.kendoAnchorRef=a},id:h||this.buttonId,role:r?"menubutton":"button",type:"button","aria-disabled":t,"aria-expanded":r?this.computedOpened:void 0,"aria-haspopup":r,"aria-label":`${u||""} floatingactionbutton`,"aria-owns":r?this.listId:void 0,"aria-activedescendant":this.focusedIndex>=0&&r?`${this.listId}-${this.focusedIndex}`:void 0,tabindex:s.getTabIndex(b,t),accesskey:g,dir:this.currentDir,disabled:t,class:this.buttonClassNames,onClick:this.handleClick,onMousedown:this.handleMouseDown,onMouseup:this.handleMouseUp,onFocusin:this.handleFocus,onBlur:this.handleBlur,onKeydown:this.handleKeyDown},[o||i?n.createVNode(s.Icon,{name:o,icon:i,class:"k-fab-icon"},null):p?n.createVNode(s.Icon,{class:p},null):null,u&&n.createVNode("span",{class:"k-fab-text"},[u])]),n.createVNode(x.Popup,{ref:s.setRef(this,"popup"),show:this.computedOpened,anchor:this._anchor,animate:c.animate,popupClass:s.classNames("k-popup-transparent k-fab-popup",c.popupClass),anchorAlign:c.anchorAlign||d.getAnchorAlign(e,this.isRtl),popupAlign:c.popupAlign||d.getPopupAlign(e,this.isRtl),style:{boxShadow:"none"}},{default:()=>[n.createVNode("ul",{ref:s.setRef(this,"list"),role:"menu","aria-labelledby":h,id:this.listId,class:s.classNames("k-fab-items",{"k-fab-items-bottom":e.vertical!=="bottom","k-fab-items-top":e.vertical==="bottom"}),style:{paddingLeft:f?m+"px":void 0,paddingRight:f?m+"px":void 0}},[$.call(this)])]})])}});exports.FloatingActionButton=v;