@progress/kendo-vue-inputs/colors/ColorInput.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 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;