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

package/colors/ColorContrastLabels.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 e=require("vue"),p=require("@progress/kendo-vue-intl"),a=require("@progress/kendo-svg-icons"),o=require("../messages/main.js"),L=require("./utils/color-parser.js"),n=require("@progress/kendo-vue-common"),C=e.defineComponent({name:"KendoColorContrastLabels",props:{bgColor:Object,rgba:Object},inject:{kendoLocalizationService:{default:null}},render(){const t=p.provideLocalizationService(this),d=t.toLanguageString(o.colorGradientContrastRatio,o.messages[o.colorGradientContrastRatio]),g=t.toLanguageString(o.colorGradientAALevel,o.messages[o.colorGradientAALevel]),u=t.toLanguageString(o.colorGradientAAALevel,o.messages[o.colorGradientAAALevel]),k=t.toLanguageString(o.colorGradientPass,o.messages[o.colorGradientPass]),v=t.toLanguageString(o.colorGradientFail,o.messages[o.colorGradientFail]),s=L.getContrastFromTwoRGBAs(this.$props.rgba,this.$props.bgColor),A=4.5.toFixed(1),V=7 .toFixed(1),x=`${d}: ${s.toFixed(2)}`,N=`${g}: ${A}`,m=`${u}: ${V}`,r=s>=4.5,c=s>=7,l=e.createVNode("span",{key:1,class:"k-contrast-validation k-text-success"},[k,e.createTextVNode(" "),e.createVNode(n.Icon,{name:"check",icon:a.checkIcon},null)]),i=e.createVNode("span",{key:2,class:"k-contrast-validation k-text-error"},[v,e.createTextVNode(" "),e.createVNode(n.Icon,{name:"x",icon:a.xIcon},null)]);return e.createVNode("div",{class:"k-vbox k-colorgradient-color-contrast"},[e.createVNode("div",{class:"k-contrast-ratio"},[e.createVNode("span",{class:"k-contrast-ratio-text"},[x]),r?e.createVNode("span",{class:"k-contrast-validation k-text-success"},[e.createVNode(n.Icon,{name:"check",icon:a.checkIcon},null),c&&e.createVNode(n.Icon,{name:"check",icon:a.checkIcon},null)]):e.createVNode("span",{class:"k-contrast-validation k-text-error"},[e.createVNode(n.Icon,{name:"x",icon:a.xIcon},null)])]),e.createVNode("div",null,[e.createVNode("span",null,[N]),r?l:i]),e.createVNode("div",null,[e.createVNode("span",null,[m]),c?l:i])])}});exports.ColorContrastLabels=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),p=require("@progress/kendo-vue-intl"),a=require("@progress/kendo-svg-icons"),o=require("../messages/main.js"),L=require("./utils/color-parser.js"),n=require("@progress/kendo-vue-common"),C=e.defineComponent({name:"KendoColorContrastLabels",props:{bgColor:Object,rgba:Object},inject:{kendoLocalizationService:{default:null}},render(){const t=p.provideLocalizationService(this),d=t.toLanguageString(o.colorGradientContrastRatio,o.messages[o.colorGradientContrastRatio]),g=t.toLanguageString(o.colorGradientAALevel,o.messages[o.colorGradientAALevel]),u=t.toLanguageString(o.colorGradientAAALevel,o.messages[o.colorGradientAAALevel]),k=t.toLanguageString(o.colorGradientPass,o.messages[o.colorGradientPass]),v=t.toLanguageString(o.colorGradientFail,o.messages[o.colorGradientFail]),s=L.getContrastFromTwoRGBAs(this.$props.rgba,this.$props.bgColor),A=4.5.toFixed(1),V=7 .toFixed(1),x=`${d}: ${s.toFixed(2)}`,N=`${g}: ${A}`,m=`${u}: ${V}`,r=s>=4.5,c=s>=7,l=e.createVNode("span",{key:1,class:"k-contrast-validation !k-text-success"},[k,e.createTextVNode(" "),e.createVNode(n.Icon,{name:"check",icon:a.checkIcon},null)]),i=e.createVNode("span",{key:2,class:"k-contrast-validation !k-text-error"},[v,e.createTextVNode(" "),e.createVNode(n.Icon,{name:"x",icon:a.xIcon},null)]);return e.createVNode("div",{class:"k-vbox k-colorgradient-color-contrast"},[e.createVNode("div",{class:"k-contrast-ratio"},[e.createVNode("span",{class:"k-contrast-ratio-text"},[x]),r?e.createVNode("span",{class:"k-contrast-validation !k-text-success"},[e.createVNode(n.Icon,{name:"check",icon:a.checkIcon},null),c&&e.createVNode(n.Icon,{name:"check",icon:a.checkIcon},null)]):e.createVNode("span",{class:"k-contrast-validation !k-text-error"},[e.createVNode(n.Icon,{name:"x",icon:a.xIcon},null)])]),e.createVNode("div",null,[e.createVNode("span",null,[N]),r?l:i]),e.createVNode("div",null,[e.createVNode("span",null,[m]),c?l:i])])}});exports.ColorContrastLabels=C;

package/colors/ColorContrastLabels.mjs

@@ -25,13 +25,13 @@ const z = /* @__PURE__ */ F({
   render() {
     const t = M(this), v = t.toLanguageString(p, a[p]), A = t.toLanguageString(u, a[u]), L = t.toLanguageString(m, a[m]), C = t.toLanguageString(k, a[k]), b = t.toLanguageString(x, a[x]), s = T(this.$props.rgba, this.$props.bgColor), f = 4.5.toFixed(1), $ = 7 .toFixed(1), h = `${v}: ${s.toFixed(2)}`, S = `${A}: ${f}`, G = `${L}: ${$}`, r = s >= 4.5, c = s >= 7, i = o("span", {
       key: 1,
-      class: "k-contrast-validation k-text-success"
+      class: "k-contrast-validation !k-text-success"
     }, [C, d(" "), o(n, {
       name: "check",
       icon: e
     }, null)]), l = o("span", {
       key: 2,
-      class: "k-contrast-validation k-text-error"
+      class: "k-contrast-validation !k-text-error"
     }, [b, d(" "), o(n, {
       name: "x",
       icon: g
@@ -43,7 +43,7 @@ const z = /* @__PURE__ */ F({
     }, [o("span", {
       class: "k-contrast-ratio-text"
     }, [h]), r ? o("span", {
-      class: "k-contrast-validation k-text-success"
+      class: "k-contrast-validation !k-text-success"
     }, [o(n, {
       name: "check",
       icon: e
@@ -51,7 +51,7 @@ const z = /* @__PURE__ */ F({
       name: "check",
       icon: e
     }, null)]) : o("span", {
-      class: "k-contrast-validation k-text-error"
+      class: "k-contrast-validation !k-text-error"
     }, [o(n, {
       name: "x",
       icon: g

package/colors/ColorGradient.d.ts

@@ -30,6 +30,7 @@ declare const ColorGradient: import('vue').DefineComponent<import('vue').Extract
     disabled: PropType<boolean>;
     id: PropType<string>;
     ariaLabelledBy: PropType<string>;
+    ariaLabel: PropType<string>;
     ariaDescribedBy: PropType<string>;
     tabIndex: PropType<number>;
     innerTabIndex: {
@@ -38,6 +39,7 @@ declare const ColorGradient: import('vue').DefineComponent<import('vue').Extract
     };
     size: PropType<"small" | "medium" | "large">;
     class: PropType<string>;
+    role: PropType<string>;
     adaptive: PropType<boolean>;
 }>, {}, {
     currentValue: any;
@@ -104,6 +106,7 @@ declare const ColorGradient: import('vue').DefineComponent<import('vue').Extract
     disabled: PropType<boolean>;
     id: PropType<string>;
     ariaLabelledBy: PropType<string>;
+    ariaLabel: PropType<string>;
     ariaDescribedBy: PropType<string>;
     tabIndex: PropType<number>;
     innerTabIndex: {
@@ -112,6 +115,7 @@ declare const ColorGradient: import('vue').DefineComponent<import('vue').Extract
     };
     size: PropType<"small" | "medium" | "large">;
     class: PropType<string>;
+    role: PropType<string>;
     adaptive: PropType<boolean>;
 }>> & Readonly<{
     onBlur?: (event: ColorGradientBlurEvent) => any;

package/colors/ColorGradient.js

@@ -5,6 +5,6 @@
  * 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"),i=require("@progress/kendo-vue-common"),V=require("../package-metadata.js"),u=require("./utils/misc.js"),s=require("./utils/color-parser.js"),B=require("./utils/color-cache.js"),$=require("./ColorInput.js"),G=require("./ColorContrastLabels.js"),L=require("./ColorContrastSvg.js"),F=require("@progress/kendo-vue-intl"),l=require("../messages/main.js"),v=require("../slider/Slider.js"),I="rgba",m="rgba(255, 255, 255, 1)",T=n.defineComponent({name:"KendoColorGradient",model:{event:"changemodel"},emits:{change:e=>!0,focus:e=>!0,blur:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,keydown:e=>!0},inject:{kendoLocalizationService:{default:null}},props:{modelValue:String,modelRgbaValue:String,defaultValue:String,value:String,opacity:{type:Boolean,default:!0},backgroundColor:String,disabled:Boolean,id:String,ariaLabelledBy:String,ariaDescribedBy:String,tabIndex:Number,innerTabIndex:{type:Number,default:void 0},size:String,class:String,adaptive:Boolean},created(){i.validatePackage(V.packageMetadata),this.guid=i.guid()},computed:{valueSet(){return this.value||this.modelValue||this.modelRgbaValue},computedValue(){let e=this.valueSet||this.currentValue||this.defaultValue||s.parseColor(m,I);return u.isPresent(s.parseColor(e,"hex",this.opacity))||(e=m),e},hsva(){return this.valueSet?s.getHSV(this.computedValue):this.currentHsva||s.getHSV(this.computedValue)},rgba(){return this.valueSet?s.getRGBA(this.computedValue):this.currentRgba},hex(){return this.valueSet?s.parseColor(this.computedValue,"hex",this.opacity):this.currentHex},computedBgColor(){return this.currentBgColor||s.getColorFromHue(this.hsva.h)},computedTabIndex(){return this.innerTabIndex!==void 0?this.innerTabIndex:this.focused?0:-1}},data(){return{currentValue:void 0,currentBgColor:void 0,isFirstRender:!0,currentHsva:void 0,currentRgba:void 0,currentHex:void 0,focused:!1}},mounted(){this.alphaSlider=this.alphaSliderRef,this.setAlphaSliderBackground(this.computedBgColor),this.$el&&(this.draggable=this.$refs.draggable,this.gradientWrapper=this.draggable&&this.draggable.element),this.isFirstRender&&(this.isFirstRender=!1)},destroyed(){B.removeCachedColor(this.guid)},updated(){this.setAlphaSliderBackground(this.computedBgColor)},render(){const{size:e,disabled:t,class:r,opacity:a,id:o,tabIndex:h,ariaDescribedBy:g,ariaLabelledBy:C,adaptive:c}=this.$props,f=i.classNames("k-colorgradient",{"k-disabled":t,[`k-colorgradient-${i.kendoThemeMaps.sizeMap[e]||e}`]:e},r),b=F.provideLocalizationService(this),k=b.toLanguageString(l.colorGradientHueSliderLabel,l.messages[l.colorGradientHueSliderLabel]),S=b.toLanguageString(l.colorGradientAlphaSliderLabel,l.messages[l.colorGradientAlphaSliderLabel]),y=b.toLanguageString(l.colorGradientDragHandle,l.messages[l.colorGradientDragHandle]),x=function(){let d={};if(!this.isFirstRender){const p=this.getGradientRectMetrics(),R=(1-this.hsva.v)*p.height,H=this.hsva.s*p.width;d.top=`${R}px`,d.left=`${H}px`}return n.createVNode("div",{class:"k-hsv-draghandle k-draghandle",role:"slider","aria-orientation":void 0,"aria-label":y+`${this.value||"none"}`,"aria-valuenow":Math.round(this.hsva.s*100),"aria-valuetext":`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),s=require("@progress/kendo-vue-common"),B=require("../package-metadata.js"),u=require("./utils/misc.js"),i=require("./utils/color-parser.js"),$=require("./utils/color-cache.js"),L=require("./ColorInput.js"),G=require("./ColorContrastLabels.js"),F=require("./ColorContrastSvg.js"),I=require("@progress/kendo-vue-intl"),l=require("../messages/main.js"),m=require("../slider/Slider.js"),T="rgba",C="rgba(255, 255, 255, 1)",M=n.defineComponent({name:"KendoColorGradient",model:{event:"changemodel"},emits:{change:e=>!0,focus:e=>!0,blur:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,"update:modelRgbaValue":e=>!0,keydown:e=>!0},inject:{kendoLocalizationService:{default:null}},props:{modelValue:String,modelRgbaValue:String,defaultValue:String,value:String,opacity:{type:Boolean,default:!0},backgroundColor:String,disabled:Boolean,id:String,ariaLabelledBy:String,ariaLabel:String,ariaDescribedBy:String,tabIndex:Number,innerTabIndex:{type:Number,default:void 0},size:String,class:String,role:String,adaptive:Boolean},created(){s.validatePackage(B.packageMetadata),this.guid=s.guid()},computed:{valueSet(){return this.value||this.modelValue||this.modelRgbaValue},computedValue(){let e=this.valueSet||this.currentValue||this.defaultValue||i.parseColor(C,T);return u.isPresent(i.parseColor(e,"hex",this.opacity))||(e=C),e},hsva(){return this.valueSet?i.getHSV(this.computedValue):this.currentHsva||i.getHSV(this.computedValue)},rgba(){return this.valueSet?i.getRGBA(this.computedValue):this.currentRgba},hex(){return this.valueSet?i.parseColor(this.computedValue,"hex",this.opacity):this.currentHex},computedBgColor(){return this.currentBgColor||i.getColorFromHue(this.hsva.h)},computedTabIndex(){return this.innerTabIndex!==void 0?this.innerTabIndex:this.focused?0:-1}},data(){return{currentValue:void 0,currentBgColor:void 0,isFirstRender:!0,currentHsva:void 0,currentRgba:void 0,currentHex:void 0,focused:!1}},mounted(){this.alphaSlider=this.alphaSliderRef,this.setAlphaSliderBackground(this.computedBgColor),this.$el&&(this.draggable=this.$refs.draggable,this.gradientWrapper=this.draggable&&this.draggable.element),this.isFirstRender&&(this.isFirstRender=!1)},destroyed(){$.removeCachedColor(this.guid)},updated(){this.setAlphaSliderBackground(this.computedBgColor)},render(){var p;const{size:e,disabled:t,class:r,opacity:a,id:o,tabIndex:h,ariaDescribedBy:g,ariaLabelledBy:f,adaptive:c}=this.$props,k=s.classNames("k-colorgradient",{"k-disabled":t,[`k-colorgradient-${s.kendoThemeMaps.sizeMap[e]||e}`]:e},r),b=I.provideLocalizationService(this),S=b.toLanguageString(l.colorGradientHueSliderLabel,l.messages[l.colorGradientHueSliderLabel]),x=b.toLanguageString(l.colorGradientAlphaSliderLabel,l.messages[l.colorGradientAlphaSliderLabel]),y=b.toLanguageString(l.colorGradientDragHandle,l.messages[l.colorGradientDragHandle]),R=function(){let d={};if(!this.isFirstRender){const v=this.getGradientRectMetrics(),H=(1-this.hsva.v)*v.height,V=this.hsva.s*v.width;d.top=`${H}px`,d.left=`${V}px`}return n.createVNode("div",{class:"k-hsv-draghandle k-draghandle",role:"slider","aria-orientation":void 0,"aria-label":y+`${this.value||"none"}`,"aria-valuenow":Math.round(this.hsva.s*100),"aria-valuemin":0,"aria-valuemax":100,"aria-valuetext":`
                     saturation: ${Math.round(this.hsva.s*100)}%,
-                    value: ${Math.round(this.hsva.v*100)}%`,tabindex:this.computedTabIndex,onKeydown:this.dragKeyDown,style:d,ref:i.setRef(this,"draghandle")},null)};return n.createVNode("div",{id:o,class:f,role:h!==-1?"textbox":void 0,"aria-disabled":t,tabindex:i.getTabIndex(h,t),"aria-labelledby":C,"aria-describedby":g,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onKeyDownHandler},[n.createVNode("div",{class:`k-colorgradient-canvas ${c?"k-vstack":"k-hstack"}`},[n.createVNode("div",{class:"k-hsv-rectangle",style:{background:this.computedBgColor}},[n.createVNode(i.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:"draggable"},{default:()=>[n.createVNode("div",{class:"k-hsv-gradient",style:{touchAction:"none"},tabindex:-1,onClick:this.onGradientWrapperClick},[x.call(this)])]}),this.backgroundColor&&!this.isFirstRender&&n.createVNode(L.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.hsva,backgroundColor:this.backgroundColor},null)]),n.createVNode("div",{class:`k-hsv-controls ${c?"k-vstack":"k-hstack"}`},[n.createVNode(v.Slider,{tabIndex:this.computedTabIndex,value:this.hsva.h,buttons:!1,vertical:!c,min:0,max:360,step:5,onChange:this.onHueSliderChange,class:"k-hue-slider k-colorgradient-slider",disabled:t,ariaLabel:k},null),a&&n.createVNode(v.Slider,{tabIndex:this.computedTabIndex,value:u.isPresent(this.hsva.a)?this.hsva.a*100:100,buttons:!1,vertical:!c,min:0,max:100,step:1,onChange:this.onAlphaSliderChange,class:"k-alpha-slider k-colorgradient-slider",disabled:t,ariaLabel:S,ref:d=>{this.alphaSliderRef=d}},null)])]),n.createVNode($.ColorInput,{tabIndex:this.computedTabIndex,rgba:this.rgba,onRgbachange:this.onRgbaChange,hex:this.hex,onHexchange:this.onHexChange,opacity:a,disabled:t,ref:"colorInput",size:e},null),this.backgroundColor&&n.createVNode(G.ColorContrastLabels,{bgColor:s.getRGBA(this.backgroundColor),rgba:this.rgba},null)])},methods:{onKeyDownHandler(e){const t=this.$el;this.innerTabIndex===void 0&&(this.focused=i.focusContainer(e,t)),this.$emit("keydown",e)},onHexChange(e,t,r){const a=s.getRGBA(t),o=s.getHSV(t);this.currentHsva=o,this.currentBgColor=s.getColorFromHue(o.h),this.currentRgba=a,this.currentHex=e,this.dispatchChangeEvent(t,r.event,e,t)},onRgbaChange(e,t){const r=s.getColorFromRGBA(e),a=s.parseColor(r,"hex",this.opacity),o=s.getHSV(r);this.currentHsva=o,this.currentBgColor=s.getColorFromHue(o.h),this.currentRgba=e,this.currentHex=a,this.dispatchChangeEvent(r,t.event,a,r)},onAlphaSliderChange(e){this.handleHsvaChange(Object.assign({},this.hsva,{a:e.value/100}),e.event)},onHueSliderChange(e){this.handleHsvaChange(Object.assign({},this.hsva,{h:e.value}),e.event)},onDrag(e){this.gradientWrapper.classList.add("k-dragging"),this.changePosition(e)},onRelease(){this.gradientWrapper.classList.remove("k-dragging")},onGradientWrapperClick(e){this.firstFocusable=i.getRef(this,"draghandle"),this.firstFocusable&&this.firstFocusable.focus(),this.changePosition(e)},move(e,t,r){const a=this.hsva;a[t]+=r*(e.shiftKey?.01:.05),a[t]<0&&(a[t]=0),a[t]>1&&(a[t]=1),e.preventDefault(),this.handleHsvaChange(a,e)},dragKeyDown(e){switch(e.keyCode){case i.Keys.left:this.move(e,"s",-1);break;case i.Keys.right:this.move(e,"s",1);break;case i.Keys.up:this.move(e,"v",1);break;case i.Keys.down:this.move(e,"v",-1);break;case i.Keys.enter:break;case i.Keys.esc:break}},changePosition(e){const t=this.getGradientRectMetrics(),r=e.clientX-t.left,a=e.clientY-t.top,o=u.fitIntoBounds(r,0,t.width),h=u.fitIntoBounds(a,0,t.height),g=Object.assign({},this.hsva,{s:o/t.width,v:1-h/t.height});this.handleHsvaChange(g,e,e.event)},handleHsvaChange(e,t){const r=s.getColorFromHSV(e),a=s.parseColor(r,"hex",this.opacity),o=s.parseColor(r,"rgba");this.currentHsva=e,this.currentBgColor=s.getColorFromHue(e.h),this.currentRgba=s.getRGBA(r),this.currentHex=a,this.dispatchChangeEvent(r,t,a,o)},dispatchChangeEvent(e,t,r,a){this.currentValue=e,this.$emit("changemodel",r),this.$emit("update:modelRgbaValue",a),this.$emit("update:modelValue",r),this.$emit("change",{event:t,target:this,value:r,rgbaValue:a})},onFocus(e){this.$emit("focus",{event:e,target:this})},onBlur(e){this.$emit("blur",{event:e,target:this})},setAlphaSliderBackground(e){this.$props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.$props.adaptive?"right":"top"}, transparent, ${e})`)},getGradientRectMetrics(){const e=this.gradientWrapper.getBoundingClientRect();return{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.width,height:e.height,x:e.x,y:e.y}},focus(){this.focused=!0,setTimeout(()=>{i.focusFirstFocusableChild(this.$el)},1)}}});exports.ColorGradient=T;
+                    value: ${Math.round(this.hsva.v*100)}%`,tabindex:this.computedTabIndex,onKeydown:this.dragKeyDown,style:d,ref:s.setRef(this,"draghandle")},null)};return n.createVNode("div",{id:o,class:k,role:(p=this.$props.role)!=null?p:h!==-1?"textbox":void 0,"aria-disabled":t||void 0,tabindex:s.getTabIndex(h,t),"aria-labelledby":f,"aria-label":this.$props.ariaLabel,"aria-describedby":g,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onKeyDownHandler},[n.createVNode("div",{class:`k-colorgradient-canvas ${c?"k-vstack":"k-hstack"}`},[n.createVNode("div",{class:"k-hsv-rectangle",style:{background:this.computedBgColor}},[n.createVNode(s.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:"draggable"},{default:()=>[n.createVNode("div",{class:"k-hsv-gradient",style:{touchAction:"none"},tabindex:-1,onClick:this.onGradientWrapperClick},[R.call(this)])]}),this.backgroundColor&&!this.isFirstRender&&n.createVNode(F.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.hsva,backgroundColor:this.backgroundColor},null)]),n.createVNode("div",{class:`k-hsv-controls ${c?"k-vstack":"k-hstack"}`},[n.createVNode(m.Slider,{tabIndex:this.computedTabIndex,value:this.hsva.h,buttons:!1,vertical:!c,min:0,max:360,step:5,onChange:this.onHueSliderChange,class:"k-hue-slider k-colorgradient-slider",disabled:t,ariaLabel:S},null),a&&n.createVNode(m.Slider,{tabIndex:this.computedTabIndex,value:u.isPresent(this.hsva.a)?this.hsva.a*100:100,buttons:!1,vertical:!c,min:0,max:100,step:1,onChange:this.onAlphaSliderChange,class:"k-alpha-slider k-colorgradient-slider",disabled:t,ariaLabel:x,ref:d=>{this.alphaSliderRef=d}},null)])]),n.createVNode(L.ColorInput,{tabIndex:this.computedTabIndex,rgba:this.rgba,onRgbachange:this.onRgbaChange,hex:this.hex,onHexchange:this.onHexChange,opacity:a,disabled:t,ref:"colorInput",size:e},null),this.backgroundColor&&n.createVNode(G.ColorContrastLabels,{bgColor:i.getRGBA(this.backgroundColor),rgba:this.rgba},null)])},methods:{onKeyDownHandler(e){const t=this.$el;this.innerTabIndex===void 0&&(this.focused=s.focusContainer(e,t)),this.$emit("keydown",e)},onHexChange(e,t,r){const a=i.getRGBA(t),o=i.getHSV(t);this.currentHsva=o,this.currentBgColor=i.getColorFromHue(o.h),this.currentRgba=a,this.currentHex=e,this.dispatchChangeEvent(t,r.event,e,t)},onRgbaChange(e,t){const r=i.getColorFromRGBA(e),a=i.parseColor(r,"hex",this.opacity),o=i.getHSV(r);this.currentHsva=o,this.currentBgColor=i.getColorFromHue(o.h),this.currentRgba=e,this.currentHex=a,this.dispatchChangeEvent(r,t.event,a,r)},onAlphaSliderChange(e){this.handleHsvaChange(Object.assign({},this.hsva,{a:e.value/100}),e.event)},onHueSliderChange(e){this.handleHsvaChange(Object.assign({},this.hsva,{h:e.value}),e.event)},onDrag(e){this.gradientWrapper.classList.add("k-dragging"),this.changePosition(e)},onRelease(){this.gradientWrapper.classList.remove("k-dragging")},onGradientWrapperClick(e){this.firstFocusable=s.getRef(this,"draghandle"),this.firstFocusable&&this.firstFocusable.focus(),this.changePosition(e)},move(e,t,r){const a=this.hsva;a[t]+=r*(e.shiftKey?.01:.05),a[t]<0&&(a[t]=0),a[t]>1&&(a[t]=1),e.preventDefault(),this.handleHsvaChange(a,e)},dragKeyDown(e){switch(e.keyCode){case s.Keys.left:this.move(e,"s",-1);break;case s.Keys.right:this.move(e,"s",1);break;case s.Keys.up:this.move(e,"v",1);break;case s.Keys.down:this.move(e,"v",-1);break;case s.Keys.enter:break;case s.Keys.esc:break}},changePosition(e){const t=this.getGradientRectMetrics(),r=e.clientX-t.left,a=e.clientY-t.top,o=u.fitIntoBounds(r,0,t.width),h=u.fitIntoBounds(a,0,t.height),g=Object.assign({},this.hsva,{s:o/t.width,v:1-h/t.height});this.handleHsvaChange(g,e,e.event)},handleHsvaChange(e,t){const r=i.getColorFromHSV(e),a=i.parseColor(r,"hex",this.opacity),o=i.parseColor(r,"rgba");this.currentHsva=e,this.currentBgColor=i.getColorFromHue(e.h),this.currentRgba=i.getRGBA(r),this.currentHex=a,this.dispatchChangeEvent(r,t,a,o)},dispatchChangeEvent(e,t,r,a){this.currentValue=e,this.$emit("changemodel",r),this.$emit("update:modelRgbaValue",a),this.$emit("update:modelValue",r),this.$emit("change",{event:t,target:this,value:r,rgbaValue:a})},onFocus(e){this.$emit("focus",{event:e,target:this})},onBlur(e){this.$emit("blur",{event:e,target:this})},setAlphaSliderBackground(e){this.$props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.$props.adaptive?"right":"top"}, transparent, ${e})`)},getGradientRectMetrics(){const e=this.gradientWrapper.getBoundingClientRect();return{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.width,height:e.height,x:e.x,y:e.y}},focus(){this.focused=!0,setTimeout(()=>{s.focusFirstFocusableChild(this.$el)},1)}}});exports.ColorGradient=M;

package/colors/ColorGradient.mjs

@@ -5,19 +5,19 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as w, createVNode as s } from "vue";
-import { focusFirstFocusableChild as D, Keys as n, getRef as G, focusContainer as M, classNames as A, kendoThemeMaps as K, getTabIndex as E, Draggable as z, validatePackage as W, guid as O, setRef as N } from "@progress/kendo-vue-common";
-import { packageMetadata as P } from "../package-metadata.mjs";
-import { fitIntoBounds as f, isPresent as C } from "./utils/misc.mjs";
-import { getColorFromHSV as j, parseColor as o, getColorFromHue as c, getRGBA as u, getColorFromRGBA as X, getHSV as g } from "./utils/color-parser.mjs";
-import { removeCachedColor as Y } from "./utils/color-cache.mjs";
-import { ColorInput as _ } from "./ColorInput.mjs";
-import { ColorContrastLabels as U } from "./ColorContrastLabels.mjs";
-import { ColorContrastSvg as q } from "./ColorContrastSvg.mjs";
-import { provideLocalizationService as J } from "@progress/kendo-vue-intl";
-import { colorGradientHueSliderLabel as k, messages as v, colorGradientAlphaSliderLabel as S, colorGradientDragHandle as x } from "../messages/main.mjs";
-import { Slider as R } from "../slider/Slider.mjs";
-const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
+import { defineComponent as D, createVNode as s } from "vue";
+import { focusFirstFocusableChild as G, Keys as n, getRef as M, focusContainer as A, classNames as K, kendoThemeMaps as E, getTabIndex as z, Draggable as W, validatePackage as O, guid as N, setRef as P } from "@progress/kendo-vue-common";
+import { packageMetadata as j } from "../package-metadata.mjs";
+import { fitIntoBounds as C, isPresent as k } from "./utils/misc.mjs";
+import { getColorFromHSV as X, parseColor as o, getColorFromHue as c, getRGBA as u, getColorFromRGBA as Y, getHSV as g } from "./utils/color-parser.mjs";
+import { removeCachedColor as _ } from "./utils/color-cache.mjs";
+import { ColorInput as U } from "./ColorInput.mjs";
+import { ColorContrastLabels as q } from "./ColorContrastLabels.mjs";
+import { ColorContrastSvg as J } from "./ColorContrastSvg.mjs";
+import { provideLocalizationService as Q } from "@progress/kendo-vue-intl";
+import { colorGradientHueSliderLabel as S, messages as v, colorGradientAlphaSliderLabel as x, colorGradientDragHandle as R } from "../messages/main.mjs";
+import { Slider as y } from "../slider/Slider.mjs";
+const Z = "rgba", H = "rgba(255, 255, 255, 1)", ue = /* @__PURE__ */ D({
   name: "KendoColorGradient",
   model: {
     event: "changemodel"
@@ -49,6 +49,7 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
     disabled: Boolean,
     id: String,
     ariaLabelledBy: String,
+    ariaLabel: String,
     ariaDescribedBy: String,
     tabIndex: Number,
     innerTabIndex: {
@@ -57,18 +58,19 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
     },
     size: String,
     class: String,
+    role: String,
     adaptive: Boolean
   },
   created() {
-    W(P), this.guid = O();
+    O(j), this.guid = N();
   },
   computed: {
     valueSet() {
       return this.value || this.modelValue || this.modelRgbaValue;
     },
     computedValue() {
-      let e = this.valueSet || this.currentValue || this.defaultValue || o(y, Q);
-      return C(o(e, "hex", this.opacity)) || (e = y), e;
+      let e = this.valueSet || this.currentValue || this.defaultValue || o(H, Z);
+      return k(o(e, "hex", this.opacity)) || (e = H), e;
     },
     hsva() {
       return this.valueSet ? g(this.computedValue) : this.currentHsva || g(this.computedValue);
@@ -101,12 +103,13 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
     this.alphaSlider = this.alphaSliderRef, this.setAlphaSliderBackground(this.computedBgColor), this.$el && (this.draggable = this.$refs.draggable, this.gradientWrapper = this.draggable && this.draggable.element), this.isFirstRender && (this.isFirstRender = !1);
   },
   destroyed() {
-    Y(this.guid);
+    _(this.guid);
   },
   updated() {
     this.setAlphaSliderBackground(this.computedBgColor);
   },
   render() {
+    var m;
     const {
       size: e,
       disabled: t,
@@ -115,39 +118,42 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
       id: r,
       tabIndex: h,
       ariaDescribedBy: p,
-      ariaLabelledBy: H,
+      ariaLabelledBy: B,
       adaptive: d
-    } = this.$props, B = A("k-colorgradient", {
+    } = this.$props, $ = K("k-colorgradient", {
       "k-disabled": t,
-      [`k-colorgradient-${K.sizeMap[e] || e}`]: e
-    }, i), b = J(this), $ = b.toLanguageString(k, v[k]), V = b.toLanguageString(S, v[S]), L = b.toLanguageString(x, v[x]), F = function() {
+      [`k-colorgradient-${E.sizeMap[e] || e}`]: e
+    }, i), b = Q(this), L = b.toLanguageString(S, v[S]), V = b.toLanguageString(x, v[x]), F = b.toLanguageString(R, v[R]), I = function() {
       let l = {};
       if (!this.isFirstRender) {
-        const m = this.getGradientRectMetrics(), I = (1 - this.hsva.v) * m.height, T = this.hsva.s * m.width;
-        l.top = `${I}px`, l.left = `${T}px`;
+        const f = this.getGradientRectMetrics(), T = (1 - this.hsva.v) * f.height, w = this.hsva.s * f.width;
+        l.top = `${T}px`, l.left = `${w}px`;
       }
       return s("div", {
         class: "k-hsv-draghandle k-draghandle",
         role: "slider",
         "aria-orientation": void 0,
-        "aria-label": L + `${this.value || "none"}`,
+        "aria-label": F + `${this.value || "none"}`,
         "aria-valuenow": Math.round(this.hsva.s * 100),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
         "aria-valuetext": `
                     saturation: ${Math.round(this.hsva.s * 100)}%,
                     value: ${Math.round(this.hsva.v * 100)}%`,
         tabindex: this.computedTabIndex,
         onKeydown: this.dragKeyDown,
         style: l,
-        ref: N(this, "draghandle")
+        ref: P(this, "draghandle")
       }, null);
     };
     return s("div", {
       id: r,
-      class: B,
-      role: h !== -1 ? "textbox" : void 0,
-      "aria-disabled": t,
-      tabindex: E(h, t),
-      "aria-labelledby": H,
+      class: $,
+      role: (m = this.$props.role) != null ? m : h !== -1 ? "textbox" : void 0,
+      "aria-disabled": t || void 0,
+      tabindex: z(h, t),
+      "aria-labelledby": B,
+      "aria-label": this.$props.ariaLabel,
       "aria-describedby": p,
       onFocus: this.onFocus,
       onBlur: this.onBlur,
@@ -159,7 +165,7 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
       style: {
         background: this.computedBgColor
       }
-    }, [s(z, {
+    }, [s(W, {
       onDrag: this.onDrag,
       onRelease: this.onRelease,
       ref: "draggable"
@@ -171,14 +177,14 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
         },
         tabindex: -1,
         onClick: this.onGradientWrapperClick
-      }, [F.call(this)])]
-    }), this.backgroundColor && !this.isFirstRender && s(q, {
+      }, [I.call(this)])]
+    }), this.backgroundColor && !this.isFirstRender && s(J, {
       metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
       hsva: this.hsva,
       backgroundColor: this.backgroundColor
     }, null)]), s("div", {
       class: `k-hsv-controls ${d ? "k-vstack" : "k-hstack"}`
-    }, [s(R, {
+    }, [s(y, {
       tabIndex: this.computedTabIndex,
       value: this.hsva.h,
       buttons: !1,
@@ -189,10 +195,10 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
       onChange: this.onHueSliderChange,
       class: "k-hue-slider k-colorgradient-slider",
       disabled: t,
-      ariaLabel: $
-    }, null), a && s(R, {
+      ariaLabel: L
+    }, null), a && s(y, {
       tabIndex: this.computedTabIndex,
-      value: C(this.hsva.a) ? this.hsva.a * 100 : 100,
+      value: k(this.hsva.a) ? this.hsva.a * 100 : 100,
       buttons: !1,
       vertical: !d,
       min: 0,
@@ -205,7 +211,7 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
       ref: (l) => {
         this.alphaSliderRef = l;
       }
-    }, null)])]), s(_, {
+    }, null)])]), s(U, {
       tabIndex: this.computedTabIndex,
       rgba: this.rgba,
       onRgbachange: this.onRgbaChange,
@@ -215,7 +221,7 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
       disabled: t,
       ref: "colorInput",
       size: e
-    }, null), this.backgroundColor && s(U, {
+    }, null), this.backgroundColor && s(q, {
       bgColor: u(this.backgroundColor),
       rgba: this.rgba
     }, null)]);
@@ -223,14 +229,14 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
   methods: {
     onKeyDownHandler(e) {
       const t = this.$el;
-      this.innerTabIndex === void 0 && (this.focused = M(e, t)), this.$emit("keydown", e);
+      this.innerTabIndex === void 0 && (this.focused = A(e, t)), this.$emit("keydown", e);
     },
     onHexChange(e, t, i) {
       const a = u(t), r = g(t);
       this.currentHsva = r, this.currentBgColor = c(r.h), this.currentRgba = a, this.currentHex = e, this.dispatchChangeEvent(t, i.event, e, t);
     },
     onRgbaChange(e, t) {
-      const i = X(e), a = o(i, "hex", this.opacity), r = g(i);
+      const i = Y(e), a = o(i, "hex", this.opacity), r = g(i);
       this.currentHsva = r, this.currentBgColor = c(r.h), this.currentRgba = e, this.currentHex = a, this.dispatchChangeEvent(i, t.event, a, i);
     },
     onAlphaSliderChange(e) {
@@ -250,7 +256,7 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
       this.gradientWrapper.classList.remove("k-dragging");
     },
     onGradientWrapperClick(e) {
-      this.firstFocusable = G(this, "draghandle"), this.firstFocusable && this.firstFocusable.focus(), this.changePosition(e);
+      this.firstFocusable = M(this, "draghandle"), this.firstFocusable && this.firstFocusable.focus(), this.changePosition(e);
     },
     move(e, t, i) {
       const a = this.hsva;
@@ -277,14 +283,14 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
       }
     },
     changePosition(e) {
-      const t = this.getGradientRectMetrics(), i = e.clientX - t.left, a = e.clientY - t.top, r = f(i, 0, t.width), h = f(a, 0, t.height), p = Object.assign({}, this.hsva, {
+      const t = this.getGradientRectMetrics(), i = e.clientX - t.left, a = e.clientY - t.top, r = C(i, 0, t.width), h = C(a, 0, t.height), p = Object.assign({}, this.hsva, {
         s: r / t.width,
         v: 1 - h / t.height
       });
       this.handleHsvaChange(p, e, e.event);
     },
     handleHsvaChange(e, t) {
-      const i = j(e), a = o(i, "hex", this.opacity), r = o(i, "rgba");
+      const i = X(e), a = o(i, "hex", this.opacity), r = o(i, "rgba");
       this.currentHsva = e, this.currentBgColor = c(e.h), this.currentRgba = u(i), this.currentHex = a, this.dispatchChangeEvent(i, t, a, r);
     },
     dispatchChangeEvent(e, t, i, a) {
@@ -325,11 +331,11 @@ const Q = "rgba", y = "rgba(255, 255, 255, 1)", ce = /* @__PURE__ */ w({
     },
     focus() {
       this.focused = !0, setTimeout(() => {
-        D(this.$el);
+        G(this.$el);
       }, 1);
     }
   }
 });
 export {
-  ce as ColorGradient
+  ue as ColorGradient
 };

package/colors/ColorInput.d.ts

@@ -59,8 +59,8 @@ declare const ColorInput: import('vue').DefineComponent<import('vue').ExtractPro
     disabled: PropType<boolean>;
     size: PropType<"small" | "medium" | "large">;
 }>> & Readonly<{
-    onHexchange?: (...args: any[] | unknown[]) => any;
-    onRgbachange?: (...args: any[] | unknown[]) => any;
+    onHexchange?: (...args: any) => any;
+    onRgbachange?: (...args: any) => any;
 }>, {
     rgba: RGBA;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/colors/ColorInput.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"),f=require("./HexInput.js"),L=require("@progress/kendo-vue-buttons"),i=require("@progress/kendo-vue-labels"),k=require("@progress/kendo-vue-intl"),a=require("../messages/main.js"),h=require("@progress/kendo-vue-common"),I=require("@progress/kendo-svg-icons"),d=require("../numerictextbox/NumericTextBox.js");function r(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const o=["rgba","rgb","hex"],C=t.defineComponent({name:"KendoColorInput",emits:{hexchange:null,rgbachange:null},props:{tabIndex:Number,rgba:{type:Object,default:function(){return{}}},hex:String,opacity:Boolean,disabled:Boolean,size:String},inject:{kendoLocalizationService:{default:null}},created(){this.hexInputId=h.guid()},data(){return{inputMode:o[1]}},mounted(){this.lastFocusable=this.$refs.hexinput||this.$refs.numerica||this.$refs.numericb},updated(){this.lastFocusable=this.$refs.hexinput||this.$refs.numerica||this.$refs.numericb},render(){const e=k.provideLocalizationService(this),n=e.toLanguageString(a.colorGradientHex,a.messages[a.colorGradientHex]),s=e.toLanguageString(a.colorGradientInputColorButton,a.messages[a.colorGradientInputColorButton]),l=e.toLanguageString(a.colorGradientR,a.messages[a.colorGradientR]),c=e.toLanguageString(a.colorGradientG,a.messages[a.colorGradientG]),g=e.toLanguageString(a.colorGradientB,a.messages[a.colorGradientB]),u=e.toLanguageString(a.colorGradientA,a.messages[a.colorGradientA]),b=e.toLanguageString(a.colorGradientRLabel,a.messages[a.colorGradientRLabel]),p=e.toLanguageString(a.colorGradientGLabel,a.messages[a.colorGradientGLabel]),x=e.toLanguageString(a.colorGradientBLabel,a.messages[a.colorGradientBLabel]),m=e.toLanguageString(a.colorGradientALabel,a.messages[a.colorGradientALabel]);return t.createVNode("div",{class:"k-colorgradient-inputs k-hstack"},[t.createVNode("div",{class:"k-vstack"},[t.createVNode(L.Button,{ariaLabel:s,tabIndex:this.tabIndex,type:"button",fillMode:"flat",icon:"chevron-down",svgIcon:I.chevronDownIcon,class:"k-colorgradient-toggle-mode k-icon-button",onClick:this.onToggleModeChange,onKeydown:this.onKeyDown,size:this.$props.size},null)]),this.inputMode==="hex"&&t.createVNode("div",{class:"k-vstack k-flex-1"},[t.createVNode("span",{class:"k-hex-value"},[t.createVNode(f.HexInput,{id:this.hexInputId,tabIndex:this.tabIndex,hex:this.$props.hex,onHexchange:this.onHexChange,disabled:this.$props.disabled,ref:"hexinput",size:this.$props.size},null)]),t.createVNode(i.Label,{class:"k-colorgradient-input-label",editorId:this.hexInputId},r(n)?n:{default:()=>[n]})]),(this.inputMode==="rgb"||this.inputMode==="rgba")&&[t.createVNode("div",{class:"k-vstack"},[t.createVNode(d.NumericTextBox,{inputType:"number",tabIndex:this.tabIndex,value:this.$props.rgba.r,min:0,max:255,spinners:!1,format:"n",ariaLabel:b,onChange:this.onRgbaRChange,disabled:this.$props.disabled,size:this.$props.size},null),t.createVNode(i.Label,{class:"k-colorgradient-input-label"},r(l)?l:{default:()=>[l]})]),t.createVNode("div",{class:"k-vstack"},[t.createVNode(d.NumericTextBox,{inputType:"number",tabIndex:this.tabIndex,value:this.$props.rgba.g,min:0,max:255,spinners:!1,format:"n",ariaLabel:p,onChange:this.onRgbaGChange,disabled:this.$props.disabled,size:this.$props.size},null),t.createVNode(i.Label,{class:"k-colorgradient-input-label"},r(c)?c:{default:()=>[c]})]),t.createVNode("div",{class:"k-vstack"},[t.createVNode(d.NumericTextBox,{inputType:"number",tabIndex:this.tabIndex,value:this.$props.rgba.b,min:0,max:255,spinners:!1,format:"n",ariaLabel:x,onChange:this.onRgbaBChange,disabled:this.$props.disabled,ref:"numericb",size:this.$props.size},null),t.createVNode(i.Label,{class:"k-colorgradient-input-label"},r(g)?g:{default:()=>[g]})])],this.inputMode==="rgba"&&t.createVNode("div",{class:"k-vstack"},[this.$props.opacity&&t.createVNode(d.NumericTextBox,{inputType:"number",tabIndex:this.tabIndex,value:this.$props.rgba.a,min:0,max:1,step:.01,spinners:!1,format:"n2",ariaLabel:m,onChange:this.onRgbaAChange,disabled:this.$props.disabled,ref:"numerica",size:this.$props.size},null),this.$props.opacity&&t.createVNode(i.Label,{class:"k-colorgradient-input-label"},r(u)?u:{default:()=>[u]})])])},methods:{onHexChange(e){this.$emit("hexchange",e.hex,e.value,e)},onRgbaRChange(e){this.dispatchRgbaChange({r:e.value},e)},onRgbaGChange(e){this.dispatchRgbaChange({g:e.value},e)},onRgbaBChange(e){this.dispatchRgbaChange({b:e.value},e)},onRgbaAChange(e){this.dispatchRgbaChange({a:e.value},e)},dispatchRgbaChange(e,n){let s={...this.$props.rgba};e.r!==void 0&&(s.r=e.r),e.g!==void 0&&(s.g=e.g),e.b!==void 0&&(s.b=e.b),e.a!==void 0&&(s.a=e.a),this.$emit("rgbachange",s,n)},onToggleModeChange(){const e=o.length-1===o.indexOf(this.inputMode)?0:o.indexOf(this.inputMode)+1;if(this.$props.opacity)this.inputMode=o[e];else{const n=o[e]==="rgba"?e+1:e;this.inputMode=o[n]}},onKeyDown(e){e.keyCode===h.Keys.enter&&e.stopPropagation()}}});exports.ColorInput=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),m=require("./HexInput.js"),f=require("@progress/kendo-vue-buttons"),r=require("@progress/kendo-vue-labels"),L=require("@progress/kendo-vue-intl"),t=require("../messages/main.js"),o=require("@progress/kendo-vue-common"),k=require("@progress/kendo-svg-icons"),l=require("../numerictextbox/NumericTextBox.js");function d(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!a.isVNode(e)}const n=["rgba","rgb","hex"],C=a.defineComponent({name:"KendoColorInput",emits:{hexchange:null,rgbachange:null},props:{tabIndex:Number,rgba:{type:Object,default:function(){return{}}},hex:String,opacity:Boolean,disabled:Boolean,size:String},inject:{kendoLocalizationService:{default:null}},created(){this.hexInputId=o.guid(),this.rInputId=o.guid(),this.gInputId=o.guid(),this.bInputId=o.guid(),this.aInputId=o.guid()},data(){return{inputMode:n[0]}},mounted(){this.lastFocusable=this.$refs.hexinput||this.$refs.numerica||this.$refs.numericb},updated(){this.lastFocusable=this.$refs.hexinput||this.$refs.numerica||this.$refs.numericb},render(){const e=L.provideLocalizationService(this),s=e.toLanguageString(t.colorGradientHex,t.messages[t.colorGradientHex]),i=e.toLanguageString(t.colorGradientInputColorButton,t.messages[t.colorGradientInputColorButton]),c=e.toLanguageString(t.colorGradientR,t.messages[t.colorGradientR]),g=e.toLanguageString(t.colorGradientG,t.messages[t.colorGradientG]),u=e.toLanguageString(t.colorGradientB,t.messages[t.colorGradientB]),h=e.toLanguageString(t.colorGradientA,t.messages[t.colorGradientA]),p=e.toLanguageString(t.colorGradientRLabel,t.messages[t.colorGradientRLabel]),b=e.toLanguageString(t.colorGradientGLabel,t.messages[t.colorGradientGLabel]),I=e.toLanguageString(t.colorGradientBLabel,t.messages[t.colorGradientBLabel]),x=e.toLanguageString(t.colorGradientALabel,t.messages[t.colorGradientALabel]);return a.createVNode("div",{class:"k-colorgradient-inputs k-hstack"},[a.createVNode("div",{class:"k-vstack"},[a.createVNode(f.Button,{ariaLabel:i,tabIndex:this.tabIndex,type:"button",fillMode:"flat",icon:"caret-alt-expand",svgIcon:k.caretAltExpandIcon,class:"k-colorgradient-toggle-mode",onClick:this.onToggleModeChange,onKeydown:this.onKeyDown,size:this.$props.size},null)]),this.inputMode==="hex"&&a.createVNode("div",{class:"k-vstack k-flex-1"},[a.createVNode("span",{class:"k-hex-value"},[a.createVNode(m.HexInput,{id:this.hexInputId,tabIndex:this.tabIndex,hex:this.$props.hex,onHexchange:this.onHexChange,disabled:this.$props.disabled,ref:"hexinput",size:this.$props.size},null)]),a.createVNode(r.Label,{class:"k-colorgradient-input-label",editorId:this.hexInputId},d(s)?s:{default:()=>[s]})]),(this.inputMode==="rgb"||this.inputMode==="rgba")&&[a.createVNode("div",{class:"k-vstack"},[a.createVNode(l.NumericTextBox,{id:this.rInputId,tabIndex:this.tabIndex,value:this.$props.rgba.r,min:0,max:255,spinners:!1,format:"n",ariaLabel:p,onChange:this.onRgbaRChange,disabled:this.$props.disabled,size:this.$props.size},null),a.createVNode(r.Label,{class:"k-colorgradient-input-label",editorId:this.rInputId},d(c)?c:{default:()=>[c]})]),a.createVNode("div",{class:"k-vstack"},[a.createVNode(l.NumericTextBox,{id:this.gInputId,tabIndex:this.tabIndex,value:this.$props.rgba.g,min:0,max:255,spinners:!1,format:"n",ariaLabel:b,onChange:this.onRgbaGChange,disabled:this.$props.disabled,size:this.$props.size},null),a.createVNode(r.Label,{class:"k-colorgradient-input-label",editorId:this.gInputId},d(g)?g:{default:()=>[g]})]),a.createVNode("div",{class:"k-vstack"},[a.createVNode(l.NumericTextBox,{id:this.bInputId,tabIndex:this.tabIndex,value:this.$props.rgba.b,min:0,max:255,spinners:!1,format:"n",ariaLabel:I,onChange:this.onRgbaBChange,disabled:this.$props.disabled,ref:"numericb",size:this.$props.size},null),a.createVNode(r.Label,{class:"k-colorgradient-input-label",editorId:this.bInputId},d(u)?u:{default:()=>[u]})])],this.inputMode==="rgba"&&a.createVNode("div",{class:"k-vstack"},[this.$props.opacity&&a.createVNode(l.NumericTextBox,{id:this.aInputId,tabIndex:this.tabIndex,value:this.$props.rgba.a,min:0,max:1,step:.01,spinners:!1,format:"n2",ariaLabel:x,onChange:this.onRgbaAChange,disabled:this.$props.disabled,ref:"numerica",size:this.$props.size},null),this.$props.opacity&&a.createVNode(r.Label,{class:"k-colorgradient-input-label",editorId:this.aInputId},d(h)?h:{default:()=>[h]})])])},methods:{onHexChange(e){this.$emit("hexchange",e.hex,e.value,e)},onRgbaRChange(e){this.dispatchRgbaChange({r:e.value},e)},onRgbaGChange(e){this.dispatchRgbaChange({g:e.value},e)},onRgbaBChange(e){this.dispatchRgbaChange({b:e.value},e)},onRgbaAChange(e){this.dispatchRgbaChange({a:e.value},e)},dispatchRgbaChange(e,s){let i={...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,s)},onToggleModeChange(){const e=n.length-1===n.indexOf(this.inputMode)?0:n.indexOf(this.inputMode)+1;if(this.$props.opacity)this.inputMode=n[e];else{const s=n[e]==="rgba"?e+1:e;this.inputMode=n[s]}},onKeyDown(e){e.keyCode===o.Keys.enter&&e.stopPropagation()}}});exports.ColorInput=C;