87 lines
48 KiB
JavaScript
87 lines
48 KiB
JavaScript
|
/*
|
||
|
|
Tool Cool Color Picker
|
||
|
|
Version: 1.0.14
|
||
|
|
Documentation: https://github.com/mzusin/toolcool-color-picker
|
||
|
|
Author: Miriam Zusin
|
||
|
|
License: MIT License
|
||
|
|
*/
|
||
|
|
(()=>{var Mt=Object.defineProperty;var kt=(o,e,t)=>e in o?Mt(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var h=(o,e,t)=>(kt(o,typeof e!="symbol"?e+"":e,t),t);var ot=":root{--tool-cool-color-picker-btn-bg:#fff;--tool-cool-color-picker-btn-border-color:#cecece;--tool-cool-color-picker-btn-border-color-inner:#626262;--tool-cool-color-picker-btn-border-radius:.25rem;--tool-cool-color-picker-btn-border-radius-inner:0}.color-picker{position:relative}.button{width:3rem;height:1.5rem;padding:.25rem;background:var(--tool-cool-color-picker-btn-bg,#fff);border-radius:var(--tool-cool-color-picker-btn-border-radius,0.25rem);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color,#cecece);cursor:pointer;box-sizing:border-box}.button-color{display:block;width:100%;height:100%;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var it=":root{--tool-cool-color-picker-popup-bg:#fff;--tool-cool-color-picker-popup-border-color:#cecece;--tool-cool-color-picker-popup-width:214px}.popup{position:absolute;left:0;top:calc(100% - 1px);z-index:50;width:var(--tool-cool-color-picker-popup-width,214px);box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);padding:.5rem;background:var(--tool-cool-color-picker-popup-bg,#fff);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-popup-border-color,#cecece);border-radius:.25rem}.popup.right{right:0;left:auto}";var rt=".saturation{touch-action:none;overflow:hidden;width:100%;height:9rem;position:relative}.box{width:100%;height:100%;position:absolute}.white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.black{background:linear-gradient(0,#000,transparent)}.pointer{top:34.902%;left:18.6747%;cursor:pointer;position:absolute;outline:0}.handler{box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgb(0,0,0,0.3),0 0 1px 2px rgb(0,0,0,0.4);-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px);border-radius:100%;width:.25rem;height:.25rem;outline:0}";var p="tc-hsv-changed",f="tc-hue-changed",m="tc-alpha-changed",D="tc-button-clicked",nt=o=>{!o||document.dispatchEvent(new CustomEvent(D,{detail:{cid:o}}))},M=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(m,{detail:{a:e,cid:o}}))},b=(o,e,t,i)=>{!o||document.dispatchEvent(new CustomEvent(p,{detail:{h:e,s:t,v:i,cid:o}}))},st=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(f,{detail:{h:e,cid:o}}))};function u(o,e){St(o)&&(o="100%");var t=Tt(o);return o=e===360?o:Math.min(e,Math.max(0,parseFloat(o))),t&&(o=parseInt(String(o*e),10)/100),Math.abs(o-e)<1e-6?1:(e===360?o=(o<0?o%e+e:o%e)/parseFloat(String(e)):o=o%e/parseFloat(String(e)),o)}function k(o){return Math.min(1,Math.max(0,o))}function St(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function Tt(o){return typeof o=="string"&&o.indexOf("%")!==-1}function _(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function L(o){return o<=1?"".concat(Number(o)*100,"%"):o}function C(o){return o.length===1?"0"+o:String(o)}function at(o,e,t){return{r:u(o,255)*255,g:u(e,255)*255,b:u(t,255)*255}}function U(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,a=(i+r)/2;if(i===r)s=0,n=0;else{var d=i-r;switch(s=a>.5?d/(2-i-r):d/(i+r),i){case o:n=(e-t)/d+(e<t?6:0);break;case e:n=(t-o)/d+2;break;case t:n=(o-e)/d+4;break;default:break}n/=6}return{h:n,s,l:a}}function O(o,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?o+(e-o)*(6*t):t<1/2?e:t<2/3?o+(e-o)*(2/3-t)*6:o}function ht(o,e,t){var i,r,n;if(o=u(o,360),e=u(e,100),t=u(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,a=2*t-s;i=O(a,s,o+1/3),r=O(a,s,o),n=O(a,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function N(o,e,t){o=u(o,255),e=u(e,255),t=u(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,a=i-r,d=i===0?0:a/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/a+(e<t?6:0);break;case e:n=(t-o)/a+2;break;case t:n=(o-e)/a+4;break;default:b
|
||
|
|
<style>${rt}</style>
|
||
|
|
<div class="saturation">
|
||
|
|
<div class="box" style="background: ${q(this.hue)}">
|
||
|
|
<div class="white box">
|
||
|
|
<div class="black box"></div>
|
||
|
|
|
||
|
|
<div class="pointer" tabindex="0" style="top: ${r}; left: ${n};">
|
||
|
|
<div class="handler"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),(s=this.$pointer)==null||s.addEventListener("keydown",this.onPointerKeyDown),(a=this.$saturation)==null||a.addEventListener("mousedown",this.onMouseDown),(d=this.$saturation)==null||d.addEventListener("mouseup",this.onMouseUp),(w=this.$saturation)==null||w.addEventListener("touchmove",this.onChange),(x=this.$saturation)==null||x.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$saturation)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$saturation)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$saturation)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$saturation)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},bt=j;var vt=".hue{overflow:hidden;height:.625rem;margin-bottom:.25rem;margin-top:.25rem;position:relative}.box{width:100%;height:100%;position:absolute}.hue-v{background:linear-gradient(0,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.hue-h{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);width:100%;height:100%;position:relative}.pointer-box{left:87%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.pointer-box:focus .handler{border:2px solid hsla(0,0%,88%,1)}";var Y=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$hue");h(this,"$pointer");h(this,"hue",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this)}static get observedAttributes(){return["color"]}render(){this.$pointer&&(this.$pointer.style.left=`${T(this.hue)}%`),st(this.cid,this.hue)}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.hue!==t.detail.h&&(this.hue=t.detail.h,this.render())}onChange(t){if(!this.$hue)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$hue.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=B(a),this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=T(this.hue);r=Math.max(0,r-1),this.hue=B(r),this.render();break}case"ArrowRight":{let r=T(this.hue);r=Math.min(100,r+1),this.hue=B(r),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var i,r,n,s,a;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
|
||
|
|
<style>${vt}</style>
|
||
|
|
<div class="hue">
|
||
|
|
<div class="box">
|
||
|
|
<div class="hue-v box">
|
||
|
|
<div class="hue-h"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="pointer box">
|
||
|
|
<div class="pointer-box" tabindex="0" style="left: ${T(this.hue)}%">
|
||
|
|
<div class="handler"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(i=this.$hue)==null||i.addEventListener("mousedown",this.onMouseDown),(r=this.$hue)==null||r.addEventListener("mouseup",this.onMouseUp),(n=this.$hue)==null||n.addEventListener("touchmove",this.onChange),(s=this.$hue)==null||s.addEventListener("touchstart",this.onChange),(a=this.$pointer)==null||a.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$hue)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$hue)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$hue)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$hue)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.hue=s.h,this.render()}},mt=Y;var wt=".alpha{overflow:hidden;height:.625rem;position:relative;background:#fff}.box{width:100%;height:100%;position:absolute}.transparent-bg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);overflow:hidden}.pointer-box{left:100%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.alpha-pointer-box:focus .alpha-pointer-handler{border:2px solid hsla(0,0%,88%,1)}";var Q=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$alpha");h(this,"$color");h(this,"$pointer");h(this,"alpha",1);h(this,"hue",0);h(this,"saturation",0);h(this,"value",0);this.attachShadow({mode:"open"}),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onChange=this.onChange.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){if(this.$pointer&&(this.$pointer.style.left=`${this.alpha*100}%`),this.$color){let i=new l({h:this.hue,s:this.saturation,v:this.value,a:this.alpha});this.$color.style.background=z(i)}t&&M(this.cid,this.alpha)}onChange(t){if(!this.$alpha)return;t.preventDefault&&t.preventDefault();let{width:i,left:r}=this.$alpha.getBoundingClientRect();if(i===0)return;let n=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,s=Math.min(Math.max(0,n-r),i),a=Math.min(Math.max(0,s*100/i),100);this.alpha=a/100,this.render()}onKeyDown(t){var i;switch((i=this.$pointer)==null||i.focus(),t.key){case"ArrowLeft":{let r=this.alpha*100;r=Math.max(0,r-1),this.alpha=r/100,this.render();break}case"ArrowRight":{let r=this.alpha*100;r=Math.min(100,r+1),this.alpha=r/100,this.render();break}}}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.saturation=t.detail.h,this.hue=t.detail.s,this.value=t.detail.v,this.render(!1))}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render(!1))}alphaChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&this.alpha!==t.detail.a&&(this.alpha=t.detail.a,this.render())}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{var i;(i=this.$pointer)==null||i.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){var r,n,s,a,d;if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"";let t=c(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.sh
|
||
|
|
<style>${wt}</style>
|
||
|
|
<div class="alpha">
|
||
|
|
<div class="box">
|
||
|
|
<div class="transparent-bg box"></div>
|
||
|
|
<div class="color-bg box" style="background: ${z(t)}"></div>
|
||
|
|
|
||
|
|
<div class="pointer box">
|
||
|
|
<div class="pointer-box" tabindex="0" style="left: ${this.alpha*100}%;" >
|
||
|
|
<div class="handler"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var Et=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==nul
|
||
|
|
<style>${Et}</style>
|
||
|
|
<div class="fields">
|
||
|
|
<input id="hex-${i}" type="text" value="${this.hex.toUpperCase()}" data-type="hex" />
|
||
|
|
<input id="r-${r}" type="text" value="${this.r}" data-type="r" />
|
||
|
|
<input id="g-${n}" type="text" value="${this.g}" data-type="g" />
|
||
|
|
<input id="b-${s}" type="text" value="${this.b}" data-type="b" />
|
||
|
|
<input id="a-${a}" type="text" value="${Math.round(this.a*100)}" data-type="a" />
|
||
|
|
|
||
|
|
<label for="hex-${i}">Hex</label>
|
||
|
|
<label for="r-${r}">R</label>
|
||
|
|
<label for="g-${n}">G</label>
|
||
|
|
<label for="b-${s}">B</label>
|
||
|
|
<label for="a-${a}">A</label>
|
||
|
|
</div>
|
||
|
|
`,this.$hex=this.shadowRoot.getElementById(`hex-${i}`),this.$r=this.shadowRoot.getElementById(`r-${r}`),this.$g=this.shadowRoot.getElementById(`g-${n}`),this.$b=this.shadowRoot.getElementById(`b-${s}`),this.$a=this.shadowRoot.getElementById(`a-${a}`),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged),this.$hex.addEventListener("input",this.onHexChange),this.$r.addEventListener("input",this.onRedChange),this.$g.addEventListener("input",this.onGreenChange),this.$b.addEventListener("input",this.onBlueChange),this.$a.addEventListener("input",this.onAlphaChange),this.$hex.addEventListener("blur",this.render),this.$r.addEventListener("blur",this.render),this.$g.addEventListener("blur",this.render),this.$b.addEventListener("blur",this.render),this.$a.addEventListener("blur",this.render),this.$r.addEventListener("keydown",this.onRedKeyDown),this.$g.addEventListener("keydown",this.onGreenKeyDown),this.$b.addEventListener("keydown",this.onBlueKeyDown),this.$a.addEventListener("keydown",this.onAlphaKeyDown)}disconnectedCallback(){document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged),this.$hex.removeEventListener("input",this.onHexChange),this.$r.removeEventListener("input",this.onRedChange),this.$g.removeEventListener("input",this.onGreenChange),this.$b.removeEventListener("input",this.onBlueChange),this.$a.removeEventListener("input",this.onAlphaChange),this.$hex.removeEventListener("blur",this.render),this.$r.removeEventListener("blur",this.render),this.$g.removeEventListener("blur",this.render),this.$b.removeEventListener("blur",this.render),this.$a.removeEventListener("blur",this.render),this.$r.removeEventListener("keydown",this.onRedKeyDown),this.$g.removeEventListener("keydown",this.onGreenKeyDown),this.$b.removeEventListener("keydown",this.onBlueKeyDown),this.$a.removeEventListener("keydown",this.onAlphaKeyDown)}attributeChangedCallback(t,i,r){this.color=c(r),this.render()}},Ct=J;var Z=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"popupPosition","left");h(this,"$popup");h(this,"color","#000");customElements.get("toolcool-color-picker-saturation")||customElements.define("toolcool-color-picker-saturation",bt),customElements.get("toolcool-color-picker-hue")||customElements.define("toolcool-color-picker-hue",mt),customElements.get("toolcool-color-picker-alpha")||customElements.define("toolcool-color-picker-alpha",xt),customElements.get("toolcool-color-picker-fields")||customElements.define("toolcool-color-picker-fields",Ct),this.cid=this.getAttribute("cid")||"",this.prevent=this.prevent.bind(this),this.attachShadow({mode:"open"})}static get observedAttributes(){return["color","popup-position"]}prevent(t){t.stopPropagation()}connectedCallback(){var t,i;!this.shadowRoot||(this.color=this.getAttribute("color")||"#000",this.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
|
||
|
|
<style>${it}</style>
|
||
|
|
<div class="popup">
|
||
|
|
<toolcool-color-picker-saturation color="${this.color}" cid="${this.cid}"></toolcool-color-picker-saturation>
|
||
|
|
<toolcool-color-picker-hue color="${this.color}" cid="${this.cid}"></toolcool-color-picker-hue>
|
||
|
|
<toolcool-color-picker-alpha color="${this.color}" cid="${this.cid}"></toolcool-color-picker-alpha>
|
||
|
|
<toolcool-color-picker-fields color="${this.color}" cid="${this.cid}"></toolcool-color-picker-fields>
|
||
|
|
</div>
|
||
|
|
`,this.$popup=this.shadowRoot.querySelector(".popup"),(t=this.$popup)==null||t.addEventListener("mousedown",this.prevent),(i=this.$popup)==null||i.classList.toggle("right",this.popupPosition==="right"))}disconnectedCallback(){var t;(t=this.$popup)==null||t.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){var n,s,a,d;if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let w=(n=this.shadowRoot)==null?void 0:n.querySelector("toolcool-color-picker-saturation"),x=(s=this.shadowRoot)==null?void 0:s.querySelector("toolcool-color-picker-hue"),R=(a=this.shadowRoot)==null?void 0:a.querySelector("toolcool-color-picker-alpha"),et=(d=this.shadowRoot)==null?void 0:d.querySelector("toolcool-color-picker-fields");w&&w.setAttribute("color",this.color),x&&x.setAttribute("color",this.color),R&&R.setAttribute("color",this.color),et&&et.setAttribute("color",this.color)}}},yt=Z;var Ut={sm:"0.875rem",md:"1.2rem",lg:"1.5rem",xl:"2.25rem","2xl":"3rem","3xl":"3.75rem","4xl":"4.5rem"},tt=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"$button");h(this,"$buttonColor");h(this,"$popupBox");h(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000"),buttonWidth:null,buttonHeight:null,buttonPadding:null});h(this,"state");this.cid=$(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",yt),this.attachShadow({mode:"open"}),this.toggle=this.toggle.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.clickedOutside=this.clickedOutside.bind(this),this.stopPropagation=this.stopPropagation.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.buttonClicked=this.buttonClicked.bind(this),this.formatButtonSize=this.formatButtonSize.bind(this),this.initState()}static get observedAttributes(){return["color","popup-position","button-width","button-height","button-padding"]}set color(t){this.state.color=new l(t)}get color(){return this.state.color}get hex(){return this.state.color.toHexString().toUpperCase()}get hex8(){return this.state.color.toHex8String().toUpperCase()}get rgb(){return this.state.color.toRgbString()}get rgba(){return S(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return pt(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return gt(this.state.color)}get opened(){return this.state.isPopupVisible}set opened(t){this.state.isPopupVisible=t}initState(){let t=this;this.state=new Proxy(t.stateDefaults,{set(i,r,n,s){return i[r]=n,r==="isPopupVisible"&&t.onPopupVisibilityChange(),r==="popupPosition"&&t.onPopupPosChange(),r==="initialColor"&&t.onInitialColorChange(),r==="color"&&t.onColorChange(),(r==="buttonWidth"||r==="buttonHeight"||r==="buttonPadding")&&t.setButtonSize(),!0}})}onPopupVisibilityChange(){!this.$popupBox||(this.$popupBox.innerHTML=this.state.isPopupVisible?`<toolcool-color-picker-popup color="${this.state.color.toRgbString()}" cid="${this.cid}" popup-position="${this.state.popupPosition}" />`:"")}onPopupPosChange(){if(!this.$popupBox)return;let t=this.$popupBox.querySelector("toolcool-color-picker-popup");!t||t.setAttribute("popup-position",this.state.popupPosition)}onInitialColorChange(){var r;let t=S(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=(r=this.shadowRoot)==null?void 0:r.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}setButtonSize(){!this.$button||(this.state.buttonWidth&&(this.$button.style.width=this.formatButtonSize(this.state.buttonWidth)),this.state.buttonHeight&&(this.$button.style.height=this.formatButtonSize(this.state.buttonHeight)),this.state.buttonPadding&&(this.$button.style.padding=this.state.buttonPadding))}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=S(this.state.color)),this.dispatchEvent(new CustomEven
|
||
|
|
<style>
|
||
|
|
${ot}
|
||
|
|
</style>
|
||
|
|
<div class="color-picker" >
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
tabIndex="0"
|
||
|
|
class="button"
|
||
|
|
title="Select Color">
|
||
|
|
<span class="button-color" style="background: ${S(this.state.color)};"></span>
|
||
|
|
</button>
|
||
|
|
<div data-popup-box></div>
|
||
|
|
</div>
|
||
|
|
`,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),(t=this.$button)==null||t.addEventListener("click",this.toggle),(i=this.$button)==null||i.addEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.addEventListener("mousedown",this.stopPropagation),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),this.setButtonSize(),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged),document.addEventListener(D,this.buttonClicked))}disconnectedCallback(){var t,i,r;(t=this.$button)==null||t.removeEventListener("click",this.toggle),(i=this.$button)==null||i.removeEventListener("keydown",this.onKeyDown),(r=this.$button)==null||r.removeEventListener("mousedown",this.stopPropagation),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged),document.removeEventListener(D,this.buttonClicked)}attributeChangedCallback(t){switch(t){case"color":{this.state.initialColor=c(this.getAttribute("color")),this.state.color=c(this.getAttribute("color")),this.onInitialColorChange();break}case"popup-position":{this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange();break}case"button-width":{this.state.buttonWidth=this.getAttribute("button-width"),this.setButtonSize();break}case"button-height":{this.state.buttonHeight=this.getAttribute("button-height"),this.setButtonSize();break}case"button-padding":{this.state.buttonPadding=this.getAttribute("button-padding"),this.setButtonSize();break}}}},$t=tt;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",$t);})();
|