@progress/kendo-vue-inputs 6.1.0-develop.4 → 6.1.0-develop.6

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"),m=require("../package-metadata.js"),h=require("./utils/misc.js"),r=require("./utils/color-parser.js"),C=require("./utils/color-cache.js"),f=require("./ColorInput.js"),S=require("./ColorContrastLabels.js"),k=require("./ColorContrastSvg.js"),y=require("@progress/kendo-vue-intl"),l=require("../messages/main.js"),g=require("../slider/Slider.js"),x="rgba",p="rgba(255, 255, 255, 1)",R=n.defineComponent({name:"KendoColorGradient",model:{event:"changemodel"},emits:{change:null,focus:null,blur:null,changemodel:null,"update:modelValue":null,"update:modelRgbaValue":null,keydown:null},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}},created(){i.validatePackage(m.packageMetadata),this.guid=i.guid()},computed:{valueSet(){return this.value||this.modelValue||this.modelRgbaValue},computedValue(){let e=this.valueSet||this.currentValue||this.defaultValue||r.parseColor(p,x);return h.isPresent(r.parseColor(e,"hex",this.opacity))||(e=p),e},hsva(){return this.valueSet?r.getHSV(this.computedValue):this.currentHsva||r.getHSV(this.computedValue)},rgba(){return this.valueSet?r.getRGBA(this.computedValue):this.currentRgba},hex(){return this.valueSet?r.parseColor(this.computedValue,"hex",this.opacity):this.currentHex},computedBgColor(){return this.currentBgColor||r.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.setAlphaSliderBackground(this.computedBgColor),this.$el&&(this.draggable=this.$refs.draggable,this.gradientWrapper=this.draggable&&this.draggable.element),this.alphaSlider=this.alphaSliderRef,this.isFirstRender&&(this.isFirstRender=!1)},destroyed(){C.removeCachedColor(this.guid)},updated(){this.setAlphaSliderBackground(this.computedBgColor)},render(){const e=i.classNames("k-colorgradient",{"k-disabled":this.$props.disabled}),t=y.provideLocalizationService(this),a=t.toLanguageString(l.colorGradientHueSliderLabel,l.messages[l.colorGradientHueSliderLabel]),s=t.toLanguageString(l.colorGradientAlphaSliderLabel,l.messages[l.colorGradientAlphaSliderLabel]),o=t.toLanguageString(l.colorGradientDragHandle,l.messages[l.colorGradientDragHandle]),c=function(){let d={};if(!this.isFirstRender){const u=this.getGradientRectMetrics(),b=(1-this.hsva.v)*u.height,v=this.hsva.s*u.width;d.top=`${b}px`,d.left=`${v}px`}return n.createVNode("div",{class:"k-hsv-draghandle k-draghandle",role:"slider","aria-orientation":void 0,"aria-label":o+`${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"),i=require("@progress/kendo-vue-common"),V=require("../package-metadata.js"),u=require("./utils/misc.js"),r=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:null,focus:null,blur:null,changemodel:null,"update:modelValue":null,"update:modelRgbaValue":null,keydown:null},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||r.parseColor(m,I);return u.isPresent(r.parseColor(e,"hex",this.opacity))||(e=m),e},hsva(){return this.valueSet?r.getHSV(this.computedValue):this.currentHsva||r.getHSV(this.computedValue)},rgba(){return this.valueSet?r.getRGBA(this.computedValue):this.currentRgba},hex(){return this.valueSet?r.parseColor(this.computedValue,"hex",this.opacity):this.currentHex},computedBgColor(){return this.currentBgColor||r.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:s,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},s),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":`
                     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:this.$props.id,class:e,role:this.$props.tabIndex!==-1?"textbox":void 0,"aria-disabled":this.$props.disabled,tabindex:i.getTabIndex(this.$props.tabIndex,this.$props.disabled),"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onKeyDownHandler},[n.createVNode("div",{class:"k-colorgradient-canvas 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},[c.call(this)])]}),this.backgroundColor&&!this.isFirstRender&&n.createVNode(k.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.hsva,backgroundColor:this.backgroundColor},null)]),n.createVNode("div",{class:"k-hsv-controls k-hstack"},[n.createVNode(g.Slider,{tabIndex:this.computedTabIndex,value:this.hsva.h,buttons:!1,vertical:!0,min:0,max:360,step:5,onChange:this.onHueSliderChange,class:"k-hue-slider k-colorgradient-slider",disabled:this.$props.disabled,ariaLabel:a},null),this.$props.opacity&&n.createVNode(g.Slider,{tabIndex:this.computedTabIndex,value:h.isPresent(this.hsva.a)?this.hsva.a*100:100,buttons:!1,vertical:!0,min:0,max:100,step:1,onChange:this.onAlphaSliderChange,class:"k-alpha-slider k-colorgradient-slider",disabled:this.$props.disabled,ariaLabel:s,ref:d=>{this.alphaSliderRef=d}},null)])]),n.createVNode(f.ColorInput,{tabIndex:this.computedTabIndex,rgba:this.rgba,onRgbachange:this.onRgbaChange,hex:this.hex,onHexchange:this.onHexChange,opacity:this.$props.opacity,disabled:this.$props.disabled,ref:"colorInput"},null),this.backgroundColor&&n.createVNode(S.ColorContrastLabels,{bgColor:r.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,a){const s=r.getRGBA(t),o=r.getHSV(t);this.currentHsva=o,this.currentBgColor=r.getColorFromHue(o.h),this.currentRgba=s,this.currentHex=e,this.dispatchChangeEvent(t,a.event,e,t)},onRgbaChange(e,t){const a=r.getColorFromRGBA(e),s=r.parseColor(a,"hex",this.opacity),o=r.getHSV(a);this.currentHsva=o,this.currentBgColor=r.getColorFromHue(o.h),this.currentRgba=e,this.currentHex=s,this.dispatchChangeEvent(a,t.event,s,a)},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,a){const s=this.hsva;s[t]+=a*(e.shiftKey?.01:.05),s[t]<0&&(s[t]=0),s[t]>1&&(s[t]=1),e.preventDefault(),this.handleHsvaChange(s,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(),a=e.clientX-t.left,s=e.clientY-t.top,o=h.fitIntoBounds(a,0,t.width),c=h.fitIntoBounds(s,0,t.height),d=Object.assign({},this.hsva,{s:o/t.width,v:1-c/t.height});this.handleHsvaChange(d,e,e.event)},handleHsvaChange(e,t){const a=r.getColorFromHSV(e),s=r.parseColor(a,"hex",this.opacity),o=r.parseColor(a,"rgba");this.currentHsva=e,this.currentBgColor=r.getColorFromHue(e.h),this.currentRgba=r.getRGBA(a),this.currentHex=s,this.dispatchChangeEvent(a,t,s,o)},dispatchChangeEvent(e,t,a,s){this.currentValue=e,this.$emit("changemodel",a),this.$emit("update:modelRgbaValue",s),this.$emit("update:modelValue",a),this.$emit("change",{event:t,target:this,value:a,rgbaValue:s})},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 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=R;
+                    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:r.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,s){const a=r.getRGBA(t),o=r.getHSV(t);this.currentHsva=o,this.currentBgColor=r.getColorFromHue(o.h),this.currentRgba=a,this.currentHex=e,this.dispatchChangeEvent(t,s.event,e,t)},onRgbaChange(e,t){const s=r.getColorFromRGBA(e),a=r.parseColor(s,"hex",this.opacity),o=r.getHSV(s);this.currentHsva=o,this.currentBgColor=r.getColorFromHue(o.h),this.currentRgba=e,this.currentHex=a,this.dispatchChangeEvent(s,t.event,a,s)},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,s){const a=this.hsva;a[t]+=s*(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(),s=e.clientX-t.left,a=e.clientY-t.top,o=u.fitIntoBounds(s,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 s=r.getColorFromHSV(e),a=r.parseColor(s,"hex",this.opacity),o=r.parseColor(s,"rgba");this.currentHsva=e,this.currentBgColor=r.getColorFromHue(e.h),this.currentRgba=r.getRGBA(s),this.currentHex=a,this.dispatchChangeEvent(s,t,a,o)},dispatchChangeEvent(e,t,s,a){this.currentValue=e,this.$emit("changemodel",s),this.$emit("update:modelRgbaValue",a),this.$emit("update:modelValue",s),this.$emit("change",{event:t,target:this,value:s,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;

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 R, createVNode as s } from "vue";
-import { validatePackage as $, guid as H, classNames as B, getTabIndex as V, Draggable as I, focusContainer as L, getRef as F, Keys as o, focusFirstFocusableChild as w, setRef as T } from "@progress/kendo-vue-common";
-import { packageMetadata as D } from "../package-metadata.mjs";
-import { isPresent as b, fitIntoBounds as m } from "./utils/misc.mjs";
-import { parseColor as l, getHSV as h, getRGBA as d, getColorFromHue as c, getColorFromRGBA as G, getColorFromHSV as M } from "./utils/color-parser.mjs";
-import { removeCachedColor as A } from "./utils/color-cache.mjs";
-import { ColorInput as K } from "./ColorInput.mjs";
-import { ColorContrastLabels as E } from "./ColorContrastLabels.mjs";
-import { ColorContrastSvg as W } from "./ColorContrastSvg.mjs";
-import { provideLocalizationService as O } from "@progress/kendo-vue-intl";
-import { colorGradientHueSliderLabel as v, messages as g, colorGradientAlphaSliderLabel as f, colorGradientDragHandle as C } from "../messages/main.mjs";
-import { Slider as k } from "../slider/Slider.mjs";
-const N = "rgba", x = "rgba(255, 255, 255, 1)", te = /* @__PURE__ */ R({
+import { defineComponent as w, createVNode as s } from "vue";
+import { validatePackage as D, guid as G, classNames as M, kendoThemeMaps as A, getTabIndex as K, Draggable as E, focusContainer as z, getRef as W, Keys as n, focusFirstFocusableChild as O, setRef as N } from "@progress/kendo-vue-common";
+import { packageMetadata as P } from "../package-metadata.mjs";
+import { isPresent as f, fitIntoBounds as C } from "./utils/misc.mjs";
+import { parseColor as o, getHSV as c, getRGBA as u, getColorFromHue as g, getColorFromRGBA as j, getColorFromHSV as X } 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 m, 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({
   name: "KendoColorGradient",
   model: {
     event: "changemodel"
@@ -54,30 +54,33 @@ const N = "rgba", x = "rgba(255, 255, 255, 1)", te = /* @__PURE__ */ R({
     innerTabIndex: {
       type: Number,
       default: void 0
-    }
+    },
+    size: String,
+    class: String,
+    adaptive: Boolean
   },
   created() {
-    $(D), this.guid = H();
+    D(P), this.guid = G();
   },
   computed: {
     valueSet() {
       return this.value || this.modelValue || this.modelRgbaValue;
     },
     computedValue() {
-      let e = this.valueSet || this.currentValue || this.defaultValue || l(x, N);
-      return b(l(e, "hex", this.opacity)) || (e = x), e;
+      let e = this.valueSet || this.currentValue || this.defaultValue || o(y, Q);
+      return f(o(e, "hex", this.opacity)) || (e = y), e;
     },
     hsva() {
-      return this.valueSet ? h(this.computedValue) : this.currentHsva || h(this.computedValue);
+      return this.valueSet ? c(this.computedValue) : this.currentHsva || c(this.computedValue);
     },
     rgba() {
-      return this.valueSet ? d(this.computedValue) : this.currentRgba;
+      return this.valueSet ? u(this.computedValue) : this.currentRgba;
     },
     hex() {
-      return this.valueSet ? l(this.computedValue, "hex", this.opacity) : this.currentHex;
+      return this.valueSet ? o(this.computedValue, "hex", this.opacity) : this.currentHex;
     },
     computedBgColor() {
-      return this.currentBgColor || c(this.hsva.h);
+      return this.currentBgColor || g(this.hsva.h);
     },
     computedTabIndex() {
       return this.innerTabIndex !== void 0 ? this.innerTabIndex : this.focused ? 0 : -1;
@@ -95,57 +98,68 @@ const N = "rgba", x = "rgba(255, 255, 255, 1)", te = /* @__PURE__ */ R({
     };
   },
   mounted() {
-    this.setAlphaSliderBackground(this.computedBgColor), this.$el && (this.draggable = this.$refs.draggable, this.gradientWrapper = this.draggable && this.draggable.element), this.alphaSlider = this.alphaSliderRef, this.isFirstRender && (this.isFirstRender = !1);
+    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() {
-    A(this.guid);
+    Y(this.guid);
   },
   updated() {
     this.setAlphaSliderBackground(this.computedBgColor);
   },
   render() {
-    const e = B("k-colorgradient", {
-      "k-disabled": this.$props.disabled
-    }), t = O(this), a = t.toLanguageString(v, g[v]), i = t.toLanguageString(f, g[f]), r = t.toLanguageString(C, g[C]), u = function() {
-      let n = {};
+    const {
+      size: e,
+      disabled: t,
+      class: i,
+      opacity: a,
+      id: r,
+      tabIndex: h,
+      ariaDescribedBy: p,
+      ariaLabelledBy: H,
+      adaptive: d
+    } = this.$props, B = M("k-colorgradient", {
+      "k-disabled": t,
+      [`k-colorgradient-${A.sizeMap[e] || e}`]: e
+    }, i), b = J(this), $ = b.toLanguageString(k, m[k]), V = b.toLanguageString(S, m[S]), L = b.toLanguageString(x, m[x]), F = function() {
+      let l = {};
       if (!this.isFirstRender) {
-        const p = this.getGradientRectMetrics(), S = (1 - this.hsva.v) * p.height, y = this.hsva.s * p.width;
-        n.top = `${S}px`, n.left = `${y}px`;
+        const v = this.getGradientRectMetrics(), I = (1 - this.hsva.v) * v.height, T = this.hsva.s * v.width;
+        l.top = `${I}px`, l.left = `${T}px`;
       }
       return s("div", {
         class: "k-hsv-draghandle k-draghandle",
         role: "slider",
         "aria-orientation": void 0,
-        "aria-label": r + `${this.value || "none"}`,
+        "aria-label": L + `${this.value || "none"}`,
         "aria-valuenow": Math.round(this.hsva.s * 100),
         "aria-valuetext": `
                     saturation: ${Math.round(this.hsva.s * 100)}%,
                     value: ${Math.round(this.hsva.v * 100)}%`,
         tabindex: this.computedTabIndex,
         onKeydown: this.dragKeyDown,
-        style: n,
-        ref: T(this, "draghandle")
+        style: l,
+        ref: N(this, "draghandle")
       }, null);
     };
     return s("div", {
-      id: this.$props.id,
-      class: e,
-      role: this.$props.tabIndex !== -1 ? "textbox" : void 0,
-      "aria-disabled": this.$props.disabled,
-      tabindex: V(this.$props.tabIndex, this.$props.disabled),
-      "aria-labelledby": this.$props.ariaLabelledBy,
-      "aria-describedby": this.$props.ariaDescribedBy,
+      id: r,
+      class: B,
+      role: h !== -1 ? "textbox" : void 0,
+      "aria-disabled": t,
+      tabindex: K(h, t),
+      "aria-labelledby": H,
+      "aria-describedby": p,
       onFocus: this.onFocus,
       onBlur: this.onBlur,
       onKeydown: this.onKeyDownHandler
     }, [s("div", {
-      class: "k-colorgradient-canvas k-hstack"
+      class: `k-colorgradient-canvas ${d ? "k-vstack" : "k-hstack"}`
     }, [s("div", {
       class: "k-hsv-rectangle",
       style: {
         background: this.computedBgColor
       }
-    }, [s(I, {
+    }, [s(E, {
       onDrag: this.onDrag,
       onRelease: this.onRelease,
       ref: "draggable"
@@ -157,66 +171,67 @@ const N = "rgba", x = "rgba(255, 255, 255, 1)", te = /* @__PURE__ */ R({
         },
         tabindex: -1,
         onClick: this.onGradientWrapperClick
-      }, [u.call(this)])]
-    }), this.backgroundColor && !this.isFirstRender && s(W, {
+      }, [F.call(this)])]
+    }), this.backgroundColor && !this.isFirstRender && s(q, {
       metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
       hsva: this.hsva,
       backgroundColor: this.backgroundColor
     }, null)]), s("div", {
-      class: "k-hsv-controls k-hstack"
-    }, [s(k, {
+      class: `k-hsv-controls ${d ? "k-vstack" : "k-hstack"}`
+    }, [s(R, {
       tabIndex: this.computedTabIndex,
       value: this.hsva.h,
       buttons: !1,
-      vertical: !0,
+      vertical: !d,
       min: 0,
       max: 360,
       step: 5,
       onChange: this.onHueSliderChange,
       class: "k-hue-slider k-colorgradient-slider",
-      disabled: this.$props.disabled,
-      ariaLabel: a
-    }, null), this.$props.opacity && s(k, {
+      disabled: t,
+      ariaLabel: $
+    }, null), a && s(R, {
       tabIndex: this.computedTabIndex,
-      value: b(this.hsva.a) ? this.hsva.a * 100 : 100,
+      value: f(this.hsva.a) ? this.hsva.a * 100 : 100,
       buttons: !1,
-      vertical: !0,
+      vertical: !d,
       min: 0,
       max: 100,
       step: 1,
       onChange: this.onAlphaSliderChange,
       class: "k-alpha-slider k-colorgradient-slider",
-      disabled: this.$props.disabled,
-      ariaLabel: i,
-      ref: (n) => {
-        this.alphaSliderRef = n;
+      disabled: t,
+      ariaLabel: V,
+      ref: (l) => {
+        this.alphaSliderRef = l;
       }
-    }, null)])]), s(K, {
+    }, null)])]), s(_, {
       tabIndex: this.computedTabIndex,
       rgba: this.rgba,
       onRgbachange: this.onRgbaChange,
       hex: this.hex,
       onHexchange: this.onHexChange,
-      opacity: this.$props.opacity,
-      disabled: this.$props.disabled,
-      ref: "colorInput"
-    }, null), this.backgroundColor && s(E, {
-      bgColor: d(this.backgroundColor),
+      opacity: a,
+      disabled: t,
+      ref: "colorInput",
+      size: e
+    }, null), this.backgroundColor && s(U, {
+      bgColor: u(this.backgroundColor),
       rgba: this.rgba
     }, null)]);
   },
   methods: {
     onKeyDownHandler(e) {
       const t = this.$el;
-      this.innerTabIndex === void 0 && (this.focused = L(e, t)), this.$emit("keydown", e);
+      this.innerTabIndex === void 0 && (this.focused = z(e, t)), this.$emit("keydown", e);
     },
-    onHexChange(e, t, a) {
-      const i = d(t), r = h(t);
-      this.currentHsva = r, this.currentBgColor = c(r.h), this.currentRgba = i, this.currentHex = e, this.dispatchChangeEvent(t, a.event, e, t);
+    onHexChange(e, t, i) {
+      const a = u(t), r = c(t);
+      this.currentHsva = r, this.currentBgColor = g(r.h), this.currentRgba = a, this.currentHex = e, this.dispatchChangeEvent(t, i.event, e, t);
     },
     onRgbaChange(e, t) {
-      const a = G(e), i = l(a, "hex", this.opacity), r = h(a);
-      this.currentHsva = r, this.currentBgColor = c(r.h), this.currentRgba = e, this.currentHex = i, this.dispatchChangeEvent(a, t.event, i, a);
+      const i = j(e), a = o(i, "hex", this.opacity), r = c(i);
+      this.currentHsva = r, this.currentBgColor = g(r.h), this.currentRgba = e, this.currentHex = a, this.dispatchChangeEvent(i, t.event, a, i);
     },
     onAlphaSliderChange(e) {
       this.handleHsvaChange(Object.assign({}, this.hsva, {
@@ -235,49 +250,49 @@ const N = "rgba", x = "rgba(255, 255, 255, 1)", te = /* @__PURE__ */ R({
       this.gradientWrapper.classList.remove("k-dragging");
     },
     onGradientWrapperClick(e) {
-      this.firstFocusable = F(this, "draghandle"), this.firstFocusable && this.firstFocusable.focus(), this.changePosition(e);
+      this.firstFocusable = W(this, "draghandle"), this.firstFocusable && this.firstFocusable.focus(), this.changePosition(e);
     },
-    move(e, t, a) {
-      const i = this.hsva;
-      i[t] += a * (e.shiftKey ? 0.01 : 0.05), i[t] < 0 && (i[t] = 0), i[t] > 1 && (i[t] = 1), e.preventDefault(), this.handleHsvaChange(i, e);
+    move(e, t, i) {
+      const a = this.hsva;
+      a[t] += i * (e.shiftKey ? 0.01 : 0.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 o.left:
+        case n.left:
           this.move(e, "s", -1);
           break;
-        case o.right:
+        case n.right:
           this.move(e, "s", 1);
           break;
-        case o.up:
+        case n.up:
           this.move(e, "v", 1);
           break;
-        case o.down:
+        case n.down:
           this.move(e, "v", -1);
           break;
-        case o.enter:
+        case n.enter:
           break;
-        case o.esc:
+        case n.esc:
           break;
       }
     },
     changePosition(e) {
-      const t = this.getGradientRectMetrics(), a = e.clientX - t.left, i = e.clientY - t.top, r = m(a, 0, t.width), u = m(i, 0, t.height), n = 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 - u / t.height
+        v: 1 - h / t.height
       });
-      this.handleHsvaChange(n, e, e.event);
+      this.handleHsvaChange(p, e, e.event);
     },
     handleHsvaChange(e, t) {
-      const a = M(e), i = l(a, "hex", this.opacity), r = l(a, "rgba");
-      this.currentHsva = e, this.currentBgColor = c(e.h), this.currentRgba = d(a), this.currentHex = i, this.dispatchChangeEvent(a, t, i, r);
+      const i = X(e), a = o(i, "hex", this.opacity), r = o(i, "rgba");
+      this.currentHsva = e, this.currentBgColor = g(e.h), this.currentRgba = u(i), this.currentHex = a, this.dispatchChangeEvent(i, t, a, r);
     },
-    dispatchChangeEvent(e, t, a, i) {
-      this.currentValue = e, this.$emit("changemodel", a), this.$emit("update:modelRgbaValue", i), this.$emit("update:modelValue", a), this.$emit("change", {
+    dispatchChangeEvent(e, t, i, a) {
+      this.currentValue = e, this.$emit("changemodel", i), this.$emit("update:modelRgbaValue", a), this.$emit("update:modelValue", i), this.$emit("change", {
         event: t,
         target: this,
-        value: a,
-        rgbaValue: i
+        value: i,
+        rgbaValue: a
       });
     },
     onFocus(e) {
@@ -293,7 +308,7 @@ const N = "rgba", x = "rgba(255, 255, 255, 1)", te = /* @__PURE__ */ R({
       });
     },
     setAlphaSliderBackground(e) {
-      this.$props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack && (this.alphaSlider.sliderTrack.style.background = `linear-gradient(to top, transparent, ${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();
@@ -310,11 +325,11 @@ const N = "rgba", x = "rgba(255, 255, 255, 1)", te = /* @__PURE__ */ R({
     },
     focus() {
       this.focused = !0, setTimeout(() => {
-        w(this.$el);
+        O(this.$el);
       }, 1);
     }
   }
 });
 export {
-  te as ColorGradient
+  ce as ColorGradient
 };

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"),b=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 s=["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},inject:{kendoLocalizationService:{default:null}},created(){this.hexInputId=b.guid()},data(){return{inputMode:s[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]),o=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]),h=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:o,tabIndex:this.tabIndex,type:"button",fillMode:"flat",icon:"caret-alt-expand",svgIcon:I.caretAltExpandIcon,class:"k-colorgradient-toggle-mode k-icon-button",onClick:this.onToggleModeChange,onKeydown:this.onKeyDown},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"},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:h,onChange:this.onRgbaRChange,disabled:this.$props.disabled},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},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"},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"},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 o={...this.$props.rgba};e.r!==void 0&&(o.r=e.r),e.g!==void 0&&(o.g=e.g),e.b!==void 0&&(o.b=e.b),e.a!==void 0&&(o.a=e.a),this.$emit("rgbachange",o,n)},onToggleModeChange(){const e=s.length-1===s.indexOf(this.inputMode)?0:s.indexOf(this.inputMode)+1;if(this.$props.opacity)this.inputMode=s[e];else{const n=s[e]==="rgba"?e+1:e;this.inputMode=s[n]}},onKeyDown(e){e.keyCode===b.Keys.enter&&e.stopPropagation()}}});exports.ColorInput=C;
+"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:"caret-alt-expand",svgIcon:I.caretAltExpandIcon,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;