@progress/kendo-vue-inputs 9.2.0 → 9.3.0-develop.1

package/colors/ColorInput.mjs

@@ -5,19 +5,19 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as R, createVNode as t, isVNode as S } from "vue";
-import { HexInput as z } from "./HexInput.mjs";
-import { Button as G } from "@progress/kendo-vue-buttons";
+import { defineComponent as z, createVNode as e, isVNode as G } from "vue";
+import { HexInput as y } from "./HexInput.mjs";
+import { Button as B } from "@progress/kendo-vue-buttons";
 import { Label as o } from "@progress/kendo-vue-labels";
-import { provideLocalizationService as B } from "@progress/kendo-vue-intl";
-import { colorGradientHex as c, messages as a, colorGradientInputColorButton as b, colorGradientR as u, colorGradientG as f, colorGradientB as m, colorGradientA as x, colorGradientRLabel as $, colorGradientGLabel as k, colorGradientBLabel as C, colorGradientALabel as I } from "../messages/main.mjs";
-import { Keys as T, guid as j } from "@progress/kendo-vue-common";
-import { chevronDownIcon as H } from "@progress/kendo-svg-icons";
+import { provideLocalizationService as j } from "@progress/kendo-vue-intl";
+import { colorGradientHex as u, messages as a, colorGradientInputColorButton as b, colorGradientR as I, colorGradientG as f, colorGradientB as x, colorGradientA as m, colorGradientRLabel as $, colorGradientGLabel as C, colorGradientBLabel as k, colorGradientALabel as L } from "../messages/main.mjs";
+import { Keys as A, guid as r } from "@progress/kendo-vue-common";
+import { caretAltExpandIcon as H } from "@progress/kendo-svg-icons";
 import { NumericTextBox as l } from "../numerictextbox/NumericTextBox.mjs";
-function r(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !S(e);
+function d(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !G(t);
 }
-const s = ["rgba", "rgb", "hex"], E = /* @__PURE__ */ R({
+const n = ["rgba", "rgb", "hex"], q = /* @__PURE__ */ z({
   name: "KendoColorInput",
   emits: {
     hexchange: null,
@@ -42,11 +42,11 @@ const s = ["rgba", "rgb", "hex"], E = /* @__PURE__ */ R({
     }
   },
   created() {
-    this.hexInputId = j();
+    this.hexInputId = r(), this.rInputId = r(), this.gInputId = r(), this.bInputId = r(), this.aInputId = r();
   },
   data() {
     return {
-      inputMode: s[1]
+      inputMode: n[0]
     };
   },
   mounted() {
@@ -56,27 +56,27 @@ const s = ["rgba", "rgb", "hex"], E = /* @__PURE__ */ R({
     this.lastFocusable = this.$refs.hexinput || this.$refs.numerica || this.$refs.numericb;
   },
   render() {
-    const e = B(this), n = e.toLanguageString(c, a[c]), i = e.toLanguageString(b, a[b]), g = e.toLanguageString(u, a[u]), d = e.toLanguageString(f, a[f]), h = e.toLanguageString(m, a[m]), p = e.toLanguageString(x, a[x]), L = e.toLanguageString($, a[$]), v = e.toLanguageString(k, a[k]), M = e.toLanguageString(C, a[C]), y = e.toLanguageString(I, a[I]);
-    return t("div", {
+    const t = j(this), i = t.toLanguageString(u, a[u]), s = t.toLanguageString(b, a[b]), g = t.toLanguageString(I, a[I]), h = t.toLanguageString(f, a[f]), p = t.toLanguageString(x, a[x]), c = t.toLanguageString(m, a[m]), v = t.toLanguageString($, a[$]), M = t.toLanguageString(C, a[C]), R = t.toLanguageString(k, a[k]), S = t.toLanguageString(L, a[L]);
+    return e("div", {
       class: "k-colorgradient-inputs k-hstack"
-    }, [t("div", {
+    }, [e("div", {
       class: "k-vstack"
-    }, [t(G, {
-      ariaLabel: i,
+    }, [e(B, {
+      ariaLabel: s,
       tabIndex: this.tabIndex,
       type: "button",
       fillMode: "flat",
-      icon: "chevron-down",
+      icon: "caret-alt-expand",
       svgIcon: H,
-      class: "k-colorgradient-toggle-mode k-icon-button",
+      class: "k-colorgradient-toggle-mode",
       onClick: this.onToggleModeChange,
       onKeydown: this.onKeyDown,
       size: this.$props.size
-    }, null)]), this.inputMode === "hex" && t("div", {
+    }, null)]), this.inputMode === "hex" && e("div", {
       class: "k-vstack k-flex-1"
-    }, [t("span", {
+    }, [e("span", {
       class: "k-hex-value"
-    }, [t(z, {
+    }, [e(y, {
       id: this.hexInputId,
       tabIndex: this.tabIndex,
       hex: this.$props.hex,
@@ -84,70 +84,73 @@ const s = ["rgba", "rgb", "hex"], E = /* @__PURE__ */ R({
       disabled: this.$props.disabled,
       ref: "hexinput",
       size: this.$props.size
-    }, null)]), t(o, {
+    }, null)]), e(o, {
       class: "k-colorgradient-input-label",
       editorId: this.hexInputId
-    }, r(n) ? n : {
-      default: () => [n]
-    })]), (this.inputMode === "rgb" || this.inputMode === "rgba") && [t("div", {
+    }, d(i) ? i : {
+      default: () => [i]
+    })]), (this.inputMode === "rgb" || this.inputMode === "rgba") && [e("div", {
       class: "k-vstack"
-    }, [t(l, {
-      inputType: "number",
+    }, [e(l, {
+      id: this.rInputId,
       tabIndex: this.tabIndex,
       value: this.$props.rgba.r,
       min: 0,
       max: 255,
       spinners: !1,
       format: "n",
-      ariaLabel: L,
+      ariaLabel: v,
       onChange: this.onRgbaRChange,
       disabled: this.$props.disabled,
       size: this.$props.size
-    }, null), t(o, {
-      class: "k-colorgradient-input-label"
-    }, r(g) ? g : {
+    }, null), e(o, {
+      class: "k-colorgradient-input-label",
+      editorId: this.rInputId
+    }, d(g) ? g : {
       default: () => [g]
-    })]), t("div", {
+    })]), e("div", {
       class: "k-vstack"
-    }, [t(l, {
-      inputType: "number",
+    }, [e(l, {
+      id: this.gInputId,
       tabIndex: this.tabIndex,
       value: this.$props.rgba.g,
       min: 0,
       max: 255,
       spinners: !1,
       format: "n",
-      ariaLabel: v,
+      ariaLabel: M,
       onChange: this.onRgbaGChange,
       disabled: this.$props.disabled,
       size: this.$props.size
-    }, null), t(o, {
-      class: "k-colorgradient-input-label"
-    }, r(d) ? d : {
-      default: () => [d]
-    })]), t("div", {
+    }, null), e(o, {
+      class: "k-colorgradient-input-label",
+      editorId: this.gInputId
+    }, d(h) ? h : {
+      default: () => [h]
+    })]), e("div", {
       class: "k-vstack"
-    }, [t(l, {
-      inputType: "number",
+    }, [e(l, {
+      id: this.bInputId,
       tabIndex: this.tabIndex,
       value: this.$props.rgba.b,
       min: 0,
       max: 255,
       spinners: !1,
       format: "n",
-      ariaLabel: M,
+      ariaLabel: R,
       onChange: this.onRgbaBChange,
       disabled: this.$props.disabled,
       ref: "numericb",
       size: this.$props.size
-    }, null), t(o, {
-      class: "k-colorgradient-input-label"
-    }, r(h) ? h : {
-      default: () => [h]
-    })])], this.inputMode === "rgba" && t("div", {
+    }, null), e(o, {
+      class: "k-colorgradient-input-label",
+      editorId: this.bInputId
+    }, d(p) ? p : {
+      default: () => [p]
+    })])], this.inputMode === "rgba" && e("div", {
       class: "k-vstack"
-    }, [this.$props.opacity && t(l, {
-      inputType: "number",
+    }, [this.$props.opacity && e(l, {
+      id: this.aInputId,
       tabIndex: this.tabIndex,
       value: this.$props.rgba.a,
       min: 0,
@@ -155,61 +158,62 @@ const s = ["rgba", "rgb", "hex"], E = /* @__PURE__ */ R({
       step: 0.01,
       spinners: !1,
       format: "n2",
-      ariaLabel: y,
+      ariaLabel: S,
       onChange: this.onRgbaAChange,
       disabled: this.$props.disabled,
       ref: "numerica",
       size: this.$props.size
-    }, null), this.$props.opacity && t(o, {
-      class: "k-colorgradient-input-label"
-    }, r(p) ? p : {
-      default: () => [p]
+    }, null), this.$props.opacity && e(o, {
+      class: "k-colorgradient-input-label",
+      editorId: this.aInputId
+    }, d(c) ? c : {
+      default: () => [c]
     })])]);
   },
   methods: {
-    onHexChange(e) {
-      this.$emit("hexchange", e.hex, e.value, e);
+    onHexChange(t) {
+      this.$emit("hexchange", t.hex, t.value, t);
     },
-    onRgbaRChange(e) {
+    onRgbaRChange(t) {
       this.dispatchRgbaChange({
-        r: e.value
-      }, e);
+        r: t.value
+      }, t);
     },
-    onRgbaGChange(e) {
+    onRgbaGChange(t) {
       this.dispatchRgbaChange({
-        g: e.value
-      }, e);
+        g: t.value
+      }, t);
     },
-    onRgbaBChange(e) {
+    onRgbaBChange(t) {
       this.dispatchRgbaChange({
-        b: e.value
-      }, e);
+        b: t.value
+      }, t);
     },
-    onRgbaAChange(e) {
+    onRgbaAChange(t) {
       this.dispatchRgbaChange({
-        a: e.value
-      }, e);
+        a: t.value
+      }, t);
     },
-    dispatchRgbaChange(e, n) {
-      let i = {
+    dispatchRgbaChange(t, i) {
+      let s = {
         ...this.$props.rgba
       };
-      e.r !== void 0 && (i.r = e.r), e.g !== void 0 && (i.g = e.g), e.b !== void 0 && (i.b = e.b), e.a !== void 0 && (i.a = e.a), this.$emit("rgbachange", i, n);
+      t.r !== void 0 && (s.r = t.r), t.g !== void 0 && (s.g = t.g), t.b !== void 0 && (s.b = t.b), t.a !== void 0 && (s.a = t.a), this.$emit("rgbachange", s, i);
     },
     onToggleModeChange() {
-      const e = s.length - 1 === s.indexOf(this.inputMode) ? 0 : s.indexOf(this.inputMode) + 1;
+      const t = n.length - 1 === n.indexOf(this.inputMode) ? 0 : n.indexOf(this.inputMode) + 1;
       if (this.$props.opacity)
-        this.inputMode = s[e];
+        this.inputMode = n[t];
       else {
-        const n = s[e] === "rgba" ? e + 1 : e;
-        this.inputMode = s[n];
+        const i = n[t] === "rgba" ? t + 1 : t;
+        this.inputMode = n[i];
       }
     },
-    onKeyDown(e) {
-      e.keyCode === T.enter && e.stopPropagation();
+    onKeyDown(t) {
+      t.keyCode === A.enter && t.stopPropagation();
     }
   }
 });
 export {
-  E as ColorInput
+  q as ColorInput
 };

package/colors/ColorPalette.d.ts

@@ -44,6 +44,7 @@ declare const ColorPalette: import('vue').DefineComponent<import('vue').ExtractP
     class: PropType<string>;
     ariaLabelledBy: PropType<string>;
     ariaDescribedBy: PropType<string>;
+    ariaLabel: PropType<string>;
     size: {
         type: PropType<"small" | "medium" | "large">;
     };
@@ -95,6 +96,7 @@ declare const ColorPalette: import('vue').DefineComponent<import('vue').ExtractP
     class: PropType<string>;
     ariaLabelledBy: PropType<string>;
     ariaDescribedBy: PropType<string>;
+    ariaLabel: PropType<string>;
     size: {
         type: PropType<"small" | "medium" | "large">;
     };

package/colors/ColorPalette.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"),U=require("./utils/color-palette.service.js"),t=require("@progress/kendo-vue-common"),D=require("../package-metadata.js"),F=require("./models/palette-presets.js"),I=require("./utils/misc.js"),K=require("./utils/color-parser.js"),C=10,$="office",L=a.defineComponent({name:"KendoColorPalette",model:{event:"changemodel"},emits:{keydown:e=>!0,focus:e=>!0,blur:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,change:e=>!0},props:{palette:{type:[String,Array],default:$},columns:Number,tileSize:{type:[Number,Object]},modelValue:String,modelRgbaValue:String,defaultValue:String,value:String,disabled:Boolean,tabIndex:Number,id:String,class:String,ariaLabelledBy:String,ariaDescribedBy:String,size:{type:[String,null]}},created(){t.validatePackage(D.packageMetadata),this.guid=t.guid()},mounted(){this.wrapper=t.getRef(this,"wrapper")},updated(){this.wrapper=t.getRef(this,"wrapper")},computed:{focusedColorCooridanates(){return this.focusedColor?this.paletteService.getCellCoordsFor(this.focusedColor):void 0},isUncontrolled(){return this.$props.value===void 0},selectedColor(){return this.$props.value!==void 0?this.$props.value:this.modelValue!==void 0?this.modelValue:this.modelRgbaValue!==void 0?this.modelRgbaValue:this.currentValue!==void 0?this.currentValue:this.$props.defaultValue}},data(){return{focusedColor:this.$props.value,currentValue:void 0}},render(){const{size:e,disabled:s,class:o,tileSize:r}=this.$props,p=this.getPaletteInfo(),d=this.paletteService=new U.ColorPaletteService;d.setColorMatrix(p.colors,p.columns);const w=d.getCellCoordsFor(this.selectedColor),f=d.getCellCoordsFor(this.focusedColor),k=t.classNames("k-colorpalette",{[`k-colorpalette-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-disabled":s},o),S=function(g,n,i,l){const c=i!==void 0&&i.row===n,V=i&&i.col,N=l!==void 0&&l.row===n,E=l&&l.col,u=typeof r!="number"?r:{width:r,height:r},b=u?u.width+"px":void 0,P=u?u.height+"px":void 0;return g.map(function(m,h){const y=c&&V===h,R=t.classNames("k-colorpalette-tile",{"k-selected":y,"k-focus":N&&E===h});return a.createVNode("td",{class:R,"aria-label":m,"aria-selected":y?!0:this.$props.disabled?void 0:!1,style:{backgroundColor:m,width:b,height:P,minWidth:b},onClick:T=>this.onColorClick(m,T),id:this.createCellId({row:n,col:h}),key:h,role:"gridcell"},null)},this)},v=function(g,n,i){return g.map(function(l,c){return a.createVNode("tr",{role:"row",key:c},[S.call(this,l,c,n,i)])},this)};return p.colors.length?a.createVNode("div",{id:this.$props.id,class:k,onFocusin:this.onFocus,onFocusout:this.onBlur,onKeydown:this.onKeyDown,"aria-disabled":this.$props.disabled?"true":void 0,"aria-activedescendant":f&&this.createCellId(f),"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,role:"grid",tabindex:t.getTabIndex(this.$props.tabIndex,this.$props.disabled),ref:t.setRef(this,"wrapper")},[a.createVNode("table",{class:"k-colorpalette-table k-palette",role:"presentation"},[a.createVNode("tbody",null,[v.call(this,d.colorRows,w,f)])])]):""},methods:{focus(){this.wrapper&&this.wrapper.focus()},onKeyDown(e){switch(e.keyCode){case t.Keys.down:this.handleCellNavigation(e,0,1);break;case t.Keys.up:this.handleCellNavigation(e,0,-1);break;case t.Keys.right:this.handleCellNavigation(e,1,0);break;case t.Keys.left:this.handleCellNavigation(e,-1,0);break;case t.Keys.enter:this.handleEnter(e);break;default:this.$emit("keydown",e);return}this.$emit("keydown",e)},onColorClick(e,s){this.isUncontrolled?(this.currentValue=e,this.focusedColor=e):this.focusedColor=e,this.dispatchChangeEvent(e,s)},onFocus(e){this.focusedColor=this.selectedColor||this.paletteService.colorRows[0][0],this.$emit("focus",{event:e,target:this})},onBlur(e){this.focusedColor=void 0,this.$emit("blur",{event:e,target:this})},handleCellNavigation(e,s,o){if(e.preventDefault(),this.focusedColorCooridanates){const r=this.paletteService.getNextCell(this.focusedColorCooridanates,s,o);this.focusedColor=this.paletteService.getColorAt(r)}else this.focusedColor=this.paletteService.colorRows[0][0]},handleEnter(e){this.isUncontrolled&&(this.currentValue=this.focusedColor),this.dispatchChangeEvent(this.focusedColor,e)},dispatchChangeEvent(e,s){const o=K.parseColor(e,"rgba");this.$emit("changemodel",e),this.$emit("update:modelValue",e),this.$emit("update:modelRgbaValue",o),this.$emit("change",{event:s,component:this,value:e,rgbaValue:o})},getPaletteInfo(){if(typeof this.$props.palette=="string"){const e=F.PALETTEPRESETS[this.$props.palette];return I.isPresent(e)?{colors:e.colors,columns:this.$props.columns||e.columns||C}:{colors:[],columns:0}}else return{colors:this.$props.palette||[],columns:this.$props.columns||C}},createCellId(e){return`${this.guid}_${e.row}_${e.col}`}}});exports.ColorPalette=L;exports.DEFAULT_COLUMNS_COUNT=C;exports.DEFAULT_PRESET=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),L=require("./utils/color-palette.service.js"),t=require("@progress/kendo-vue-common"),U=require("../package-metadata.js"),D=require("./models/palette-presets.js"),F=require("./utils/misc.js"),I=require("./utils/color-parser.js"),C=10,$="office",K=a.defineComponent({name:"KendoColorPalette",model:{event:"changemodel"},emits:{keydown:e=>!0,focus:e=>!0,blur:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,change:e=>!0},props:{palette:{type:[String,Array],default:$},columns:Number,tileSize:{type:[Number,Object]},modelValue:String,modelRgbaValue:String,defaultValue:String,value:String,disabled:Boolean,tabIndex:Number,id:String,class:String,ariaLabelledBy:String,ariaDescribedBy:String,ariaLabel:String,size:{type:[String,null]}},created(){t.validatePackage(U.packageMetadata),this.guid=t.guid()},mounted(){this.wrapper=t.getRef(this,"wrapper")},updated(){this.wrapper=t.getRef(this,"wrapper")},computed:{focusedColorCooridanates(){return this.focusedColor?this.paletteService.getCellCoordsFor(this.focusedColor):void 0},isUncontrolled(){return this.$props.value===void 0},selectedColor(){return this.$props.value!==void 0?this.$props.value:this.modelValue!==void 0?this.modelValue:this.modelRgbaValue!==void 0?this.modelRgbaValue:this.currentValue!==void 0?this.currentValue:this.$props.defaultValue}},data(){return{focusedColor:this.$props.value,currentValue:void 0}},render(){const{size:e,disabled:s,class:o,tileSize:r}=this.$props,p=this.getPaletteInfo(),d=this.paletteService=new L.ColorPaletteService;d.setColorMatrix(p.colors,p.columns);const w=d.getCellCoordsFor(this.selectedColor),f=d.getCellCoordsFor(this.focusedColor),S=t.classNames("k-colorpalette",{[`k-colorpalette-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-disabled":s},o),k=function(g,n,i,l){const c=i!==void 0&&i.row===n,V=i&&i.col,N=l!==void 0&&l.row===n,E=l&&l.col,u=typeof r!="number"?r:{width:r,height:r},b=u?u.width+"px":void 0,P=u?u.height+"px":void 0;return g.map(function(m,h){const y=c&&V===h,R=t.classNames("k-colorpalette-tile",{"k-selected":y,"k-focus":N&&E===h});return a.createVNode("td",{class:R,"aria-label":m,"aria-selected":y?!0:void 0,style:{backgroundColor:m,width:b,height:P,minWidth:b},onClick:T=>this.onColorClick(m,T),id:this.createCellId({row:n,col:h}),key:h,role:"gridcell"},null)},this)},v=function(g,n,i){return g.map(function(l,c){return a.createVNode("tr",{role:"row",key:c},[k.call(this,l,c,n,i)])},this)};return p.colors.length?a.createVNode("div",{id:this.$props.id,class:S,onFocusin:this.onFocus,onFocusout:this.onBlur,onKeydown:this.onKeyDown,"aria-disabled":this.$props.disabled?"true":void 0,"aria-activedescendant":f&&this.createCellId(f),"aria-labelledby":this.$props.ariaLabelledBy,"aria-label":this.$props.ariaLabel,"aria-describedby":this.$props.ariaDescribedBy,role:"grid",tabindex:t.getTabIndex(this.$props.tabIndex,this.$props.disabled),ref:t.setRef(this,"wrapper")},[a.createVNode("table",{class:"k-colorpalette-table",role:"none"},[a.createVNode("tbody",null,[v.call(this,d.colorRows,w,f)])])]):""},methods:{focus(){this.wrapper&&this.wrapper.focus()},onKeyDown(e){switch(e.keyCode){case t.Keys.down:this.handleCellNavigation(e,0,1);break;case t.Keys.up:this.handleCellNavigation(e,0,-1);break;case t.Keys.right:this.handleCellNavigation(e,1,0);break;case t.Keys.left:this.handleCellNavigation(e,-1,0);break;case t.Keys.enter:this.handleEnter(e);break;default:this.$emit("keydown",e);return}this.$emit("keydown",e)},onColorClick(e,s){this.isUncontrolled?(this.currentValue=e,this.focusedColor=e):this.focusedColor=e,this.dispatchChangeEvent(e,s)},onFocus(e){this.focusedColor=this.selectedColor||this.paletteService.colorRows[0][0],this.$emit("focus",{event:e,target:this})},onBlur(e){this.focusedColor=void 0,this.$emit("blur",{event:e,target:this})},handleCellNavigation(e,s,o){if(e.preventDefault(),this.focusedColorCooridanates){const r=this.paletteService.getNextCell(this.focusedColorCooridanates,s,o);this.focusedColor=this.paletteService.getColorAt(r)}else this.focusedColor=this.paletteService.colorRows[0][0]},handleEnter(e){this.isUncontrolled&&(this.currentValue=this.focusedColor),this.dispatchChangeEvent(this.focusedColor,e)},dispatchChangeEvent(e,s){const o=I.parseColor(e,"rgba");this.$emit("changemodel",e),this.$emit("update:modelValue",e),this.$emit("update:modelRgbaValue",o),this.$emit("change",{event:s,component:this,value:e,rgbaValue:o})},getPaletteInfo(){if(typeof this.$props.palette=="string"){const e=D.PALETTEPRESETS[this.$props.palette];return F.isPresent(e)?{colors:e.colors,columns:this.$props.columns||e.columns||C}:{colors:[],columns:0}}else return{colors:this.$props.palette||[],columns:this.$props.columns||C}},createCellId(e){return`${this.guid}_${e.row}_${e.col}`}}});exports.ColorPalette=K;exports.DEFAULT_COLUMNS_COUNT=C;exports.DEFAULT_PRESET=$;

package/colors/ColorPalette.mjs

@@ -5,14 +5,14 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as x, createVNode as a } from "vue";
-import { ColorPaletteService as B } from "./utils/color-palette.service.mjs";
-import { Keys as n, classNames as $, kendoThemeMaps as D, setRef as F, getTabIndex as U, getRef as w, validatePackage as z, guid as L } from "@progress/kendo-vue-common";
+import { defineComponent as L, createVNode as a } from "vue";
+import { ColorPaletteService as x } from "./utils/color-palette.service.mjs";
+import { Keys as n, classNames as $, kendoThemeMaps as B, setRef as D, getTabIndex as F, getRef as w, validatePackage as U, guid as z } from "@progress/kendo-vue-common";
 import { packageMetadata as A } from "../package-metadata.mjs";
 import { PALETTEPRESETS as K } from "./models/palette-presets.mjs";
 import { isPresent as M } from "./utils/misc.mjs";
 import { parseColor as _ } from "./utils/color-parser.mjs";
-const k = 10, O = "office", X = /* @__PURE__ */ x({
+const k = 10, O = "office", X = /* @__PURE__ */ L({
   name: "KendoColorPalette",
   model: {
     event: "changemodel"
@@ -45,12 +45,13 @@ const k = 10, O = "office", X = /* @__PURE__ */ x({
     class: String,
     ariaLabelledBy: String,
     ariaDescribedBy: String,
+    ariaLabel: String,
     size: {
       type: [String, null]
     }
   },
   created() {
-    z(A), this.guid = L();
+    U(A), this.guid = z();
   },
   mounted() {
     this.wrapper = w(this, "wrapper");
@@ -81,12 +82,12 @@ const k = 10, O = "office", X = /* @__PURE__ */ x({
       disabled: t,
       class: o,
       tileSize: s
-    } = this.$props, p = this.getPaletteInfo(), d = this.paletteService = new B();
+    } = this.$props, p = this.getPaletteInfo(), d = this.paletteService = new x();
     d.setColorMatrix(p.colors, p.columns);
-    const y = d.getCellCoordsFor(this.selectedColor), f = d.getCellCoordsFor(this.focusedColor), v = $("k-colorpalette", {
-      [`k-colorpalette-${D.sizeMap[e] || e}`]: e,
+    const y = d.getCellCoordsFor(this.selectedColor), f = d.getCellCoordsFor(this.focusedColor), S = $("k-colorpalette", {
+      [`k-colorpalette-${B.sizeMap[e] || e}`]: e,
       "k-disabled": t
-    }, o), S = function(m, l, r, i) {
+    }, o), v = function(m, l, r, i) {
       const u = r !== void 0 && r.row === l, N = r && r.col, E = i !== void 0 && i.row === l, R = i && i.col, c = typeof s != "number" ? s : {
         width: s,
         height: s
@@ -99,7 +100,7 @@ const k = 10, O = "office", X = /* @__PURE__ */ x({
         return a("td", {
           class: I,
           "aria-label": g,
-          "aria-selected": b ? !0 : this.$props.disabled ? void 0 : !1,
+          "aria-selected": b ? !0 : void 0,
           style: {
             backgroundColor: g,
             width: C,
@@ -120,25 +121,26 @@ const k = 10, O = "office", X = /* @__PURE__ */ x({
         return a("tr", {
           role: "row",
           key: u
-        }, [S.call(this, i, u, l, r)]);
+        }, [v.call(this, i, u, l, r)]);
       }, this);
     };
     return p.colors.length ? a("div", {
       id: this.$props.id,
-      class: v,
+      class: S,
       onFocusin: this.onFocus,
       onFocusout: this.onBlur,
       onKeydown: this.onKeyDown,
       "aria-disabled": this.$props.disabled ? "true" : void 0,
       "aria-activedescendant": f && this.createCellId(f),
       "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-label": this.$props.ariaLabel,
       "aria-describedby": this.$props.ariaDescribedBy,
       role: "grid",
-      tabindex: U(this.$props.tabIndex, this.$props.disabled),
-      ref: F(this, "wrapper")
+      tabindex: F(this.$props.tabIndex, this.$props.disabled),
+      ref: D(this, "wrapper")
     }, [a("table", {
-      class: "k-colorpalette-table k-palette",
-      role: "presentation"
+      class: "k-colorpalette-table",
+      role: "none"
     }, [a("tbody", null, [V.call(this, d.colorRows, y, f)])])]) : "";
   },
   methods: {

package/colors/FlatColorPicker.d.ts

@@ -100,6 +100,10 @@ export interface FlatColorPickerProps {
      * The event handler that will be fired when the user edits the value.
      */
     onChange?: (event: ColorPickerChangeEvent) => void;
+    /**
+     * Specifies the aria-label attribute of the FlatColorPicker.
+     */
+    ariaLabel?: string;
     /**
      * @hidden
      * Internal prop that determines whether the ColorGradient is in adaptive state.
@@ -171,6 +175,7 @@ declare const FlatColorPicker: import('vue').DefineComponent<import('vue').Extra
     size: {
         type: PropType<"small" | "medium" | "large">;
     };
+    ariaLabel: PropType<string>;
     adaptive: PropType<boolean>;
 }>, {}, {
     currentView: string;
@@ -263,6 +268,7 @@ declare const FlatColorPicker: import('vue').DefineComponent<import('vue').Extra
     size: {
         type: PropType<"small" | "medium" | "large">;
     };
+    ariaLabel: PropType<string>;
     adaptive: PropType<boolean>;
 }>> & Readonly<{
     onBlur?: (event: FlatColorPickerBlurEvent) => any;

package/colors/FlatColorPicker.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"),d=require("@progress/kendo-svg-icons"),o=require("@progress/kendo-vue-common"),i=require("@progress/kendo-vue-buttons"),u=require("./ColorPalette.js"),w=require("./ColorGradient.js"),y=require("../package-metadata.js"),a=require("../messages/main.js"),B=require("./utils/color-parser.js"),P=require("./utils/color-cache.js"),S=require("@progress/kendo-vue-intl");function h(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const I=t.defineComponent({name:"KendoFlatColorPicker",emits:{viewchange:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,focus:e=>!0,blur:e=>!0,focusout:e=>!0,keydown:e=>!0,change:e=>!0},props:{modelValue:String,modelRgbaValue:String,value:String,prevValue:String,tabIndex:Number,disabled:Boolean,view:{type:String,default:"combo",validator:function(e){return["gradient","palette","combo"].includes(e)}},selectedView:{type:Number,default:void 0},header:[String,Function,Object],footer:[String,Function,Object],showClearButton:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!0},showButtons:{type:Boolean,default:!0},gradientSettings:{type:Object,default:function(){return P.DEFAULT_GRADIENT_SETTINGS}},paletteSettings:{type:Object,default:function(){return{palette:u.DEFAULT_PRESET}}},size:{type:String},adaptive:Boolean},inject:{kendoLocalizationService:{default:null}},created(){o.validatePackage(y.packageMetadata)},computed:{isColorGradient(){return this.view!=="combo"?this.view==="gradient":this.selectedView!==void 0?this.selectedView===0:this.currentView==="gradient"},computedColor(){return this.value!==void 0?this.value:this.modelValue!==void 0?this.modelValue:this.modelRgbaValue!==void 0?this.modelRgbaValue:this.colorValue},computedPrevColor(){return this.prevValue!==void 0?this.prevValue:this.currentPrevColor},previewClass(){return{"k-coloreditor-preview-color":!0,"k-color-preview":!0,"k-no-color":!this.colorValue}},currentClass(){return{"k-coloreditor-current-color":!0,"k-color-preview":!0,"k-no-color":!this.computedPrevColor}},computedTabIndex(){return this.focused?0:-1}},data(){const e=this.value||this.defaultValue||this.modelValue||this.modelRgbaValue;return{currentView:"gradient",colorValue:e,currentPrevColor:e,focused:!1}},render(){const{size:e,adaptive:r}=this.$props,n=S.provideLocalizationService(this),p=n.toLanguageString(a.flatColorPickerGradientBtn,a.messages[a.flatColorPickerGradientBtn]),g=n.toLanguageString(a.flatColorPickerPaletteBtn,a.messages[a.flatColorPickerPaletteBtn]),C=n.toLanguageString(a.flatColorPickerClearBtn,a.messages[a.flatColorPickerClearBtn]),l=n.toLanguageString(a.flatColorPickerCancelBtn,a.messages[a.flatColorPickerCancelBtn]),s=n.toLanguageString(a.flatColorPickerApplyBtn,a.messages[a.flatColorPickerApplyBtn]),k=o.templateRendering.call(this,this.$props.header,o.getListeners.call(this)),f=o.templateRendering.call(this,this.$props.footer,o.getListeners.call(this)),m=o.getTemplate.call(this,{h:t.h,template:k}),v=o.getTemplate.call(this,{h:t.h,template:f}),V=function(){return t.h(w.ColorGradient,{ref:o.setRef(this,"gradient"),tabIndex:-1,value:this.colorValue,innerTabIndex:this.computedTabIndex,size:e,onChange:this.handleColorChange,onKeydown:this.innerKeyDown,adaptive:r,...this.gradientSettings})},b=function(){return t.h(u.ColorPalette,{ref:o.setRef(this,"palette"),tabIndex:this.computedTabIndex,value:this.colorValue,size:e,onChange:this.handlePaletteColorChange,onKeydown:this.gradientKeyDown,...this.paletteSettings})};return t.createVNode("div",{tabindex:o.getTabIndex(this.$props.tabIndex,this.$props.disabled),onFocus:this.onFocus,onBlur:this.onBlur,onFocusout:this.onFocusout,onKeydown:this.onKeyDownHandler,class:o.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${o.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-disabled":this.$props.disabled}),"aria-disabled":this.$props.disabled},[m,this.$props.showClearButton&&this.$props.showPreview&&t.createVNode("div",{class:"k-coloreditor-header k-hstack"},[this.$props.view==="combo"&&t.createVNode("div",{class:"k-coloreditor-header-actions k-hstack"},[t.createVNode(i.ButtonGroup,{class:"k-button-group-flat"},{default:()=>[t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",togglable:!0,fillMode:"flat",selected:this.isColorGradient,onKeydown:this.handleButtonKeydown,ariaLabel:p,size:e,onClick:c=>this.handleViewChange(c,"gradient")},{default:()=>[t.createVNode(o.Icon,{size:e,name:"droplet-slider",icon:d.dropletSliderIcon},null)]}),t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",togglable:!0,fillMode:"flat",selected:!this.isColorGradient,onKeydown:this.handleButtonKeydown,ariaLabel:g,size:e,onClick:c=>this.handleViewChange(c,"palette")},{default:()=>[t.createVNode(o.Icon,{size:e,name:"palette",icon:d.paletteIcon},null)]})]})]),t.createVNode("div",{class:"k-spacer"},null),t.createVNode("div",{class:"k-coloreditor-header-actions k-hstack"},[this.$props.showClearButton&&t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",fillMode:"flat",ariaLabel:C,size:e,onKeydown:this.handleButtonKeydown,onClick:this.handleResetColor},{default:()=>[t.createVNode(o.Icon,{size:e,name:"droplet-slash",icon:d.dropletSlashIcon},null)]}),this.$props.showPreview&&t.createVNode("div",{class:"k-coloreditor-preview k-vstack"},[t.createVNode("span",{class:this.previewClass,style:{background:this.colorValue}},[!this.colorValue&&t.createVNode("span",{class:"k-color-preview-mask"},null)]),t.createVNode("span",{class:this.currentClass,style:{background:this.computedPrevColor},onClick:this.handlePrevColorClick},[!this.computedPrevColor&&t.createVNode("span",{class:"k-color-preview-mask"},null)])])])]),t.createVNode("div",{class:"k-coloreditor-views k-vstack"},[this.isColorGradient?V.call(this):b.call(this)]),this.$props.showButtons&&t.createVNode("div",{class:"k-coloreditor-footer k-actions k-actions-end"},[t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-cancel",size:e,onKeydown:this.handleButtonKeydown,onClick:this.handleCancelBtnClick},h(l)?l:{default:()=>[l]}),t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-apply k-primary",size:e,onKeydown:this.handleButtonKeydown,onClick:this.triggerChange},h(s)?s:{default:()=>[s]})]),v])},methods:{focus(){this.focused=!0,setTimeout(()=>{o.focusFirstFocusableChild(this.$el)},1)},onKeyDownHandler(e){const r=this.$el;this.focused=o.focusContainer(e,r),this.$emit("keydown",e)},handleViewChange(e,r){this.currentView=r,this.$emit("viewchange",{event:e,viewType:r})},handleResetColor(){this.colorValue=null,!this.showButtons&&!this.adaptive&&this.triggerChange()},handleColorChange(e){this.colorValue=e.value,!this.showButtons&&!this.adaptive&&this.triggerChange(e)},handlePaletteColorChange(e){this.colorValue=e.value,!this.showButtons&&!this.adaptive&&this.triggerChange(e)},triggerChange(e){const r=B.parseColor(this.colorValue,"rgba");this.currentPrevColor=this.colorValue,this.$emit("changemodel",this.colorValue),this.$emit("update:modelValue",this.colorValue),this.$emit("update:modelRgbaValue",r),this.$emit("change",{event:e,value:this.colorValue,rgbaValue:r})},innerKeyDown(e){e.keyCode===o.Keys.enter&&this.triggerChange(e)},gradientKeyDown(e){e.stopPropagation(),!this.showButtons&&e.keyCode===o.Keys.enter&&this.triggerChange(e)},handleButtonKeydown(e){e.keyCode===o.Keys.enter&&e.stopPropagation()},handleCancelBtnClick(){this.colorValue=this.computedPrevColor},handlePrevColorClick(){this.colorValue=this.computedPrevColor},onFocus(e){this.$emit("focus",{event:e,target:this})},onBlur(e){this.$emit("blur",{event:e,target:this})},onFocusout(e){this.$emit("focusout",{event:e,target:this})}}});exports.FlatColorPicker=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),d=require("@progress/kendo-svg-icons"),o=require("@progress/kendo-vue-common"),i=require("@progress/kendo-vue-buttons"),u=require("./ColorPalette.js"),w=require("./ColorGradient.js"),y=require("../package-metadata.js"),a=require("../messages/main.js"),B=require("./utils/color-parser.js"),P=require("./utils/color-cache.js"),S=require("@progress/kendo-vue-intl");function h(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const I=t.defineComponent({name:"KendoFlatColorPicker",emits:{viewchange:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,focus:e=>!0,blur:e=>!0,focusout:e=>!0,keydown:e=>!0,change:e=>!0},props:{modelValue:String,modelRgbaValue:String,value:String,prevValue:String,tabIndex:Number,disabled:Boolean,view:{type:String,default:"combo",validator:function(e){return["gradient","palette","combo"].includes(e)}},selectedView:{type:Number,default:void 0},header:[String,Function,Object],footer:[String,Function,Object],showClearButton:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!0},showButtons:{type:Boolean,default:!0},gradientSettings:{type:Object,default:function(){return P.DEFAULT_GRADIENT_SETTINGS}},paletteSettings:{type:Object,default:function(){return{palette:u.DEFAULT_PRESET}}},size:{type:String},ariaLabel:String,adaptive:Boolean},inject:{kendoLocalizationService:{default:null}},created(){o.validatePackage(y.packageMetadata)},computed:{isColorGradient(){return this.view!=="combo"?this.view==="gradient":this.selectedView!==void 0?this.selectedView===0:this.currentView==="gradient"},computedColor(){return this.value!==void 0?this.value:this.modelValue!==void 0?this.modelValue:this.modelRgbaValue!==void 0?this.modelRgbaValue:this.colorValue},computedPrevColor(){return this.prevValue!==void 0?this.prevValue:this.currentPrevColor},previewClass(){return{"k-coloreditor-preview-color":!0,"k-color-preview":!0,"k-no-color":!this.colorValue}},currentClass(){return{"k-coloreditor-current-color":!0,"k-color-preview":!0,"k-no-color":!this.computedPrevColor}},computedTabIndex(){return this.focused?0:-1}},data(){const e=this.value||this.defaultValue||this.modelValue||this.modelRgbaValue;return{currentView:"gradient",colorValue:e,currentPrevColor:e,focused:!1}},render(){const{size:e,adaptive:r}=this.$props,n=S.provideLocalizationService(this),p=n.toLanguageString(a.flatColorPickerGradientBtn,a.messages[a.flatColorPickerGradientBtn]),g=n.toLanguageString(a.flatColorPickerPaletteBtn,a.messages[a.flatColorPickerPaletteBtn]),C=n.toLanguageString(a.flatColorPickerClearBtn,a.messages[a.flatColorPickerClearBtn]),l=n.toLanguageString(a.flatColorPickerCancelBtn,a.messages[a.flatColorPickerCancelBtn]),s=n.toLanguageString(a.flatColorPickerApplyBtn,a.messages[a.flatColorPickerApplyBtn]),k=o.templateRendering.call(this,this.$props.header,o.getListeners.call(this)),f=o.templateRendering.call(this,this.$props.footer,o.getListeners.call(this)),m=o.getTemplate.call(this,{h:t.h,template:k}),v=o.getTemplate.call(this,{h:t.h,template:f}),b=function(){return t.h(w.ColorGradient,{ref:o.setRef(this,"gradient"),tabIndex:-1,value:this.colorValue,innerTabIndex:this.computedTabIndex,size:e,onChange:this.handleColorChange,onKeydown:this.innerKeyDown,adaptive:r,role:"none",...this.gradientSettings})},V=function(){return t.h(u.ColorPalette,{ref:o.setRef(this,"palette"),tabIndex:this.computedTabIndex,value:this.colorValue,size:e,onChange:this.handlePaletteColorChange,onKeydown:this.gradientKeyDown,...this.paletteSettings})};return t.createVNode("div",{tabindex:o.getTabIndex(this.$props.tabIndex,this.$props.disabled),onFocus:this.onFocus,onBlur:this.onBlur,onFocusout:this.onFocusout,onKeydown:this.onKeyDownHandler,class:o.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${o.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-disabled":this.$props.disabled}),"aria-disabled":this.$props.disabled||void 0,role:"textbox","aria-label":this.$props.ariaLabel},[m,this.$props.showClearButton&&this.$props.showPreview&&t.createVNode("div",{class:"k-coloreditor-header k-hstack"},[t.createVNode("div",{class:"k-coloreditor-header-actions k-hstack"},[this.$props.view==="combo"&&t.createVNode(i.ButtonGroup,{class:"k-button-group-flat"},{default:()=>[t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",togglable:!0,fillMode:"flat",selected:this.isColorGradient,onKeydown:this.handleButtonKeydown,ariaLabel:p,size:e,onClick:c=>this.handleViewChange(c,"gradient"),svgIcon:d.dropletSliderIcon},null),t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",togglable:!0,fillMode:"flat",selected:!this.isColorGradient,onKeydown:this.handleButtonKeydown,ariaLabel:g,size:e,onClick:c=>this.handleViewChange(c,"palette"),svgIcon:d.paletteIcon},null)]})]),t.createVNode("div",{class:"k-spacer"},null),t.createVNode("div",{class:"k-coloreditor-header-actions k-hstack"},[this.$props.showClearButton&&t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",fillMode:"flat",ariaLabel:C,svgIcon:d.dropletSlashIcon,size:e,onKeydown:this.handleButtonKeydown,onClick:this.handleResetColor},null),this.$props.showPreview&&t.createVNode("div",{class:"k-coloreditor-preview k-vstack"},[t.createVNode("span",{class:this.previewClass},[t.createVNode("span",{class:"k-color-preview-mask",style:{background:this.colorValue}},null)]),t.createVNode("span",{class:this.currentClass},[t.createVNode("span",{class:"k-color-preview-mask",style:{background:this.computedPrevColor},onClick:this.handlePrevColorClick},null)])])])]),t.createVNode("div",{class:"k-coloreditor-views k-vstack"},[this.isColorGradient?b.call(this):V.call(this)]),this.$props.showButtons&&t.createVNode("div",{class:"k-coloreditor-footer k-actions k-actions-horizontal k-actions-start"},[t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-cancel",size:e,onKeydown:this.handleButtonKeydown,onClick:this.handleCancelBtnClick},h(l)?l:{default:()=>[l]}),t.createVNode(i.Button,{tabIndex:this.computedTabIndex,type:"button",class:"k-coloreditor-apply",themeColor:"primary",size:e,onKeydown:this.handleButtonKeydown,onClick:this.triggerChange},h(s)?s:{default:()=>[s]})]),v])},methods:{focus(){this.focused=!0,setTimeout(()=>{o.focusFirstFocusableChild(this.$el)},1)},onKeyDownHandler(e){const r=this.$el;this.focused=o.focusContainer(e,r),this.$emit("keydown",e)},handleViewChange(e,r){this.currentView=r,this.$emit("viewchange",{event:e,viewType:r})},handleResetColor(){this.colorValue=null,!this.showButtons&&!this.adaptive&&this.triggerChange()},handleColorChange(e){this.colorValue=e.value,!this.showButtons&&!this.adaptive&&this.triggerChange(e)},handlePaletteColorChange(e){this.colorValue=e.value,!this.showButtons&&!this.adaptive&&this.triggerChange(e)},triggerChange(e){const r=B.parseColor(this.colorValue,"rgba");this.currentPrevColor=this.colorValue,this.$emit("changemodel",this.colorValue),this.$emit("update:modelValue",this.colorValue),this.$emit("update:modelRgbaValue",r),this.$emit("change",{event:e,value:this.colorValue,rgbaValue:r})},innerKeyDown(e){e.keyCode===o.Keys.enter&&this.triggerChange(e)},gradientKeyDown(e){e.stopPropagation(),!this.showButtons&&e.keyCode===o.Keys.enter&&this.triggerChange(e)},handleButtonKeydown(e){e.keyCode===o.Keys.enter&&e.stopPropagation()},handleCancelBtnClick(){this.colorValue=this.computedPrevColor},handlePrevColorClick(){this.colorValue=this.computedPrevColor},onFocus(e){this.$emit("focus",{event:e,target:this})},onBlur(e){this.$emit("blur",{event:e,target:this})},onFocusout(e){this.$emit("focusout",{event:e,target:this})}}});exports.FlatColorPicker=I;