/*
 hcg-color-picker v2.0.5
 Google Chrome style color picker ? vanilla JS, lightweight, alpha support, EyeDropper API

 @author   HTML Code Generator
 @website  https://www.html-code-generator.com/javascript/chrome-style-color-picker
 @github   https://github.com/html-code-generator
 @license  MIT
*/
(function(Y){function u(a,b,c,f,h){a=(a%360+360)%360;c/=100;b=b/100*(1-Math.abs(2*c-1));const g=b*(1-Math.abs(a/60%2-1));c-=b/2;let l=0,k=0,m=0;60>a?(l=b,k=g):120>a?(l=g,k=b):180>a?(k=b,m=g):240>a?(k=g,m=b):300>a?(l=g,m=b):(l=b,m=g);l=Math.round(255*(l+c));k=Math.round(255*(k+c));m=Math.round(255*(m+c));return h?z(l,k,m,f):{r:l,g:k,b:m,a:f}}function L(a,b,c,f){f=void 0===f?1:+f;a/=255;b/=255;c/=255;var h=Math.min(a,b,c);const g=Math.max(a,b,c),l=g-h;let k=0,m=0;h=(g+h)/2;0!==l&&(m=l/(1-Math.abs(2*
h-1)),k=g===a?(b-c)/l%6:g===b?(c-a)/l+2:(a-b)/l+4);k=Math.round(60*k);0>k&&(k+=360);return{h:k,s:parseFloat((100*m).toFixed(4)),l:parseFloat((100*h).toFixed(4)),a:f}}function z(a,b,c,f){a=a.toString(16).padStart(2,"0")+b.toString(16).padStart(2,"0")+c.toString(16).padStart(2,"0");f=Math.round(255*f).toString(16).padStart(2,"0");return"#"+("ff"===f?a:a+f)}function v(a){var b={h:0,s:100,l:50,a:1};if(!F(a))return b;a=a.trim().toLowerCase();if("#"===a[0]){b=a;4===b.length&&(b="#"+b[1]+b[1]+b[2]+b[2]+
b[3]+b[3]);5===b.length&&(b="#"+b[1]+b[1]+b[2]+b[2]+b[3]+b[3]+b[4]+b[4]);7===b.length&&(b+="ff");var c=parseInt(b.slice(1,3),16),f=parseInt(b.slice(3,5),16);a=parseInt(b.slice(5,7),16);b=+(parseInt(b.slice(7,9),16)/255).toFixed(3);return L(c,f,a,b)}f=a.match(/-?\d*\.?\d+%?/g);c=f.map(parseFloat);if(a.startsWith("rgb")){var h=f[0].endsWith("%");a=h?Math.round(2.55*c[0]):c[0];b=h?Math.round(2.55*c[1]):c[1];h=h?Math.round(2.55*c[2]):c[2];c=f[3]?f[3].endsWith("%")?c[3]/100:c[3]:1;return L(a,b,h,c)}return a.startsWith("hsl")?
(a=(c[0]%360+360)%360,f=f[3]?f[3].endsWith("%")?c[3]/100:c[3]:1,{h:a,s:c[1],l:c[2],a:f}):b}function F(a){if(!a||"string"!==typeof a)return!1;a=a.trim().toLowerCase();if("#"===a[0])return R.test(a);const b=a.match(/-?\d*\.?\d+%?/g);if(!b)return!1;var c=b.map(parseFloat);if(c.some(f=>!Number.isFinite(f)))return!1;if(a.startsWith("rgb")){a=b[0].endsWith("%");const [f,h,g]=c;c=b[3]?b[3].endsWith("%")?c[3]/100:c[3]:1;a=a?100:255;return 3<=b.length&&0<=f&&f<=a&&0<=h&&h<=a&&0<=g&&g<=a&&0<=c&&1>=c}if(a.startsWith("hsl")){const [f,
h,g]=c;c=b[3]?b[3].endsWith("%")?c[3]/100:c[3]:1;return 3<=b.length&&Number.isFinite(f)&&0<=h&&100>=h&&0<=g&&100>=g&&0<=c&&1>=c}return!1}function G(a,b,c,f){void 0===a&&(a=d.hue,b=d.saturation,c=d.lightness,f=d.alpha);const h=u(a,b,c,f),g=z(h.r,h.g,h.b,f);return{hex:"#"+g.slice(1,7),hexa:g,rgb:`rgb(${h.r}, ${h.g}, ${h.b})`,rgba:`rgba(${h.r}, ${h.g}, ${h.b}, ${f})`,hsl:`hsl(${a}, ${b}%, ${c}%)`,hsla:`hsla(${a}, ${b}%, ${c}%, ${f})`}}function A(a){d.hue=+a.h;d.saturation=+a.s;d.lightness=+a.l;d.alpha=
+a.a;H(d.hue);M();N()}function N(){const {hue:a,saturation:b,lightness:c,alpha:f}=d;var h=c/100,g=h+b/100*Math.min(h,1-h);h=p(227*(0===g?0:2*(1-h/g))+3,3,230);g=p(127*(1-g)+3,3,130);e.boxDragger.style.transform=`translate3d(${h}px, ${g}px, 0)`;g=p(130*(1-a/360),0,130);h=p(130*f,0,130);e.hueDragger.style.transform=`translate3d(${g}px, 6.5px, 0)`;e.alphaDragger.style.transform=`translate3d(${h}px, 6.5px, 0)`}function M(){const a=document.activeElement,{hue:b,saturation:c,lightness:f,alpha:h}=d;if("HEXA"===
d.colorMode)e.hexInput!==a&&(e.hexInput.value=u(b,c,f,h,!0));else if("RGBA"===d.colorMode){const g=u(b,c,f,h);[g.r,g.g,g.b,g.a].forEach((l,k)=>{e.rgbaInputs[k]!==a&&(e.rgbaInputs[k].value=l)})}else[b,Math.round(c),Math.round(f),h].forEach((g,l)=>{e.hslaInputs[l]!==a&&(e.hslaInputs[l].value=g)})}function I(){if(d.instance){var a=G();if(a.hexa!==d.instance.lastChange){d.instance.lastChange=a.hexa;d.instance.element.dataset.color=a.hexa;d.instance.element.style.background=a.hexa;e.colorPreview.setAttribute("fill",
a.hexa);var b=d.instance;0<b._debounce?(b._pendingColors=a,b._pendingSource=w,clearTimeout(b._debounceTimer),b._debounceTimer=setTimeout(()=>{b._debounceTimer=null;b._emit("change",b._pendingColors,b._pendingSource);b._pendingColors=null;b._pendingSource=null},b._debounce)):b._emit("change",a,w)}}}function S(a){e.alphaControls.forEach(b=>{b.style.display=a?"":"none"})}function H(a){a!==T&&(T=a,a=`hsl(${a}, 100%, 50%)`,e.saturationStop.setAttribute("stop-color",a),e.opacityStop.setAttribute("stop-color",
a))}function O(a){var b=a.element.getBoundingClientRect(),c=e.picker.offsetHeight;a=e.picker.offsetWidth;c=b.bottom+c>window.innerHeight&&b.top>=c?b.top+window.scrollY-c-2:b.bottom+window.scrollY+2;b=b.left+window.scrollX;b+a>window.innerWidth-20&&(b-=b+a-window.innerWidth+20);e.picker.style.top=c+"px";e.picker.style.left=b+"px"}function U(a){if(!d.instance||!d.instance.element.contains(a.target))for(a=a.target;a&&a!==e.picker;){if(a===document.documentElement){x();break}a=a.parentNode}}function V(a){d.instance=
a;d.pickerOpen=!0;e.picker.style.display="block";d.colorMode=a._colorMode||"HEXA";e.hexa.style.display="HEXA"===d.colorMode?"flex":"none";e.rgba.style.display="RGBA"===d.colorMode?"flex":"none";e.hsla.style.display="HSLA"===d.colorMode?"flex":"none";var b=!1!==a._alphaEnabled;S(b);b||(d.alpha=1,a.alpha=1,a.alphaPosition=130,b=v(a.lastChange),b=u(b.h,b.s,b.l,1),a.lastChange=z(b.r,b.g,b.b,1),a.element.dataset.color=a.lastChange,a.element.style.background=a.lastChange);O(a);B=()=>O(d.instance);document.addEventListener("scroll",
B,{capture:!0,passive:!0});C=()=>O(d.instance);window.addEventListener("resize",C,{passive:!0});document.addEventListener("pointerdown",U);A(v(a.lastChange));e.colorTextValues.focus();e.colorPreview.setAttribute("fill",a.lastChange);a._emit("open",a.lastChange)}function x(){if(d.pickerOpen){d.pickerOpen=!1;e.picker.style.display="none";B&&(document.removeEventListener("scroll",B,{capture:!0}),B=null);C&&(window.removeEventListener("resize",C),C=null);document.removeEventListener("pointerdown",U);
J();var a=null!==y;y&&(cancelAnimationFrame(y),y=null);var b=d.instance;b&&(b._colorMode=d.colorMode,a&&I(),b._debounceTimer&&(clearTimeout(b._debounceTimer),b._debounceTimer=null,null!=b._pendingColors&&b._emit("change",b._pendingColors,b._pendingSource),b._pendingColors=null,b._pendingSource=null));b&&b._emit("close",b.lastChange)}}function Z(a,b){a=p(a-D.left,3,230);b=p(b-D.top,3,130);e.boxDragger.style.transform=`translate3d(${a}px, ${b}px, 0)`;var c=1-(b-3)/127;const f=c*(1-(a-3)/227/2);c=0===
f||1===f?0:(c-f)/Math.min(f,1-f);d.instance.colorPosition={x:a,y:b};d.saturation=Math.round(100*c);d.lightness=Math.round(100*f);E()}function aa(a){a=p(a-D.left-9,0,130);d.instance.huePosition=a;e.hueDragger.style.transform=`translate3d(${a}px, 6.5px, 0)`;d.hue=Math.round(360-a/130*360)%360;H(d.hue);E()}function ba(a){a=p(a-D.left-9,0,130);e.alphaDragger.style.transform=`translate3d(${a}px, 6.5px, 0)`;d.alpha=parseFloat((a/130).toFixed(2));d.instance.alphaPosition=a;d.instance.alpha=d.alpha;E()}function J(){if(null!==
d.currentPointerId){const a="box"===d.activeDrag?e.colorBox:"hue"===d.activeDrag?e.hueSlider:"alpha"===d.activeDrag?e.alphaSlider:null;if(a)try{a.releasePointerCapture(d.currentPointerId)}catch(b){}d.currentPointerId=null}d.activeDrag=null}function P(a,b,c){r(a,"pointerdown",f=>{a.setPointerCapture(f.pointerId);d.currentPointerId=f.pointerId;D=a.getBoundingClientRect();d.activeDrag=b;w="drag";c(f.clientX,f.clientY)});r(a,"pointermove",f=>{d.activeDrag===b&&c(f.clientX,f.clientY)});a.addEventListener("pointerup",
J);a.addEventListener("pointercancel",J);a.addEventListener("lostpointercapture",J)}function ca(){if(!W){W=!0;var a=document.createElement("div");a.id="hcg_color_picker";a.innerHTML='<svg id="hcg_color_box" width="230" height="130"> <defs> <linearGradient id="hcg_saturation" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#fff"></stop> <stop id="hcg_saturation_stop" offset="100%" stop-color="hsl(0,100%,50%)"></stop> </linearGradient> <linearGradient id="hcg_brightness" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="rgba(0,0,0,0)"></stop> <stop offset="100%" stop-color="#000"></stop> </linearGradient> <pattern id="hcg_pattern" width="100%" height="100%"> <rect x="0" y="0" width="100%" height="100%" fill="url(#hcg_saturation)"></rect> <rect x="0" y="0" width="100%" height="100%" fill="url(#hcg_brightness)"></rect> </pattern> </defs> <rect width="230" height="130" stroke="#fff" fill="url(#hcg_pattern)" cursor="crosshair"></rect> <g id="hcg_box_dragger" style="transform: translate3d(219px, 14px, 0);"> <circle r="9" fill="none" stroke="#000" stroke-width="2"></circle> <circle r="7" fill="none" stroke="#fff" stroke-width="2"></circle> </g> </svg> <br> <div class="hcg_slider_container"> <div class="hcg_eye_dropper"> <button id="hcg_eye_dropper_btn" style="display:none;" title="Eye dropper"><svg width="22" height="22" fill="#333"><path d="m20.71 5.63-2.34-2.34a.996.996 0 0 0-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42M6.92 19 5 17.08l8.06-8.06 1.92 1.92z"/></svg></button> <div class="hcg_preview_wrap"> <svg width="35" height="35"> <rect rx="33" ry="33" x="1" y="1" width="33" height="33" fill="url(#hcg_checkerboard)"></rect> <rect rx="33" ry="33" x="1" y="1" width="33" height="33" id="hcg_color_preview" stroke="#ddd" stroke-width="1"></rect> </svg> <button id="hcg_copy_btn" title="Copy color"><svg width="14" height="14" fill="#fff" viewBox="0 0 24 24"><path d="M16 1H4C3 1 2 2 2 3v14h2V3h12V1zm3 4H8C7 5 6 6 6 7v14c0 1 1 2 2 2h11c1 0 2-1 2-2V7c0-1-1-2-2-2zm0 16H8V7h11v14z"/></svg></button> </div> </div> <div id="hcg_color_sliders"> <svg id="hcg_hue_slider" width="148" height="22"> <defs> <filter id="hcg_rect_shadow" x="-10%" y="-20%" width="120%" height="140%"> <feDropShadow dx="0" dy="0" stdDeviation=".5" flood-color="rgba(0,0,0,0.9)"></feDropShadow> </filter> <linearGradient id="hcg_hue" x1="100%" y1="0%" x2="0%" y2="0%"> <stop offset="0%" stop-color="#f00"></stop> <stop offset="16.666%" stop-color="#ff0"></stop> <stop offset="33.333%" stop-color="#0f0"></stop> <stop offset="50%" stop-color="#0ff"></stop> <stop offset="66.666%" stop-color="#00f"></stop> <stop offset="83.333%" stop-color="#f0f"></stop> <stop offset="100%" stop-color="#f00"></stop> </linearGradient> </defs> <g transform="translate(9, 4.5)"> <rect rx="2" ry="2" width="130" height="13" fill="url(#hcg_hue)" cursor="crosshair"></rect> <g id="hcg_hue_dragger" style="transform: translate3d(130px, 6.5px, 0);"> <circle r="7.5" fill="none" stroke="#fff" stroke-width="2" filter="url(#hcg_rect_shadow)"></circle> </g> </g> </svg> <svg id="hcg_alpha_slider" class="hcg_alpha_control" width="148" height="22"> <defs> <pattern id="hcg_checkerboard" width="13" height="13" patternUnits="userSpaceOnUse"> <rect width="13" height="13" fill="#fff"></rect> <rect width="6.5" height="6.5" fill="#d7d7d7"></rect> <rect x="6.5" y="6.5" width="6.5" height="6.5" fill="#d7d7d7"></rect> </pattern> <linearGradient id="hcg_opacity" x1="100%" y1="0%" x2="0%" y2="0%"> <stop id="hcg_opacity_stop" offset="0%" stop-color="#000"></stop> <stop offset="100%" stop-color="transparent"></stop> </linearGradient> </defs> <g transform="translate(9, 4.5)"> <rect rx="2" ry="2" x="0" y="0" width="130" height="13" fill="url(#hcg_checkerboard)"></rect> <rect rx="2" ry="2" x="0" y="0" width="130" height="13" fill="url(#hcg_opacity)" cursor="crosshair"></rect> <g id="hcg_alpha_dragger" style="transform: translate3d(130px, 6.5px, 0);"> <circle r="7.5" fill="none" stroke="#fff" stroke-width="2" filter="url(#hcg_rect_shadow)"></circle> </g> </g> </svg> </div> </div> <div id="hcg_color_values" tabindex="0"> <div class="hcg_color_input"> <div id="hcg_hexa_row"> <div class="hcg_color_col"> <label><input id="hcg_hex_input" type="text" maxlength="9" spellcheck="false" value="#ff0000" aria-label="Hex color value">HEX</label> </div> </div> <div id="hcg_rgba_row" style="display:none;"> <div class="hcg_color_col"> <label><input class="hcg_rgba_input" name="hcg_r" type="number" min="0" max="255" aria-label="Red">R</label> </div> <div class="hcg_color_col"> <label><input class="hcg_rgba_input" name="hcg_g" type="number" min="0" max="255" aria-label="Green">G</label> </div> <div class="hcg_color_col"> <label><input class="hcg_rgba_input" name="hcg_b" type="number" min="0" max="255" aria-label="Blue">B</label> </div> <div class="hcg_color_col hcg_alpha_control"> <label><input class="hcg_rgba_input hcg_alpha_input" name="hcg_a" type="number" step="0.01" min="0" max="1" aria-label="Alpha">A</label> </div> </div> <div id="hcg_hsla_row" style="display:none;"> <div class="hcg_color_col"> <label><input class="hcg_hsla_input" name="hcg_h" type="number" min="0" max="360" aria-label="Hue">H</label> </div> <div class="hcg_color_col"> <label><input class="hcg_hsla_input" name="hcg_s" type="number" min="0" max="100" aria-label="Saturation">S%</label> </div> <div class="hcg_color_col"> <label><input class="hcg_hsla_input" name="hcg_l" type="number" min="0" max="100" aria-label="Lightness">L%</label> </div> <div class="hcg_color_col hcg_alpha_control"> <label><input class="hcg_hsla_input hcg_alpha_input" name="hcg_a_hsla" type="number" step="0.01" min="0" max="1" aria-label="Alpha">A</label> </div> </div> </div> <button id="hcg_switch_color_type" title="change color format"> <svg width="25" height="25" fill="none" stroke="#9b9b9b" stroke-width="2"><path d="m7 15 5 5 5-5M7 9l5-5 5 5"/></svg> </button> </div>';
document.body.appendChild(a);e.picker=a;e.colorBox=a.querySelector("#hcg_color_box");e.colorPreview=a.querySelector("#hcg_color_preview");e.boxDragger=a.querySelector("#hcg_box_dragger");e.saturationStop=a.querySelector("#hcg_saturation_stop");e.opacityStop=a.querySelector("#hcg_opacity_stop");e.hueSlider=a.querySelector("#hcg_hue_slider");e.hueDragger=a.querySelector("#hcg_hue_dragger");e.alphaSlider=a.querySelector("#hcg_alpha_slider");e.alphaDragger=a.querySelector("#hcg_alpha_dragger");e.colorTextValues=
a.querySelector("#hcg_color_values");e.hexa=a.querySelector("#hcg_hexa_row");e.rgba=a.querySelector("#hcg_rgba_row");e.hsla=a.querySelector("#hcg_hsla_row");e.hexInput=a.querySelector("#hcg_hex_input");e.rgbaInputs=a.querySelectorAll(".hcg_rgba_input");e.hslaInputs=a.querySelectorAll(".hcg_hsla_input");e.switchBtn=a.querySelector("#hcg_switch_color_type");e.eyeDropperBtn=a.querySelector("#hcg_eye_dropper_btn");e.copyBtn=a.querySelector("#hcg_copy_btn");e.alphaControls=a.querySelectorAll(".hcg_alpha_control");
e.colorBox.style.touchAction="none";e.hueSlider.style.touchAction="none";e.alphaSlider.style.touchAction="none";P(e.colorBox,"box",Z);P(e.hueSlider,"hue",aa);P(e.alphaSlider,"alpha",ba);var b=["HEXA","RGBA","HSLA"],c={HEXA:e.hexa,RGBA:e.rgba,HSLA:e.hsla};r(e.switchBtn,"click",()=>{c[d.colorMode].style.display="none";d.colorMode=b[(b.indexOf(d.colorMode)+1)%3];c[d.colorMode].style.display="flex";d.instance&&(d.instance._colorMode=d.colorMode);M()});r(e.hexInput,"input",function(){R.test(this.value)&&
(w="input",A(v(this.value)),I())});e.rgbaInputs.forEach(g=>{r(g,"input",()=>{if(![...e.rgbaInputs].some(Q=>""===Q.value)){var [l,k,m,q]=[...e.rgbaInputs].map(Q=>+Q.value);if(isFinite(l+k+m+q)&&!(0>l||255<l||0>k||255<k||0>m||255<m||0>q||1<q)){var t=L(l,k,m,q);d.hue=+t.h;d.saturation=+t.s;d.lightness=+t.l;d.alpha=+t.a;H(d.hue);N();w="input";E()}}})});e.hslaInputs.forEach(g=>{r(g,"input",()=>{if(![...e.hslaInputs].some(t=>""===t.value)){var [l,k,m,q]=[...e.hslaInputs].map(t=>+t.value);!isFinite(l+k+
m+q)||0>l||360<l||0>k||100<k||0>m||100<m||0>q||1<q||(d.hue=l,d.saturation=k,d.lightness=m,d.alpha=q,H(d.hue),N(),w="input",E())}})});"EyeDropper"in window&&(e.eyeDropperBtn.style.display="block",r(e.eyeDropperBtn,"click",async()=>{try{const g=await (new EyeDropper).open();w="eyedropper";A(v(g.sRGBHex));I()}catch(g){}}));var f=e.copyBtn.innerHTML,h=null;r(e.copyBtn,"click",()=>{if(d.instance){var g=G();g="RGBA"===d.colorMode?g.rgba:"HSLA"===d.colorMode?g.hsla:g.hexa;var l;null==(l=navigator.clipboard)||
l.writeText(g);clearTimeout(h);e.copyBtn.innerHTML='<svg width="14" height="14" fill="#fff" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>';h=setTimeout(()=>{e.copyBtn.innerHTML=f},1500)}})}}function X(a){a=v(a);const b=a.l/100,c=b+a.s/100*Math.min(b,1-b);return{parsed:a,colorPosition:{x:p(227*(0===c?0:2*(1-b/c))+3,3,230),y:p(127*(1-c)+3,3,130)},huePosition:p(130*(1-a.h/360),0,130),alphaPosition:p(130*a.a,0,130),alpha:a.a}}function n(a,b){b=b||{};ca();this.element=
a;a._hcgColor&&a._hcgColor.destroy();a._hcgColor=this;this._listeners={};this._alphaEnabled=!1!==b.alpha;this._debounce="number"===typeof b.debounce&&0<b.debounce?b.debounce:0;this._pendingSource=this._pendingColors=this._debounceTimer=null;var c=F(b.color)?b.color:F(a.dataset.color)?a.dataset.color:"#ff0000";c=X(c);const {h:f,s:h,l:g,a:l}=c.parsed;var k=u(f,h,g,l);const m=this._alphaEnabled?c.alpha:1;this.lastChange=k=z(k.r,k.g,k.b,m);this.colorPosition=c.colorPosition;this.huePosition=c.huePosition;
this.alphaPosition=this._alphaEnabled?c.alphaPosition:130;this.alpha=m;this._colorMode="HEXA";a.dataset.color=k;a.style.background=k;this._disabled=!0===b.disabled||a.hasAttribute("disabled");this._clickHandler=()=>{d.instance===this&&d.pickerOpen?x():(d.pickerOpen&&x(),V(this))};if("function"===typeof b.onChange)this.on("change",b.onChange);if("function"===typeof b.onOpen)this.on("open",b.onOpen);if("function"===typeof b.onClose)this.on("close",b.onClose);this._disabled?a.setAttribute("disabled",
""):a.addEventListener("click",this._clickHandler);K.push(this)}const e={picker:null,colorBox:null,colorPreview:null,boxDragger:null,saturationStop:null,opacityStop:null,hueSlider:null,hueDragger:null,alphaSlider:null,alphaDragger:null,colorTextValues:null,hexa:null,rgba:null,hsla:null,hexInput:null,rgbaInputs:null,hslaInputs:null,switchBtn:null,eyeDropperBtn:null,copyBtn:null,alphaControls:null},K=[],d={instance:null,pickerOpen:!1,activeDrag:null,currentPointerId:null,colorMode:"HEXA",hue:0,saturation:100,
lightness:50,alpha:1},p=(a,b,c)=>a<b?b:a>c?c:a;let T=-1,D=null;const R=/^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;let y=null,w="drag";const E=()=>{y||(y=requestAnimationFrame(()=>{y=null;M();I()}))};let B=null,C=null;const r=(a,b,c)=>a.addEventListener(b,c);let W=!1;n.prototype.on=function(a,b){this._listeners[a]||(this._listeners[a]=[]);this._listeners[a].push(b);return this};n.prototype.off=function(a,b){this._listeners[a]&&(this._listeners[a]=this._listeners[a].filter(c=>c!==b));return this};
n.prototype._emit=function(a,b,c){(this._listeners[a]||[]).forEach(f=>f(b,c))};n.prototype.open=function(){if(this._disabled)return this;d.pickerOpen&&x();V(this);return this};n.prototype.close=function(){d.instance===this&&x();return this};Object.defineProperty(n.prototype,"isOpen",{get:function(){return d.instance===this&&d.pickerOpen}});n.prototype.setColor=function(a){if(!F(a))return this;this._debounceTimer&&(clearTimeout(this._debounceTimer),this._pendingSource=this._pendingColors=this._debounceTimer=
null);a=X(a);const b=a.parsed;this._alphaEnabled||(b.a=1);var c=u(b.h,b.s,b.l,b.a);c=z(c.r,c.g,c.b,b.a);this.element.dataset.color=c;this.lastChange=this.element.style.background=c;this.colorPosition=a.colorPosition;this.huePosition=a.huePosition;this.alphaPosition=this._alphaEnabled?a.alphaPosition:130;this.alpha=b.a;d.instance===this&&(A(b),e.colorPreview.setAttribute("fill",c));this._emit("change",G(b.h,b.s,b.l,b.a),"api");return this};n.prototype.getColor=function(){if(null===this.lastChange)return null;
const a=v(this.lastChange);return G(a.h,a.s,a.l,a.a)};n.prototype.setAlphaEnabled=function(a){this._alphaEnabled=!!a;if(!this._alphaEnabled){this.alpha=1;this.alphaPosition=130;a=v(this.lastChange);a.a=1;var b=u(a.h,a.s,a.l,1);b=z(b.r,b.g,b.b,1);this.element.dataset.color=b;this.lastChange=this.element.style.background=b;d.instance===this&&(d.alpha=1,A(a),e.colorPreview.setAttribute("fill",this.lastChange))}d.instance===this&&S(this._alphaEnabled);return this};n.prototype.disable=function(){if(this._disabled)return this;
this._disabled=!0;this.element.removeEventListener("click",this._clickHandler);this.element.setAttribute("disabled","");d.instance===this&&x();return this};n.prototype.enable=function(){if(!this._disabled)return this;this._disabled=!1;this.element.addEventListener("click",this._clickHandler);this.element.removeAttribute("disabled");return this};n.prototype.destroy=function(){this.element.removeEventListener("click",this._clickHandler);d.instance===this&&(x(),d.instance=null);this._debounceTimer&&
(clearTimeout(this._debounceTimer),this._debounceTimer=null);this.alpha=this.alphaPosition=this.huePosition=this.colorPosition=this.lastChange=this._pendingSource=this._pendingColors=null;delete this.element.dataset.color;this.element.style.background="";this.element.removeAttribute("disabled");delete this.element._hcgColor;const a=K.indexOf(this);-1<a&&K.splice(a,1);this._listeners={};this._clickHandler=null;this._disabled=!1};n.get=a=>(a="string"===typeof a?document.querySelector(a):a)&&a._hcgColor?
a._hcgColor:null;n.destroy=a=>{a=n.get(a);if(!a)return!1;a.destroy();return!0};n.destroyAll=()=>{K.slice().forEach(a=>a.destroy())};Y.hcgColor=n})(window);