1import{T as G,h as K,ak as Q,r as i,ay as x,s as T,az as g,b as y,a7 as R,E as b,G as j,I as a,K as r,u as _,N as q,M as J,Q as L,R as Z,a3 as ee,a4 as te}from"./vue-03075d31.js";import{t as u}from"./tinycolor-706fa4b9.js";import ae from"./TmlInput-108ccfb6.js";import{bj as le,ar as p,h as oe}from"./index-06f66214.js";import{d as se}from"./debounce-03444de6.js";import"./gtm-50ee8968.js";import"./faCheck-82f2f90a.js";import"./faTimes-f5dbc420.js";import"./faPlus-77102fcf.js";import"./faMinus-92960827.js";import"./faArrowRight-43a8a2b1.js";import"./faUndo-5ef0344f.js";import"./sentry-c8447f6c.js";const re=o=>(ee("data-v-f5ac9959"),o=o(),te(),o),ne=re(()=>a("div",{class:"saturation-brightness w-full h-full"},null,-1)),ie={class:"color-picker-body p-4"},ue={class:"color-picker-controls flex items-center gap-3"},ce={class:"slider-controls grow"},de=G({__name:"TmlColorPicker",props:{defaultColor:{default:"#86b302"},showAlpha:{type:Boolean,default:!1},showHexField:{type:Boolean,default:!1},width:{default:225}},emits:["input"],setup(o,{expose:z,emit:E}){const n=o,e=K(u(n.defaultColor).toHsv());Q(()=>n.defaultColor,l=>{if(d.value||c.value)return;const t=f(l);!t||u.equals(t,u(e))||Object.assign(e,t.toHsv())},{debounce:200});function f(l,t){const s=u(l);return!s||!s.isValid()?!1:t?(t==="hex"?s.getFormat().startsWith("hex"):s.getFormat()===t)?s:!1:s}const v=i(null),m=i(null),k=i(null),H={saturation:x({target:v}).pressed,hue:x({target:m}).pressed,alpha:n.showAlpha?x({target:k}).pressed:i(!1)},d=T(()=>Object.keys(H).find(l=>H[l].value)),C=se(()=>E("input",X()),50);function w(){F(),h.value=!0,C()}const{elementX:P,elementY:S,elementWidth:M,elementHeight:N}=g(v);function A(){e.s=p(P.value/M.value,0,1),e.v=p(1-S.value/N.value,0,1),(!n.showAlpha||e.a===0)&&(e.a=1),w()}y([P,S],()=>{d.value==="saturation"&&A()});const{elementX:I,elementWidth:O}=g(m);function $(){e.h=p(I.value/O.value*360,0,360),(!n.showAlpha||e.a===0)&&(e.a=1),w()}y(I,()=>{d.value==="hue"&&$()});const{elementX:B,elementWidth:U}=g(k);function V(){e.a=p(B.value/U.value,0,1),w()}y(B,()=>{d.value==="alpha"&&n.showAlpha&&V()});const W=i(""),c=i(!1),h=i(!0);function X(){const l=n.showAlpha||e.a!==1;return u(e).toString(l?"hex8":"hex6").toUpperCase()}function F(){W.value=X()}function D(l){if(!c.value)return;const t=f(l,"hex");if(!t){h.value=!1;return}h.value=!0,Object.assign(e,t.toHsv()),C()}R(()=>{F()});const Y=T(()=>e.s<.05&&e.v>.97&&e.a>.6);return z({validateColor:f}),(l,t)=>(b(),j("div",{class:"tml-color-picker grid overflow-hidden touch-none",style:r({width:`${o.width}px`})},[a("div",{ref_key:"saturationPicker",ref:v,class:"saturation relative overflow-hidden w-full select-none cursor-pointer",style:r({background:`linear-gradient(to right, #fff, hsl(${e.h}, 100%, 50%))`}),onClick:A},[ne,a("div",{class:"saturation-pointer absolute",style:r({top:`${(1-e.v)*100}%`,left:`${e.s*100}%`})},null,4)],4),a("div",ie,[a("div",ue,[a("div",{class:"color-preview background-chequered",style:r({"--color-preview-size":o.showAlpha?"30px":"18px",border:_(Y)?"1px solid var(--tml-form-border-color)":"0px"})},[a("div",{class:"h-full w-full",style:r({background:_(u)(e).toHex8String()})},null,4)],4),a("div",ce,[a("div",{ref_key:"huePicker",ref:m,class:"slider hue relative cursor-pointer select-none w-full",onClick:$},[a("div",{class:"hue-pointer absolute",style:r({left:`${e.h/360*100}%`})},null,4)],512),o.showAlpha?(b(),j("div",{key:0,ref_key:"alphaPicker",ref:k,class:"slider relative background-chequered adjusted-chequer cursor-pointer select-none w-full mt-2",onClick:V},[a("div",{class:"alpha h-full w-full",style:r({background:`linear-gradient(to right, #fff0, ${_(u)(e).toHexString()})`})},[a("div",{class:"alpha-pointer absolute",style:r({left:`${e.a*100}%`})},null,4)],4)],512)):q("",!0)])]),o.showHexField?(b(),J(le,{key:0,"form-name":"color-picker-text-input",class:"mt-2"},{default:L(()=>[Z(ae,{class:"!m-0",center:"",style:{fontSize:"1rem"},"max-height":"30px",type:"text","field-name":"hex-color",value:W.value,"auto-validate":c.value,"validation-rules":{hex:{test:()=>h.value,message:"Please enter a valid HEX color"}},onFocus:t[0]||(t[0]=s=>c.value=!0),onBlur:t[1]||(t[1]=s=>c.value=!1),onInput:D},null,8,["value","auto-validate","validation-rules"])]),_:1})):q("",!0)])],4))}});const Pe=oe(de,[["__scopeId","data-v-f5ac9959"]]);export{Pe as default}; 2//# sourceMappingURL=TmlColorPicker-a0022cee.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.