dino-color-picker/dino-color-picker.js

A color picker component

function t(t,n,e){t.dispatchEvent(new CustomEvent(n,{bubbles:!0,composed:!0,detail:e}))}class n extends HTMLElement{constructor(){super(),this.__n=new Map,this.root=this.attachShadow({mode:"open"})}static get observedAttributes(){return["value"]}attributeChangedCallback(t,n,e){"value"===t&&(this.value=e)}$(t){if(this.__n.has(t))return this.__n.get(t);const n=this.root.querySelector("#"+t);return this.__n.set(t,n),n}$add(t,n,e){"string"==typeof t&&(t=this.$(t)),t&&t.addEventListener(n,e)}$remove(t,n,e){"string"==typeof t&&(t=this.$(t)),t&&t.removeEventListener(n,e)}fire(n,e){t(this,n,e)}disconnectedCallback(){this.__n.clear()}}class e{constructor(t){this.__n=new Map,this.e=t,this.root=this.e.attachShadow({mode:"open"})}$(t){if(this.__n.has(t))return this.__n.get(t);const n=this.root.querySelector("#"+t);return this.__n.set(t,n),n}$add(t,n,e){"string"==typeof t&&(t=this.$(t)),t&&t.addEventListener(n,e)}$remove(t,n,e){"string"==typeof t&&(t=this.$(t)),t&&t.removeEventListener(n,e)}detach(){this.__n.clear()}fire(n,e){t(this.e,n,e)}}const i="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAAAAABzHgM7AAAAF0lEQVR42mM4Awb/wYCBYg6EgghRzAEAWDWBGQVyKPMAAAAASUVORK5CYII=",s="0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)",o="\ninput[type=range] {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  -webkit-appearance: none;\n  background: transparent;\n  outline: none;\n  position: relative;\n  pointer-events: auto;\n  display: block;\n}\ninput[type=range]:focus {\n  outline: none;\n}\ninput[type=range]::-ms-track {\n  width: 100%;\n  cursor: pointer;\n  background: transparent;\n  border-color: transparent;\n  color: transparent;\n}\ninput[type=range]::-moz-focus-outer {\n  outline: none;\n  border: 0;\n}\ninput[type=range]::-moz-range-thumb {\n  border-radius: 50px;\n  background: var(--thumb-color, #ffffff);\n  cursor: pointer;\n  box-shadow: 0 0 4px -1px rgba(0,0,0,0.5);\n  border: 2px solid #fff;\n  margin: 0;\n  height: 20px;\n  width: 20px;\n  transform: scale(0.9);\n  transition: transform 0.18s ease;\n}\ninput[type=range]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  border-radius: 50px;\n  background: var(--thumb-color, #ffffff);\n  cursor: pointer;\n  box-shadow: 0 0 4px -1px rgba(0,0,0,0.5);\n  height: 22px;\n  width: 22px;\n  margin: 0;\n  border: 2px solid #fff;\n  transform: scale(0.9);\n  transition: transform 0.18s ease;\n}\ninput[type=range]:focus::-moz-range-thumb {\n  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);\n  transform: scale(1);\n}\ninput[type=range]:focus::-webkit-slider-thumb {\n  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);\n  transform: scale(1);\n}\n";class r extends e{constructor(t){super(t),this.handleInput=t=>{t.stopPropagation();const n=+this.$("range").value;this.updateThumb(),this.fire("range",{value:n})},this.root.innerHTML=`\n    <style>\n      ${o}\n      #container {\n        width: 100%;\n        box-sizing: border-box;\n        height: 12px;\n        border-radius: 12px;\n        position: relative;\n        pointer-events: none;\n      }\n      #gradient {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        pointer-events: none;\n        border-radius: 12px;\n        background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));\n        border: 1px solid #e5e5e5;\n      }\n    </style>\n    <div id="container">\n      <div id="gradient"></div>\n      <input id="range" type="range" min="0" max="360" value="0" aria-label="Hue">\n    </div>\n    `,this.attach()}attach(){this.$add("range","input",this.handleInput),this.updateThumb()}detach(){this.$remove("range","input",this.handleInput),super.detach()}get value(){const t=this.$("range");return t?+t.value:0}set value(t){const n=this.$("range");n&&(n.value=""+Math.max(0,Math.min(360,t)),this.updateThumb())}updateThumb(){const t=this.$("range");t&&this.e.style.setProperty("--thumb-color",`hsl(${+t.value}, 100%, 50%)`)}}function a(t){let n=-1;return self.Touch&&t instanceof Touch?n=t.identifier:h(t)&&(n=t.pointerId),{id:n,nativeEvent:t,clientX:t.clientX,clientY:t.clientY}}const h=t=>self.PointerEvent&&t instanceof PointerEvent;class l{constructor(t,n){this.startPointers=[],this.currentPointers=[],this.pointerStart=t=>{if(0===t.button&&this.triggerPointerStart(a(t),t))if(h(t)){(t.target&&"setPointerCapture"in t.target?t.target:this._e).setPointerCapture(t.pointerId),this.ael("pointermove",this.move),this.ael("pointerup",this.pointerEnd),this.ael("pointercancel",this.pointerEnd)}else window.addEventListener("mousemove",this.move),window.addEventListener("mouseup",this.pointerEnd)},this.touchStart=t=>{for(const n of Array.from(t.changedTouches))this.triggerPointerStart(a(n),t)},this.move=t=>{const n="changedTouches"in t?Array.from(t.changedTouches).map((t=>a(t))):[a(t)],e=[];for(const t of n){const n=this.currentPointers.findIndex((n=>n.id===t.id));-1!==n&&(e.push(t),this.currentPointers[n]=t)}0!==e.length&&this._h.onMove(e,t)},this._end=(t,n)=>{const e=this.currentPointers.findIndex((n=>n.id===t.id));return-1!==e&&(this.currentPointers.splice(e,1),this.startPointers.splice(e,1),this._h.onEnd&&this._h.onEnd(t,n,"touchcancel"===n.type||"pointercancel"===n.type),!0)},this.pointerEnd=t=>{if(this._end(a(t),t))if(h(t)){if(this.currentPointers.length)return;this.rel("pointermove",this.move),this.rel("pointerup",this.pointerEnd),this.rel("pointercancel",this.pointerEnd)}else window.removeEventListener("mousemove",this.move),window.removeEventListener("mouseup",this.pointerEnd)},this.touchEnd=t=>{for(const n of Array.from(t.changedTouches))this._end(a(n),t)},this._e=t,this._h=n,self.PointerEvent?this.ael("pointerdown",this.pointerStart):(this.ael("mousedown",this.pointerStart),this.ael("touchstart",this.touchStart),this.ael("touchmove",this.move),this.ael("touchend",this.touchEnd),this.ael("touchcancel",this.touchEnd))}ael(t,n){this._e.addEventListener(t,n)}rel(t,n){this._e.removeEventListener(t,n)}stop(){this.rel("pointerdown",this.pointerStart),this.rel("mousedown",this.pointerStart),this.rel("touchstart",this.touchStart),this.rel("touchmove",this.move),this.rel("touchend",this.touchEnd),this.rel("touchcancel",this.touchEnd),this.rel("pointermove",this.move),this.rel("pointerup",this.pointerEnd),this.rel("pointercancel",this.pointerEnd),window.removeEventListener("mousemove",this.move),window.removeEventListener("mouseup",this.pointerEnd)}triggerPointerStart(t,n){return!!this._h.onStart(t,n)&&(this.currentPointers.push(t),this.startPointers.push(t),!0)}}class p{constructor(t,n){this.anchor=[0,0,0,0],this.p=[0,0],this.pAnchor=[0,0],this.e=t,n&&(this.p=this.clamp(n)),this.tracker=new l(this.e,this)}get position(){return this.p}set position(t){this.p=this.clamp(t)}clamp(t){return[Math.max(0,Math.min(1,t[0])),Math.max(0,Math.min(1,t[1]))]}onStart(t,n){n.preventDefault();const e=this.e.getBoundingClientRect();this.anchor=[e.left||e.x,e.top||e.y,e.width,e.height];const i=this.anchor[2],s=this.anchor[3],o=i?(t.clientX-this.anchor[0])/i:0,r=s?(t.clientY-this.anchor[1])/s:0;return this.setPosition(o,r),this.pAnchor=[...this.p],this.e.style.cursor="pointer",!0}onMove(t){const n=t[0];if(n){const t=this.anchor[2],e=this.anchor[3],i=t?(n.clientX-this.anchor[0])/t:0,s=e?(n.clientY-this.anchor[1])/e:0;this.setPosition(i,s)}}onEnd(t,n,e){this.e.style.cursor="",e&&this.setPosition(...this.pAnchor)}moveBy(t,n){const{width:e,height:i}=this.e.getBoundingClientRect();if(e&&i){let[s,o]=this.position;s+=t/e,o+=n/i,this.setPosition(s,o)}}setPosition(t,n){const[e,i]=this.clamp([t,n]);return(e!==this.p[0]||i!==this.p[1])&&(this.p=[e,i],this.fire(),!0)}fire(){this.e.dispatchEvent(new CustomEvent("p-input",{bubbles:!0,composed:!0,detail:[...this.p]}))}detach(){this.tracker.stop()}}class u extends e{constructor(t){super(t),this.handleInput=t=>{t.stopPropagation(),this.fire("range",{value:this.value})},this.root.innerHTML=`\n    <style>\n      ${o}\n      :host {\n        --thumb-color: transparent;\n      }\n      #container {\n        width: 100%;\n        box-sizing: border-box;\n        height: 12px;\n        border-radius: 12px;\n        position: relative;\n        pointer-events: none;\n      }\n      #gradient {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        pointer-events: none;\n        border-radius: 12px;\n        background-image: linear-gradient(to right, var(--alpha-g1, hsla(0, 100%, 50%, 0)), var(--alpha-g2, hsla(0, 100%, 50%, 1)));\n      }\n      #checker {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        pointer-events: none;\n        border-radius: 12px;\n        background-image: url(${i});\n        background-size: 12px 11px;\n      }\n    </style>\n    <div id="container">\n      <div id="checker"></div>\n      <div id="gradient" style=""></div>\n      <input id="range" type="range" min="0" max="100" value="100" aria-label="Alpha">\n    </div>\n    `,this.attach()}attach(){this.$add("range","input",this.handleInput)}detach(){this.$remove("range","input",this.handleInput),super.detach()}set hue(t){this.e.style.setProperty("--alpha-g1",`hsla(${t}, 100%, 50%, 0)`),this.e.style.setProperty("--alpha-g2",`hsla(${t}, 100%, 50%, 1)`)}set hsl(t){this.e.style.setProperty("--alpha-g1",`hsla(${t[0]}, ${t[1]}%, ${t[2]}%, 0)`),this.e.style.setProperty("--alpha-g2",`hsla(${t[0]}, ${t[1]}%, ${t[2]}%, 1)`)}get value(){const t=this.$("range");return t?+t.value/100:0}set value(t){const n=this.$("range");n&&(n.value=""+100*Math.max(0,Math.min(1,t)))}}const d=/^hsla\s*\(\s*(\d+.?\d*)\s*,\s*(\d+.?\d*)%\s*,\s*(\d+.?\d*)%\s*,\s*(\d+.?\d*)\s*\)$/i,c=/^hsl\s*\(\s*(\d+.?\d*)\s*,\s*(\d+.?\d*)%\s*,\s*(\d+.?\d*)%\s*\)$/i,g=/^rgba\s*\(\s*(\d+.?\d*)\s*,\s*(\d+.?\d*)\s*,\s*(\d+.?\d*)\s*,\s*(\d+.?\d*)\s*\)$/i,b=/^rgb\s*\(\s*(\d+.?\d*)\s*,\s*(\d+.?\d*)\s*,\s*(\d+.?\d*)\s*\)$/i,v=t=>`hsl(${t[0]%360}, ${t[1]}%, ${t[2]}%)`;function m(t,n,e){t%=360,n/=100,e/=100;const i=(1-Math.abs(2*e-1))*n,s=i*(1-Math.abs(t/60%2-1)),o=e-i/2;let r=0,a=0,h=0;return[r,a,h]=t<60?[i,s,0]:t<120?[s,i,0]:t<180?[0,i,s]:t<240?[0,s,i]:t<300?[s,0,i]:[i,0,s],[Math.round(255*(r+o)),Math.round(255*(a+o)),Math.round(255*(h+o))]}function x(t,n,e){t/=255,n/=255,e/=255;const i=Math.max(t,n,e),s=Math.min(t,n,e),o=i-s;let r=0;0===o?r=0:i===t?r=(n-e)/o%6*60:i===n?r=60*((e-t)/o+2):i===e&&(r=60*((t-n)/o+4));const a=(i+s)/2,h=0===o?0:o/(1-Math.abs(2*a-1));return[Math.round((360+r)%360),Math.round(100*h),Math.round(100*a)]}function f(t,n,e,i){i=Math.round(255*i);let s=Math.round(t).toString(16),o=Math.round(n).toString(16),r=Math.round(e).toString(16),a=i.toString(16);return 1===s.length&&(s="0"+s),1===o.length&&(o="0"+o),1===r.length&&(r="0"+r),1===a.length&&(a="0"+a),(255===i?`#${s}${o}${r}`:`#${s}${o}${r}${a}`).toUpperCase()}const $=["rgba","hsla","hex"];class y extends n{constructor(){super(),this.colorType=0,this._hsla=[0,50,50,1],this._rgba=[191,64,64,1],this._hex="#bf4040",this.onThumbFocus=()=>this.$("thumb").classList.add("focused"),this.onThumbBlur=()=>this.$("thumb").classList.remove("focused"),this.onThumbKeyDown=t=>{let n=!0;if(this.rc){switch(t.code){case"ArrowRight":this.rc.moveBy(5,0);break;case"ArrowLeft":this.rc.moveBy(-5,0);break;case"ArrowUp":this.rc.moveBy(0,-5);break;case"ArrowDown":this.rc.moveBy(0,5);break;case"Escape":this.$("triInput").blur();break;default:n=!1}}n&&(t.preventDefault(),t.stopPropagation())},this._utp=!1,this.handlePlaneInput=()=>{this.$("thumbInput").focus();const[t,n]=this.rc.position,e=Math.max(0,Math.min(100,Math.round(100*t))),i=Math.max(0,Math.min(100,Math.round(50*(2-t-n))));e===this._hsla[1]&&i===this._hsla[2]||(this._hsla[1]=e,this._hsla[2]=i,this.onHSLChange())},this.onRGBinput=t=>{t.stopPropagation();const[n,e,i,s]=[+this.$("inputR").value,+this.$("inputG").value,+this.$("inputB").value,+this.$("inputA").value],[o,r,a]=x(n,e,i);this._rgba=[n,e,i,s],this._hsla=[o,r,a,s],this._hex=f(n,e,i,s),this.updateColor(),this._fire()},this.onHexInput=t=>{t.stopPropagation(),this.onHexChange(this.$("inputHex").value.trim())},this.onHSLInput=t=>{t.stopPropagation(),this._hsla[0]=Math.round(+this.$("inputH").value),this._hsla[1]=+this.$("inputS").value,this._hsla[2]=+this.$("inputL").value,this._hsla[3]=+this.$("inputA2").value,this.onHSLChange()},this.onColorTypeToggle=()=>{this.colorType=(this.colorType+1)%$.length,this.updateColorType()},this.onHueChange=t=>{let[n,e,i,s]=this._hsla;const o=t.detail.value;o!==n&&(n=o,s||(s=1),e||i||(e=75,i=50),this._hsla=[n,e,i,s],this.onHSLChange())},this.onAlphaChange=t=>{this._hsla[3]=t.detail.value,this.onHSLChange()},this.root.innerHTML=`\n    <style>\n      \n* {box-sizing: border-box;}\n.horizontal {display: flex; flex-direction: row;}\n.vertical {display: flex; flex-direction: column;}\n.center {align-items: center;}\n.flex {flex: 1;}\n\n      label {display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; user-select: none;}\n      [hidden] {display: none !important;}\n      :host {\n        display: inline-block;\n        touch-action: none;\n        background: #FAFAFA;\n        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);\n        width: 240px;\n      }\n      #base {\n        position: relative;\n        height: var(--canvas-height, 130px);\n      }\n      #thumb {\n        position: absolute;\n        width: 40px;\n        height: 40px;\n        padding: 10px;\n        border-radius: 50%;\n        transform: translate3d(-50%, -50%, 0);\n        cursor: pointer;\n        overflow: hidden;\n      }\n      .knob {\n        position: relative;\n        width: 20px;\n        height: 20px;\n        border: 2px solid #fff;\n        box-shadow: ${s};\n        border-radius: 50%;\n        background: var(--ecp-i-thumb-color);\n      }\n      #thumb::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n        opacity: 0.2;\n        background: var(--ecp-i-thumb-shadow-color);\n        pointer-events: none;\n        transform: scale(0);\n        transition: transform 0.18s ease;\n      }\n      #thumb.focused::before {\n        transform: scale(1);\n      }\n      #base1,\n      #base2 {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n      }\n      #base1 {\n        background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);\n      }\n      #base2 {\n        background: linear-gradient(to bottom, transparent 0%, #000 100%);\n      }\n      #sliderSection {\n        padding: 16px 0;\n      }\n      #textSection {\n        padding: 6px 0 8px 4px;\n        color: #808080;\n      }\n      #colorPreviewPanel {\n        box-shadow: ${s};\n        border-radius: 50%;\n        width: 40px;\n        height: 40px;\n        margin: 0 4px 0 6px;\n        overflow: hidden;\n        position: relative;\n        background-image: url(${i});\n        background-size: 12px 11px;\n      }\n      #colorPreview {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n      }\n      .cell {\n        padding: 0 2px;\n      }\n      .cellInput {\n        width: 100%;\n        text-align: center;\n        border-radius: 0;\n        border: 1px solid #d8d8d8;\n        outline: none;\n        font-size: 11px;\n        letter-spacing: 0.5px;\n        padding: 6px 2px;\n        margin-bottom: 4px;\n        font-family: inherit;\n      }\n      .cellInput:focus {\n        border-color: var(--focus-ring-color, #000);\n      }\n      input::-webkit-outer-spin-button,\n      input::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n      }\n      input[type=number] {\n        -moz-appearance:textfield;\n      }\n      #colorTypeToggle {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        vertical-align: middle;\n        fill: currentcolor;\n        stroke: none;\n        box-sizing: initial;\n        padding: 10px;\n        border: 0;\n        background: none;\n        border-radius: 50%;\n        color: inherit;\n        cursor: pointer;\n        overflow: hidden;\n        outline: none;\n      }\n      #colorTypeToggle::before {\n        content: "";\n        position: absolute;\n        top: 0px;\n        left: 0px;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        pointer-events: none;\n        background: currentcolor;\n      }\n      #colorTypeToggle:focus::before {\n        opacity: 0.2;\n      }\n      svg {\n        pointer-events: none;\n        display: block;\n        width: 24px;\n        height: 24px;\n        transition: transform 0.3s ease;\n      }\n      #colorTypeToggle:active svg {\n        transform: scale(1.15);\n      }\n      #alphaPanel{\n        margin-top: 18px;\n      }\n      label {\n        text-align: center;\n      }\n      #thumb input {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        cursor: pointer;\n        opacity: 0;\n        font-size: 16px;\n      }\n\n      @media(hover:hover) {\n        #colorTypeToggle:hover::before {\n          opacity: 0.1;\n        }\n        #colorTypeToggle:focus:hover::before {\n          opacity: 0.2;\n        }\n      }\n    </style>\n    <div id="base">\n      <div id="base1"></div>\n      <div id="base2">\n        <div id="thumb">\n          <div class="knob"></div>\n          <input readonly id="thumbInput" tabindex="1">\n        </div>\n      </div>\n      \n    </div>\n    <div id="sliderSection" class="horizontal center">\n      <div id="colorPreviewPanel">\n        <div id="colorPreview"></div>\n      </div>\n      <div class="vertical flex" style="padding: 0 8px;">\n        <div id="huePanel"></div>\n        <div id="alphaPanel"></div>\n      </div>\n    </div>\n    <div id="textSection" class="horizontal center">\n      <div class="flex">\n        <div id="rgba" class="horizontal color-text-panel">\n          <div class="flex vertical cell">\n            <input id="inputR" type="number" class="cellInput">\n            <label>R</label>\n          </div>\n          <div class="flex vertical cell">\n            <input id="inputG" type="number" class="cellInput">\n            <label>G</label>\n          </div>\n          <div class="flex vertical cell">\n            <input id="inputB" type="number" class="cellInput">\n            <label>B</label>\n          </div>\n          <div class="flex vertical cell">\n            <input id="inputA" step="0.01" type="number" class="cellInput">\n            <label>A</label>\n          </div>\n        </div>\n        <div hidden id="hsla" class="horizontal">\n          <div class="flex vertical cell">\n            <input id="inputH" type="number" class="cellInput">\n            <label>H</label>\n          </div>\n          <div class="flex vertical cell">\n            <input id="inputS" type="number" class="cellInput">\n            <label>S(%)</label>\n          </div>\n          <div class="flex vertical cell">\n            <input id="inputL" type="number" class="cellInput">\n            <label>L(%)</label>\n          </div>\n          <div class="flex vertical cell">\n            <input id="inputA2" step="0.01" type="number" class="cellInput">\n            <label>A</label>\n          </div>\n        </div>\n        <div hidden id="hex" class="horizontal">\n          <div class="flex vertical cell">\n            <input id="inputHex" class="cellInput">\n            <label>HEX</label>\n          </div>\n        </div>\n      </div>\n      <button id="colorTypeToggle" aria-label="color mode">\n        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false">\n          <g>\n            <path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"></path>\n          </g>\n        </svg>\n      </button>\n      \n    </div>\n    `}connectedCallback(){const t=this.$("base2");this.rc=new p(t,[.5,.5]),this.$add(t,"p-input",this.handlePlaneInput);const n=this.$("huePanel");this.hueC=new r(n),this.$add(n,"range",this.onHueChange);const e=this.$("alphaPanel");this.alphaC=new u(e),this.$add(e,"range",this.onAlphaChange),this.$add("rgba","change",this.onRGBinput),this.$add("hsla","change",this.onHSLInput),this.$add("hex","change",this.onHexInput),this.$add("colorTypeToggle","click",this.onColorTypeToggle),this.$add("thumbInput","focus",this.onThumbFocus),this.$add("thumbInput","blur",this.onThumbBlur),this.$add("thumbInput","keydown",this.onThumbKeyDown),this.updateColorType(),this.updateThumb(),this.updateColor()}disconnectedCallback(){this._utp=!1,this.rc&&(this.rc.detach(),this.rc=void 0),this.hueC&&(this.hueC.detach(),this.hueC=void 0),this.alphaC&&(this.alphaC.detach(),this.alphaC=void 0);const t=this.$("base2");t&&(this.$remove(t,"p-input",this.handlePlaneInput),this.$remove("rgba","change",this.onRGBinput),this.$remove("hsla","change",this.onHSLInput),this.$remove("hex","change",this.onHexInput),this.$remove("colorTypeToggle","click",this.onColorTypeToggle),this.$remove("huePanel","range",this.onHueChange),this.$remove("alphaPanel","range",this.onAlphaChange)),this.$remove("thumbInput","focus",this.onThumbFocus),this.$remove("thumbInput","blur",this.onThumbBlur),this.$remove("thumbInput","keydown",this.onThumbKeyDown),super.disconnectedCallback()}updateColor(){const t=(t=>`hsla(${t[0]%360}, ${t[1]}%, ${t[2]}%, ${t[3]})`)(this._hsla),[n,e,i,s]=this._hsla;this.alphaC&&(this.alphaC.hue=n,this.alphaC.value=s),this.hueC&&(this.hueC.value=n),this.rc&&(this.rc.position=[e/100,2-i/50-e/100],this.deferredUpdateThumb()),this.$("inputR").value=""+this._rgba[0],this.$("inputG").value=""+this._rgba[1],this.$("inputB").value=""+this._rgba[2],this.$("inputA").value=""+s,this.$("inputH").value=""+n,this.$("inputS").value=""+e,this.$("inputL").value=""+i,this.$("inputA2").value=""+s,this.$("inputHex").value=""+this._hex,this.$("colorPreview").style.background=t,this.$("base").style.background=v([n,100,50,1])}updateColorType(){for(let t=0;t<$.length;t++){const n=this.$($[t]);t===this.colorType?n.removeAttribute("hidden"):n.setAttribute("hidden","")}}updateThumb(){const t=this.$("thumb");if(t&&this.rc){const n=this.rc.position;t.style.left=100*n[0]+"%",t.style.top=100*n[1]+"%",t.style.setProperty("--ecp-i-thumb-color",v(this._hsla));const[e]=this._hsla;t.style.setProperty("--ecp-i-thumb-shadow-color",v([e,100,60,1]))}}deferredUpdateThumb(){this._utp||(this._utp=!0,requestAnimationFrame((()=>{this._utp&&(this.updateThumb(),this._utp=!1)})))}onHSLChange(){const[t,n,e,i]=this._hsla,[s,o,r]=m(t,n,e);this._rgba=[s,o,r,i],this._hex=f(s,o,r,i),this.updateColor(),this._fire()}onHexChange(t,n=!0){this.value=t,n&&this._fire()}_fire(){this.fire("change")}get rgb(){return[...this._rgba]}get hsl(){return[...this._hsla]}get value(){return this._hex}set value(t){const n=function(t){let n=(t=t.trim()).match(d);if(n){const t=+n[1],e=+n[2],i=+n[3],s=+n[4],[o,r,a]=m(t,e,i);return{hex:f(o,r,a,s),hsla:[t,e,i,s],rgba:[o,r,a,s]}}if(n=t.match(c),n){const t=+n[1],e=+n[2],i=+n[3],[s,o,r]=m(t,e,i);return{hex:f(s,o,r,1),hsla:[t,e,i,1],rgba:[s,o,r,1]}}if(n=t.match(g),n){const t=+n[1],e=+n[2],i=+n[3],s=+n[4],[o,r,a]=x(t,e,i);return{hex:f(t,e,i,s),hsla:[o,r,a,s],rgba:[t,e,i,s]}}if(n=t.match(b),n){const t=+n[1],e=+n[2],i=+n[3],[s,o,r]=x(t,e,i);return{hex:f(t,e,i,1),hsla:[s,o,r,1],rgba:[t,e,i,1]}}let e=t;const i=e.lastIndexOf("#");i>=0&&(e=e.substring(i+1));const s=function(t){switch(t.length){case 3:return[+`0x${t[0]}${t[0]}`,+`0x${t[1]}${t[1]}`,+`0x${t[2]}${t[2]}`,1];case 4:return[+`0x${t[0]}${t[0]}`,+`0x${t[1]}${t[1]}`,+`0x${t[2]}${t[2]}`,+`0x${t[3]}${t[3]}`/255];case 6:return[+`0x${t[0]}${t[1]}`,+`0x${t[2]}${t[3]}`,+`0x${t[4]}${t[5]}`,1];case 8:return[+`0x${t[0]}${t[1]}`,+`0x${t[2]}${t[3]}`,+`0x${t[4]}${t[5]}`,+`0x${t[6]}${t[7]}`/255]}return null}(e);if(s){const[t,n,e,i]=s;if(isNaN(t)||isNaN(n)||isNaN(e)||isNaN(i))return null;const[o,r,a]=x(t,n,e);return{hex:f(t,n,e,i),hsla:[o,r,a,i],rgba:[t,n,e,i]}}return null}(t);n&&(this._hsla=[...n.hsla],this._rgba=[...n.rgba],this._hex=n.hex,this.updateColor())}}customElements.define("dino-color-picker",y);export{y as DinoColorPicker};