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