@progress/kendo-vue-inputs/colors/ColorGradient.js

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * 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"),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: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;