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

package/colors/FlatColorPicker.mjs

@@ -5,21 +5,21 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as T, h as l, createVNode as t, isVNode as z } from "vue";
-import { dropletSliderIcon as F, paletteIcon as L, dropletSlashIcon as R } from "@progress/kendo-svg-icons";
-import { Keys as c, focusContainer as M, focusFirstFocusableChild as G, templateRendering as h, getListeners as p, getTemplate as g, classNames as D, kendoThemeMaps as j, getTabIndex as N, Icon as u, validatePackage as E, setRef as m } from "@progress/kendo-vue-common";
-import { ButtonGroup as O, Button as a } from "@progress/kendo-vue-buttons";
-import { DEFAULT_PRESET as A, ColorPalette as _ } from "./ColorPalette.mjs";
-import { ColorGradient as H } from "./ColorGradient.mjs";
-import { packageMetadata as U } from "../package-metadata.mjs";
-import { flatColorPickerGradientBtn as f, messages as r, flatColorPickerPaletteBtn as C, flatColorPickerClearBtn as k, flatColorPickerCancelBtn as v, flatColorPickerApplyBtn as b } from "../messages/main.mjs";
-import { parseColor as q } from "./utils/color-parser.mjs";
-import { DEFAULT_GRADIENT_SETTINGS as J } from "./utils/color-cache.mjs";
-import { provideLocalizationService as Q } from "@progress/kendo-vue-intl";
-function w(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !z(e);
+import { defineComponent as K, h as l, createVNode as t, isVNode as T } from "vue";
+import { dropletSliderIcon as L, paletteIcon as z, dropletSlashIcon as F } from "@progress/kendo-svg-icons";
+import { Keys as c, focusContainer as R, focusFirstFocusableChild as M, templateRendering as u, getListeners as h, getTemplate as p, classNames as G, kendoThemeMaps as D, getTabIndex as j, validatePackage as N, setRef as g } from "@progress/kendo-vue-common";
+import { ButtonGroup as E, Button as a } from "@progress/kendo-vue-buttons";
+import { DEFAULT_PRESET as O, ColorPalette as A } from "./ColorPalette.mjs";
+import { ColorGradient as _ } from "./ColorGradient.mjs";
+import { packageMetadata as H } from "../package-metadata.mjs";
+import { flatColorPickerGradientBtn as m, messages as r, flatColorPickerPaletteBtn as f, flatColorPickerClearBtn as C, flatColorPickerCancelBtn as v, flatColorPickerApplyBtn as b } from "../messages/main.mjs";
+import { parseColor as U } from "./utils/color-parser.mjs";
+import { DEFAULT_GRADIENT_SETTINGS as q } from "./utils/color-cache.mjs";
+import { provideLocalizationService as J } from "@progress/kendo-vue-intl";
+function k(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !T(e);
 }
-const ne = /* @__PURE__ */ T({
+const le = /* @__PURE__ */ K({
   name: "KendoFlatColorPicker",
   emits: {
     viewchange: (e) => !0,
@@ -67,20 +67,21 @@ const ne = /* @__PURE__ */ T({
     gradientSettings: {
       type: Object,
       default: function() {
-        return J;
+        return q;
       }
     },
     paletteSettings: {
       type: Object,
       default: function() {
         return {
-          palette: A
+          palette: O
         };
       }
     },
     size: {
       type: String
     },
+    ariaLabel: String,
     adaptive: Boolean
   },
   inject: {
@@ -89,7 +90,7 @@ const ne = /* @__PURE__ */ T({
     }
   },
   created() {
-    E(U);
+    N(H);
   },
   computed: {
     isColorGradient() {
@@ -132,15 +133,15 @@ const ne = /* @__PURE__ */ T({
     const {
       size: e,
       adaptive: o
-    } = this.$props, i = Q(this), y = i.toLanguageString(f, r[f]), V = i.toLanguageString(C, r[C]), B = i.toLanguageString(k, r[k]), n = i.toLanguageString(v, r[v]), s = i.toLanguageString(b, r[b]), P = h.call(this, this.$props.header, p.call(this)), S = h.call(this, this.$props.footer, p.call(this)), I = g.call(this, {
+    } = this.$props, i = J(this), w = i.toLanguageString(m, r[m]), y = i.toLanguageString(f, r[f]), V = i.toLanguageString(C, r[C]), n = i.toLanguageString(v, r[v]), s = i.toLanguageString(b, r[b]), B = u.call(this, this.$props.header, h.call(this)), P = u.call(this, this.$props.footer, h.call(this)), S = p.call(this, {
       h: l,
-      template: P
-    }), $ = g.call(this, {
+      template: B
+    }), I = p.call(this, {
       h: l,
-      template: S
-    }), K = function() {
-      return l(H, {
-        ref: m(this, "gradient"),
+      template: P
+    }), $ = function() {
+      return l(_, {
+        ref: g(this, "gradient"),
         tabIndex: -1,
         value: this.colorValue,
         innerTabIndex: this.computedTabIndex,
@@ -148,11 +149,12 @@ const ne = /* @__PURE__ */ T({
         onChange: this.handleColorChange,
         onKeydown: this.innerKeyDown,
         adaptive: o,
+        role: "none",
         ...this.gradientSettings
       });
     }, x = function() {
-      return l(_, {
-        ref: m(this, "palette"),
+      return l(A, {
+        ref: g(this, "palette"),
         tabIndex: this.computedTabIndex,
         value: this.colorValue,
         size: e,
@@ -162,21 +164,23 @@ const ne = /* @__PURE__ */ T({
       });
     };
     return t("div", {
-      tabindex: N(this.$props.tabIndex, this.$props.disabled),
+      tabindex: j(this.$props.tabIndex, this.$props.disabled),
       onFocus: this.onFocus,
       onBlur: this.onBlur,
       onFocusout: this.onFocusout,
       onKeydown: this.onKeyDownHandler,
-      class: D("k-flatcolorpicker k-coloreditor", {
-        [`k-coloreditor-${j.sizeMap[e] || e}`]: e,
+      class: G("k-flatcolorpicker k-coloreditor", {
+        [`k-coloreditor-${D.sizeMap[e] || e}`]: e,
         "k-disabled": this.$props.disabled
       }),
-      "aria-disabled": this.$props.disabled
-    }, [I, this.$props.showClearButton && this.$props.showPreview && t("div", {
+      "aria-disabled": this.$props.disabled || void 0,
+      role: "textbox",
+      "aria-label": this.$props.ariaLabel
+    }, [S, this.$props.showClearButton && this.$props.showPreview && t("div", {
       class: "k-coloreditor-header k-hstack"
-    }, [this.$props.view === "combo" && t("div", {
+    }, [t("div", {
       class: "k-coloreditor-header-actions k-hstack"
-    }, [t(O, {
+    }, [this.$props.view === "combo" && t(E, {
       class: "k-button-group-flat"
     }, {
       default: () => [t(a, {
@@ -186,32 +190,22 @@ const ne = /* @__PURE__ */ T({
         fillMode: "flat",
         selected: this.isColorGradient,
         onKeydown: this.handleButtonKeydown,
-        ariaLabel: y,
+        ariaLabel: w,
         size: e,
-        onClick: (d) => this.handleViewChange(d, "gradient")
-      }, {
-        default: () => [t(u, {
-          size: e,
-          name: "droplet-slider",
-          icon: F
-        }, null)]
-      }), t(a, {
+        onClick: (d) => this.handleViewChange(d, "gradient"),
+        svgIcon: L
+      }, null), t(a, {
         tabIndex: this.computedTabIndex,
         type: "button",
         togglable: !0,
         fillMode: "flat",
         selected: !this.isColorGradient,
         onKeydown: this.handleButtonKeydown,
-        ariaLabel: V,
+        ariaLabel: y,
         size: e,
-        onClick: (d) => this.handleViewChange(d, "palette")
-      }, {
-        default: () => [t(u, {
-          size: e,
-          name: "palette",
-          icon: L
-        }, null)]
-      })]
+        onClick: (d) => this.handleViewChange(d, "palette"),
+        svgIcon: z
+      }, null)]
     })]), t("div", {
       class: "k-spacer"
     }, null), t("div", {
@@ -220,37 +214,32 @@ const ne = /* @__PURE__ */ T({
       tabIndex: this.computedTabIndex,
       type: "button",
       fillMode: "flat",
-      ariaLabel: B,
+      ariaLabel: V,
+      svgIcon: F,
       size: e,
       onKeydown: this.handleButtonKeydown,
       onClick: this.handleResetColor
-    }, {
-      default: () => [t(u, {
-        size: e,
-        name: "droplet-slash",
-        icon: R
-      }, null)]
-    }), this.$props.showPreview && t("div", {
+    }, null), this.$props.showPreview && t("div", {
       class: "k-coloreditor-preview k-vstack"
     }, [t("span", {
-      class: this.previewClass,
+      class: this.previewClass
+    }, [t("span", {
+      class: "k-color-preview-mask",
       style: {
         background: this.colorValue
       }
-    }, [!this.colorValue && t("span", {
-      class: "k-color-preview-mask"
     }, null)]), t("span", {
-      class: this.currentClass,
+      class: this.currentClass
+    }, [t("span", {
+      class: "k-color-preview-mask",
       style: {
         background: this.computedPrevColor
       },
       onClick: this.handlePrevColorClick
-    }, [!this.computedPrevColor && t("span", {
-      class: "k-color-preview-mask"
     }, null)])])])]), t("div", {
       class: "k-coloreditor-views k-vstack"
-    }, [this.isColorGradient ? K.call(this) : x.call(this)]), this.$props.showButtons && t("div", {
-      class: "k-coloreditor-footer k-actions k-actions-end"
+    }, [this.isColorGradient ? $.call(this) : x.call(this)]), this.$props.showButtons && t("div", {
+      class: "k-coloreditor-footer k-actions k-actions-horizontal k-actions-start"
     }, [t(a, {
       tabIndex: this.computedTabIndex,
       type: "button",
@@ -258,28 +247,29 @@ const ne = /* @__PURE__ */ T({
       size: e,
       onKeydown: this.handleButtonKeydown,
       onClick: this.handleCancelBtnClick
-    }, w(n) ? n : {
+    }, k(n) ? n : {
       default: () => [n]
     }), t(a, {
       tabIndex: this.computedTabIndex,
       type: "button",
-      class: "k-coloreditor-apply k-primary",
+      class: "k-coloreditor-apply",
+      themeColor: "primary",
       size: e,
       onKeydown: this.handleButtonKeydown,
       onClick: this.triggerChange
-    }, w(s) ? s : {
+    }, k(s) ? s : {
       default: () => [s]
-    })]), $]);
+    })]), I]);
   },
   methods: {
     focus() {
       this.focused = !0, setTimeout(() => {
-        G(this.$el);
+        M(this.$el);
       }, 1);
     },
     onKeyDownHandler(e) {
       const o = this.$el;
-      this.focused = M(e, o), this.$emit("keydown", e);
+      this.focused = R(e, o), this.$emit("keydown", e);
     },
     handleViewChange(e, o) {
       this.currentView = o, this.$emit("viewchange", {
@@ -297,7 +287,7 @@ const ne = /* @__PURE__ */ T({
       this.colorValue = e.value, !this.showButtons && !this.adaptive && this.triggerChange(e);
     },
     triggerChange(e) {
-      const o = q(this.colorValue, "rgba");
+      const o = U(this.colorValue, "rgba");
       this.currentPrevColor = this.colorValue, this.$emit("changemodel", this.colorValue), this.$emit("update:modelValue", this.colorValue), this.$emit("update:modelRgbaValue", o), this.$emit("change", {
         event: e,
         value: this.colorValue,
@@ -340,5 +330,5 @@ const ne = /* @__PURE__ */ T({
   }
 });
 export {
-  ne as FlatColorPicker
+  le as FlatColorPicker
 };

package/colors/HexInput.d.ts

@@ -31,6 +31,7 @@ declare const HexInput: import('vue').DefineComponent<import('vue').ExtractPropT
 }>, {}, {
     currentHex: string;
     originalHex: string;
+    isFocused: boolean;
 }, {
     isHexValid(): boolean;
 }, {

package/colors/HexInput.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 n=require("vue"),r=require("./utils/color-parser.js"),s=require("./utils/misc.js"),o=require("../textbox/TextBox.js"),u=n.defineComponent({name:"KendoHexInput",emits:{hexchange:e=>!0,blur:e=>!0,focus:e=>!0},props:{tabIndex:Number,hex:String,disabled:Boolean,id:String,size:String},computed:{isHexValid(){return!!r.parseColor(this.currentHex,"rgba")}},data(){return{currentHex:this.$props.hex,originalHex:this.$props.hex}},mounted(){this._input=this.$refs.input._input},watch:{hex:function(e){this.currentHex=e}},render(){return n.createVNode(o.TextBox,{id:this.$props.id,value:this.currentHex,onInput:this.onChange,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,valid:this.isHexValid,disabled:this.$props.disabled,size:this.$props.size,tabIndex:this.tabIndex,ref:"input"},null)},methods:{onChange(e){const t=e.target.value,i=r.parseColor(t,"rgba");this.currentHex=t,s.isPresent(i)&&this.$emit("hexchange",{hex:t,value:i,event:e})},onBlur(e){s.isPresent(r.parseColor(this.hex,"rgba"))||(this.currentHex=this.originalHex),this.$emit("blur",{event:e})},onFocus(e){this.$emit("focus",{event:e})}}});exports.HexInput=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),s=require("./utils/color-parser.js"),n=require("./utils/misc.js"),o=require("../textbox/TextBox.js"),u=r.defineComponent({name:"KendoHexInput",emits:{hexchange:e=>!0,blur:e=>!0,focus:e=>!0},props:{tabIndex:Number,hex:String,disabled:Boolean,id:String,size:String},computed:{isHexValid(){return!!s.parseColor(this.currentHex,"rgba")}},data(){return{currentHex:this.$props.hex,originalHex:this.$props.hex,isFocused:!1}},mounted(){this._input=this.$refs.input._input},watch:{hex:function(e){this.isFocused||(this.currentHex=e)}},render(){return r.createVNode(o.TextBox,{id:this.$props.id,value:this.currentHex,onInput:this.onChange,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,valid:this.isHexValid,disabled:this.$props.disabled,size:this.$props.size,tabIndex:this.tabIndex,ref:"input"},null)},methods:{onChange(e){const t=e.target.value,i=s.parseColor(t,"rgba");this.currentHex=t,n.isPresent(i)&&this.$emit("hexchange",{hex:t,value:i,event:e})},onBlur(e){this.isFocused=!1,n.isPresent(s.parseColor(this.currentHex,"rgba"))?this.currentHex=this.hex:this.currentHex=this.originalHex,this.$emit("blur",{event:e})},onFocus(e){this.isFocused=!0,this.$emit("focus",{event:e})}}});exports.HexInput=u;

package/colors/HexInput.mjs

@@ -5,11 +5,11 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as s, createVNode as o } from "vue";
+import { defineComponent as n, createVNode as o } from "vue";
 import { parseColor as i } from "./utils/color-parser.mjs";
-import { isPresent as n } from "./utils/misc.mjs";
+import { isPresent as r } from "./utils/misc.mjs";
 import { TextBox as h } from "../textbox/TextBox.mjs";
-const d = /* @__PURE__ */ s({
+const p = /* @__PURE__ */ n({
   name: "KendoHexInput",
   emits: {
     hexchange: (e) => !0,
@@ -31,7 +31,8 @@ const d = /* @__PURE__ */ s({
   data() {
     return {
       currentHex: this.$props.hex,
-      originalHex: this.$props.hex
+      originalHex: this.$props.hex,
+      isFocused: !1
     };
   },
   mounted() {
@@ -39,7 +40,7 @@ const d = /* @__PURE__ */ s({
   },
   watch: {
     hex: function(e) {
-      this.currentHex = e;
+      this.isFocused || (this.currentHex = e);
     }
   },
   render() {
@@ -59,25 +60,25 @@ const d = /* @__PURE__ */ s({
   },
   methods: {
     onChange(e) {
-      const t = e.target.value, r = i(t, "rgba");
-      this.currentHex = t, n(r) && this.$emit("hexchange", {
+      const t = e.target.value, s = i(t, "rgba");
+      this.currentHex = t, r(s) && this.$emit("hexchange", {
         hex: t,
-        value: r,
+        value: s,
         event: e
       });
     },
     onBlur(e) {
-      n(i(this.hex, "rgba")) || (this.currentHex = this.originalHex), this.$emit("blur", {
+      this.isFocused = !1, r(i(this.currentHex, "rgba")) ? this.currentHex = this.hex : this.currentHex = this.originalHex, this.$emit("blur", {
         event: e
       });
     },
     onFocus(e) {
-      this.$emit("focus", {
+      this.isFocused = !0, this.$emit("focus", {
         event: e
       });
     }
   }
 });
 export {
-  d as HexInput
+  p as HexInput
 };

package/colors/interfaces/ColorGradientProps.d.ts

@@ -76,6 +76,10 @@ export interface ColorGradientProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Specifies the aria-label attribute of the ColorGradient.
+     */
+    ariaLabel?: string;
     /**
      * Configures the `size` of the ColorGradient.
      *
@@ -87,6 +91,11 @@ export interface ColorGradientProps {
      * @default undefined
      */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * @hidden
+     * Internal prop that sets the `role` of the ColorGradient. If not set, the role will be `textbox` when the component is focusable.
+     */
+    role?: string;
     /**
      * @hidden
      * Internal prop that determines whether the ColorGradient is in adaptive state.

package/colors/interfaces/ColorPaletteProps.d.ts

@@ -71,6 +71,10 @@ export interface ColorPaletteProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Specifies the aria-label attribute of the ColorPalette.
+     */
+    ariaLabel?: string;
     /**
      * Configures the `size` of the ColorPalette.
      *

package/colors/interfaces/ColorPickerPaletteSettings.d.ts

@@ -36,4 +36,8 @@ export interface ColorPickerPaletteSettings {
      * * `{ width: number, height: number }`
      */
     tileSize?: number | TileSize;
+    /**
+     * Specifies the aria-label attribute of the ColorPalette.
+     */
+    ariaLabel?: string;
 }