New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

toolcool-color-picker

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

toolcool-color-picker - npm Package Compare versions

Comparing version

1.0.9
to
1.0.10

32

dist/toolcool-color-picker.min.js

@@ -1,6 +0,6 @@

// Tool Cool Picker v1.0.8, MIT License - https://github.com/toolcool-org/toolcool-color-picker
(()=>{var Ct=Object.defineProperty;var yt=(o,e,t)=>e in o?Ct(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var a=(o,e,t)=>(yt(o,typeof e!="symbol"?e+"":e,t),t);var Z=":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{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;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;width:2.5rem;height:1rem;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var tt=":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 et=".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",g="tc-hue-changed",m="tc-alpha-changed",y=(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}}))},ot=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(g,{detail:{h:e,cid:o}}))};function d(o,e){Lt(o)&&(o="100%");var t=At(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 $(o){return Math.min(1,Math.max(0,o))}function Lt(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function At(o){return typeof o=="string"&&o.indexOf("%")!==-1}function S(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function M(o){return o<=1?"".concat(Number(o)*100,"%"):o}function w(o){return o.length===1?"0"+o:String(o)}function it(o,e,t){return{r:d(o,255)*255,g:d(e,255)*255,b:d(t,255)*255}}function P(o,e,t){o=d(o,255),e=d(e,255),t=d(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,h=(i+r)/2;if(i===r)s=0,n=0;else{var c=i-r;switch(s=h>.5?c/(2-i-r):c/(i+r),i){case o:n=(e-t)/c+(e<t?6:0);break;case e:n=(t-o)/c+2;break;case t:n=(o-e)/c+4;break;default:break}n/=6}return{h:n,s,l:h}}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 rt(o,e,t){var i,r,n;if(o=d(o,360),e=d(e,100),t=d(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,h=2*t-s;i=O(h,s,o+1/3),r=O(h,s,o),n=O(h,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function U(o,e,t){o=d(o,255),e=d(e,255),t=d(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,h=i-r,c=i===0?0:h/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/h+(e<t?6:0);break;case e:n=(t-o)/h+2;break;case t:n=(o-e)/h+4;break;default:break}n/=6}return{h:n,s:c,v:s}}function nt(o,e,t){o=d(o,360)*6,e=d(e,100),t=d(t,100);var i=Math.floor(o),r=o-i,n=t*(1-e),s=t*(1-r*e),h=t*(1-(1-r)*e),c=i%6,I=[t,s,n,n,h,t][c],_=[h,t,t,s,n,n][c],Et=[n,n,h,t,t,s][c];return{r:I*255,g:_*255,b:Et*255}}function B(o,e,t,i){var r=[w(Math.round(o).toString(16)),w(Math.round(e).toString(16)),w(Math.round(t).toString(16))];return i&&r[0].startsWith(r[0].charAt(1))&&r[1].startsWith(r[1].charAt(1))&&r[2].startsWith(r[2].charAt(1))?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function st(o,e,t,i,r){var n=[w(Math.round(o).toString(16)),w(Math.round(e).toString(16)),w(Math.round(t).toString(16)),w(Ht(i))];return r&&n[0].startsWith(n[0].charAt(1))&&n[1].startsWith(n[1].charAt(1))&&n[2].startsWith(n[2].charAt(1))&&n[3].startsWith(n[3].charAt(1))?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")}function Ht(o){return Math.round(parseFloat(o)*255).toString(16)}function K(o){return f(o)/255}function f(o){return parseInt(o,16)}function at(o){return{r:o>>16,g:(o&65280)>>8,b:o&255}}var k={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function ht(o){var e={r:0,g:0,b:0},t=1,i=null,r=null,n=null,s=!1,h=!1;return typeof o=="string"&&(o=Rt(o)),typeof o=="object"&&(x(o.r)&&x(o.g)&&x(o.b)?(e=it(o.r,o.g,o.b),s=!0,h=String(o.r).substr(-1)==="%"?"prgb":"rgb"):x(o.h)&&x(o.s)&&x(o.v)?(i=M(o.s),r=M(o.v),e=nt(o.h,i,r),s=!0,h="hsv"):x(o.h)&&x(o.s)&&x(o.l)&&(i=M(o.s),n=M(o.l),e=rt(o.h,i,n),s=!0,h="hsl"),Object.prototype.hasOwnProperty.call(o,"a")&&(t=o.a)),t=S(t),{ok:s,format:o.format||h,r:Math.min(255,Math.max(e.r,0)),g:Math.min(255,Math.max(e.g,0)),b:Math.min(255,Math.max(e.b,0)),a:t}}var St="[-\\+]?\\d+%?",Tt="[-\\+]?\\d*\\.\\d+%?",E="(?:".concat(Tt,")|(?:").concat(St,")"),N="[\\s|\\(]+(".concat(E,")[,|\\s]+(").concat(E,")[,|\\s]+(").concat(E,")\\s*\\)?"),V="[\\s|\\(]+(".concat(E,")[,|\\s]+(").concat(E,")[,|\\s]+(").concat(E,")[,|\\s]+(").concat(E,")\\s*\\)?"),v={CSS_UNIT:new RegExp(E),rgb:new RegExp("rgb"+N),rgba:new RegExp("rgba"+V),hsl:new RegExp("hsl"+N),hsla:new RegExp("hsla"+V),hsv:new RegExp("hsv"+N),hsva:new RegExp("hsva"+V),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function Rt(o){if(o=o.trim().toLowerCase(),o.length===0)return!1;var e=!1;if(k[o])o=k[o],e=!0;else if(o==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};var t=v.rgb.exec(o);return t?{r:t[1],g:t[2],b:t[3]}:(t=v.rgba.exec(o),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=v.hsl.exec(o),t?{h:t[1],s:t[2],l:t[3]}:(t=v.hsla.exec(o),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=v.hsv.exec(o),t?{h:t[1],s:t[2],v:t[3]}:(t=v.hsva.exec(o),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=v.hex8.exec(o),t?{r:f(t[1]),g:f(t[2]),b:f(t[3]),a:K(t[4]),format:e?"name":"hex8"}:(t=v.hex6.exec(o),t?{r:f(t[1]),g:f(t[2]),b:f(t[3]),format:e?"name":"hex"}:(t=v.hex4.exec(o),t?{r:f(t[1]+t[1]),g:f(t[2]+t[2]),b:f(t[3]+t[3]),a:K(t[4]+t[4]),format:e?"name":"hex8"}:(t=v.hex3.exec(o),t?{r:f(t[1]+t[1]),g:f(t[2]+t[2]),b:f(t[3]+t[3]),format:e?"name":"hex"}:!1)))))))))}function x(o){return Boolean(v.CSS_UNIT.exec(String(o)))}var l=function(){function o(e,t){e===void 0&&(e=""),t===void 0&&(t={});var i;if(e instanceof o)return e;typeof e=="number"&&(e=at(e)),this.originalInput=e;var r=ht(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=(i=t.format)!==null&&i!==void 0?i:r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}return o.prototype.isDark=function(){return this.getBrightness()<128},o.prototype.isLight=function(){return!this.isDark()},o.prototype.getBrightness=function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},o.prototype.getLuminance=function(){var e=this.toRgb(),t,i,r,n=e.r/255,s=e.g/255,h=e.b/255;return n<=.03928?t=n/12.92:t=Math.pow((n+.055)/1.055,2.4),s<=.03928?i=s/12.92:i=Math.pow((s+.055)/1.055,2.4),h<=.03928?r=h/12.92:r=Math.pow((h+.055)/1.055,2.4),.2126*t+.7152*i+.0722*r},o.prototype.getAlpha=function(){return this.a},o.prototype.setAlpha=function(e){return this.a=S(e),this.roundA=Math.round(100*this.a)/100,this},o.prototype.toHsv=function(){var e=U(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}},o.prototype.toHsvString=function(){var e=U(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?"hsv(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsva(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHsl=function(){var e=P(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}},o.prototype.toHslString=function(){var e=P(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?"hsl(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsla(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHex=function(e){return e===void 0&&(e=!1),B(this.r,this.g,this.b,e)},o.prototype.toHexString=function(e){return e===void 0&&(e=!1),"#"+this.toHex(e)},o.prototype.toHex8=function(e){return e===void 0&&(e=!1),st(this.r,this.g,this.b,this.a,e)},o.prototype.toHex8String=function(e){return e===void 0&&(e=!1),"#"+this.toHex8(e)},o.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},o.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),i=Math.round(this.b);return this.a===1?"rgb(".concat(e,", ").concat(t,", ").concat(i,")"):"rgba(".concat(e,", ").concat(t,", ").concat(i,", ").concat(this.roundA,")")},o.prototype.toPercentageRgb=function(){var e=function(t){return"".concat(Math.round(d(t,255)*100),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},o.prototype.toPercentageRgbString=function(){var e=function(t){return Math.round(d(t,255)*100)};return this.a===1?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},o.prototype.toName=function(){if(this.a===0)return"transparent";if(this.a<1)return!1;for(var e="#"+B(this.r,this.g,this.b,!1),t=0,i=Object.entries(k);t<i.length;t++){var r=i[t],n=r[0],s=r[1];if(e===s)return n}return!1},o.prototype.toString=function(e){var t=Boolean(e);e=e!=null?e:this.format;var i=!1,r=this.a<1&&this.a>=0,n=!t&&r&&(e.startsWith("hex")||e==="name");return n?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(i=this.toRgbString()),e==="prgb"&&(i=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(i=this.toHexString()),e==="hex3"&&(i=this.toHexString(!0)),e==="hex4"&&(i=this.toHex8String(!0)),e==="hex8"&&(i=this.toHex8String()),e==="name"&&(i=this.toName()),e==="hsl"&&(i=this.toHslString()),e==="hsv"&&(i=this.toHsvString()),i||this.toHexString())},o.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},o.prototype.clone=function(){return new o(this.toString())},o.prototype.lighten=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l+=e/100,t.l=$(t.l),new o(t)},o.prototype.brighten=function(e){e===void 0&&(e=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new o(t)},o.prototype.darken=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l-=e/100,t.l=$(t.l),new o(t)},o.prototype.tint=function(e){return e===void 0&&(e=10),this.mix("white",e)},o.prototype.shade=function(e){return e===void 0&&(e=10),this.mix("black",e)},o.prototype.desaturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s-=e/100,t.s=$(t.s),new o(t)},o.prototype.saturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s+=e/100,t.s=$(t.s),new o(t)},o.prototype.greyscale=function(){return this.desaturate(100)},o.prototype.spin=function(e){var t=this.toHsl(),i=(t.h+e)%360;return t.h=i<0?360+i:i,new o(t)},o.prototype.mix=function(e,t){t===void 0&&(t=50);var i=this.toRgb(),r=new o(e).toRgb(),n=t/100,s={r:(r.r-i.r)*n+i.r,g:(r.g-i.g)*n+i.g,b:(r.b-i.b)*n+i.b,a:(r.a-i.a)*n+i.a};return new o(s)},o.prototype.analogous=function(e,t){e===void 0&&(e=6),t===void 0&&(t=30);var i=this.toHsl(),r=360/t,n=[this];for(i.h=(i.h-(r*e>>1)+720)%360;--e;)i.h=(i.h+r)%360,n.push(new o(i));return n},o.prototype.complement=function(){var e=this.toHsl();return e.h=(e.h+180)%360,new o(e)},o.prototype.monochromatic=function(e){e===void 0&&(e=6);for(var t=this.toHsv(),i=t.h,r=t.s,n=t.v,s=[],h=1/e;e--;)s.push(new o({h:i,s:r,v:n})),n=(n+h)%1;return s},o.prototype.splitcomplement=function(){var e=this.toHsl(),t=e.h;return[this,new o({h:(t+72)%360,s:e.s,l:e.l}),new o({h:(t+216)%360,s:e.s,l:e.l})]},o.prototype.onBackground=function(e){var t=this.toRgb(),i=new o(e).toRgb();return new o({r:i.r+(t.r-i.r)*t.a,g:i.g+(t.g-i.g)*t.a,b:i.b+(t.b-i.b)*t.a})},o.prototype.triad=function(){return this.polyad(3)},o.prototype.tetrad=function(){return this.polyad(4)},o.prototype.polyad=function(e){for(var t=this.toHsl(),i=t.h,r=[this],n=360/e,s=1;s<e;s++)r.push(new o({h:(i+s*n)%360,s:t.s,l:t.l}));return r},o.prototype.equals=function(e){return this.toRgbString()===new o(e).toRgbString()},o}();var C=()=>Math.random().toString(16).slice(2),T=o=>Math.round((o+Number.EPSILON)*100)/100;var L=.01,G=o=>(o<0&&(o=0),o>360&&(o=360),`hsl(${Math.round(o)}, 100%, 50%)`),F=o=>{let e=o.toRgb();return`linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`},A=o=>{let e=o.toRgb();return`rgba(${e.r}, ${e.g}, ${e.b}, ${T(e.a)})`},lt=o=>{let e=o.toHsl();return`hsla(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.l*100)}%, ${T(e.a)})`},dt=o=>{let e=o.toHsv();return`hsva(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.v*100)}%, ${T(e.a)})`},q=o=>(o<0&&(o=0),o>1&&(o=1),`${(-(o*100)+100).toFixed(2)}%`),X=o=>(o<0&&(o=0),o>1&&(o=1),`${(o*100).toFixed(2)}%`),H=o=>{o<0&&(o=0),o>360&&(o=360);let e=o*100/360,t=Math.round(e*100)/100;return t<0&&(t=0),t>100&&(t=100),t},R=o=>360*o/100,D=o=>{let e=Number(o)||0;return e=Math.round(e),e=Math.max(0,e),e=Math.min(255,e),e},ut=o=>{let e=Number(o)||100;return e=Math.round(e),e=Math.max(0,e),e=Math.min(100,e),e},u=o=>{let e=new l(o||"#000");return e.setAlpha(e.getAlpha()),e};var j=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$saturation");a(this,"$color");a(this,"$pointer");a(this,"hue",0);a(this,"saturation",0);a(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.onPointerKeyDown=this.onPointerKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){this.$pointer&&(this.$pointer.style.left=X(this.saturation),this.$pointer.style.top=q(this.value)),this.$color&&this.$color.setAttribute("style",`background: ${G(this.hue)}`),t&&b(this.cid,this.hue,this.saturation,this.value)}onChange(t){if(!this.$saturation)return;let{width:i,height:r,left:n,top:s}=this.$saturation.getBoundingClientRect();if(i===0||r===0)return;let h=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,c=typeof t.clientY=="number"?t.clientY:t.touches[0].clientY,I=Math.min(Math.max(0,h-n),i),_=Math.min(Math.max(0,c-s),r);this.saturation=I/i,this.value=1-_/r,this.render()}onPointerKeyDown(t){switch(t.key){case"ArrowLeft":{this.saturation=Math.max(0,this.saturation-L),this.render();break}case"ArrowRight":{this.saturation=Math.min(1,this.saturation+L),this.render();break}case"ArrowUp":{this.value=Math.min(1,this.value+L),this.render();break}case"ArrowDown":{t.preventDefault(),this.value=Math.max(0,this.value-L),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}hsvChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=!1;this.hue!==t.detail.h&&(this.hue=t.detail.h,i=!0),this.saturation!==t.detail.s&&(this.saturation=t.detail.s,i=!0),this.value!==t.detail.v&&(this.value=t.detail.v,i=!0),i&&this.render(!1)}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render())}connectedCallback(){this.cid=this.getAttribute("cid");let i=u(this.getAttribute("color")).toHsv();this.hue=i.h,this.saturation=i.s,this.value=i.v;let r=q(this.value),n=X(this.saturation);this.shadowRoot.innerHTML=`
<style>${et}</style>
// Tool Cool Picker v1.0.9, MIT License - https://github.com/toolcool-org/toolcool-color-picker
(()=>{var $t=Object.defineProperty;var Mt=(o,e,t)=>e in o?$t(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var a=(o,e,t)=>(Mt(o,typeof e!="symbol"?e+"":e,t),t);var tt=":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{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;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;width:2.5rem;height:1rem;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var et=":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 ot=".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",g="tc-hue-changed",m="tc-alpha-changed",S="tc-button-clicked",it=o=>{!o||document.dispatchEvent(new CustomEvent(S,{detail:{cid:o}}))},y=(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}}))},rt=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(g,{detail:{h:e,cid:o}}))};function d(o,e){Ht(o)&&(o="100%");var t=St(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 $(o){return Math.min(1,Math.max(0,o))}function Ht(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function St(o){return typeof o=="string"&&o.indexOf("%")!==-1}function T(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function M(o){return o<=1?"".concat(Number(o)*100,"%"):o}function x(o){return o.length===1?"0"+o:String(o)}function nt(o,e,t){return{r:d(o,255)*255,g:d(e,255)*255,b:d(t,255)*255}}function U(o,e,t){o=d(o,255),e=d(e,255),t=d(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,h=(i+r)/2;if(i===r)s=0,n=0;else{var c=i-r;switch(s=h>.5?c/(2-i-r):c/(i+r),i){case o:n=(e-t)/c+(e<t?6:0);break;case e:n=(t-o)/c+2;break;case t:n=(o-e)/c+4;break;default:break}n/=6}return{h:n,s,l:h}}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 st(o,e,t){var i,r,n;if(o=d(o,360),e=d(e,100),t=d(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,h=2*t-s;i=O(h,s,o+1/3),r=O(h,s,o),n=O(h,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function B(o,e,t){o=d(o,255),e=d(e,255),t=d(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,h=i-r,c=i===0?0:h/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/h+(e<t?6:0);break;case e:n=(t-o)/h+2;break;case t:n=(o-e)/h+4;break;default:break}n/=6}return{h:n,s:c,v:s}}function at(o,e,t){o=d(o,360)*6,e=d(e,100),t=d(t,100);var i=Math.floor(o),r=o-i,n=t*(1-e),s=t*(1-r*e),h=t*(1-(1-r)*e),c=i%6,P=[t,s,n,n,h,t][c],I=[h,t,t,s,n,n][c],yt=[n,n,h,t,t,s][c];return{r:P*255,g:I*255,b:yt*255}}function N(o,e,t,i){var r=[x(Math.round(o).toString(16)),x(Math.round(e).toString(16)),x(Math.round(t).toString(16))];return i&&r[0].startsWith(r[0].charAt(1))&&r[1].startsWith(r[1].charAt(1))&&r[2].startsWith(r[2].charAt(1))?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function ht(o,e,t,i,r){var n=[x(Math.round(o).toString(16)),x(Math.round(e).toString(16)),x(Math.round(t).toString(16)),x(Tt(i))];return r&&n[0].startsWith(n[0].charAt(1))&&n[1].startsWith(n[1].charAt(1))&&n[2].startsWith(n[2].charAt(1))&&n[3].startsWith(n[3].charAt(1))?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")}function Tt(o){return Math.round(parseFloat(o)*255).toString(16)}function K(o){return f(o)/255}function f(o){return parseInt(o,16)}function lt(o){return{r:o>>16,g:(o&65280)>>8,b:o&255}}var k={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function dt(o){var e={r:0,g:0,b:0},t=1,i=null,r=null,n=null,s=!1,h=!1;return typeof o=="string"&&(o=_t(o)),typeof o=="object"&&(E(o.r)&&E(o.g)&&E(o.b)?(e=nt(o.r,o.g,o.b),s=!0,h=String(o.r).substr(-1)==="%"?"prgb":"rgb"):E(o.h)&&E(o.s)&&E(o.v)?(i=M(o.s),r=M(o.v),e=at(o.h,i,r),s=!0,h="hsv"):E(o.h)&&E(o.s)&&E(o.l)&&(i=M(o.s),n=M(o.l),e=st(o.h,i,n),s=!0,h="hsl"),Object.prototype.hasOwnProperty.call(o,"a")&&(t=o.a)),t=T(t),{ok:s,format:o.format||h,r:Math.min(255,Math.max(e.r,0)),g:Math.min(255,Math.max(e.g,0)),b:Math.min(255,Math.max(e.b,0)),a:t}}var Rt="[-\\+]?\\d+%?",Dt="[-\\+]?\\d*\\.\\d+%?",C="(?:".concat(Dt,")|(?:").concat(Rt,")"),V="[\\s|\\(]+(".concat(C,")[,|\\s]+(").concat(C,")[,|\\s]+(").concat(C,")\\s*\\)?"),G="[\\s|\\(]+(".concat(C,")[,|\\s]+(").concat(C,")[,|\\s]+(").concat(C,")[,|\\s]+(").concat(C,")\\s*\\)?"),v={CSS_UNIT:new RegExp(C),rgb:new RegExp("rgb"+V),rgba:new RegExp("rgba"+G),hsl:new RegExp("hsl"+V),hsla:new RegExp("hsla"+G),hsv:new RegExp("hsv"+V),hsva:new RegExp("hsva"+G),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function _t(o){if(o=o.trim().toLowerCase(),o.length===0)return!1;var e=!1;if(k[o])o=k[o],e=!0;else if(o==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};var t=v.rgb.exec(o);return t?{r:t[1],g:t[2],b:t[3]}:(t=v.rgba.exec(o),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=v.hsl.exec(o),t?{h:t[1],s:t[2],l:t[3]}:(t=v.hsla.exec(o),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=v.hsv.exec(o),t?{h:t[1],s:t[2],v:t[3]}:(t=v.hsva.exec(o),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=v.hex8.exec(o),t?{r:f(t[1]),g:f(t[2]),b:f(t[3]),a:K(t[4]),format:e?"name":"hex8"}:(t=v.hex6.exec(o),t?{r:f(t[1]),g:f(t[2]),b:f(t[3]),format:e?"name":"hex"}:(t=v.hex4.exec(o),t?{r:f(t[1]+t[1]),g:f(t[2]+t[2]),b:f(t[3]+t[3]),a:K(t[4]+t[4]),format:e?"name":"hex8"}:(t=v.hex3.exec(o),t?{r:f(t[1]+t[1]),g:f(t[2]+t[2]),b:f(t[3]+t[3]),format:e?"name":"hex"}:!1)))))))))}function E(o){return Boolean(v.CSS_UNIT.exec(String(o)))}var l=function(){function o(e,t){e===void 0&&(e=""),t===void 0&&(t={});var i;if(e instanceof o)return e;typeof e=="number"&&(e=lt(e)),this.originalInput=e;var r=dt(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=(i=t.format)!==null&&i!==void 0?i:r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}return o.prototype.isDark=function(){return this.getBrightness()<128},o.prototype.isLight=function(){return!this.isDark()},o.prototype.getBrightness=function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},o.prototype.getLuminance=function(){var e=this.toRgb(),t,i,r,n=e.r/255,s=e.g/255,h=e.b/255;return n<=.03928?t=n/12.92:t=Math.pow((n+.055)/1.055,2.4),s<=.03928?i=s/12.92:i=Math.pow((s+.055)/1.055,2.4),h<=.03928?r=h/12.92:r=Math.pow((h+.055)/1.055,2.4),.2126*t+.7152*i+.0722*r},o.prototype.getAlpha=function(){return this.a},o.prototype.setAlpha=function(e){return this.a=T(e),this.roundA=Math.round(100*this.a)/100,this},o.prototype.toHsv=function(){var e=B(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}},o.prototype.toHsvString=function(){var e=B(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?"hsv(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsva(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHsl=function(){var e=U(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}},o.prototype.toHslString=function(){var e=U(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?"hsl(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsla(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHex=function(e){return e===void 0&&(e=!1),N(this.r,this.g,this.b,e)},o.prototype.toHexString=function(e){return e===void 0&&(e=!1),"#"+this.toHex(e)},o.prototype.toHex8=function(e){return e===void 0&&(e=!1),ht(this.r,this.g,this.b,this.a,e)},o.prototype.toHex8String=function(e){return e===void 0&&(e=!1),"#"+this.toHex8(e)},o.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},o.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),i=Math.round(this.b);return this.a===1?"rgb(".concat(e,", ").concat(t,", ").concat(i,")"):"rgba(".concat(e,", ").concat(t,", ").concat(i,", ").concat(this.roundA,")")},o.prototype.toPercentageRgb=function(){var e=function(t){return"".concat(Math.round(d(t,255)*100),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},o.prototype.toPercentageRgbString=function(){var e=function(t){return Math.round(d(t,255)*100)};return this.a===1?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},o.prototype.toName=function(){if(this.a===0)return"transparent";if(this.a<1)return!1;for(var e="#"+N(this.r,this.g,this.b,!1),t=0,i=Object.entries(k);t<i.length;t++){var r=i[t],n=r[0],s=r[1];if(e===s)return n}return!1},o.prototype.toString=function(e){var t=Boolean(e);e=e!=null?e:this.format;var i=!1,r=this.a<1&&this.a>=0,n=!t&&r&&(e.startsWith("hex")||e==="name");return n?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(i=this.toRgbString()),e==="prgb"&&(i=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(i=this.toHexString()),e==="hex3"&&(i=this.toHexString(!0)),e==="hex4"&&(i=this.toHex8String(!0)),e==="hex8"&&(i=this.toHex8String()),e==="name"&&(i=this.toName()),e==="hsl"&&(i=this.toHslString()),e==="hsv"&&(i=this.toHsvString()),i||this.toHexString())},o.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},o.prototype.clone=function(){return new o(this.toString())},o.prototype.lighten=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l+=e/100,t.l=$(t.l),new o(t)},o.prototype.brighten=function(e){e===void 0&&(e=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new o(t)},o.prototype.darken=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l-=e/100,t.l=$(t.l),new o(t)},o.prototype.tint=function(e){return e===void 0&&(e=10),this.mix("white",e)},o.prototype.shade=function(e){return e===void 0&&(e=10),this.mix("black",e)},o.prototype.desaturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s-=e/100,t.s=$(t.s),new o(t)},o.prototype.saturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s+=e/100,t.s=$(t.s),new o(t)},o.prototype.greyscale=function(){return this.desaturate(100)},o.prototype.spin=function(e){var t=this.toHsl(),i=(t.h+e)%360;return t.h=i<0?360+i:i,new o(t)},o.prototype.mix=function(e,t){t===void 0&&(t=50);var i=this.toRgb(),r=new o(e).toRgb(),n=t/100,s={r:(r.r-i.r)*n+i.r,g:(r.g-i.g)*n+i.g,b:(r.b-i.b)*n+i.b,a:(r.a-i.a)*n+i.a};return new o(s)},o.prototype.analogous=function(e,t){e===void 0&&(e=6),t===void 0&&(t=30);var i=this.toHsl(),r=360/t,n=[this];for(i.h=(i.h-(r*e>>1)+720)%360;--e;)i.h=(i.h+r)%360,n.push(new o(i));return n},o.prototype.complement=function(){var e=this.toHsl();return e.h=(e.h+180)%360,new o(e)},o.prototype.monochromatic=function(e){e===void 0&&(e=6);for(var t=this.toHsv(),i=t.h,r=t.s,n=t.v,s=[],h=1/e;e--;)s.push(new o({h:i,s:r,v:n})),n=(n+h)%1;return s},o.prototype.splitcomplement=function(){var e=this.toHsl(),t=e.h;return[this,new o({h:(t+72)%360,s:e.s,l:e.l}),new o({h:(t+216)%360,s:e.s,l:e.l})]},o.prototype.onBackground=function(e){var t=this.toRgb(),i=new o(e).toRgb();return new o({r:i.r+(t.r-i.r)*t.a,g:i.g+(t.g-i.g)*t.a,b:i.b+(t.b-i.b)*t.a})},o.prototype.triad=function(){return this.polyad(3)},o.prototype.tetrad=function(){return this.polyad(4)},o.prototype.polyad=function(e){for(var t=this.toHsl(),i=t.h,r=[this],n=360/e,s=1;s<e;s++)r.push(new o({h:(i+s*n)%360,s:t.s,l:t.l}));return r},o.prototype.equals=function(e){return this.toRgbString()===new o(e).toRgbString()},o}();var w=()=>Math.random().toString(16).slice(2),R=o=>Math.round((o+Number.EPSILON)*100)/100;var L=.01,F=o=>(o<0&&(o=0),o>360&&(o=360),`hsl(${Math.round(o)}, 100%, 50%)`),q=o=>{let e=o.toRgb();return`linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`},A=o=>{let e=o.toRgb();return`rgba(${e.r}, ${e.g}, ${e.b}, ${R(e.a)})`},ut=o=>{let e=o.toHsl();return`hsla(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.l*100)}%, ${R(e.a)})`},ct=o=>{let e=o.toHsv();return`hsva(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.v*100)}%, ${R(e.a)})`},X=o=>(o<0&&(o=0),o>1&&(o=1),`${(-(o*100)+100).toFixed(2)}%`),j=o=>(o<0&&(o=0),o>1&&(o=1),`${(o*100).toFixed(2)}%`),H=o=>{o<0&&(o=0),o>360&&(o=360);let e=o*100/360,t=Math.round(e*100)/100;return t<0&&(t=0),t>100&&(t=100),t},D=o=>360*o/100,_=o=>{let e=Number(o)||0;return e=Math.round(e),e=Math.max(0,e),e=Math.min(255,e),e},pt=o=>{let e=Number(o)||100;return e=Math.round(e),e=Math.max(0,e),e=Math.min(100,e),e},u=o=>{let e=new l(o||"#000");return e.setAlpha(e.getAlpha()),e};var W=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$saturation");a(this,"$color");a(this,"$pointer");a(this,"hue",0);a(this,"saturation",0);a(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.onPointerKeyDown=this.onPointerKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){this.$pointer&&(this.$pointer.style.left=j(this.saturation),this.$pointer.style.top=X(this.value)),this.$color&&this.$color.setAttribute("style",`background: ${F(this.hue)}`),t&&b(this.cid,this.hue,this.saturation,this.value)}onChange(t){if(!this.$saturation)return;let{width:i,height:r,left:n,top:s}=this.$saturation.getBoundingClientRect();if(i===0||r===0)return;let h=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,c=typeof t.clientY=="number"?t.clientY:t.touches[0].clientY,P=Math.min(Math.max(0,h-n),i),I=Math.min(Math.max(0,c-s),r);this.saturation=P/i,this.value=1-I/r,this.render()}onPointerKeyDown(t){switch(t.key){case"ArrowLeft":{this.saturation=Math.max(0,this.saturation-L),this.render();break}case"ArrowRight":{this.saturation=Math.min(1,this.saturation+L),this.render();break}case"ArrowUp":{this.value=Math.min(1,this.value+L),this.render();break}case"ArrowDown":{t.preventDefault(),this.value=Math.max(0,this.value-L),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}hsvChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=!1;this.hue!==t.detail.h&&(this.hue=t.detail.h,i=!0),this.saturation!==t.detail.s&&(this.saturation=t.detail.s,i=!0),this.value!==t.detail.v&&(this.value=t.detail.v,i=!0),i&&this.render(!1)}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render())}connectedCallback(){this.cid=this.getAttribute("cid");let i=u(this.getAttribute("color")).toHsv();this.hue=i.h,this.saturation=i.s,this.value=i.v;let r=X(this.value),n=j(this.saturation);this.shadowRoot.innerHTML=`
<style>${ot}</style>
<div class="saturation">
<div class="box" style="background: ${G(this.hue)}">
<div class="box" style="background: ${F(this.hue)}">
<div class="white box">

@@ -15,4 +15,4 @@ <div class="black box"></div>

</div>
`,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),this.$pointer.addEventListener("keydown",this.onPointerKeyDown),this.$saturation.addEventListener("mousedown",this.onMouseDown),this.$saturation.addEventListener("mouseup",this.onMouseUp),this.$saturation.addEventListener("touchmove",this.onChange),this.$saturation.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged)}disconnectedCallback(){this.$saturation.removeEventListener("mousedown",this.onMouseDown),this.$saturation.removeEventListener("mouseup",this.onMouseUp),this.$saturation.removeEventListener("touchmove",this.onChange),this.$saturation.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},ct=j;var pt=".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 W=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$hue");a(this,"$pointer");a(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=`${H(this.hue)}%`),ot(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),h=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=R(h),this.render()}onKeyDown(t){switch(this.$pointer.focus(),t.key){case"ArrowLeft":{let i=H(this.hue);i=Math.max(0,i-1),this.hue=R(i),this.render();break}case"ArrowRight":{let i=H(this.hue);i=Math.min(100,i+1),this.hue=R(i),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){this.cid=this.getAttribute("cid");let t=u(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
<style>${pt}</style>
`,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),this.$pointer.addEventListener("keydown",this.onPointerKeyDown),this.$saturation.addEventListener("mousedown",this.onMouseDown),this.$saturation.addEventListener("mouseup",this.onMouseUp),this.$saturation.addEventListener("touchmove",this.onChange),this.$saturation.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged)}disconnectedCallback(){this.$saturation.removeEventListener("mousedown",this.onMouseDown),this.$saturation.removeEventListener("mouseup",this.onMouseUp),this.$saturation.removeEventListener("touchmove",this.onChange),this.$saturation.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},ft=W;var gt=".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 z=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$hue");a(this,"$pointer");a(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=`${H(this.hue)}%`),rt(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),h=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=D(h),this.render()}onKeyDown(t){switch(this.$pointer.focus(),t.key){case"ArrowLeft":{let i=H(this.hue);i=Math.max(0,i-1),this.hue=D(i),this.render();break}case"ArrowRight":{let i=H(this.hue);i=Math.min(100,i+1),this.hue=D(i),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){this.cid=this.getAttribute("cid");let t=u(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
<style>${gt}</style>
<div class="hue">

@@ -31,8 +31,8 @@ <div class="box">

</div>
`,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),this.$hue.addEventListener("mousedown",this.onMouseDown),this.$hue.addEventListener("mouseup",this.onMouseUp),this.$hue.addEventListener("touchmove",this.onChange),this.$hue.addEventListener("touchstart",this.onChange),this.$pointer.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){this.$hue.removeEventListener("mousedown",this.onMouseDown),this.$hue.removeEventListener("mouseup",this.onMouseUp),this.$hue.removeEventListener("touchmove",this.onChange),this.$hue.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.hue=s.h,this.render()}},ft=W;var gt=".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 z=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$alpha");a(this,"$color");a(this,"$pointer");a(this,"alpha",1);a(this,"hue",0);a(this,"saturation",0);a(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=F(i)}t&&y(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),h=Math.min(Math.max(0,s*100/i),100);this.alpha=h/100,this.render()}onKeyDown(t){switch(this.$pointer.focus(),t.key){case"ArrowLeft":{let i=this.alpha*100;i=Math.max(0,i-1),this.alpha=i/100,this.render();break}case"ArrowRight":{let i=this.alpha*100;i=Math.min(100,i+1),this.alpha=i/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(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){this.cid=this.getAttribute("cid");let t=u(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.shadowRoot.innerHTML=`
<style>${gt}</style>
`,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),this.$hue.addEventListener("mousedown",this.onMouseDown),this.$hue.addEventListener("mouseup",this.onMouseUp),this.$hue.addEventListener("touchmove",this.onChange),this.$hue.addEventListener("touchstart",this.onChange),this.$pointer.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){this.$hue.removeEventListener("mousedown",this.onMouseDown),this.$hue.removeEventListener("mouseup",this.onMouseUp),this.$hue.removeEventListener("touchmove",this.onChange),this.$hue.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.hue=s.h,this.render()}},bt=z;var vt=".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 Y=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$alpha");a(this,"$color");a(this,"$pointer");a(this,"alpha",1);a(this,"hue",0);a(this,"saturation",0);a(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=q(i)}t&&y(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),h=Math.min(Math.max(0,s*100/i),100);this.alpha=h/100,this.render()}onKeyDown(t){switch(this.$pointer.focus(),t.key){case"ArrowLeft":{let i=this.alpha*100;i=Math.max(0,i-1),this.alpha=i/100,this.render();break}case"ArrowRight":{let i=this.alpha*100;i=Math.min(100,i+1),this.alpha=i/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(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){this.cid=this.getAttribute("cid");let t=u(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.shadowRoot.innerHTML=`
<style>${vt}</style>
<div class="alpha">
<div class="box">
<div class="transparent-bg box"></div>
<div class="color-bg box" style="background: ${F(t)}"></div>
<div class="color-bg box" style="background: ${q(t)}"></div>

@@ -46,4 +46,4 @@ <div class="pointer box">

</div>
`,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),this.$alpha.addEventListener("mousedown",this.onMouseDown),this.$alpha.addEventListener("mouseup",this.onMouseUp),this.$alpha.addEventListener("touchmove",this.onChange),this.$alpha.addEventListener("touchstart",this.onChange),this.$pointer.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){this.$alpha.removeEventListener("mousedown",this.onMouseDown),this.$alpha.removeEventListener("mouseup",this.onMouseUp),this.$alpha.removeEventListener("touchmove",this.onChange),this.$alpha.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},bt=z;var vt=":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 Y=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"color",new l("#000"));a(this,"$fields");a(this,"$hex");a(this,"$r");a(this,"$g");a(this,"$b");a(this,"$a");a(this,"hex","");a(this,"r",0);a(this,"g",0);a(this,"b",0);a(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(){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&&this.shadowRoot.activeElement!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&this.shadowRoot.activeElement!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&this.shadowRoot.activeElement!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&this.shadowRoot.activeElement!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&this.shadowRoot.activeElement!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let n=this.color.toRgb();n.a=this.a,this.color=new l(n),this.render(),y(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let n=this.color.toRgb();n.a=this.a,this.color=new l(n),this.render(),y(this.cid,this.a)}break}case"Escape":{this.shadowRoot.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{this.shadowRoot.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=D(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=D(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=D(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ut(i.value);r.toString()===i.value&&y(this.cid,r/100)}connectedCallback(){this.cid=this.getAttribute("cid"),this.color=u(this.getAttribute("color"));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();let i=C(),r=C(),n=C(),s=C(),h=C();this.shadowRoot.innerHTML=`
<style>${vt}</style>
`,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),this.$alpha.addEventListener("mousedown",this.onMouseDown),this.$alpha.addEventListener("mouseup",this.onMouseUp),this.$alpha.addEventListener("touchmove",this.onChange),this.$alpha.addEventListener("touchstart",this.onChange),this.$pointer.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){this.$alpha.removeEventListener("mousedown",this.onMouseDown),this.$alpha.removeEventListener("mouseup",this.onMouseUp),this.$alpha.removeEventListener("touchmove",this.onChange),this.$alpha.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},mt=Y;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 Q=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"color",new l("#000"));a(this,"$fields");a(this,"$hex");a(this,"$r");a(this,"$g");a(this,"$b");a(this,"$a");a(this,"hex","");a(this,"r",0);a(this,"g",0);a(this,"b",0);a(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(){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&&this.shadowRoot.activeElement!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&this.shadowRoot.activeElement!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&this.shadowRoot.activeElement!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&this.shadowRoot.activeElement!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&this.shadowRoot.activeElement!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let n=this.color.toRgb();n.a=this.a,this.color=new l(n),this.render(),y(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let n=this.color.toRgb();n.a=this.a,this.color=new l(n),this.render(),y(this.cid,this.a)}break}case"Escape":{this.shadowRoot.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{this.shadowRoot.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=_(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=_(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=_(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=pt(i.value);r.toString()===i.value&&y(this.cid,r/100)}connectedCallback(){this.cid=this.getAttribute("cid"),this.color=u(this.getAttribute("color"));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();let i=w(),r=w(),n=w(),s=w(),h=w();this.shadowRoot.innerHTML=`
<style>${Et}</style>
<div class="fields">

@@ -62,4 +62,4 @@ <input id="hex-${i}" type="text" value="${this.hex.toUpperCase()}" data-type="hex" />

</div>
`,this.$fields=this.shadowRoot.querySelector(".fields"),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-${h}`),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,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(g,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=u(r),this.render()}},mt=Y;var Q=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"popupPosition","left");a(this,"$popup");a(this,"color","#000");customElements.get("toolcool-color-picker-saturation")||customElements.define("toolcool-color-picker-saturation",ct),customElements.get("toolcool-color-picker-hue")||customElements.define("toolcool-color-picker-hue",ft),customElements.get("toolcool-color-picker-alpha")||customElements.define("toolcool-color-picker-alpha",bt),customElements.get("toolcool-color-picker-fields")||customElements.define("toolcool-color-picker-fields",mt),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(){this.color=this.getAttribute("color")||"#000",this.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
<style>${tt}</style>
`,this.$fields=this.shadowRoot.querySelector(".fields"),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-${h}`),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,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(g,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=u(r),this.render()}},xt=Q;var J=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"popupPosition","left");a(this,"$popup");a(this,"color","#000");customElements.get("toolcool-color-picker-saturation")||customElements.define("toolcool-color-picker-saturation",ft),customElements.get("toolcool-color-picker-hue")||customElements.define("toolcool-color-picker-hue",bt),customElements.get("toolcool-color-picker-alpha")||customElements.define("toolcool-color-picker-alpha",mt),customElements.get("toolcool-color-picker-fields")||customElements.define("toolcool-color-picker-fields",xt),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(){this.color=this.getAttribute("color")||"#000",this.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
<style>${et}</style>
<div class="popup">

@@ -71,4 +71,4 @@ <toolcool-color-picker-saturation color="${this.color}" cid="${this.cid}"></toolcool-color-picker-saturation>

</div>
`,this.$popup=this.shadowRoot.querySelector(".popup"),this.$popup.addEventListener("mousedown",this.prevent),this.$popup.classList.toggle("right",this.popupPosition==="right")}disconnectedCallback(){this.$popup.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let n=this.shadowRoot.querySelector("toolcool-color-picker-saturation"),s=this.shadowRoot.querySelector("toolcool-color-picker-hue"),h=this.shadowRoot.querySelector("toolcool-color-picker-alpha"),c=this.shadowRoot.querySelector("toolcool-color-picker-fields");n&&n.setAttribute("color",this.color),s&&s.setAttribute("color",this.color),h&&h.setAttribute("color",this.color),c&&c.setAttribute("color",this.color)}}},xt=Q;var J=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$button");a(this,"$buttonColor");a(this,"$popupBox");a(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000")});a(this,"state");this.cid=C(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",xt),this.attachShadow({mode:"open"}),this.toggle=this.toggle.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.clickedOutside=this.clickedOutside.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.initState()}static get observedAttributes(){return["color","popup-position"]}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 A(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return lt(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return dt(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(),!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(){let t=A(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=this.shadowRoot.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=A(this.state.color)),this.dispatchEvent(new CustomEvent("change",{detail:{hex:this.hex,hex8:this.hex8,rgb:this.rgb,rgba:this.rgba,hsl:this.hsl,hsla:this.hsla,hsv:this.hsv,hsva:this.hsva,color:this.color}}))}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.state.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.state.color.toHsv().a}))}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toHsv();this.state.color=new l({h:t.detail.h,s:i.s,v:i.v,a:i.a})}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toRgb();i.a=t.detail.a,this.state.color=new l(i)}clickedOutside(){this.state.isPopupVisible=!1}toggle(){let t=this.state.isPopupVisible;window.setTimeout(()=>{this.state.isPopupVisible=!t},0)}onKeyDown(t){t.key==="Escape"&&(this.state.isPopupVisible=!1)}connectedCallback(){this.state.initialColor=u(this.getAttribute("color")),this.state.color=u(this.getAttribute("color")),this.state.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
<style>${Z}</style>
`,this.$popup=this.shadowRoot.querySelector(".popup"),this.$popup.addEventListener("mousedown",this.prevent),this.$popup.classList.toggle("right",this.popupPosition==="right")}disconnectedCallback(){this.$popup.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let n=this.shadowRoot.querySelector("toolcool-color-picker-saturation"),s=this.shadowRoot.querySelector("toolcool-color-picker-hue"),h=this.shadowRoot.querySelector("toolcool-color-picker-alpha"),c=this.shadowRoot.querySelector("toolcool-color-picker-fields");n&&n.setAttribute("color",this.color),s&&s.setAttribute("color",this.color),h&&h.setAttribute("color",this.color),c&&c.setAttribute("color",this.color)}}},Ct=J;var Z=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$button");a(this,"$buttonColor");a(this,"$popupBox");a(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000")});a(this,"state");this.cid=w(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",Ct),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.initState()}static get observedAttributes(){return["color","popup-position"]}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 A(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return ut(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return ct(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(),!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(){let t=A(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=this.shadowRoot.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=A(this.state.color)),this.dispatchEvent(new CustomEvent("change",{detail:{hex:this.hex,hex8:this.hex8,rgb:this.rgb,rgba:this.rgba,hsl:this.hsl,hsla:this.hsla,hsv:this.hsv,hsva:this.hsva,color:this.color}}))}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.state.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.state.color.toHsv().a}))}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toHsv();this.state.color=new l({h:t.detail.h,s:i.s,v:i.v,a:i.a})}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toRgb();i.a=t.detail.a,this.state.color=new l(i)}buttonClicked(t){!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid&&(this.state.isPopupVisible=!1)}clickedOutside(t){this.state.isPopupVisible=!1}toggle(){let t=this.state.isPopupVisible;window.setTimeout(()=>{this.state.isPopupVisible=!t,it(this.cid)},0)}onKeyDown(t){t.key==="Escape"&&(this.state.isPopupVisible=!1)}stopPropagation(t){t.stopPropagation()}connectedCallback(){this.state.initialColor=u(this.getAttribute("color")),this.state.color=u(this.getAttribute("color")),this.state.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
<style>${tt}</style>
<div class="color-picker">

@@ -84,2 +84,2 @@ <button

</div>
`,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),this.$button.addEventListener("click",this.toggle),this.$button.addEventListener("keydown",this.onKeyDown),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){this.$button.removeEventListener("click",this.toggle),this.$button.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t){t==="color"&&(this.state.initialColor=u(this.getAttribute("color")),this.state.color=u(this.getAttribute("color")),this.onInitialColorChange()),t==="popup-position"&&(this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange())}},wt=J;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",wt);})();
`,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),this.$button.addEventListener("click",this.toggle),this.$button.addEventListener("keydown",this.onKeyDown),this.$button.addEventListener("mousedown",this.stopPropagation),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged),document.addEventListener(m,this.alphaChanged),document.addEventListener(S,this.buttonClicked)}disconnectedCallback(){this.$button.removeEventListener("click",this.toggle),this.$button.removeEventListener("keydown",this.onKeyDown),this.$button.removeEventListener("mousedown",this.stopPropagation),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged),document.removeEventListener(m,this.alphaChanged),document.removeEventListener(S,this.buttonClicked)}attributeChangedCallback(t){t==="color"&&(this.state.initialColor=u(this.getAttribute("color")),this.state.color=u(this.getAttribute("color")),this.onInitialColorChange()),t==="popup-position"&&(this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange())}},wt=Z;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",wt);})();

32

examples/js/toolcool-color-picker.min.js

@@ -1,6 +0,6 @@

// Tool Cool Picker v1.0.8, MIT License - https://github.com/toolcool-org/toolcool-color-picker
(()=>{var Ct=Object.defineProperty;var yt=(o,e,t)=>e in o?Ct(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var a=(o,e,t)=>(yt(o,typeof e!="symbol"?e+"":e,t),t);var Z=":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{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;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;width:2.5rem;height:1rem;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var tt=":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 et=".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",g="tc-hue-changed",m="tc-alpha-changed",y=(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}}))},ot=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(g,{detail:{h:e,cid:o}}))};function d(o,e){Lt(o)&&(o="100%");var t=At(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 $(o){return Math.min(1,Math.max(0,o))}function Lt(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function At(o){return typeof o=="string"&&o.indexOf("%")!==-1}function S(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function M(o){return o<=1?"".concat(Number(o)*100,"%"):o}function w(o){return o.length===1?"0"+o:String(o)}function it(o,e,t){return{r:d(o,255)*255,g:d(e,255)*255,b:d(t,255)*255}}function P(o,e,t){o=d(o,255),e=d(e,255),t=d(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,h=(i+r)/2;if(i===r)s=0,n=0;else{var c=i-r;switch(s=h>.5?c/(2-i-r):c/(i+r),i){case o:n=(e-t)/c+(e<t?6:0);break;case e:n=(t-o)/c+2;break;case t:n=(o-e)/c+4;break;default:break}n/=6}return{h:n,s,l:h}}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 rt(o,e,t){var i,r,n;if(o=d(o,360),e=d(e,100),t=d(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,h=2*t-s;i=O(h,s,o+1/3),r=O(h,s,o),n=O(h,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function U(o,e,t){o=d(o,255),e=d(e,255),t=d(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,h=i-r,c=i===0?0:h/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/h+(e<t?6:0);break;case e:n=(t-o)/h+2;break;case t:n=(o-e)/h+4;break;default:break}n/=6}return{h:n,s:c,v:s}}function nt(o,e,t){o=d(o,360)*6,e=d(e,100),t=d(t,100);var i=Math.floor(o),r=o-i,n=t*(1-e),s=t*(1-r*e),h=t*(1-(1-r)*e),c=i%6,I=[t,s,n,n,h,t][c],_=[h,t,t,s,n,n][c],Et=[n,n,h,t,t,s][c];return{r:I*255,g:_*255,b:Et*255}}function B(o,e,t,i){var r=[w(Math.round(o).toString(16)),w(Math.round(e).toString(16)),w(Math.round(t).toString(16))];return i&&r[0].startsWith(r[0].charAt(1))&&r[1].startsWith(r[1].charAt(1))&&r[2].startsWith(r[2].charAt(1))?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function st(o,e,t,i,r){var n=[w(Math.round(o).toString(16)),w(Math.round(e).toString(16)),w(Math.round(t).toString(16)),w(Ht(i))];return r&&n[0].startsWith(n[0].charAt(1))&&n[1].startsWith(n[1].charAt(1))&&n[2].startsWith(n[2].charAt(1))&&n[3].startsWith(n[3].charAt(1))?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")}function Ht(o){return Math.round(parseFloat(o)*255).toString(16)}function K(o){return f(o)/255}function f(o){return parseInt(o,16)}function at(o){return{r:o>>16,g:(o&65280)>>8,b:o&255}}var k={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function ht(o){var e={r:0,g:0,b:0},t=1,i=null,r=null,n=null,s=!1,h=!1;return typeof o=="string"&&(o=Rt(o)),typeof o=="object"&&(x(o.r)&&x(o.g)&&x(o.b)?(e=it(o.r,o.g,o.b),s=!0,h=String(o.r).substr(-1)==="%"?"prgb":"rgb"):x(o.h)&&x(o.s)&&x(o.v)?(i=M(o.s),r=M(o.v),e=nt(o.h,i,r),s=!0,h="hsv"):x(o.h)&&x(o.s)&&x(o.l)&&(i=M(o.s),n=M(o.l),e=rt(o.h,i,n),s=!0,h="hsl"),Object.prototype.hasOwnProperty.call(o,"a")&&(t=o.a)),t=S(t),{ok:s,format:o.format||h,r:Math.min(255,Math.max(e.r,0)),g:Math.min(255,Math.max(e.g,0)),b:Math.min(255,Math.max(e.b,0)),a:t}}var St="[-\\+]?\\d+%?",Tt="[-\\+]?\\d*\\.\\d+%?",E="(?:".concat(Tt,")|(?:").concat(St,")"),N="[\\s|\\(]+(".concat(E,")[,|\\s]+(").concat(E,")[,|\\s]+(").concat(E,")\\s*\\)?"),V="[\\s|\\(]+(".concat(E,")[,|\\s]+(").concat(E,")[,|\\s]+(").concat(E,")[,|\\s]+(").concat(E,")\\s*\\)?"),v={CSS_UNIT:new RegExp(E),rgb:new RegExp("rgb"+N),rgba:new RegExp("rgba"+V),hsl:new RegExp("hsl"+N),hsla:new RegExp("hsla"+V),hsv:new RegExp("hsv"+N),hsva:new RegExp("hsva"+V),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function Rt(o){if(o=o.trim().toLowerCase(),o.length===0)return!1;var e=!1;if(k[o])o=k[o],e=!0;else if(o==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};var t=v.rgb.exec(o);return t?{r:t[1],g:t[2],b:t[3]}:(t=v.rgba.exec(o),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=v.hsl.exec(o),t?{h:t[1],s:t[2],l:t[3]}:(t=v.hsla.exec(o),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=v.hsv.exec(o),t?{h:t[1],s:t[2],v:t[3]}:(t=v.hsva.exec(o),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=v.hex8.exec(o),t?{r:f(t[1]),g:f(t[2]),b:f(t[3]),a:K(t[4]),format:e?"name":"hex8"}:(t=v.hex6.exec(o),t?{r:f(t[1]),g:f(t[2]),b:f(t[3]),format:e?"name":"hex"}:(t=v.hex4.exec(o),t?{r:f(t[1]+t[1]),g:f(t[2]+t[2]),b:f(t[3]+t[3]),a:K(t[4]+t[4]),format:e?"name":"hex8"}:(t=v.hex3.exec(o),t?{r:f(t[1]+t[1]),g:f(t[2]+t[2]),b:f(t[3]+t[3]),format:e?"name":"hex"}:!1)))))))))}function x(o){return Boolean(v.CSS_UNIT.exec(String(o)))}var l=function(){function o(e,t){e===void 0&&(e=""),t===void 0&&(t={});var i;if(e instanceof o)return e;typeof e=="number"&&(e=at(e)),this.originalInput=e;var r=ht(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=(i=t.format)!==null&&i!==void 0?i:r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}return o.prototype.isDark=function(){return this.getBrightness()<128},o.prototype.isLight=function(){return!this.isDark()},o.prototype.getBrightness=function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},o.prototype.getLuminance=function(){var e=this.toRgb(),t,i,r,n=e.r/255,s=e.g/255,h=e.b/255;return n<=.03928?t=n/12.92:t=Math.pow((n+.055)/1.055,2.4),s<=.03928?i=s/12.92:i=Math.pow((s+.055)/1.055,2.4),h<=.03928?r=h/12.92:r=Math.pow((h+.055)/1.055,2.4),.2126*t+.7152*i+.0722*r},o.prototype.getAlpha=function(){return this.a},o.prototype.setAlpha=function(e){return this.a=S(e),this.roundA=Math.round(100*this.a)/100,this},o.prototype.toHsv=function(){var e=U(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}},o.prototype.toHsvString=function(){var e=U(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?"hsv(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsva(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHsl=function(){var e=P(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}},o.prototype.toHslString=function(){var e=P(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?"hsl(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsla(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHex=function(e){return e===void 0&&(e=!1),B(this.r,this.g,this.b,e)},o.prototype.toHexString=function(e){return e===void 0&&(e=!1),"#"+this.toHex(e)},o.prototype.toHex8=function(e){return e===void 0&&(e=!1),st(this.r,this.g,this.b,this.a,e)},o.prototype.toHex8String=function(e){return e===void 0&&(e=!1),"#"+this.toHex8(e)},o.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},o.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),i=Math.round(this.b);return this.a===1?"rgb(".concat(e,", ").concat(t,", ").concat(i,")"):"rgba(".concat(e,", ").concat(t,", ").concat(i,", ").concat(this.roundA,")")},o.prototype.toPercentageRgb=function(){var e=function(t){return"".concat(Math.round(d(t,255)*100),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},o.prototype.toPercentageRgbString=function(){var e=function(t){return Math.round(d(t,255)*100)};return this.a===1?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},o.prototype.toName=function(){if(this.a===0)return"transparent";if(this.a<1)return!1;for(var e="#"+B(this.r,this.g,this.b,!1),t=0,i=Object.entries(k);t<i.length;t++){var r=i[t],n=r[0],s=r[1];if(e===s)return n}return!1},o.prototype.toString=function(e){var t=Boolean(e);e=e!=null?e:this.format;var i=!1,r=this.a<1&&this.a>=0,n=!t&&r&&(e.startsWith("hex")||e==="name");return n?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(i=this.toRgbString()),e==="prgb"&&(i=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(i=this.toHexString()),e==="hex3"&&(i=this.toHexString(!0)),e==="hex4"&&(i=this.toHex8String(!0)),e==="hex8"&&(i=this.toHex8String()),e==="name"&&(i=this.toName()),e==="hsl"&&(i=this.toHslString()),e==="hsv"&&(i=this.toHsvString()),i||this.toHexString())},o.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},o.prototype.clone=function(){return new o(this.toString())},o.prototype.lighten=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l+=e/100,t.l=$(t.l),new o(t)},o.prototype.brighten=function(e){e===void 0&&(e=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new o(t)},o.prototype.darken=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l-=e/100,t.l=$(t.l),new o(t)},o.prototype.tint=function(e){return e===void 0&&(e=10),this.mix("white",e)},o.prototype.shade=function(e){return e===void 0&&(e=10),this.mix("black",e)},o.prototype.desaturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s-=e/100,t.s=$(t.s),new o(t)},o.prototype.saturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s+=e/100,t.s=$(t.s),new o(t)},o.prototype.greyscale=function(){return this.desaturate(100)},o.prototype.spin=function(e){var t=this.toHsl(),i=(t.h+e)%360;return t.h=i<0?360+i:i,new o(t)},o.prototype.mix=function(e,t){t===void 0&&(t=50);var i=this.toRgb(),r=new o(e).toRgb(),n=t/100,s={r:(r.r-i.r)*n+i.r,g:(r.g-i.g)*n+i.g,b:(r.b-i.b)*n+i.b,a:(r.a-i.a)*n+i.a};return new o(s)},o.prototype.analogous=function(e,t){e===void 0&&(e=6),t===void 0&&(t=30);var i=this.toHsl(),r=360/t,n=[this];for(i.h=(i.h-(r*e>>1)+720)%360;--e;)i.h=(i.h+r)%360,n.push(new o(i));return n},o.prototype.complement=function(){var e=this.toHsl();return e.h=(e.h+180)%360,new o(e)},o.prototype.monochromatic=function(e){e===void 0&&(e=6);for(var t=this.toHsv(),i=t.h,r=t.s,n=t.v,s=[],h=1/e;e--;)s.push(new o({h:i,s:r,v:n})),n=(n+h)%1;return s},o.prototype.splitcomplement=function(){var e=this.toHsl(),t=e.h;return[this,new o({h:(t+72)%360,s:e.s,l:e.l}),new o({h:(t+216)%360,s:e.s,l:e.l})]},o.prototype.onBackground=function(e){var t=this.toRgb(),i=new o(e).toRgb();return new o({r:i.r+(t.r-i.r)*t.a,g:i.g+(t.g-i.g)*t.a,b:i.b+(t.b-i.b)*t.a})},o.prototype.triad=function(){return this.polyad(3)},o.prototype.tetrad=function(){return this.polyad(4)},o.prototype.polyad=function(e){for(var t=this.toHsl(),i=t.h,r=[this],n=360/e,s=1;s<e;s++)r.push(new o({h:(i+s*n)%360,s:t.s,l:t.l}));return r},o.prototype.equals=function(e){return this.toRgbString()===new o(e).toRgbString()},o}();var C=()=>Math.random().toString(16).slice(2),T=o=>Math.round((o+Number.EPSILON)*100)/100;var L=.01,G=o=>(o<0&&(o=0),o>360&&(o=360),`hsl(${Math.round(o)}, 100%, 50%)`),F=o=>{let e=o.toRgb();return`linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`},A=o=>{let e=o.toRgb();return`rgba(${e.r}, ${e.g}, ${e.b}, ${T(e.a)})`},lt=o=>{let e=o.toHsl();return`hsla(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.l*100)}%, ${T(e.a)})`},dt=o=>{let e=o.toHsv();return`hsva(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.v*100)}%, ${T(e.a)})`},q=o=>(o<0&&(o=0),o>1&&(o=1),`${(-(o*100)+100).toFixed(2)}%`),X=o=>(o<0&&(o=0),o>1&&(o=1),`${(o*100).toFixed(2)}%`),H=o=>{o<0&&(o=0),o>360&&(o=360);let e=o*100/360,t=Math.round(e*100)/100;return t<0&&(t=0),t>100&&(t=100),t},R=o=>360*o/100,D=o=>{let e=Number(o)||0;return e=Math.round(e),e=Math.max(0,e),e=Math.min(255,e),e},ut=o=>{let e=Number(o)||100;return e=Math.round(e),e=Math.max(0,e),e=Math.min(100,e),e},u=o=>{let e=new l(o||"#000");return e.setAlpha(e.getAlpha()),e};var j=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$saturation");a(this,"$color");a(this,"$pointer");a(this,"hue",0);a(this,"saturation",0);a(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.onPointerKeyDown=this.onPointerKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){this.$pointer&&(this.$pointer.style.left=X(this.saturation),this.$pointer.style.top=q(this.value)),this.$color&&this.$color.setAttribute("style",`background: ${G(this.hue)}`),t&&b(this.cid,this.hue,this.saturation,this.value)}onChange(t){if(!this.$saturation)return;let{width:i,height:r,left:n,top:s}=this.$saturation.getBoundingClientRect();if(i===0||r===0)return;let h=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,c=typeof t.clientY=="number"?t.clientY:t.touches[0].clientY,I=Math.min(Math.max(0,h-n),i),_=Math.min(Math.max(0,c-s),r);this.saturation=I/i,this.value=1-_/r,this.render()}onPointerKeyDown(t){switch(t.key){case"ArrowLeft":{this.saturation=Math.max(0,this.saturation-L),this.render();break}case"ArrowRight":{this.saturation=Math.min(1,this.saturation+L),this.render();break}case"ArrowUp":{this.value=Math.min(1,this.value+L),this.render();break}case"ArrowDown":{t.preventDefault(),this.value=Math.max(0,this.value-L),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}hsvChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=!1;this.hue!==t.detail.h&&(this.hue=t.detail.h,i=!0),this.saturation!==t.detail.s&&(this.saturation=t.detail.s,i=!0),this.value!==t.detail.v&&(this.value=t.detail.v,i=!0),i&&this.render(!1)}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render())}connectedCallback(){this.cid=this.getAttribute("cid");let i=u(this.getAttribute("color")).toHsv();this.hue=i.h,this.saturation=i.s,this.value=i.v;let r=q(this.value),n=X(this.saturation);this.shadowRoot.innerHTML=`
<style>${et}</style>
// Tool Cool Picker v1.0.9, MIT License - https://github.com/toolcool-org/toolcool-color-picker
(()=>{var $t=Object.defineProperty;var Mt=(o,e,t)=>e in o?$t(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var a=(o,e,t)=>(Mt(o,typeof e!="symbol"?e+"":e,t),t);var tt=":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{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;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;width:2.5rem;height:1rem;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var et=":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 ot=".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",g="tc-hue-changed",m="tc-alpha-changed",S="tc-button-clicked",it=o=>{!o||document.dispatchEvent(new CustomEvent(S,{detail:{cid:o}}))},y=(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}}))},rt=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(g,{detail:{h:e,cid:o}}))};function d(o,e){Ht(o)&&(o="100%");var t=St(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 $(o){return Math.min(1,Math.max(0,o))}function Ht(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function St(o){return typeof o=="string"&&o.indexOf("%")!==-1}function T(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function M(o){return o<=1?"".concat(Number(o)*100,"%"):o}function x(o){return o.length===1?"0"+o:String(o)}function nt(o,e,t){return{r:d(o,255)*255,g:d(e,255)*255,b:d(t,255)*255}}function U(o,e,t){o=d(o,255),e=d(e,255),t=d(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,h=(i+r)/2;if(i===r)s=0,n=0;else{var c=i-r;switch(s=h>.5?c/(2-i-r):c/(i+r),i){case o:n=(e-t)/c+(e<t?6:0);break;case e:n=(t-o)/c+2;break;case t:n=(o-e)/c+4;break;default:break}n/=6}return{h:n,s,l:h}}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 st(o,e,t){var i,r,n;if(o=d(o,360),e=d(e,100),t=d(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,h=2*t-s;i=O(h,s,o+1/3),r=O(h,s,o),n=O(h,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function B(o,e,t){o=d(o,255),e=d(e,255),t=d(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,h=i-r,c=i===0?0:h/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/h+(e<t?6:0);break;case e:n=(t-o)/h+2;break;case t:n=(o-e)/h+4;break;default:break}n/=6}return{h:n,s:c,v:s}}function at(o,e,t){o=d(o,360)*6,e=d(e,100),t=d(t,100);var i=Math.floor(o),r=o-i,n=t*(1-e),s=t*(1-r*e),h=t*(1-(1-r)*e),c=i%6,P=[t,s,n,n,h,t][c],I=[h,t,t,s,n,n][c],yt=[n,n,h,t,t,s][c];return{r:P*255,g:I*255,b:yt*255}}function N(o,e,t,i){var r=[x(Math.round(o).toString(16)),x(Math.round(e).toString(16)),x(Math.round(t).toString(16))];return i&&r[0].startsWith(r[0].charAt(1))&&r[1].startsWith(r[1].charAt(1))&&r[2].startsWith(r[2].charAt(1))?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function ht(o,e,t,i,r){var n=[x(Math.round(o).toString(16)),x(Math.round(e).toString(16)),x(Math.round(t).toString(16)),x(Tt(i))];return r&&n[0].startsWith(n[0].charAt(1))&&n[1].startsWith(n[1].charAt(1))&&n[2].startsWith(n[2].charAt(1))&&n[3].startsWith(n[3].charAt(1))?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")}function Tt(o){return Math.round(parseFloat(o)*255).toString(16)}function K(o){return f(o)/255}function f(o){return parseInt(o,16)}function lt(o){return{r:o>>16,g:(o&65280)>>8,b:o&255}}var k={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function dt(o){var e={r:0,g:0,b:0},t=1,i=null,r=null,n=null,s=!1,h=!1;return typeof o=="string"&&(o=_t(o)),typeof o=="object"&&(E(o.r)&&E(o.g)&&E(o.b)?(e=nt(o.r,o.g,o.b),s=!0,h=String(o.r).substr(-1)==="%"?"prgb":"rgb"):E(o.h)&&E(o.s)&&E(o.v)?(i=M(o.s),r=M(o.v),e=at(o.h,i,r),s=!0,h="hsv"):E(o.h)&&E(o.s)&&E(o.l)&&(i=M(o.s),n=M(o.l),e=st(o.h,i,n),s=!0,h="hsl"),Object.prototype.hasOwnProperty.call(o,"a")&&(t=o.a)),t=T(t),{ok:s,format:o.format||h,r:Math.min(255,Math.max(e.r,0)),g:Math.min(255,Math.max(e.g,0)),b:Math.min(255,Math.max(e.b,0)),a:t}}var Rt="[-\\+]?\\d+%?",Dt="[-\\+]?\\d*\\.\\d+%?",C="(?:".concat(Dt,")|(?:").concat(Rt,")"),V="[\\s|\\(]+(".concat(C,")[,|\\s]+(").concat(C,")[,|\\s]+(").concat(C,")\\s*\\)?"),G="[\\s|\\(]+(".concat(C,")[,|\\s]+(").concat(C,")[,|\\s]+(").concat(C,")[,|\\s]+(").concat(C,")\\s*\\)?"),v={CSS_UNIT:new RegExp(C),rgb:new RegExp("rgb"+V),rgba:new RegExp("rgba"+G),hsl:new RegExp("hsl"+V),hsla:new RegExp("hsla"+G),hsv:new RegExp("hsv"+V),hsva:new RegExp("hsva"+G),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function _t(o){if(o=o.trim().toLowerCase(),o.length===0)return!1;var e=!1;if(k[o])o=k[o],e=!0;else if(o==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};var t=v.rgb.exec(o);return t?{r:t[1],g:t[2],b:t[3]}:(t=v.rgba.exec(o),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=v.hsl.exec(o),t?{h:t[1],s:t[2],l:t[3]}:(t=v.hsla.exec(o),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=v.hsv.exec(o),t?{h:t[1],s:t[2],v:t[3]}:(t=v.hsva.exec(o),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=v.hex8.exec(o),t?{r:f(t[1]),g:f(t[2]),b:f(t[3]),a:K(t[4]),format:e?"name":"hex8"}:(t=v.hex6.exec(o),t?{r:f(t[1]),g:f(t[2]),b:f(t[3]),format:e?"name":"hex"}:(t=v.hex4.exec(o),t?{r:f(t[1]+t[1]),g:f(t[2]+t[2]),b:f(t[3]+t[3]),a:K(t[4]+t[4]),format:e?"name":"hex8"}:(t=v.hex3.exec(o),t?{r:f(t[1]+t[1]),g:f(t[2]+t[2]),b:f(t[3]+t[3]),format:e?"name":"hex"}:!1)))))))))}function E(o){return Boolean(v.CSS_UNIT.exec(String(o)))}var l=function(){function o(e,t){e===void 0&&(e=""),t===void 0&&(t={});var i;if(e instanceof o)return e;typeof e=="number"&&(e=lt(e)),this.originalInput=e;var r=dt(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=(i=t.format)!==null&&i!==void 0?i:r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}return o.prototype.isDark=function(){return this.getBrightness()<128},o.prototype.isLight=function(){return!this.isDark()},o.prototype.getBrightness=function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},o.prototype.getLuminance=function(){var e=this.toRgb(),t,i,r,n=e.r/255,s=e.g/255,h=e.b/255;return n<=.03928?t=n/12.92:t=Math.pow((n+.055)/1.055,2.4),s<=.03928?i=s/12.92:i=Math.pow((s+.055)/1.055,2.4),h<=.03928?r=h/12.92:r=Math.pow((h+.055)/1.055,2.4),.2126*t+.7152*i+.0722*r},o.prototype.getAlpha=function(){return this.a},o.prototype.setAlpha=function(e){return this.a=T(e),this.roundA=Math.round(100*this.a)/100,this},o.prototype.toHsv=function(){var e=B(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}},o.prototype.toHsvString=function(){var e=B(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?"hsv(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsva(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHsl=function(){var e=U(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}},o.prototype.toHslString=function(){var e=U(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?"hsl(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsla(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHex=function(e){return e===void 0&&(e=!1),N(this.r,this.g,this.b,e)},o.prototype.toHexString=function(e){return e===void 0&&(e=!1),"#"+this.toHex(e)},o.prototype.toHex8=function(e){return e===void 0&&(e=!1),ht(this.r,this.g,this.b,this.a,e)},o.prototype.toHex8String=function(e){return e===void 0&&(e=!1),"#"+this.toHex8(e)},o.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},o.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),i=Math.round(this.b);return this.a===1?"rgb(".concat(e,", ").concat(t,", ").concat(i,")"):"rgba(".concat(e,", ").concat(t,", ").concat(i,", ").concat(this.roundA,")")},o.prototype.toPercentageRgb=function(){var e=function(t){return"".concat(Math.round(d(t,255)*100),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},o.prototype.toPercentageRgbString=function(){var e=function(t){return Math.round(d(t,255)*100)};return this.a===1?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},o.prototype.toName=function(){if(this.a===0)return"transparent";if(this.a<1)return!1;for(var e="#"+N(this.r,this.g,this.b,!1),t=0,i=Object.entries(k);t<i.length;t++){var r=i[t],n=r[0],s=r[1];if(e===s)return n}return!1},o.prototype.toString=function(e){var t=Boolean(e);e=e!=null?e:this.format;var i=!1,r=this.a<1&&this.a>=0,n=!t&&r&&(e.startsWith("hex")||e==="name");return n?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(i=this.toRgbString()),e==="prgb"&&(i=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(i=this.toHexString()),e==="hex3"&&(i=this.toHexString(!0)),e==="hex4"&&(i=this.toHex8String(!0)),e==="hex8"&&(i=this.toHex8String()),e==="name"&&(i=this.toName()),e==="hsl"&&(i=this.toHslString()),e==="hsv"&&(i=this.toHsvString()),i||this.toHexString())},o.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},o.prototype.clone=function(){return new o(this.toString())},o.prototype.lighten=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l+=e/100,t.l=$(t.l),new o(t)},o.prototype.brighten=function(e){e===void 0&&(e=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new o(t)},o.prototype.darken=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l-=e/100,t.l=$(t.l),new o(t)},o.prototype.tint=function(e){return e===void 0&&(e=10),this.mix("white",e)},o.prototype.shade=function(e){return e===void 0&&(e=10),this.mix("black",e)},o.prototype.desaturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s-=e/100,t.s=$(t.s),new o(t)},o.prototype.saturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s+=e/100,t.s=$(t.s),new o(t)},o.prototype.greyscale=function(){return this.desaturate(100)},o.prototype.spin=function(e){var t=this.toHsl(),i=(t.h+e)%360;return t.h=i<0?360+i:i,new o(t)},o.prototype.mix=function(e,t){t===void 0&&(t=50);var i=this.toRgb(),r=new o(e).toRgb(),n=t/100,s={r:(r.r-i.r)*n+i.r,g:(r.g-i.g)*n+i.g,b:(r.b-i.b)*n+i.b,a:(r.a-i.a)*n+i.a};return new o(s)},o.prototype.analogous=function(e,t){e===void 0&&(e=6),t===void 0&&(t=30);var i=this.toHsl(),r=360/t,n=[this];for(i.h=(i.h-(r*e>>1)+720)%360;--e;)i.h=(i.h+r)%360,n.push(new o(i));return n},o.prototype.complement=function(){var e=this.toHsl();return e.h=(e.h+180)%360,new o(e)},o.prototype.monochromatic=function(e){e===void 0&&(e=6);for(var t=this.toHsv(),i=t.h,r=t.s,n=t.v,s=[],h=1/e;e--;)s.push(new o({h:i,s:r,v:n})),n=(n+h)%1;return s},o.prototype.splitcomplement=function(){var e=this.toHsl(),t=e.h;return[this,new o({h:(t+72)%360,s:e.s,l:e.l}),new o({h:(t+216)%360,s:e.s,l:e.l})]},o.prototype.onBackground=function(e){var t=this.toRgb(),i=new o(e).toRgb();return new o({r:i.r+(t.r-i.r)*t.a,g:i.g+(t.g-i.g)*t.a,b:i.b+(t.b-i.b)*t.a})},o.prototype.triad=function(){return this.polyad(3)},o.prototype.tetrad=function(){return this.polyad(4)},o.prototype.polyad=function(e){for(var t=this.toHsl(),i=t.h,r=[this],n=360/e,s=1;s<e;s++)r.push(new o({h:(i+s*n)%360,s:t.s,l:t.l}));return r},o.prototype.equals=function(e){return this.toRgbString()===new o(e).toRgbString()},o}();var w=()=>Math.random().toString(16).slice(2),R=o=>Math.round((o+Number.EPSILON)*100)/100;var L=.01,F=o=>(o<0&&(o=0),o>360&&(o=360),`hsl(${Math.round(o)}, 100%, 50%)`),q=o=>{let e=o.toRgb();return`linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`},A=o=>{let e=o.toRgb();return`rgba(${e.r}, ${e.g}, ${e.b}, ${R(e.a)})`},ut=o=>{let e=o.toHsl();return`hsla(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.l*100)}%, ${R(e.a)})`},ct=o=>{let e=o.toHsv();return`hsva(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.v*100)}%, ${R(e.a)})`},X=o=>(o<0&&(o=0),o>1&&(o=1),`${(-(o*100)+100).toFixed(2)}%`),j=o=>(o<0&&(o=0),o>1&&(o=1),`${(o*100).toFixed(2)}%`),H=o=>{o<0&&(o=0),o>360&&(o=360);let e=o*100/360,t=Math.round(e*100)/100;return t<0&&(t=0),t>100&&(t=100),t},D=o=>360*o/100,_=o=>{let e=Number(o)||0;return e=Math.round(e),e=Math.max(0,e),e=Math.min(255,e),e},pt=o=>{let e=Number(o)||100;return e=Math.round(e),e=Math.max(0,e),e=Math.min(100,e),e},u=o=>{let e=new l(o||"#000");return e.setAlpha(e.getAlpha()),e};var W=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$saturation");a(this,"$color");a(this,"$pointer");a(this,"hue",0);a(this,"saturation",0);a(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.onPointerKeyDown=this.onPointerKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){this.$pointer&&(this.$pointer.style.left=j(this.saturation),this.$pointer.style.top=X(this.value)),this.$color&&this.$color.setAttribute("style",`background: ${F(this.hue)}`),t&&b(this.cid,this.hue,this.saturation,this.value)}onChange(t){if(!this.$saturation)return;let{width:i,height:r,left:n,top:s}=this.$saturation.getBoundingClientRect();if(i===0||r===0)return;let h=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,c=typeof t.clientY=="number"?t.clientY:t.touches[0].clientY,P=Math.min(Math.max(0,h-n),i),I=Math.min(Math.max(0,c-s),r);this.saturation=P/i,this.value=1-I/r,this.render()}onPointerKeyDown(t){switch(t.key){case"ArrowLeft":{this.saturation=Math.max(0,this.saturation-L),this.render();break}case"ArrowRight":{this.saturation=Math.min(1,this.saturation+L),this.render();break}case"ArrowUp":{this.value=Math.min(1,this.value+L),this.render();break}case"ArrowDown":{t.preventDefault(),this.value=Math.max(0,this.value-L),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}hsvChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=!1;this.hue!==t.detail.h&&(this.hue=t.detail.h,i=!0),this.saturation!==t.detail.s&&(this.saturation=t.detail.s,i=!0),this.value!==t.detail.v&&(this.value=t.detail.v,i=!0),i&&this.render(!1)}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render())}connectedCallback(){this.cid=this.getAttribute("cid");let i=u(this.getAttribute("color")).toHsv();this.hue=i.h,this.saturation=i.s,this.value=i.v;let r=X(this.value),n=j(this.saturation);this.shadowRoot.innerHTML=`
<style>${ot}</style>
<div class="saturation">
<div class="box" style="background: ${G(this.hue)}">
<div class="box" style="background: ${F(this.hue)}">
<div class="white box">

@@ -15,4 +15,4 @@ <div class="black box"></div>

</div>
`,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),this.$pointer.addEventListener("keydown",this.onPointerKeyDown),this.$saturation.addEventListener("mousedown",this.onMouseDown),this.$saturation.addEventListener("mouseup",this.onMouseUp),this.$saturation.addEventListener("touchmove",this.onChange),this.$saturation.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged)}disconnectedCallback(){this.$saturation.removeEventListener("mousedown",this.onMouseDown),this.$saturation.removeEventListener("mouseup",this.onMouseUp),this.$saturation.removeEventListener("touchmove",this.onChange),this.$saturation.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},ct=j;var pt=".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 W=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$hue");a(this,"$pointer");a(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=`${H(this.hue)}%`),ot(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),h=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=R(h),this.render()}onKeyDown(t){switch(this.$pointer.focus(),t.key){case"ArrowLeft":{let i=H(this.hue);i=Math.max(0,i-1),this.hue=R(i),this.render();break}case"ArrowRight":{let i=H(this.hue);i=Math.min(100,i+1),this.hue=R(i),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){this.cid=this.getAttribute("cid");let t=u(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
<style>${pt}</style>
`,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),this.$pointer.addEventListener("keydown",this.onPointerKeyDown),this.$saturation.addEventListener("mousedown",this.onMouseDown),this.$saturation.addEventListener("mouseup",this.onMouseUp),this.$saturation.addEventListener("touchmove",this.onChange),this.$saturation.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged)}disconnectedCallback(){this.$saturation.removeEventListener("mousedown",this.onMouseDown),this.$saturation.removeEventListener("mouseup",this.onMouseUp),this.$saturation.removeEventListener("touchmove",this.onChange),this.$saturation.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},ft=W;var gt=".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 z=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$hue");a(this,"$pointer");a(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=`${H(this.hue)}%`),rt(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),h=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=D(h),this.render()}onKeyDown(t){switch(this.$pointer.focus(),t.key){case"ArrowLeft":{let i=H(this.hue);i=Math.max(0,i-1),this.hue=D(i),this.render();break}case"ArrowRight":{let i=H(this.hue);i=Math.min(100,i+1),this.hue=D(i),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){this.cid=this.getAttribute("cid");let t=u(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
<style>${gt}</style>
<div class="hue">

@@ -31,8 +31,8 @@ <div class="box">

</div>
`,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),this.$hue.addEventListener("mousedown",this.onMouseDown),this.$hue.addEventListener("mouseup",this.onMouseUp),this.$hue.addEventListener("touchmove",this.onChange),this.$hue.addEventListener("touchstart",this.onChange),this.$pointer.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){this.$hue.removeEventListener("mousedown",this.onMouseDown),this.$hue.removeEventListener("mouseup",this.onMouseUp),this.$hue.removeEventListener("touchmove",this.onChange),this.$hue.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.hue=s.h,this.render()}},ft=W;var gt=".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 z=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$alpha");a(this,"$color");a(this,"$pointer");a(this,"alpha",1);a(this,"hue",0);a(this,"saturation",0);a(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=F(i)}t&&y(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),h=Math.min(Math.max(0,s*100/i),100);this.alpha=h/100,this.render()}onKeyDown(t){switch(this.$pointer.focus(),t.key){case"ArrowLeft":{let i=this.alpha*100;i=Math.max(0,i-1),this.alpha=i/100,this.render();break}case"ArrowRight":{let i=this.alpha*100;i=Math.min(100,i+1),this.alpha=i/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(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){this.cid=this.getAttribute("cid");let t=u(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.shadowRoot.innerHTML=`
<style>${gt}</style>
`,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),this.$hue.addEventListener("mousedown",this.onMouseDown),this.$hue.addEventListener("mouseup",this.onMouseUp),this.$hue.addEventListener("touchmove",this.onChange),this.$hue.addEventListener("touchstart",this.onChange),this.$pointer.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){this.$hue.removeEventListener("mousedown",this.onMouseDown),this.$hue.removeEventListener("mouseup",this.onMouseUp),this.$hue.removeEventListener("touchmove",this.onChange),this.$hue.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.hue=s.h,this.render()}},bt=z;var vt=".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 Y=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$alpha");a(this,"$color");a(this,"$pointer");a(this,"alpha",1);a(this,"hue",0);a(this,"saturation",0);a(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=q(i)}t&&y(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),h=Math.min(Math.max(0,s*100/i),100);this.alpha=h/100,this.render()}onKeyDown(t){switch(this.$pointer.focus(),t.key){case"ArrowLeft":{let i=this.alpha*100;i=Math.max(0,i-1),this.alpha=i/100,this.render();break}case"ArrowRight":{let i=this.alpha*100;i=Math.min(100,i+1),this.alpha=i/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(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){this.cid=this.getAttribute("cid");let t=u(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.shadowRoot.innerHTML=`
<style>${vt}</style>
<div class="alpha">
<div class="box">
<div class="transparent-bg box"></div>
<div class="color-bg box" style="background: ${F(t)}"></div>
<div class="color-bg box" style="background: ${q(t)}"></div>

@@ -46,4 +46,4 @@ <div class="pointer box">

</div>
`,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),this.$alpha.addEventListener("mousedown",this.onMouseDown),this.$alpha.addEventListener("mouseup",this.onMouseUp),this.$alpha.addEventListener("touchmove",this.onChange),this.$alpha.addEventListener("touchstart",this.onChange),this.$pointer.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){this.$alpha.removeEventListener("mousedown",this.onMouseDown),this.$alpha.removeEventListener("mouseup",this.onMouseUp),this.$alpha.removeEventListener("touchmove",this.onChange),this.$alpha.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},bt=z;var vt=":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 Y=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"color",new l("#000"));a(this,"$fields");a(this,"$hex");a(this,"$r");a(this,"$g");a(this,"$b");a(this,"$a");a(this,"hex","");a(this,"r",0);a(this,"g",0);a(this,"b",0);a(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(){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&&this.shadowRoot.activeElement!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&this.shadowRoot.activeElement!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&this.shadowRoot.activeElement!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&this.shadowRoot.activeElement!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&this.shadowRoot.activeElement!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let n=this.color.toRgb();n.a=this.a,this.color=new l(n),this.render(),y(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let n=this.color.toRgb();n.a=this.a,this.color=new l(n),this.render(),y(this.cid,this.a)}break}case"Escape":{this.shadowRoot.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{this.shadowRoot.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=D(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=D(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=D(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ut(i.value);r.toString()===i.value&&y(this.cid,r/100)}connectedCallback(){this.cid=this.getAttribute("cid"),this.color=u(this.getAttribute("color"));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();let i=C(),r=C(),n=C(),s=C(),h=C();this.shadowRoot.innerHTML=`
<style>${vt}</style>
`,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),this.$alpha.addEventListener("mousedown",this.onMouseDown),this.$alpha.addEventListener("mouseup",this.onMouseUp),this.$alpha.addEventListener("touchmove",this.onChange),this.$alpha.addEventListener("touchstart",this.onChange),this.$pointer.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){this.$alpha.removeEventListener("mousedown",this.onMouseDown),this.$alpha.removeEventListener("mouseup",this.onMouseUp),this.$alpha.removeEventListener("touchmove",this.onChange),this.$alpha.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},mt=Y;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 Q=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"color",new l("#000"));a(this,"$fields");a(this,"$hex");a(this,"$r");a(this,"$g");a(this,"$b");a(this,"$a");a(this,"hex","");a(this,"r",0);a(this,"g",0);a(this,"b",0);a(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(){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&&this.shadowRoot.activeElement!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&this.shadowRoot.activeElement!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&this.shadowRoot.activeElement!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&this.shadowRoot.activeElement!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&this.shadowRoot.activeElement!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let n=this.color.toRgb();n.a=this.a,this.color=new l(n),this.render(),y(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let n=this.color.toRgb();n.a=this.a,this.color=new l(n),this.render(),y(this.cid,this.a)}break}case"Escape":{this.shadowRoot.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{this.shadowRoot.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=_(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=_(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=_(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=pt(i.value);r.toString()===i.value&&y(this.cid,r/100)}connectedCallback(){this.cid=this.getAttribute("cid"),this.color=u(this.getAttribute("color"));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();let i=w(),r=w(),n=w(),s=w(),h=w();this.shadowRoot.innerHTML=`
<style>${Et}</style>
<div class="fields">

@@ -62,4 +62,4 @@ <input id="hex-${i}" type="text" value="${this.hex.toUpperCase()}" data-type="hex" />

</div>
`,this.$fields=this.shadowRoot.querySelector(".fields"),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-${h}`),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,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(g,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=u(r),this.render()}},mt=Y;var Q=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"popupPosition","left");a(this,"$popup");a(this,"color","#000");customElements.get("toolcool-color-picker-saturation")||customElements.define("toolcool-color-picker-saturation",ct),customElements.get("toolcool-color-picker-hue")||customElements.define("toolcool-color-picker-hue",ft),customElements.get("toolcool-color-picker-alpha")||customElements.define("toolcool-color-picker-alpha",bt),customElements.get("toolcool-color-picker-fields")||customElements.define("toolcool-color-picker-fields",mt),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(){this.color=this.getAttribute("color")||"#000",this.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
<style>${tt}</style>
`,this.$fields=this.shadowRoot.querySelector(".fields"),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-${h}`),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,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(g,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=u(r),this.render()}},xt=Q;var J=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"popupPosition","left");a(this,"$popup");a(this,"color","#000");customElements.get("toolcool-color-picker-saturation")||customElements.define("toolcool-color-picker-saturation",ft),customElements.get("toolcool-color-picker-hue")||customElements.define("toolcool-color-picker-hue",bt),customElements.get("toolcool-color-picker-alpha")||customElements.define("toolcool-color-picker-alpha",mt),customElements.get("toolcool-color-picker-fields")||customElements.define("toolcool-color-picker-fields",xt),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(){this.color=this.getAttribute("color")||"#000",this.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
<style>${et}</style>
<div class="popup">

@@ -71,4 +71,4 @@ <toolcool-color-picker-saturation color="${this.color}" cid="${this.cid}"></toolcool-color-picker-saturation>

</div>
`,this.$popup=this.shadowRoot.querySelector(".popup"),this.$popup.addEventListener("mousedown",this.prevent),this.$popup.classList.toggle("right",this.popupPosition==="right")}disconnectedCallback(){this.$popup.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let n=this.shadowRoot.querySelector("toolcool-color-picker-saturation"),s=this.shadowRoot.querySelector("toolcool-color-picker-hue"),h=this.shadowRoot.querySelector("toolcool-color-picker-alpha"),c=this.shadowRoot.querySelector("toolcool-color-picker-fields");n&&n.setAttribute("color",this.color),s&&s.setAttribute("color",this.color),h&&h.setAttribute("color",this.color),c&&c.setAttribute("color",this.color)}}},xt=Q;var J=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$button");a(this,"$buttonColor");a(this,"$popupBox");a(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000")});a(this,"state");this.cid=C(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",xt),this.attachShadow({mode:"open"}),this.toggle=this.toggle.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.clickedOutside=this.clickedOutside.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.initState()}static get observedAttributes(){return["color","popup-position"]}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 A(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return lt(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return dt(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(),!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(){let t=A(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=this.shadowRoot.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=A(this.state.color)),this.dispatchEvent(new CustomEvent("change",{detail:{hex:this.hex,hex8:this.hex8,rgb:this.rgb,rgba:this.rgba,hsl:this.hsl,hsla:this.hsla,hsv:this.hsv,hsva:this.hsva,color:this.color}}))}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.state.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.state.color.toHsv().a}))}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toHsv();this.state.color=new l({h:t.detail.h,s:i.s,v:i.v,a:i.a})}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toRgb();i.a=t.detail.a,this.state.color=new l(i)}clickedOutside(){this.state.isPopupVisible=!1}toggle(){let t=this.state.isPopupVisible;window.setTimeout(()=>{this.state.isPopupVisible=!t},0)}onKeyDown(t){t.key==="Escape"&&(this.state.isPopupVisible=!1)}connectedCallback(){this.state.initialColor=u(this.getAttribute("color")),this.state.color=u(this.getAttribute("color")),this.state.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
<style>${Z}</style>
`,this.$popup=this.shadowRoot.querySelector(".popup"),this.$popup.addEventListener("mousedown",this.prevent),this.$popup.classList.toggle("right",this.popupPosition==="right")}disconnectedCallback(){this.$popup.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let n=this.shadowRoot.querySelector("toolcool-color-picker-saturation"),s=this.shadowRoot.querySelector("toolcool-color-picker-hue"),h=this.shadowRoot.querySelector("toolcool-color-picker-alpha"),c=this.shadowRoot.querySelector("toolcool-color-picker-fields");n&&n.setAttribute("color",this.color),s&&s.setAttribute("color",this.color),h&&h.setAttribute("color",this.color),c&&c.setAttribute("color",this.color)}}},Ct=J;var Z=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$button");a(this,"$buttonColor");a(this,"$popupBox");a(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000")});a(this,"state");this.cid=w(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",Ct),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.initState()}static get observedAttributes(){return["color","popup-position"]}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 A(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return ut(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return ct(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(),!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(){let t=A(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=this.shadowRoot.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=A(this.state.color)),this.dispatchEvent(new CustomEvent("change",{detail:{hex:this.hex,hex8:this.hex8,rgb:this.rgb,rgba:this.rgba,hsl:this.hsl,hsla:this.hsla,hsv:this.hsv,hsva:this.hsva,color:this.color}}))}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.state.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.state.color.toHsv().a}))}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toHsv();this.state.color=new l({h:t.detail.h,s:i.s,v:i.v,a:i.a})}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toRgb();i.a=t.detail.a,this.state.color=new l(i)}buttonClicked(t){!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid&&(this.state.isPopupVisible=!1)}clickedOutside(t){this.state.isPopupVisible=!1}toggle(){let t=this.state.isPopupVisible;window.setTimeout(()=>{this.state.isPopupVisible=!t,it(this.cid)},0)}onKeyDown(t){t.key==="Escape"&&(this.state.isPopupVisible=!1)}stopPropagation(t){t.stopPropagation()}connectedCallback(){this.state.initialColor=u(this.getAttribute("color")),this.state.color=u(this.getAttribute("color")),this.state.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
<style>${tt}</style>
<div class="color-picker">

@@ -84,2 +84,2 @@ <button

</div>
`,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),this.$button.addEventListener("click",this.toggle),this.$button.addEventListener("keydown",this.onKeyDown),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){this.$button.removeEventListener("click",this.toggle),this.$button.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t){t==="color"&&(this.state.initialColor=u(this.getAttribute("color")),this.state.color=u(this.getAttribute("color")),this.onInitialColorChange()),t==="popup-position"&&(this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange())}},wt=J;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",wt);})();
`,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),this.$button.addEventListener("click",this.toggle),this.$button.addEventListener("keydown",this.onKeyDown),this.$button.addEventListener("mousedown",this.stopPropagation),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged),document.addEventListener(m,this.alphaChanged),document.addEventListener(S,this.buttonClicked)}disconnectedCallback(){this.$button.removeEventListener("click",this.toggle),this.$button.removeEventListener("keydown",this.onKeyDown),this.$button.removeEventListener("mousedown",this.stopPropagation),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged),document.removeEventListener(m,this.alphaChanged),document.removeEventListener(S,this.buttonClicked)}attributeChangedCallback(t){t==="color"&&(this.state.initialColor=u(this.getAttribute("color")),this.state.color=u(this.getAttribute("color")),this.onInitialColorChange()),t==="popup-position"&&(this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange())}},wt=Z;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",wt);})();

2

package.json
{
"name": "toolcool-color-picker",
"version": "1.0.9",
"version": "1.0.10",
"description": "Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.",

@@ -5,0 +5,0 @@ "main": "./dist/toolcool-color-picker.min.js",

27

src/app/color-picker.ts

@@ -7,3 +7,3 @@ // @ts-ignore: esbuild custom loader

CUSTOM_EVENT_COLOR_HUE_CHANGED,
CUSTOM_EVENT_COLOR_ALPHA_CHANGED,
CUSTOM_EVENT_COLOR_ALPHA_CHANGED, sendButtonClickedCustomEvent, CUSTOM_EVENT_BUTTON_CLICKED,
} from '../domain/events-provider';

@@ -147,2 +147,3 @@ import { getUniqueId } from '../domain/common-provider';

this.clickedOutside = this.clickedOutside.bind(this);
this.stopPropagation = this.stopPropagation.bind(this);

@@ -152,2 +153,3 @@ this.hsvChanged = this.hsvChanged.bind(this);

this.alphaChanged = this.alphaChanged.bind(this);
this.buttonClicked = this.buttonClicked.bind(this);

@@ -281,6 +283,17 @@ this.initState();

clickedOutside() {
/**
* when button clicked ---> close all other color pickers
*/
buttonClicked(evt: CustomEvent) {
if(!evt || !evt.detail || !evt.detail.cid) return;
if(evt.detail.cid === this.cid) return;
this.state.isPopupVisible = false;
}
clickedOutside(evt: MouseEvent) {
this.state.isPopupVisible = false;
}
toggle() {

@@ -294,2 +307,4 @@

this.state.isPopupVisible = !isVisible;
sendButtonClickedCustomEvent(this.cid);
}, 0);

@@ -306,2 +321,6 @@ }

stopPropagation(evt: MouseEvent){
evt.stopPropagation();
}
/**

@@ -336,2 +355,3 @@ * when the custom element connected to DOM

this.$button.addEventListener('keydown', this.onKeyDown);
this.$button.addEventListener('mousedown', this.stopPropagation);

@@ -350,2 +370,3 @@ // init popup container

document.addEventListener(CUSTOM_EVENT_COLOR_ALPHA_CHANGED, this.alphaChanged);
document.addEventListener(CUSTOM_EVENT_BUTTON_CLICKED, this.buttonClicked);
}

@@ -359,2 +380,3 @@

this.$button.removeEventListener('keydown', this.onKeyDown);
this.$button.removeEventListener('mousedown', this.stopPropagation);
document.removeEventListener('mousedown', this.clickedOutside);

@@ -365,2 +387,3 @@

document.removeEventListener(CUSTOM_EVENT_COLOR_ALPHA_CHANGED, this.alphaChanged);
document.removeEventListener(CUSTOM_EVENT_BUTTON_CLICKED, this.buttonClicked);
}

@@ -367,0 +390,0 @@

12

src/domain/events-provider.ts
export const CUSTOM_EVENT_COLOR_HSV_CHANGED = 'tc-hsv-changed';
export const CUSTOM_EVENT_COLOR_HUE_CHANGED = 'tc-hue-changed';
export const CUSTOM_EVENT_COLOR_ALPHA_CHANGED = 'tc-alpha-changed';
export const CUSTOM_EVENT_BUTTON_CLICKED = 'tc-button-clicked';
export const sendButtonClickedCustomEvent = (cid: string) => {
if(!cid) return;
document.dispatchEvent(new CustomEvent(CUSTOM_EVENT_BUTTON_CLICKED, {
detail: {
cid,
}
}));
};
export const sendAlphaCustomEvent = (cid: string, a: number) => {

@@ -6,0 +18,0 @@

55

test/modules/popup.js

@@ -146,2 +146,57 @@

});
QUnit.test('open one popup, the click on another popup ---> the first popup should be closed', (assert) => {
const $colorPicker1 = document.querySelector('#red');
$colorPicker1.opened = true;
const $colorPicker2 = document.querySelector('#black');
const $button2 = $colorPicker2.shadowRoot.querySelector('.button');
$button2.click();
const done = assert.async();
window.setTimeout(() => {
assert.equal($colorPicker1.opened, false);
done();
}, 1);
});
QUnit.test('click on color picker button, then click again ---> popup should close', (assert) => {
const $colorPicker1 = document.querySelector('#red');
const $button1 = $colorPicker1.shadowRoot.querySelector('.button');
$button1.click();
const done = assert.async();
window.setTimeout(() => {
$button1.click();
window.setTimeout(() => {
assert.equal($colorPicker1.opened, false);
done();
}, 1);
}, 1);
});
QUnit.test('click on color picker button, then click again ---> popup element should not appear', (assert) => {
const $colorPicker1 = document.querySelector('#red');
const $button1 = $colorPicker1.shadowRoot.querySelector('.button');
$button1.click();
const done = assert.async();
window.setTimeout(() => {
$button1.click();
window.setTimeout(() => {
const $popup = $colorPicker1.shadowRoot.querySelector('toolcool-color-picker-popup');
assert.equal($popup, null);
done();
}, 1);
}, 1);
});
});

32

test/toolcool-color-picker.min.js

@@ -1,6 +0,6 @@

// Tool Cool Picker v1.0.8, MIT License - https://github.com/toolcool-org/toolcool-color-picker
(()=>{var Ct=Object.defineProperty;var yt=(o,e,t)=>e in o?Ct(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var a=(o,e,t)=>(yt(o,typeof e!="symbol"?e+"":e,t),t);var Z=":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{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;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;width:2.5rem;height:1rem;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var tt=":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 et=".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",g="tc-hue-changed",m="tc-alpha-changed",y=(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}}))},ot=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(g,{detail:{h:e,cid:o}}))};function d(o,e){Lt(o)&&(o="100%");var t=At(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 $(o){return Math.min(1,Math.max(0,o))}function Lt(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function At(o){return typeof o=="string"&&o.indexOf("%")!==-1}function S(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function M(o){return o<=1?"".concat(Number(o)*100,"%"):o}function w(o){return o.length===1?"0"+o:String(o)}function it(o,e,t){return{r:d(o,255)*255,g:d(e,255)*255,b:d(t,255)*255}}function P(o,e,t){o=d(o,255),e=d(e,255),t=d(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,h=(i+r)/2;if(i===r)s=0,n=0;else{var c=i-r;switch(s=h>.5?c/(2-i-r):c/(i+r),i){case o:n=(e-t)/c+(e<t?6:0);break;case e:n=(t-o)/c+2;break;case t:n=(o-e)/c+4;break;default:break}n/=6}return{h:n,s,l:h}}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 rt(o,e,t){var i,r,n;if(o=d(o,360),e=d(e,100),t=d(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,h=2*t-s;i=O(h,s,o+1/3),r=O(h,s,o),n=O(h,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function U(o,e,t){o=d(o,255),e=d(e,255),t=d(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,h=i-r,c=i===0?0:h/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/h+(e<t?6:0);break;case e:n=(t-o)/h+2;break;case t:n=(o-e)/h+4;break;default:break}n/=6}return{h:n,s:c,v:s}}function nt(o,e,t){o=d(o,360)*6,e=d(e,100),t=d(t,100);var i=Math.floor(o),r=o-i,n=t*(1-e),s=t*(1-r*e),h=t*(1-(1-r)*e),c=i%6,I=[t,s,n,n,h,t][c],_=[h,t,t,s,n,n][c],Et=[n,n,h,t,t,s][c];return{r:I*255,g:_*255,b:Et*255}}function B(o,e,t,i){var r=[w(Math.round(o).toString(16)),w(Math.round(e).toString(16)),w(Math.round(t).toString(16))];return i&&r[0].startsWith(r[0].charAt(1))&&r[1].startsWith(r[1].charAt(1))&&r[2].startsWith(r[2].charAt(1))?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function st(o,e,t,i,r){var n=[w(Math.round(o).toString(16)),w(Math.round(e).toString(16)),w(Math.round(t).toString(16)),w(Ht(i))];return r&&n[0].startsWith(n[0].charAt(1))&&n[1].startsWith(n[1].charAt(1))&&n[2].startsWith(n[2].charAt(1))&&n[3].startsWith(n[3].charAt(1))?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")}function Ht(o){return Math.round(parseFloat(o)*255).toString(16)}function K(o){return f(o)/255}function f(o){return parseInt(o,16)}function at(o){return{r:o>>16,g:(o&65280)>>8,b:o&255}}var k={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function ht(o){var e={r:0,g:0,b:0},t=1,i=null,r=null,n=null,s=!1,h=!1;return typeof o=="string"&&(o=Rt(o)),typeof o=="object"&&(x(o.r)&&x(o.g)&&x(o.b)?(e=it(o.r,o.g,o.b),s=!0,h=String(o.r).substr(-1)==="%"?"prgb":"rgb"):x(o.h)&&x(o.s)&&x(o.v)?(i=M(o.s),r=M(o.v),e=nt(o.h,i,r),s=!0,h="hsv"):x(o.h)&&x(o.s)&&x(o.l)&&(i=M(o.s),n=M(o.l),e=rt(o.h,i,n),s=!0,h="hsl"),Object.prototype.hasOwnProperty.call(o,"a")&&(t=o.a)),t=S(t),{ok:s,format:o.format||h,r:Math.min(255,Math.max(e.r,0)),g:Math.min(255,Math.max(e.g,0)),b:Math.min(255,Math.max(e.b,0)),a:t}}var St="[-\\+]?\\d+%?",Tt="[-\\+]?\\d*\\.\\d+%?",E="(?:".concat(Tt,")|(?:").concat(St,")"),N="[\\s|\\(]+(".concat(E,")[,|\\s]+(").concat(E,")[,|\\s]+(").concat(E,")\\s*\\)?"),V="[\\s|\\(]+(".concat(E,")[,|\\s]+(").concat(E,")[,|\\s]+(").concat(E,")[,|\\s]+(").concat(E,")\\s*\\)?"),v={CSS_UNIT:new RegExp(E),rgb:new RegExp("rgb"+N),rgba:new RegExp("rgba"+V),hsl:new RegExp("hsl"+N),hsla:new RegExp("hsla"+V),hsv:new RegExp("hsv"+N),hsva:new RegExp("hsva"+V),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function Rt(o){if(o=o.trim().toLowerCase(),o.length===0)return!1;var e=!1;if(k[o])o=k[o],e=!0;else if(o==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};var t=v.rgb.exec(o);return t?{r:t[1],g:t[2],b:t[3]}:(t=v.rgba.exec(o),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=v.hsl.exec(o),t?{h:t[1],s:t[2],l:t[3]}:(t=v.hsla.exec(o),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=v.hsv.exec(o),t?{h:t[1],s:t[2],v:t[3]}:(t=v.hsva.exec(o),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=v.hex8.exec(o),t?{r:f(t[1]),g:f(t[2]),b:f(t[3]),a:K(t[4]),format:e?"name":"hex8"}:(t=v.hex6.exec(o),t?{r:f(t[1]),g:f(t[2]),b:f(t[3]),format:e?"name":"hex"}:(t=v.hex4.exec(o),t?{r:f(t[1]+t[1]),g:f(t[2]+t[2]),b:f(t[3]+t[3]),a:K(t[4]+t[4]),format:e?"name":"hex8"}:(t=v.hex3.exec(o),t?{r:f(t[1]+t[1]),g:f(t[2]+t[2]),b:f(t[3]+t[3]),format:e?"name":"hex"}:!1)))))))))}function x(o){return Boolean(v.CSS_UNIT.exec(String(o)))}var l=function(){function o(e,t){e===void 0&&(e=""),t===void 0&&(t={});var i;if(e instanceof o)return e;typeof e=="number"&&(e=at(e)),this.originalInput=e;var r=ht(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=(i=t.format)!==null&&i!==void 0?i:r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}return o.prototype.isDark=function(){return this.getBrightness()<128},o.prototype.isLight=function(){return!this.isDark()},o.prototype.getBrightness=function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},o.prototype.getLuminance=function(){var e=this.toRgb(),t,i,r,n=e.r/255,s=e.g/255,h=e.b/255;return n<=.03928?t=n/12.92:t=Math.pow((n+.055)/1.055,2.4),s<=.03928?i=s/12.92:i=Math.pow((s+.055)/1.055,2.4),h<=.03928?r=h/12.92:r=Math.pow((h+.055)/1.055,2.4),.2126*t+.7152*i+.0722*r},o.prototype.getAlpha=function(){return this.a},o.prototype.setAlpha=function(e){return this.a=S(e),this.roundA=Math.round(100*this.a)/100,this},o.prototype.toHsv=function(){var e=U(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}},o.prototype.toHsvString=function(){var e=U(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?"hsv(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsva(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHsl=function(){var e=P(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}},o.prototype.toHslString=function(){var e=P(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?"hsl(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsla(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHex=function(e){return e===void 0&&(e=!1),B(this.r,this.g,this.b,e)},o.prototype.toHexString=function(e){return e===void 0&&(e=!1),"#"+this.toHex(e)},o.prototype.toHex8=function(e){return e===void 0&&(e=!1),st(this.r,this.g,this.b,this.a,e)},o.prototype.toHex8String=function(e){return e===void 0&&(e=!1),"#"+this.toHex8(e)},o.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},o.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),i=Math.round(this.b);return this.a===1?"rgb(".concat(e,", ").concat(t,", ").concat(i,")"):"rgba(".concat(e,", ").concat(t,", ").concat(i,", ").concat(this.roundA,")")},o.prototype.toPercentageRgb=function(){var e=function(t){return"".concat(Math.round(d(t,255)*100),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},o.prototype.toPercentageRgbString=function(){var e=function(t){return Math.round(d(t,255)*100)};return this.a===1?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},o.prototype.toName=function(){if(this.a===0)return"transparent";if(this.a<1)return!1;for(var e="#"+B(this.r,this.g,this.b,!1),t=0,i=Object.entries(k);t<i.length;t++){var r=i[t],n=r[0],s=r[1];if(e===s)return n}return!1},o.prototype.toString=function(e){var t=Boolean(e);e=e!=null?e:this.format;var i=!1,r=this.a<1&&this.a>=0,n=!t&&r&&(e.startsWith("hex")||e==="name");return n?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(i=this.toRgbString()),e==="prgb"&&(i=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(i=this.toHexString()),e==="hex3"&&(i=this.toHexString(!0)),e==="hex4"&&(i=this.toHex8String(!0)),e==="hex8"&&(i=this.toHex8String()),e==="name"&&(i=this.toName()),e==="hsl"&&(i=this.toHslString()),e==="hsv"&&(i=this.toHsvString()),i||this.toHexString())},o.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},o.prototype.clone=function(){return new o(this.toString())},o.prototype.lighten=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l+=e/100,t.l=$(t.l),new o(t)},o.prototype.brighten=function(e){e===void 0&&(e=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new o(t)},o.prototype.darken=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l-=e/100,t.l=$(t.l),new o(t)},o.prototype.tint=function(e){return e===void 0&&(e=10),this.mix("white",e)},o.prototype.shade=function(e){return e===void 0&&(e=10),this.mix("black",e)},o.prototype.desaturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s-=e/100,t.s=$(t.s),new o(t)},o.prototype.saturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s+=e/100,t.s=$(t.s),new o(t)},o.prototype.greyscale=function(){return this.desaturate(100)},o.prototype.spin=function(e){var t=this.toHsl(),i=(t.h+e)%360;return t.h=i<0?360+i:i,new o(t)},o.prototype.mix=function(e,t){t===void 0&&(t=50);var i=this.toRgb(),r=new o(e).toRgb(),n=t/100,s={r:(r.r-i.r)*n+i.r,g:(r.g-i.g)*n+i.g,b:(r.b-i.b)*n+i.b,a:(r.a-i.a)*n+i.a};return new o(s)},o.prototype.analogous=function(e,t){e===void 0&&(e=6),t===void 0&&(t=30);var i=this.toHsl(),r=360/t,n=[this];for(i.h=(i.h-(r*e>>1)+720)%360;--e;)i.h=(i.h+r)%360,n.push(new o(i));return n},o.prototype.complement=function(){var e=this.toHsl();return e.h=(e.h+180)%360,new o(e)},o.prototype.monochromatic=function(e){e===void 0&&(e=6);for(var t=this.toHsv(),i=t.h,r=t.s,n=t.v,s=[],h=1/e;e--;)s.push(new o({h:i,s:r,v:n})),n=(n+h)%1;return s},o.prototype.splitcomplement=function(){var e=this.toHsl(),t=e.h;return[this,new o({h:(t+72)%360,s:e.s,l:e.l}),new o({h:(t+216)%360,s:e.s,l:e.l})]},o.prototype.onBackground=function(e){var t=this.toRgb(),i=new o(e).toRgb();return new o({r:i.r+(t.r-i.r)*t.a,g:i.g+(t.g-i.g)*t.a,b:i.b+(t.b-i.b)*t.a})},o.prototype.triad=function(){return this.polyad(3)},o.prototype.tetrad=function(){return this.polyad(4)},o.prototype.polyad=function(e){for(var t=this.toHsl(),i=t.h,r=[this],n=360/e,s=1;s<e;s++)r.push(new o({h:(i+s*n)%360,s:t.s,l:t.l}));return r},o.prototype.equals=function(e){return this.toRgbString()===new o(e).toRgbString()},o}();var C=()=>Math.random().toString(16).slice(2),T=o=>Math.round((o+Number.EPSILON)*100)/100;var L=.01,G=o=>(o<0&&(o=0),o>360&&(o=360),`hsl(${Math.round(o)}, 100%, 50%)`),F=o=>{let e=o.toRgb();return`linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`},A=o=>{let e=o.toRgb();return`rgba(${e.r}, ${e.g}, ${e.b}, ${T(e.a)})`},lt=o=>{let e=o.toHsl();return`hsla(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.l*100)}%, ${T(e.a)})`},dt=o=>{let e=o.toHsv();return`hsva(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.v*100)}%, ${T(e.a)})`},q=o=>(o<0&&(o=0),o>1&&(o=1),`${(-(o*100)+100).toFixed(2)}%`),X=o=>(o<0&&(o=0),o>1&&(o=1),`${(o*100).toFixed(2)}%`),H=o=>{o<0&&(o=0),o>360&&(o=360);let e=o*100/360,t=Math.round(e*100)/100;return t<0&&(t=0),t>100&&(t=100),t},R=o=>360*o/100,D=o=>{let e=Number(o)||0;return e=Math.round(e),e=Math.max(0,e),e=Math.min(255,e),e},ut=o=>{let e=Number(o)||100;return e=Math.round(e),e=Math.max(0,e),e=Math.min(100,e),e},u=o=>{let e=new l(o||"#000");return e.setAlpha(e.getAlpha()),e};var j=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$saturation");a(this,"$color");a(this,"$pointer");a(this,"hue",0);a(this,"saturation",0);a(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.onPointerKeyDown=this.onPointerKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){this.$pointer&&(this.$pointer.style.left=X(this.saturation),this.$pointer.style.top=q(this.value)),this.$color&&this.$color.setAttribute("style",`background: ${G(this.hue)}`),t&&b(this.cid,this.hue,this.saturation,this.value)}onChange(t){if(!this.$saturation)return;let{width:i,height:r,left:n,top:s}=this.$saturation.getBoundingClientRect();if(i===0||r===0)return;let h=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,c=typeof t.clientY=="number"?t.clientY:t.touches[0].clientY,I=Math.min(Math.max(0,h-n),i),_=Math.min(Math.max(0,c-s),r);this.saturation=I/i,this.value=1-_/r,this.render()}onPointerKeyDown(t){switch(t.key){case"ArrowLeft":{this.saturation=Math.max(0,this.saturation-L),this.render();break}case"ArrowRight":{this.saturation=Math.min(1,this.saturation+L),this.render();break}case"ArrowUp":{this.value=Math.min(1,this.value+L),this.render();break}case"ArrowDown":{t.preventDefault(),this.value=Math.max(0,this.value-L),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}hsvChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=!1;this.hue!==t.detail.h&&(this.hue=t.detail.h,i=!0),this.saturation!==t.detail.s&&(this.saturation=t.detail.s,i=!0),this.value!==t.detail.v&&(this.value=t.detail.v,i=!0),i&&this.render(!1)}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render())}connectedCallback(){this.cid=this.getAttribute("cid");let i=u(this.getAttribute("color")).toHsv();this.hue=i.h,this.saturation=i.s,this.value=i.v;let r=q(this.value),n=X(this.saturation);this.shadowRoot.innerHTML=`
<style>${et}</style>
// Tool Cool Picker v1.0.9, MIT License - https://github.com/toolcool-org/toolcool-color-picker
(()=>{var $t=Object.defineProperty;var Mt=(o,e,t)=>e in o?$t(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var a=(o,e,t)=>(Mt(o,typeof e!="symbol"?e+"":e,t),t);var tt=":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{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;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;width:2.5rem;height:1rem;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";var et=":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 ot=".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",g="tc-hue-changed",m="tc-alpha-changed",S="tc-button-clicked",it=o=>{!o||document.dispatchEvent(new CustomEvent(S,{detail:{cid:o}}))},y=(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}}))},rt=(o,e)=>{!o||document.dispatchEvent(new CustomEvent(g,{detail:{h:e,cid:o}}))};function d(o,e){Ht(o)&&(o="100%");var t=St(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 $(o){return Math.min(1,Math.max(0,o))}function Ht(o){return typeof o=="string"&&o.indexOf(".")!==-1&&parseFloat(o)===1}function St(o){return typeof o=="string"&&o.indexOf("%")!==-1}function T(o){return o=parseFloat(o),(isNaN(o)||o<0||o>1)&&(o=1),o}function M(o){return o<=1?"".concat(Number(o)*100,"%"):o}function x(o){return o.length===1?"0"+o:String(o)}function nt(o,e,t){return{r:d(o,255)*255,g:d(e,255)*255,b:d(t,255)*255}}function U(o,e,t){o=d(o,255),e=d(e,255),t=d(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=0,h=(i+r)/2;if(i===r)s=0,n=0;else{var c=i-r;switch(s=h>.5?c/(2-i-r):c/(i+r),i){case o:n=(e-t)/c+(e<t?6:0);break;case e:n=(t-o)/c+2;break;case t:n=(o-e)/c+4;break;default:break}n/=6}return{h:n,s,l:h}}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 st(o,e,t){var i,r,n;if(o=d(o,360),e=d(e,100),t=d(t,100),e===0)r=t,n=t,i=t;else{var s=t<.5?t*(1+e):t+e-t*e,h=2*t-s;i=O(h,s,o+1/3),r=O(h,s,o),n=O(h,s,o-1/3)}return{r:i*255,g:r*255,b:n*255}}function B(o,e,t){o=d(o,255),e=d(e,255),t=d(t,255);var i=Math.max(o,e,t),r=Math.min(o,e,t),n=0,s=i,h=i-r,c=i===0?0:h/i;if(i===r)n=0;else{switch(i){case o:n=(e-t)/h+(e<t?6:0);break;case e:n=(t-o)/h+2;break;case t:n=(o-e)/h+4;break;default:break}n/=6}return{h:n,s:c,v:s}}function at(o,e,t){o=d(o,360)*6,e=d(e,100),t=d(t,100);var i=Math.floor(o),r=o-i,n=t*(1-e),s=t*(1-r*e),h=t*(1-(1-r)*e),c=i%6,P=[t,s,n,n,h,t][c],I=[h,t,t,s,n,n][c],yt=[n,n,h,t,t,s][c];return{r:P*255,g:I*255,b:yt*255}}function N(o,e,t,i){var r=[x(Math.round(o).toString(16)),x(Math.round(e).toString(16)),x(Math.round(t).toString(16))];return i&&r[0].startsWith(r[0].charAt(1))&&r[1].startsWith(r[1].charAt(1))&&r[2].startsWith(r[2].charAt(1))?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function ht(o,e,t,i,r){var n=[x(Math.round(o).toString(16)),x(Math.round(e).toString(16)),x(Math.round(t).toString(16)),x(Tt(i))];return r&&n[0].startsWith(n[0].charAt(1))&&n[1].startsWith(n[1].charAt(1))&&n[2].startsWith(n[2].charAt(1))&&n[3].startsWith(n[3].charAt(1))?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")}function Tt(o){return Math.round(parseFloat(o)*255).toString(16)}function K(o){return f(o)/255}function f(o){return parseInt(o,16)}function lt(o){return{r:o>>16,g:(o&65280)>>8,b:o&255}}var k={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function dt(o){var e={r:0,g:0,b:0},t=1,i=null,r=null,n=null,s=!1,h=!1;return typeof o=="string"&&(o=_t(o)),typeof o=="object"&&(E(o.r)&&E(o.g)&&E(o.b)?(e=nt(o.r,o.g,o.b),s=!0,h=String(o.r).substr(-1)==="%"?"prgb":"rgb"):E(o.h)&&E(o.s)&&E(o.v)?(i=M(o.s),r=M(o.v),e=at(o.h,i,r),s=!0,h="hsv"):E(o.h)&&E(o.s)&&E(o.l)&&(i=M(o.s),n=M(o.l),e=st(o.h,i,n),s=!0,h="hsl"),Object.prototype.hasOwnProperty.call(o,"a")&&(t=o.a)),t=T(t),{ok:s,format:o.format||h,r:Math.min(255,Math.max(e.r,0)),g:Math.min(255,Math.max(e.g,0)),b:Math.min(255,Math.max(e.b,0)),a:t}}var Rt="[-\\+]?\\d+%?",Dt="[-\\+]?\\d*\\.\\d+%?",C="(?:".concat(Dt,")|(?:").concat(Rt,")"),V="[\\s|\\(]+(".concat(C,")[,|\\s]+(").concat(C,")[,|\\s]+(").concat(C,")\\s*\\)?"),G="[\\s|\\(]+(".concat(C,")[,|\\s]+(").concat(C,")[,|\\s]+(").concat(C,")[,|\\s]+(").concat(C,")\\s*\\)?"),v={CSS_UNIT:new RegExp(C),rgb:new RegExp("rgb"+V),rgba:new RegExp("rgba"+G),hsl:new RegExp("hsl"+V),hsla:new RegExp("hsla"+G),hsv:new RegExp("hsv"+V),hsva:new RegExp("hsva"+G),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function _t(o){if(o=o.trim().toLowerCase(),o.length===0)return!1;var e=!1;if(k[o])o=k[o],e=!0;else if(o==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};var t=v.rgb.exec(o);return t?{r:t[1],g:t[2],b:t[3]}:(t=v.rgba.exec(o),t?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=v.hsl.exec(o),t?{h:t[1],s:t[2],l:t[3]}:(t=v.hsla.exec(o),t?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=v.hsv.exec(o),t?{h:t[1],s:t[2],v:t[3]}:(t=v.hsva.exec(o),t?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=v.hex8.exec(o),t?{r:f(t[1]),g:f(t[2]),b:f(t[3]),a:K(t[4]),format:e?"name":"hex8"}:(t=v.hex6.exec(o),t?{r:f(t[1]),g:f(t[2]),b:f(t[3]),format:e?"name":"hex"}:(t=v.hex4.exec(o),t?{r:f(t[1]+t[1]),g:f(t[2]+t[2]),b:f(t[3]+t[3]),a:K(t[4]+t[4]),format:e?"name":"hex8"}:(t=v.hex3.exec(o),t?{r:f(t[1]+t[1]),g:f(t[2]+t[2]),b:f(t[3]+t[3]),format:e?"name":"hex"}:!1)))))))))}function E(o){return Boolean(v.CSS_UNIT.exec(String(o)))}var l=function(){function o(e,t){e===void 0&&(e=""),t===void 0&&(t={});var i;if(e instanceof o)return e;typeof e=="number"&&(e=lt(e)),this.originalInput=e;var r=dt(e);this.originalInput=e,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=(i=t.format)!==null&&i!==void 0?i:r.format,this.gradientType=t.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}return o.prototype.isDark=function(){return this.getBrightness()<128},o.prototype.isLight=function(){return!this.isDark()},o.prototype.getBrightness=function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},o.prototype.getLuminance=function(){var e=this.toRgb(),t,i,r,n=e.r/255,s=e.g/255,h=e.b/255;return n<=.03928?t=n/12.92:t=Math.pow((n+.055)/1.055,2.4),s<=.03928?i=s/12.92:i=Math.pow((s+.055)/1.055,2.4),h<=.03928?r=h/12.92:r=Math.pow((h+.055)/1.055,2.4),.2126*t+.7152*i+.0722*r},o.prototype.getAlpha=function(){return this.a},o.prototype.setAlpha=function(e){return this.a=T(e),this.roundA=Math.round(100*this.a)/100,this},o.prototype.toHsv=function(){var e=B(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}},o.prototype.toHsvString=function(){var e=B(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?"hsv(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsva(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHsl=function(){var e=U(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}},o.prototype.toHslString=function(){var e=U(this.r,this.g,this.b),t=Math.round(e.h*360),i=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?"hsl(".concat(t,", ").concat(i,"%, ").concat(r,"%)"):"hsla(".concat(t,", ").concat(i,"%, ").concat(r,"%, ").concat(this.roundA,")")},o.prototype.toHex=function(e){return e===void 0&&(e=!1),N(this.r,this.g,this.b,e)},o.prototype.toHexString=function(e){return e===void 0&&(e=!1),"#"+this.toHex(e)},o.prototype.toHex8=function(e){return e===void 0&&(e=!1),ht(this.r,this.g,this.b,this.a,e)},o.prototype.toHex8String=function(e){return e===void 0&&(e=!1),"#"+this.toHex8(e)},o.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},o.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),i=Math.round(this.b);return this.a===1?"rgb(".concat(e,", ").concat(t,", ").concat(i,")"):"rgba(".concat(e,", ").concat(t,", ").concat(i,", ").concat(this.roundA,")")},o.prototype.toPercentageRgb=function(){var e=function(t){return"".concat(Math.round(d(t,255)*100),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},o.prototype.toPercentageRgbString=function(){var e=function(t){return Math.round(d(t,255)*100)};return this.a===1?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},o.prototype.toName=function(){if(this.a===0)return"transparent";if(this.a<1)return!1;for(var e="#"+N(this.r,this.g,this.b,!1),t=0,i=Object.entries(k);t<i.length;t++){var r=i[t],n=r[0],s=r[1];if(e===s)return n}return!1},o.prototype.toString=function(e){var t=Boolean(e);e=e!=null?e:this.format;var i=!1,r=this.a<1&&this.a>=0,n=!t&&r&&(e.startsWith("hex")||e==="name");return n?e==="name"&&this.a===0?this.toName():this.toRgbString():(e==="rgb"&&(i=this.toRgbString()),e==="prgb"&&(i=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(i=this.toHexString()),e==="hex3"&&(i=this.toHexString(!0)),e==="hex4"&&(i=this.toHex8String(!0)),e==="hex8"&&(i=this.toHex8String()),e==="name"&&(i=this.toName()),e==="hsl"&&(i=this.toHslString()),e==="hsv"&&(i=this.toHsvString()),i||this.toHexString())},o.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},o.prototype.clone=function(){return new o(this.toString())},o.prototype.lighten=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l+=e/100,t.l=$(t.l),new o(t)},o.prototype.brighten=function(e){e===void 0&&(e=10);var t=this.toRgb();return t.r=Math.max(0,Math.min(255,t.r-Math.round(255*-(e/100)))),t.g=Math.max(0,Math.min(255,t.g-Math.round(255*-(e/100)))),t.b=Math.max(0,Math.min(255,t.b-Math.round(255*-(e/100)))),new o(t)},o.prototype.darken=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.l-=e/100,t.l=$(t.l),new o(t)},o.prototype.tint=function(e){return e===void 0&&(e=10),this.mix("white",e)},o.prototype.shade=function(e){return e===void 0&&(e=10),this.mix("black",e)},o.prototype.desaturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s-=e/100,t.s=$(t.s),new o(t)},o.prototype.saturate=function(e){e===void 0&&(e=10);var t=this.toHsl();return t.s+=e/100,t.s=$(t.s),new o(t)},o.prototype.greyscale=function(){return this.desaturate(100)},o.prototype.spin=function(e){var t=this.toHsl(),i=(t.h+e)%360;return t.h=i<0?360+i:i,new o(t)},o.prototype.mix=function(e,t){t===void 0&&(t=50);var i=this.toRgb(),r=new o(e).toRgb(),n=t/100,s={r:(r.r-i.r)*n+i.r,g:(r.g-i.g)*n+i.g,b:(r.b-i.b)*n+i.b,a:(r.a-i.a)*n+i.a};return new o(s)},o.prototype.analogous=function(e,t){e===void 0&&(e=6),t===void 0&&(t=30);var i=this.toHsl(),r=360/t,n=[this];for(i.h=(i.h-(r*e>>1)+720)%360;--e;)i.h=(i.h+r)%360,n.push(new o(i));return n},o.prototype.complement=function(){var e=this.toHsl();return e.h=(e.h+180)%360,new o(e)},o.prototype.monochromatic=function(e){e===void 0&&(e=6);for(var t=this.toHsv(),i=t.h,r=t.s,n=t.v,s=[],h=1/e;e--;)s.push(new o({h:i,s:r,v:n})),n=(n+h)%1;return s},o.prototype.splitcomplement=function(){var e=this.toHsl(),t=e.h;return[this,new o({h:(t+72)%360,s:e.s,l:e.l}),new o({h:(t+216)%360,s:e.s,l:e.l})]},o.prototype.onBackground=function(e){var t=this.toRgb(),i=new o(e).toRgb();return new o({r:i.r+(t.r-i.r)*t.a,g:i.g+(t.g-i.g)*t.a,b:i.b+(t.b-i.b)*t.a})},o.prototype.triad=function(){return this.polyad(3)},o.prototype.tetrad=function(){return this.polyad(4)},o.prototype.polyad=function(e){for(var t=this.toHsl(),i=t.h,r=[this],n=360/e,s=1;s<e;s++)r.push(new o({h:(i+s*n)%360,s:t.s,l:t.l}));return r},o.prototype.equals=function(e){return this.toRgbString()===new o(e).toRgbString()},o}();var w=()=>Math.random().toString(16).slice(2),R=o=>Math.round((o+Number.EPSILON)*100)/100;var L=.01,F=o=>(o<0&&(o=0),o>360&&(o=360),`hsl(${Math.round(o)}, 100%, 50%)`),q=o=>{let e=o.toRgb();return`linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`},A=o=>{let e=o.toRgb();return`rgba(${e.r}, ${e.g}, ${e.b}, ${R(e.a)})`},ut=o=>{let e=o.toHsl();return`hsla(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.l*100)}%, ${R(e.a)})`},ct=o=>{let e=o.toHsv();return`hsva(${Math.round(e.h)}, ${Math.round(e.s*100)}%, ${Math.round(e.v*100)}%, ${R(e.a)})`},X=o=>(o<0&&(o=0),o>1&&(o=1),`${(-(o*100)+100).toFixed(2)}%`),j=o=>(o<0&&(o=0),o>1&&(o=1),`${(o*100).toFixed(2)}%`),H=o=>{o<0&&(o=0),o>360&&(o=360);let e=o*100/360,t=Math.round(e*100)/100;return t<0&&(t=0),t>100&&(t=100),t},D=o=>360*o/100,_=o=>{let e=Number(o)||0;return e=Math.round(e),e=Math.max(0,e),e=Math.min(255,e),e},pt=o=>{let e=Number(o)||100;return e=Math.round(e),e=Math.max(0,e),e=Math.min(100,e),e},u=o=>{let e=new l(o||"#000");return e.setAlpha(e.getAlpha()),e};var W=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$saturation");a(this,"$color");a(this,"$pointer");a(this,"hue",0);a(this,"saturation",0);a(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.onPointerKeyDown=this.onPointerKeyDown.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this)}static get observedAttributes(){return["color"]}render(t=!0){this.$pointer&&(this.$pointer.style.left=j(this.saturation),this.$pointer.style.top=X(this.value)),this.$color&&this.$color.setAttribute("style",`background: ${F(this.hue)}`),t&&b(this.cid,this.hue,this.saturation,this.value)}onChange(t){if(!this.$saturation)return;let{width:i,height:r,left:n,top:s}=this.$saturation.getBoundingClientRect();if(i===0||r===0)return;let h=typeof t.clientX=="number"?t.clientX:t.touches[0].clientX,c=typeof t.clientY=="number"?t.clientY:t.touches[0].clientY,P=Math.min(Math.max(0,h-n),i),I=Math.min(Math.max(0,c-s),r);this.saturation=P/i,this.value=1-I/r,this.render()}onPointerKeyDown(t){switch(t.key){case"ArrowLeft":{this.saturation=Math.max(0,this.saturation-L),this.render();break}case"ArrowRight":{this.saturation=Math.min(1,this.saturation+L),this.render();break}case"ArrowUp":{this.value=Math.min(1,this.value+L),this.render();break}case"ArrowDown":{t.preventDefault(),this.value=Math.max(0,this.value-L),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}hsvChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=!1;this.hue!==t.detail.h&&(this.hue=t.detail.h,i=!0),this.saturation!==t.detail.s&&(this.saturation=t.detail.s,i=!0),this.value!==t.detail.v&&(this.value=t.detail.v,i=!0),i&&this.render(!1)}hueChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.hue=t.detail.h,this.render())}connectedCallback(){this.cid=this.getAttribute("cid");let i=u(this.getAttribute("color")).toHsv();this.hue=i.h,this.saturation=i.s,this.value=i.v;let r=X(this.value),n=j(this.saturation);this.shadowRoot.innerHTML=`
<style>${ot}</style>
<div class="saturation">
<div class="box" style="background: ${G(this.hue)}">
<div class="box" style="background: ${F(this.hue)}">
<div class="white box">

@@ -15,4 +15,4 @@ <div class="black box"></div>

</div>
`,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),this.$pointer.addEventListener("keydown",this.onPointerKeyDown),this.$saturation.addEventListener("mousedown",this.onMouseDown),this.$saturation.addEventListener("mouseup",this.onMouseUp),this.$saturation.addEventListener("touchmove",this.onChange),this.$saturation.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged)}disconnectedCallback(){this.$saturation.removeEventListener("mousedown",this.onMouseDown),this.$saturation.removeEventListener("mouseup",this.onMouseUp),this.$saturation.removeEventListener("touchmove",this.onChange),this.$saturation.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},ct=j;var pt=".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 W=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$hue");a(this,"$pointer");a(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=`${H(this.hue)}%`),ot(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),h=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=R(h),this.render()}onKeyDown(t){switch(this.$pointer.focus(),t.key){case"ArrowLeft":{let i=H(this.hue);i=Math.max(0,i-1),this.hue=R(i),this.render();break}case"ArrowRight":{let i=H(this.hue);i=Math.min(100,i+1),this.hue=R(i),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){this.cid=this.getAttribute("cid");let t=u(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
<style>${pt}</style>
`,this.$saturation=this.shadowRoot.querySelector(".saturation"),this.$color=this.shadowRoot.querySelector(".box"),this.$pointer=this.shadowRoot.querySelector(".pointer"),this.$pointer.addEventListener("keydown",this.onPointerKeyDown),this.$saturation.addEventListener("mousedown",this.onMouseDown),this.$saturation.addEventListener("mouseup",this.onMouseUp),this.$saturation.addEventListener("touchmove",this.onChange),this.$saturation.addEventListener("touchstart",this.onChange),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged)}disconnectedCallback(){this.$saturation.removeEventListener("mousedown",this.onMouseDown),this.$saturation.removeEventListener("mouseup",this.onMouseUp),this.$saturation.removeEventListener("touchmove",this.onChange),this.$saturation.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onPointerKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render(!1)}},ft=W;var gt=".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 z=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$hue");a(this,"$pointer");a(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=`${H(this.hue)}%`),rt(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),h=Math.min(Math.max(0,Math.round(s*100/i)),100);this.hue=D(h),this.render()}onKeyDown(t){switch(this.$pointer.focus(),t.key){case"ArrowLeft":{let i=H(this.hue);i=Math.max(0,i-1),this.hue=D(i),this.render();break}case"ArrowRight":{let i=H(this.hue);i=Math.min(100,i+1),this.hue=D(i),this.render();break}}}onMouseDown(t){t.preventDefault&&t.preventDefault(),this.onChange(t),window.addEventListener("mousemove",this.onChange),window.addEventListener("mouseup",this.onMouseUp),window.setTimeout(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){this.cid=this.getAttribute("cid");let t=u(this.getAttribute("color"));this.hue=t.toHsv().h,this.shadowRoot.innerHTML=`
<style>${gt}</style>
<div class="hue">

@@ -31,8 +31,8 @@ <div class="box">

</div>
`,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),this.$hue.addEventListener("mousedown",this.onMouseDown),this.$hue.addEventListener("mouseup",this.onMouseUp),this.$hue.addEventListener("touchmove",this.onChange),this.$hue.addEventListener("touchstart",this.onChange),this.$pointer.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){this.$hue.removeEventListener("mousedown",this.onMouseDown),this.$hue.removeEventListener("mouseup",this.onMouseUp),this.$hue.removeEventListener("touchmove",this.onChange),this.$hue.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.hue=s.h,this.render()}},ft=W;var gt=".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 z=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$alpha");a(this,"$color");a(this,"$pointer");a(this,"alpha",1);a(this,"hue",0);a(this,"saturation",0);a(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=F(i)}t&&y(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),h=Math.min(Math.max(0,s*100/i),100);this.alpha=h/100,this.render()}onKeyDown(t){switch(this.$pointer.focus(),t.key){case"ArrowLeft":{let i=this.alpha*100;i=Math.max(0,i-1),this.alpha=i/100,this.render();break}case"ArrowRight":{let i=this.alpha*100;i=Math.min(100,i+1),this.alpha=i/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(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){this.cid=this.getAttribute("cid");let t=u(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.shadowRoot.innerHTML=`
<style>${gt}</style>
`,this.$hue=this.shadowRoot.querySelector(".hue"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),this.$hue.addEventListener("mousedown",this.onMouseDown),this.$hue.addEventListener("mouseup",this.onMouseUp),this.$hue.addEventListener("touchmove",this.onChange),this.$hue.addEventListener("touchstart",this.onChange),this.$pointer.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged)}disconnectedCallback(){this.$hue.removeEventListener("mousedown",this.onMouseDown),this.$hue.removeEventListener("mouseup",this.onMouseUp),this.$hue.removeEventListener("touchmove",this.onChange),this.$hue.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.hue=s.h,this.render()}},bt=z;var vt=".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 Y=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$alpha");a(this,"$color");a(this,"$pointer");a(this,"alpha",1);a(this,"hue",0);a(this,"saturation",0);a(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=q(i)}t&&y(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),h=Math.min(Math.max(0,s*100/i),100);this.alpha=h/100,this.render()}onKeyDown(t){switch(this.$pointer.focus(),t.key){case"ArrowLeft":{let i=this.alpha*100;i=Math.max(0,i-1),this.alpha=i/100,this.render();break}case"ArrowRight":{let i=this.alpha*100;i=Math.min(100,i+1),this.alpha=i/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(()=>{this.$pointer.focus()},0)}onMouseUp(){window.removeEventListener("mousemove",this.onChange),window.removeEventListener("mouseup",this.onChange)}connectedCallback(){this.cid=this.getAttribute("cid");let t=u(this.getAttribute("color")),i=t.toHsv();this.alpha=i.a,this.hue=i.h,this.saturation=i.s,this.value=i.v,this.shadowRoot.innerHTML=`
<style>${vt}</style>
<div class="alpha">
<div class="box">
<div class="transparent-bg box"></div>
<div class="color-bg box" style="background: ${F(t)}"></div>
<div class="color-bg box" style="background: ${q(t)}"></div>

@@ -46,4 +46,4 @@ <div class="pointer box">

</div>
`,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),this.$alpha.addEventListener("mousedown",this.onMouseDown),this.$alpha.addEventListener("mouseup",this.onMouseUp),this.$alpha.addEventListener("touchmove",this.onChange),this.$alpha.addEventListener("touchstart",this.onChange),this.$pointer.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){this.$alpha.removeEventListener("mousedown",this.onMouseDown),this.$alpha.removeEventListener("mouseup",this.onMouseUp),this.$alpha.removeEventListener("touchmove",this.onChange),this.$alpha.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},bt=z;var vt=":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 Y=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"color",new l("#000"));a(this,"$fields");a(this,"$hex");a(this,"$r");a(this,"$g");a(this,"$b");a(this,"$a");a(this,"hex","");a(this,"r",0);a(this,"g",0);a(this,"b",0);a(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(){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&&this.shadowRoot.activeElement!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&this.shadowRoot.activeElement!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&this.shadowRoot.activeElement!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&this.shadowRoot.activeElement!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&this.shadowRoot.activeElement!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let n=this.color.toRgb();n.a=this.a,this.color=new l(n),this.render(),y(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let n=this.color.toRgb();n.a=this.a,this.color=new l(n),this.render(),y(this.cid,this.a)}break}case"Escape":{this.shadowRoot.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{this.shadowRoot.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=D(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=D(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=D(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ut(i.value);r.toString()===i.value&&y(this.cid,r/100)}connectedCallback(){this.cid=this.getAttribute("cid"),this.color=u(this.getAttribute("color"));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();let i=C(),r=C(),n=C(),s=C(),h=C();this.shadowRoot.innerHTML=`
<style>${vt}</style>
`,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),this.$alpha.addEventListener("mousedown",this.onMouseDown),this.$alpha.addEventListener("mouseup",this.onMouseUp),this.$alpha.addEventListener("touchmove",this.onChange),this.$alpha.addEventListener("touchstart",this.onChange),this.$pointer.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){this.$alpha.removeEventListener("mousedown",this.onMouseDown),this.$alpha.removeEventListener("mouseup",this.onMouseUp),this.$alpha.removeEventListener("touchmove",this.onChange),this.$alpha.removeEventListener("touchstart",this.onChange),this.$pointer.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=u(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},mt=Y;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 Q=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"color",new l("#000"));a(this,"$fields");a(this,"$hex");a(this,"$r");a(this,"$g");a(this,"$b");a(this,"$a");a(this,"hex","");a(this,"r",0);a(this,"g",0);a(this,"b",0);a(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(){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&&this.shadowRoot.activeElement!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&this.shadowRoot.activeElement!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&this.shadowRoot.activeElement!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&this.shadowRoot.activeElement!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&this.shadowRoot.activeElement!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let n=this.color.toRgb();n.a=this.a,this.color=new l(n),this.render(),y(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let n=new l(r).toHsv();b(this.cid,n.h,n.s,n.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let n=this.color.toRgb();n.a=this.a,this.color=new l(n),this.render(),y(this.cid,this.a)}break}case"Escape":{this.shadowRoot.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{this.shadowRoot.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=_(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=_(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=_(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=pt(i.value);r.toString()===i.value&&y(this.cid,r/100)}connectedCallback(){this.cid=this.getAttribute("cid"),this.color=u(this.getAttribute("color"));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();let i=w(),r=w(),n=w(),s=w(),h=w();this.shadowRoot.innerHTML=`
<style>${Et}</style>
<div class="fields">

@@ -62,4 +62,4 @@ <input id="hex-${i}" type="text" value="${this.hex.toUpperCase()}" data-type="hex" />

</div>
`,this.$fields=this.shadowRoot.querySelector(".fields"),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-${h}`),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,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(g,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=u(r),this.render()}},mt=Y;var Q=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"popupPosition","left");a(this,"$popup");a(this,"color","#000");customElements.get("toolcool-color-picker-saturation")||customElements.define("toolcool-color-picker-saturation",ct),customElements.get("toolcool-color-picker-hue")||customElements.define("toolcool-color-picker-hue",ft),customElements.get("toolcool-color-picker-alpha")||customElements.define("toolcool-color-picker-alpha",bt),customElements.get("toolcool-color-picker-fields")||customElements.define("toolcool-color-picker-fields",mt),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(){this.color=this.getAttribute("color")||"#000",this.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
<style>${tt}</style>
`,this.$fields=this.shadowRoot.querySelector(".fields"),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-${h}`),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,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(g,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=u(r),this.render()}},xt=Q;var J=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"popupPosition","left");a(this,"$popup");a(this,"color","#000");customElements.get("toolcool-color-picker-saturation")||customElements.define("toolcool-color-picker-saturation",ft),customElements.get("toolcool-color-picker-hue")||customElements.define("toolcool-color-picker-hue",bt),customElements.get("toolcool-color-picker-alpha")||customElements.define("toolcool-color-picker-alpha",mt),customElements.get("toolcool-color-picker-fields")||customElements.define("toolcool-color-picker-fields",xt),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(){this.color=this.getAttribute("color")||"#000",this.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
<style>${et}</style>
<div class="popup">

@@ -71,4 +71,4 @@ <toolcool-color-picker-saturation color="${this.color}" cid="${this.cid}"></toolcool-color-picker-saturation>

</div>
`,this.$popup=this.shadowRoot.querySelector(".popup"),this.$popup.addEventListener("mousedown",this.prevent),this.$popup.classList.toggle("right",this.popupPosition==="right")}disconnectedCallback(){this.$popup.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let n=this.shadowRoot.querySelector("toolcool-color-picker-saturation"),s=this.shadowRoot.querySelector("toolcool-color-picker-hue"),h=this.shadowRoot.querySelector("toolcool-color-picker-alpha"),c=this.shadowRoot.querySelector("toolcool-color-picker-fields");n&&n.setAttribute("color",this.color),s&&s.setAttribute("color",this.color),h&&h.setAttribute("color",this.color),c&&c.setAttribute("color",this.color)}}},xt=Q;var J=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$button");a(this,"$buttonColor");a(this,"$popupBox");a(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000")});a(this,"state");this.cid=C(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",xt),this.attachShadow({mode:"open"}),this.toggle=this.toggle.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.clickedOutside=this.clickedOutside.bind(this),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.initState()}static get observedAttributes(){return["color","popup-position"]}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 A(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return lt(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return dt(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(),!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(){let t=A(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=this.shadowRoot.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=A(this.state.color)),this.dispatchEvent(new CustomEvent("change",{detail:{hex:this.hex,hex8:this.hex8,rgb:this.rgb,rgba:this.rgba,hsl:this.hsl,hsla:this.hsla,hsv:this.hsv,hsva:this.hsva,color:this.color}}))}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.state.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.state.color.toHsv().a}))}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toHsv();this.state.color=new l({h:t.detail.h,s:i.s,v:i.v,a:i.a})}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toRgb();i.a=t.detail.a,this.state.color=new l(i)}clickedOutside(){this.state.isPopupVisible=!1}toggle(){let t=this.state.isPopupVisible;window.setTimeout(()=>{this.state.isPopupVisible=!t},0)}onKeyDown(t){t.key==="Escape"&&(this.state.isPopupVisible=!1)}connectedCallback(){this.state.initialColor=u(this.getAttribute("color")),this.state.color=u(this.getAttribute("color")),this.state.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
<style>${Z}</style>
`,this.$popup=this.shadowRoot.querySelector(".popup"),this.$popup.addEventListener("mousedown",this.prevent),this.$popup.classList.toggle("right",this.popupPosition==="right")}disconnectedCallback(){this.$popup.removeEventListener("mousedown",this.prevent)}attributeChangedCallback(t,i,r){if(t==="popup-position"&&(this.popupPosition=r,this.$popup&&this.$popup.classList.toggle("right",this.popupPosition==="right")),t==="color"){this.color=r;let n=this.shadowRoot.querySelector("toolcool-color-picker-saturation"),s=this.shadowRoot.querySelector("toolcool-color-picker-hue"),h=this.shadowRoot.querySelector("toolcool-color-picker-alpha"),c=this.shadowRoot.querySelector("toolcool-color-picker-fields");n&&n.setAttribute("color",this.color),s&&s.setAttribute("color",this.color),h&&h.setAttribute("color",this.color),c&&c.setAttribute("color",this.color)}}},Ct=J;var Z=class extends HTMLElement{constructor(){super();a(this,"cid");a(this,"$button");a(this,"$buttonColor");a(this,"$popupBox");a(this,"stateDefaults",{isPopupVisible:!1,popupPosition:"left",initialColor:new l("#000"),color:new l("#000")});a(this,"state");this.cid=w(),customElements.get("toolcool-color-picker-popup")||customElements.define("toolcool-color-picker-popup",Ct),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.initState()}static get observedAttributes(){return["color","popup-position"]}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 A(this.state.color)}get hsl(){return this.state.color.toHslString()}get hsla(){return ut(this.state.color)}get hsv(){return this.state.color.toHsvString()}get hsva(){return ct(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(),!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(){let t=A(this.state.color);this.$buttonColor&&(this.$buttonColor.style.backgroundColor=t);let i=this.shadowRoot.querySelector("toolcool-color-picker-popup");i&&i.setAttribute("color",t)}onColorChange(){this.$buttonColor&&(this.$buttonColor.style.backgroundColor=A(this.state.color)),this.dispatchEvent(new CustomEvent("change",{detail:{hex:this.hex,hex8:this.hex8,rgb:this.rgb,rgba:this.rgba,hsl:this.hsl,hsla:this.hsla,hsv:this.hsv,hsva:this.hsva,color:this.color}}))}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.state.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.state.color.toHsv().a}))}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toHsv();this.state.color=new l({h:t.detail.h,s:i.s,v:i.v,a:i.a})}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.state.color.toRgb();i.a=t.detail.a,this.state.color=new l(i)}buttonClicked(t){!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid&&(this.state.isPopupVisible=!1)}clickedOutside(t){this.state.isPopupVisible=!1}toggle(){let t=this.state.isPopupVisible;window.setTimeout(()=>{this.state.isPopupVisible=!t,it(this.cid)},0)}onKeyDown(t){t.key==="Escape"&&(this.state.isPopupVisible=!1)}stopPropagation(t){t.stopPropagation()}connectedCallback(){this.state.initialColor=u(this.getAttribute("color")),this.state.color=u(this.getAttribute("color")),this.state.popupPosition=this.getAttribute("popup-position")||"left",this.shadowRoot.innerHTML=`
<style>${tt}</style>
<div class="color-picker">

@@ -84,2 +84,2 @@ <button

</div>
`,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),this.$button.addEventListener("click",this.toggle),this.$button.addEventListener("keydown",this.onKeyDown),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){this.$button.removeEventListener("click",this.toggle),this.$button.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t){t==="color"&&(this.state.initialColor=u(this.getAttribute("color")),this.state.color=u(this.getAttribute("color")),this.onInitialColorChange()),t==="popup-position"&&(this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange())}},wt=J;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",wt);})();
`,this.$button=this.shadowRoot.querySelector(".button"),this.$buttonColor=this.shadowRoot.querySelector(".button-color"),this.$button.addEventListener("click",this.toggle),this.$button.addEventListener("keydown",this.onKeyDown),this.$button.addEventListener("mousedown",this.stopPropagation),this.$popupBox=this.shadowRoot.querySelector("[data-popup-box]"),document.addEventListener("mousedown",this.clickedOutside),document.addEventListener(p,this.hsvChanged),document.addEventListener(g,this.hueChanged),document.addEventListener(m,this.alphaChanged),document.addEventListener(S,this.buttonClicked)}disconnectedCallback(){this.$button.removeEventListener("click",this.toggle),this.$button.removeEventListener("keydown",this.onKeyDown),this.$button.removeEventListener("mousedown",this.stopPropagation),document.removeEventListener("mousedown",this.clickedOutside),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(g,this.hueChanged),document.removeEventListener(m,this.alphaChanged),document.removeEventListener(S,this.buttonClicked)}attributeChangedCallback(t){t==="color"&&(this.state.initialColor=u(this.getAttribute("color")),this.state.color=u(this.getAttribute("color")),this.onInitialColorChange()),t==="popup-position"&&(this.state.popupPosition=this.getAttribute("popup-position")||"left",this.onPopupPosChange())}},wt=Z;customElements.get("toolcool-color-picker")||customElements.define("toolcool-color-picker",wt);})();
dist/toolcool-color-picker.min.js.map

Sorry, the diff of this file is not supported yet

examples/js/toolcool-color-picker.min.js.map

Sorry, the diff of this file is not supported yet

test/toolcool-color-picker.min.js.map

Sorry, the diff of this file is not supported yet