@thednp/color-picker 1.0.0 → 1.0.1

package/dist/js/color-picker.min.js

@@ -1,2 +1,2 @@
-// ColorPicker v1.0.0 | thednp © 2022 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).ColorPicker=e()}(this,(function(){"use strict";const t={};function e(e){const o=this,{type:r,target:s}=e;[...t[r]].forEach(t=>{const[a,i]=t;[s,o].some(t=>a===t)&&[...i].forEach(t=>{const[o,s]=t;o.apply(a,[e]),s&&s.once&&n(a,r,o,s)})})}const o=(o,n,r,s)=>{t[n]||(t[n]=new Map);const a=t[n];a.has(o)||a.set(o,new Map);const i=a.get(o),{size:l}=i;i.set(r,s),l||o.addEventListener(n,e,s)},n=(o,n,r,s)=>{const a=t[n],i=a&&a.get(o),l=i&&i.get(r),{options:c}=void 0!==l?l:{options:s};i&&i.has(r)&&i.delete(r),!a||i&&i.size||a.delete(o),a&&a.size||delete t[n],i&&i.size||o.removeEventListener(n,e,c)},r="ArrowDown",s="ArrowUp",a="ArrowLeft",i="ArrowRight",l="Enter",c="Space",u="touchmove",h="pointermove";function g(t){return t instanceof HTMLElement?t.ownerDocument:t instanceof Window?t.document:window.document}function p(t){return g(t).documentElement}function d(t,e){const o=getComputedStyle(t);return e in o?o[e]:""}let b=0,f=0;const m=new Map;function v(t,e){const{width:o,height:n,top:r,right:s,bottom:a,left:i}=t.getBoundingClientRect();let l=1,c=1;if(e&&t instanceof HTMLElement){const{offsetWidth:e,offsetHeight:r}=t;l=e>0&&Math.round(o)/e||1,c=r>0&&Math.round(n)/r||1}return{width:o/l,height:n/c,top:r/c,right:s/l,bottom:a/c,left:i/l,x:i/l,y:r/c}}const w=[Document,Element,HTMLElement],x=[Element,HTMLElement];function $(t,e){const o=w.some(t=>e instanceof t)?e:g();return x.some(e=>t instanceof e)?t:o.querySelector(t)}function y(t,e){return(e&&w.some(t=>e instanceof t)?e:g()).getElementsByClassName(t)}const k=(t,e)=>Object.assign(t,e),S=new Map,H={set:(t,e,o)=>{const n=$(t);if(!n)return;S.has(e)||S.set(e,new Map);S.get(e).set(n,o)},getAllFor:t=>S.get(t)||null,get:(t,e)=>{const o=$(t),n=H.getAllFor(e);return o&&n&&n.get(o)||null},remove:(t,e)=>{const o=$(t),n=S.get(e);n&&o&&(n.delete(o),0===n.size&&S.delete(e))}},A=(t,e)=>{k(t.style,e)},L=(t,e)=>t.getAttribute(e);function E(t){return"true"===t||"false"!==t&&(Number.isNaN(+t)?""===t||"null"===t?null:t:+t)}const N=t=>Object.keys(t),P=t=>t.toLowerCase();const C=t=>t.focus();function M(t,e){return t.classList.contains(e)}function T(t,e){t.classList.add(e)}function R(t,e){t.classList.remove(e)}const F=(t,e,o)=>t.setAttribute(e,o),D=(t,e)=>t.removeAttribute(e),{head:K}=document,O=["transparent","currentColor","inherit","revert","initial"];function I(t){const e=Math.floor(t);return t-e<.5?e:Math.round(t)}const V=["rgb","hex","hsl","hsv","hwb"],U="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",B="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",_=`(?:${B})|(?:${U})`,j="(?:[,|\\s]+)",z=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${_})${j}(${B})${j}(${B})(?:[,|\\/\\s]*)?(${B})?(?:[\\s|\\)\\s]+)?`,W={CSS_UNIT:new RegExp(_),hwb:new RegExp("hwb"+z),rgb:new RegExp("rgb(?:a)?"+z),hsl:new RegExp("hsl(?:a)?"+z),hsv:new RegExp("hsv(?:a)?"+z),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 G(t){return(""+t).includes(".")&&1===parseFloat(t)}function J(t){return(""+t).includes("%")}function q(t){return!O.includes(t)&&!["#",...V].some(e=>t.includes(e))&&(!!["black","white"].includes(t)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(e=>{A(K,{color:t});const o=d(K,"color");return A(K,{color:""}),o!==e}))}function X(t){return Boolean(W.CSS_UNIT.exec(String(t)))}function Y(t,e){let o=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;G(t)&&(o="100%");const n=J(o);return o=360===e?parseFloat(o):Math.min(e,Math.max(0,parseFloat(o))),n&&(o=o*e/100),Math.abs(o-e)<1e-6?1:(o=360===e?(o<0?o%e+e:o%e)/e:o%e/e,o)}function Z(t){let e=parseFloat(""+t);return(Number.isNaN(e)||e<0||e>1)&&(e=1),e}function Q(t){return Math.min(1,Math.max(0,t))}function tt(t){A(K,{color:t});const e=d(K,"color");return A(K,{color:""}),e}function et(t){return I(255*t).toString(16)}function ot(t){return nt(t)/255}function nt(t){return parseInt(t,16)}function rt(t){return 1===t.length?"0"+t:String(t)}function st(t,e,o){const n=Math.max(t,e,o),r=Math.min(t,e,o);let s=0,a=0;const i=(n+r)/2;if(n===r)a=0,s=0;else{const l=n-r;a=i>.5?l/(2-n-r):l/(n+r),n===t&&(s=(e-o)/l+(e<o?6:0)),n===e&&(s=(o-t)/l+2),n===o&&(s=(t-e)/l+4),s/=6}return{h:s,s:a,l:i}}function at(t,e,o){let n=o;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(e-t):n<.5?e:n<2/3?t+(e-t)*(2/3-n)*6:t}function it(t,e,o){let n=0,r=0,s=0;if(0===e)r=o,s=o,n=o;else{const a=o<.5?o*(1+e):o+e-o*e,i=2*o-a;n=at(i,a,t+1/3),r=at(i,a,t),s=at(i,a,t-1/3)}return{r:n,g:r,b:s}}function lt(t,e,o){let n=0,r=0;const s=Math.min(t,e,o),a=Math.max(t,e,o),i=1-a;if(a===s)return{h:0,w:s,b:i};t===s?(n=e-o,r=3):(n=e===s?o-t:t-e,r=e===s?5:1);const l=(r-n/(a-s))/6;return{h:1===l?0:l,w:s,b:i}}function ct(t,e,o){if(e+o>=1){const t=e/(e+o);return{r:t,g:t,b:t}}let{r:n,g:r,b:s}=it(t,1,.5);return[n,r,s]=[n,r,s].map(t=>t*(1-e-o)+e),{r:n,g:r,b:s}}function ut(t,e,o){const n=Math.max(t,e,o),r=Math.min(t,e,o);let s=0;const a=n-r;return n===r?s=0:(t===n&&(s=(e-o)/a+(e<o?6:0)),e===n&&(s=(o-t)/a+2),o===n&&(s=(t-e)/a+4),s/=6),{h:s,s:0===n?0:a/n,v:n}}function ht(t,e,o){const n=6*t,r=e,s=o,a=Math.floor(n),i=n-a,l=s*(1-r),c=s*(1-i*r),u=s*(1-(1-i)*r),h=a%6;return{r:[s,c,l,l,u,s][h],g:[u,s,s,c,l,l][h],b:[l,l,u,s,s,c][h]}}function gt(t,e,o,n){const r=[rt(I(t).toString(16)),rt(I(e).toString(16)),rt(I(o).toString(16))];return n&&r[0].charAt(0)===r[0].charAt(1)&&r[1].charAt(0)===r[1].charAt(1)&&r[2].charAt(0)===r[2].charAt(1)?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function pt(t,e,o,n,r){const s=[rt(I(t).toString(16)),rt(I(e).toString(16)),rt(I(o).toString(16)),rt(et(n))];return r&&s[0].charAt(0)===s[0].charAt(1)&&s[1].charAt(0)===s[1].charAt(1)&&s[2].charAt(0)===s[2].charAt(1)&&s[3].charAt(0)===s[3].charAt(1)?s[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0)+s[3].charAt(0):s.join("")}function dt(t){let e=P(t.trim());if(0===e.length)return{r:0,g:0,b:0,a:1};if(q(e))e=tt(e);else if(O.includes(e)){return{r:0,g:0,b:0,a:"transparent"===e?0:1,format:"rgb",ok:!0}}let[,o,n,r,s]=W.rgb.exec(e)||[];return o&&n&&r?{r:o,g:n,b:r,a:void 0!==s?s:1,format:"rgb"}:([,o,n,r,s]=W.hsl.exec(e)||[],o&&n&&r?{h:o,s:n,l:r,a:void 0!==s?s:1,format:"hsl"}:([,o,n,r,s]=W.hsv.exec(e)||[],o&&n&&r?{h:o,s:n,v:r,a:void 0!==s?s:1,format:"hsv"}:([,o,n,r,s]=W.hwb.exec(e)||[],o&&n&&r?{h:o,w:n,b:r,a:void 0!==s?s:1,format:"hwb"}:([,o,n,r,s]=W.hex8.exec(e)||[],o&&n&&r&&s?{r:nt(o),g:nt(n),b:nt(r),a:ot(s),format:"hex"}:([,o,n,r]=W.hex6.exec(e)||[],o&&n&&r?{r:nt(o),g:nt(n),b:nt(r),format:"hex"}:([,o,n,r,s]=W.hex4.exec(e)||[],o&&n&&r&&s?{r:nt(o+o),g:nt(n+n),b:nt(r+r),a:ot(s+s),format:"hex"}:([,o,n,r]=W.hex3.exec(e)||[],!!(o&&n&&r)&&{r:nt(o+o),g:nt(n+n),b:nt(r+r),format:"hex"})))))))}function bt(t){let e={r:0,g:0,b:0},o=t,n=1,r=null,s=null,a=null,i=null,l=null,c=null,u=null,h=null,g=!1;const p="object"==typeof o&&o.format;let d=p&&V.includes(p)?p:"rgb";return"string"==typeof t&&(o=dt(t),o&&(g=!0)),"object"==typeof o&&(X(o.r)&&X(o.g)&&X(o.b)&&(({r:u,g:h,b:l}=o),[u,h,l]=[u,h,l].map(t=>Y(t,J(t)?100:255)),e={r:u,g:h,b:l},g=!0,d=o.format||"rgb"),X(o.h)&&X(o.s)&&X(o.v)&&(({h:c,s:r,v:s}=o),c=Y(c,360),r=Y(r,100),s=Y(s,100),e=ht(c,r,s),g=!0,d="hsv"),X(o.h)&&X(o.s)&&X(o.l)&&(({h:c,s:r,l:a}=o),c=Y(c,360),r=Y(r,100),a=Y(a,100),e=it(c,r,a),g=!0,d="hsl"),X(o.h)&&X(o.w)&&X(o.b)&&(({h:c,w:i,b:l}=o),c=Y(c,360),i=Y(i,100),l=Y(l,100),e=ct(c,i,l),g=!0,d="hwb"),X(o.a)&&(n=o.a,n=J(""+n)||parseFloat(n)>1?Y(n,100):n)),void 0===o&&(g=!0),{ok:g,format:d,r:e.r,g:e.g,b:e.b,a:Z(n)}}class ft{constructor(t,e){let o=t;const n=e&&V.includes(e)?e:"";o instanceof ft&&(o=bt(o));const{r:r,g:s,b:a,a:i,ok:l,format:c}=bt(o);this.originalInput=t,this.r=r,this.g=s,this.b=a,this.a=i,this.ok=l,this.format=n||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:e,b:o}=this;let n=0,r=0,s=0;return n=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,r=e<=.03928?e/12.92:((e+.055)/1.055)**2.4,s=o<=.03928?o/12.92:((o+.055)/1.055)**2.4,.2126*n+.7152*r+.0722*s}get brightness(){const{r:t,g:e,b:o}=this.toRgb();return(299*t+587*e+114*o)/1e3}toRgb(){let{r:t,g:e,b:o,a:n}=this;return[t,e,o]=[t,e,o].map(t=>I(255*t*100)/100),n=I(100*n)/100,{r:t,g:e,b:o,a:n}}toRgbString(){const{r:t,g:e,b:o,a:n}=this.toRgb(),[r,s,a]=[t,e,o].map(I);return 1===n?`rgb(${r}, ${s}, ${a})`:`rgba(${r}, ${s}, ${a}, ${n})`}toRgbCSS4String(){const{r:t,g:e,b:o,a:n}=this.toRgb(),[r,s,a]=[t,e,o].map(I);return`rgb(${r} ${s} ${a}${1===n?"":` / ${I(100*n)}%`})`}toHex(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return 1===r?gt(e,o,n,t):pt(e,o,n,r,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return pt(e,o,n,r,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:e,b:o,a:n}=this,{h:r,s:s,v:a}=ut(t,e,o);return{h:r,s:s,v:a,a:n}}toHsl(){const{r:t,g:e,b:o,a:n}=this,{h:r,s:s,l:a}=st(t,e,o);return{h:r,s:s,l:a,a:n}}toHslString(){let{h:t,s:e,l:o,a:n}=this.toHsl();return t=I(360*t),e=I(100*e),o=I(100*o),n=I(100*n)/100,1===n?`hsl(${t}, ${e}%, ${o}%)`:`hsla(${t}, ${e}%, ${o}%, ${n})`}toHslCSS4String(){let{h:t,s:e,l:o,a:n}=this.toHsl();t=I(360*t),e=I(100*e),o=I(100*o),n=I(100*n);return`hsl(${t}deg ${e}% ${o}%${n<100?` / ${I(n)}%`:""})`}toHwb(){const{r:t,g:e,b:o,a:n}=this,{h:r,w:s,b:a}=lt(t,e,o);return{h:r,w:s,b:a,a:n}}toHwbString(){let{h:t,w:e,b:o,a:n}=this.toHwb();t=I(360*t),e=I(100*e),o=I(100*o),n=I(100*n);return`hwb(${t}deg ${e}% ${o}%${n<100?` / ${I(n)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=Z(t)),this}saturate(t){if("number"!=typeof t)return this;const{h:e,s:o,l:n}=this.toHsl(),{r:r,g:s,b:a}=it(e,Q(o+t/100),n);return k(this,{r:r,g:s,b:a}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if("number"!=typeof t)return this;const{h:e,s:o,l:n}=this.toHsl(),{r:r,g:s,b:a}=it(e,o,Q(n+t/100));return k(this,{r:r,g:s,b:a}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:e,s:o,l:n}=this.toHsl(),{r:r,g:s,b:a}=it(Q((360*e+t)%360/360),o,n);return k(this,{r:r,g:s,b:a}),this}clone(){return new ft(this)}toString(t){const{format:e}=this;return"hex"===e?this.toHexString(t):"hsl"===e?this.toHslString():"hwb"===e?this.toHwbString():this.toRgbString()}}k(ft,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:U,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:B,CSS_UNIT2:_,PERMISSIVE_MATCH:z,matchers:W,isOnePointZero:G,isPercentage:J,isValidCSSUnit:X,isColorName:q,pad2:rt,clamp01:Q,bound01:Y,boundAlpha:Z,getRGBFromName:tt,convertHexToDecimal:ot,convertDecimalToHex:et,rgbToHsl:st,rgbToHex:gt,rgbToHsv:ut,rgbToHwb:lt,rgbaToHex:pt,hslToRgb:it,hsvToRgb:ht,hueToRgb:at,hwbToRgb:ct,parseIntFromHex:nt,stringInputToObject:dt,inputToRGB:bt,roundPart:I,getElementStyle:d,setElementStyle:A,ObjectAssign:k});class mt{constructor(...t){let e=0,o=12,n=10,r=[.5];if(3===t.length)[e,o,n]=t;else if(2===t.length&&([o,n]=t,[o,n].some(t=>t<1)))throw TypeError("ColorPalette: both arguments must be higher than 0.");const s=[],a=360/o,i=I((n-(n%2?1:0))/2),l=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],c=l.find(t=>t.includes(n)),u=c?[.25,.2,.15,.11,.09,.075][l.indexOf(c)]:100/(n+(n%2?0:1))/100;for(let t=1;t<i+1;t+=1)r=[...r,.5+u*t];for(let t=1;t<n-i;t+=1)r=[.5-u*t,...r];for(let t=0;t<o;t+=1){const o=(e+t*a)%360/360;r.forEach(t=>{s.push(new ft({h:o,s:1,l:t}))})}this.hue=e,this.hueSteps=o,this.lightSteps=n,this.colors=s}}k(mt,{Color:ft});const vt={pickerLabel:"Colour Picker",appearanceLabel:"Colour Appearance",valueLabel:"Colour Value",toggleLabel:"Select Colour",presetsLabel:"Colour Presets",defaultsLabel:"Colour Defaults",formatLabel:"Format",alphaLabel:"Alpha",hexLabel:"Hexadecimal",hueLabel:"Hue",whitenessLabel:"Whiteness",blacknessLabel:"Blackness",saturationLabel:"Saturation",lightnessLabel:"Lightness",redLabel:"Red",greenLabel:"Green",blueLabel:"Blue"},wt=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"];function xt(t){try{JSON.parse(t)}catch(t){return!1}return!0}const $t=t=>t.toUpperCase();function yt(t){if("string"==typeof t)return g().createElement(t);const{tagName:e}=t,o={...t},n=yt(e);return delete o.tagName,k(n,o),n}function kt(t,e){if("string"==typeof e)return g().createElementNS(t,e);const{tagName:o}=e,n={...e},r=kt(t,o);return delete n.tagName,k(r,n),r}function St(t,e,o){const{input:n,format:r,componentLabels:s}=t,{defaultsLabel:a,presetsLabel:i}=s,l="color-options"===o,c=e instanceof mt,u=l?i:a,h=c?e.colors:e,g=h.length,{lightSteps:p}=c?e:{lightSteps:null},d=p||[9,10].find(t=>g>=2*t&&!(g%t))||5,b=l&&g>d;let f=2;f=b&&g>2*d?3:f,f=b&&g>3*d?4:f,f=b&&g>4*d?5:f;const m=f-(g<=3*d?1:2),v=b&&g>m*d;let w=o;w+=v?" scrollable":"",w+=b?" multiline":"";const x=b?"1px":"0.25rem";let $=b?1.75:2;$=d>5&&b?1.5:$;const y=m*$+"rem",k=`calc(${f} * ${$}rem + ${f-1} * ${x})`,S=yt({tagName:"ul",className:w});var H,E;return F(S,"role","listbox"),F(S,"aria-label",u),v&&(H=S,N(E={"--grid-item-size":$+"rem","--grid-fit":d,"--grid-gap":x,"--grid-height":y,"--grid-hover-height":k}).forEach(t=>{H.style.setProperty(t,E[t])})),h.forEach(t=>{let[e,o]="string"==typeof t?t.trim().split(":"):[];t instanceof ft&&(e=t.toHexString(),o=e);const s=new ft(t instanceof ft?t:e,r).toString()===L(n,"value"),a=yt({tagName:"li",className:"color-option"+(s?" active":""),innerText:""+(o||e)});F(a,"tabindex","0"),F(a,"data-value",""+e),F(a,"role","option"),F(a,"aria-selected",s?"true":"false"),l&&A(a,{backgroundColor:e}),S.append(a)}),S}function Ht(t){const{input:e,parent:o,format:n,id:r,componentLabels:s,colorKeywords:a,colorPresets:i}=t,l=L(e,"value")||"#fff",{toggleLabel:c,pickerLabel:u,formatLabel:h,hexLabel:g}=s,p=O.includes(l)?"#fff":l;t.color=new ft(p,n);const d="hex"===n?g:$t(n),b=yt({id:"picker-btn-"+r,tagName:"button",className:"picker-toggle btn-appearance"});F(b,"aria-expanded","false"),F(b,"aria-haspopup","true"),b.append(yt({tagName:"span",className:"v-hidden",innerText:`${u}. ${h}: ${d}`}));const f=yt({tagName:"div",className:"color-dropdown picker"});F(f,"aria-labelledby","picker-btn-"+r),F(f,"role","group");const m=function(t){const{format:e,componentLabels:o}=t,{hueLabel:n,alphaLabel:r,lightnessLabel:s,saturationLabel:a,whitenessLabel:i,blacknessLabel:l}=o,c="hsl"===e?360:100,u="hsl"===e?100:360;let h="hsl"===e?`${n} & ${s}`:`${s} & ${a}`;h="hwb"===e?`${i} & ${l}`:h;const g="hsl"===e?""+a:""+n,p=yt({tagName:"div",className:"color-controls "+e});return[{i:1,c:"color-pointer",l:h,min:0,max:c},{i:2,c:"color-slider",l:g,min:0,max:u},{i:3,c:"color-slider",l:r,min:0,max:100}].forEach(t=>{const{i:e,c:o,l:n,min:r,max:s}=t,a=yt({tagName:"div",className:"color-control"});F(a,"role","presentation"),a.append(yt({tagName:"div",className:"visual-control visual-control"+e}));const i=yt({tagName:"div",className:o+" knob",ariaLive:"polite"});F(i,"aria-label",n),F(i,"role","slider"),F(i,"tabindex","0"),F(i,"aria-valuemin",""+r),F(i,"aria-valuemax",""+s),a.append(i),p.append(a)}),p}(t),v=function(t){const{format:e,id:o,componentLabels:n}=t,r=yt({tagName:"div",className:"color-form "+e});let s=["hex"];return"rgb"===e?s=["red","green","blue","alpha"]:"hsl"===e?s=["hue","saturation","lightness","alpha"]:"hwb"===e&&(s=["hue","whiteness","blackness","alpha"]),s.forEach(t=>{const[s]="hex"===e?["#"]:$t(t).split(""),a=`color_${e}_${t}_${o}`,i=n[t+"Label"],l=yt({tagName:"label"});F(l,"for",a),l.append(yt({tagName:"span",ariaHidden:"true",innerText:s+":"}),yt({tagName:"span",className:"v-hidden",innerText:i}));const c=yt({tagName:"input",id:a,type:"hex"===e?"text":"number",value:"alpha"===t?"100":"0",className:"color-input "+t});F(c,"autocomplete","off"),F(c,"spellcheck","false");let u="100",h="1";"alpha"!==t&&("rgb"===e?(u="255",h="1"):"hue"===t&&(u="360",h="1")),k(c,{min:"0",max:u,step:h}),r.append(l,c)}),r}(t);if(f.append(m,v),e.before(b),o.append(f),a||i){const e=yt({tagName:"div",className:"color-dropdown scrollable menu"});i&&e.append(St(t,i,"color-options")),a&&a.length&&e.append(St(t,a,"color-defaults"));const n=yt({tagName:"button",className:"menu-toggle btn-appearance"});F(n,"tabindex","-1"),F(n,"aria-expanded","false"),F(n,"aria-haspopup","true");const r=encodeURI("http://www.w3.org/2000/svg"),s=kt(r,{tagName:"svg"});F(s,"xmlns",r),F(s,"viewBox","0 0 512 512"),F(s,"aria-hidden","true");const l=kt(r,{tagName:"path"});F(l,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),F(l,"fill","#fff"),s.append(l),n.append(yt({tagName:"span",className:"v-hidden",innerText:""+c}),s),o.append(n,e)}a&&O.includes(l)&&(t.value=l),F(e,"tabindex","-1")}const At={componentLabels:vt,colorLabels:wt,format:"rgb",colorPresets:!1,colorKeywords:!1};function Lt(t,e){const r=e?o:n,{input:s,pickerToggle:a,menuToggle:i}=t;r(s,"focusin",t.showPicker),r(a,"click",t.togglePicker),i&&r(i,"click",t.toggleMenu)}function Et(t,e){const r=e?o:n,{input:s,colorMenu:a,parent:i}=t,l=g(s),c=l.defaultView;r(t.controls,"pointerdown",t.pointerDown),t.controlKnobs.forEach(e=>r(e,"keydown",t.handleKnobs)),r(c,"scroll",t.handleScroll),r(c,"resize",t.update),[s,...t.inputs].forEach(e=>r(e,"change",t.changeHandler)),a&&(r(a,"click",t.menuClickHandler),r(a,"keydown",t.menuKeyHandler)),r(l,h,t.pointerMove),r(l,"pointerup",t.pointerUp),r(i,"focusout",t.handleFocusOut),r(l,"keyup",t.handleDismiss)}function Nt(t){var e,o;e=t.input,o=new CustomEvent("colorpicker.change"),e.dispatchEvent(o)}function Pt(t){t&&["bottom","top"].forEach(e=>R(t,e))}function Ct(t,e){const{colorPicker:o,colorMenu:n,menuToggle:r,pickerToggle:s,parent:a}=t,i=e===o,l=i?n:o,c=i?r:s,u=i?s:r;M(a,"open")||T(a,"open"),l&&(R(l,"show"),Pt(l)),T(e,"bottom"),e.offsetHeight,T(e,"show"),i&&t.update(),t.isOpen||(Et(t,!0),t.updateDropdownPosition(),t.isOpen=!0,F(t.input,"tabindex","0"),r&&F(r,"tabindex","0")),F(u,"aria-expanded","true"),c&&F(c,"aria-expanded","false")}class Mt{constructor(t,e){const o=this,n=$(t);if(!n)throw new TypeError(`ColorPicker target "${t}" cannot be found.`);o.input=n;const r=function t(e,o){return e?e.closest(o)||t(e.getRootNode().host,o):null}(n,".color-picker,color-picker");if(!r)throw new TypeError("ColorPicker requires a specific markup to work.");o.parent=r,o.id=function t(e,o){let n=o?b:f;if(o){const r=t(e),s=m.get(r)||new Map;m.has(r)||m.set(r,s),s.has(o)?n=s.get(o):(s.set(o,n),b+=1)}else{const t=e.id||e;m.has(t)?n=m.get(t):(m.set(t,n),f+=1)}return n}(n,"color-picker"),o.dragElement=null,o.isOpen=!1,o.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},o.colorLabels={},o.colorKeywords=void 0,o.colorPresets=void 0;const{format:s,componentLabels:a,colorLabels:i,colorKeywords:l,colorPresets:c}=function(t,e,o,n){const r={...t.dataset},s={},a={};return N(r).forEach(t=>{const e=n&&t.includes(n)?t.replace(n,"").replace(/[A-Z]/,t=>P(t)):t;a[e]=E(r[t])}),N(o).forEach(t=>{o[t]=E(o[t])}),N(e).forEach(n=>{s[n]=n in o?o[n]:n in a?a[n]:"title"===n?L(t,"title"):e[n]}),s}(this.isCE?r:n,At,e||{});let u=wt;i instanceof Array&&17===i.length?u=i:i&&17===i.split(",").length&&(u=i.split(",")),wt.forEach((t,e)=>{o.colorLabels[t]=u[e].trim()});const h=a&&xt(a)?JSON.parse(a):a;if(o.componentLabels=k({...vt},h),o.color=new ft(n.value||"#fff",s),o.format=s,l instanceof Array&&l.length?o.colorKeywords=l:"string"==typeof l&&l.length&&(o.colorKeywords=l.split(",").map(t=>t.trim())),c instanceof Array&&c.length)o.colorPresets=c;else if("string"==typeof c&&c.length)if(xt(c)){const{hue:t,hueSteps:e,lightSteps:n}=JSON.parse(c);o.colorPresets=new mt(t,e,n)}else o.colorPresets=c.split(",").map(t=>t.trim());o.showPicker=o.showPicker.bind(o),o.togglePicker=o.togglePicker.bind(o),o.toggleMenu=o.toggleMenu.bind(o),o.menuClickHandler=o.menuClickHandler.bind(o),o.menuKeyHandler=o.menuKeyHandler.bind(o),o.pointerDown=o.pointerDown.bind(o),o.pointerMove=o.pointerMove.bind(o),o.pointerUp=o.pointerUp.bind(o),o.update=o.update.bind(o),o.handleScroll=o.handleScroll.bind(o),o.handleFocusOut=o.handleFocusOut.bind(o),o.changeHandler=o.changeHandler.bind(o),o.handleDismiss=o.handleDismiss.bind(o),o.handleKnobs=o.handleKnobs.bind(o),Ht(o);const[g,p]=y("color-dropdown",r);o.pickerToggle=$(".picker-toggle",r),o.menuToggle=$(".menu-toggle",r),o.colorPicker=g,o.colorMenu=p,o.inputs=[...y("color-input",r)];const[d]=y("color-controls",r);o.controls=d,o.controlKnobs=[...y("knob",d)],o.visuals=[...y("visual-control",d)],o.update(),Lt(o,!0),H.set(n,"color-picker",o)}get value(){return this.input.value}set value(t){this.input.value=t}get hasNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>O.includes(t))}get isCE(){return"color-picker"===this.parent.localName}get hex(){return this.color.toHex(!0)}get hsv(){return this.color.toHsv()}get hsl(){return this.color.toHsl()}get hwb(){return this.color.toHwb()}get rgb(){return this.color.toRgb()}get brightness(){return this.color.brightness}get luminance(){return this.color.luminance}get isDark(){const{color:t,brightness:e}=this;return e<120&&t.a>.33}get isValid(){const t=this.input.value;return""!==t&&new ft(t).isValid}get appearance(){const{colorLabels:t,hsl:e,hsv:o,format:n}=this,r=I(360*e.h),s=I(100*("hsl"===n?e.s:o.s)),a=I(100*e.l),i=100*o.v;let l;if(100===a&&0===s)l=t.white;else if(0===a)l=t.black;else if(0===s)l=t.grey;else if(r<15||r>=345)l=t.red;else if(r>=15&&r<45)l=i>80&&s>80?t.orange:t.brown;else if(r>=45&&r<75){const e=r>=54&&r<75&&i<80;l=r>46&&r<54&&i<80&&s>90?t.gold:t.yellow,l=e?t.olive:l}else r>=75&&r<155?l=i<68?t.green:t.lime:r>=155&&r<175?l=t.teal:r>=175&&r<195?l=t.cyan:r>=195&&r<255?l=t.blue:r>=255&&r<270?l=t.violet:r>=270&&r<295?l=t.magenta:r>=295&&r<345&&(l=t.pink);return l}updateVisuals(){const{controlPositions:t,visuals:e}=this,[o,n,r]=e,{offsetHeight:s}=o,a=t.c2y/s,{r:i,g:l,b:c}=new ft({h:a,s:1,l:.5}).toRgb(),u=1-t.c3y/s,h=I(100*u)/100,g=new ft({h:a,s:1,l:.5,a:u}).toRgbString();A(o,{background:`linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${h}) 100%),\n      linear-gradient(to right, rgba(255,255,255,${h}) 0%, ${g} 100%),\n      linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)`}),A(n,{background:"linear-gradient(\n      rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,\n      rgb(0,255,0) 33.33%, rgb(0,255,255) 50%,\n      rgb(0,0,255) 66.67%, rgb(255,0,255) 83.33%,\n      rgb(255,0,0) 100%)"}),A(r,{background:`linear-gradient(rgba(${i},${l},${c},1) 0%,rgba(${i},${l},${c},0) 100%)`})}handleFocusOut({relatedTarget:t}){t&&!this.parent.contains(t)&&this.hide(!0)}handleDismiss({code:t}){const e=this;e.isOpen&&"Escape"===t&&e.hide()}handleScroll(t){const{activeElement:e}=g(this.input);this.updateDropdownPosition(),([h,u].includes(t.type)&&this.dragElement||e&&this.controlKnobs.includes(e))&&(t.stopPropagation(),t.preventDefault())}menuKeyHandler(t){const{target:e,code:o}=t,{previousElementSibling:n,nextElementSibling:u,parentElement:h}=e,g=h&&M(h,"color-options"),p=[...h.children],b=g&&d(h,"grid-template-columns").split(" ").length,f=p.indexOf(e),m=f>-1&&b&&p[f-b],v=f>-1&&b&&p[f+b];[r,s,c].includes(o)&&t.preventDefault(),g?m&&o===s?C(m):v&&o===r?C(v):n&&o===a?C(n):u&&o===i&&C(u):n&&[a,s].includes(o)?C(n):u&&[i,r].includes(o)&&C(u),[l,c].includes(o)&&this.menuClickHandler({target:e})}menuClickHandler(t){const e=this,{target:o}=t,{colorMenu:n}=e,r=(L(o,"data-value")||"").trim();if(!r.length)return;const s=$("li.active",n);let a=O.includes(r)?"white":r;a="transparent"===r?"rgba(0,0,0,0)":r;const{r:i,g:l,b:c,a:u}=new ft(a);k(e.color,{r:i,g:l,b:c,a:u}),e.update(),s!==o&&(s&&(R(s,"active"),D(s,"aria-selected")),T(o,"active"),F(o,"aria-selected","true"),O.includes(r)&&(e.value=r),Nt(e))}pointerDown(t){const e=this,{target:o,pageX:n,pageY:r}=t,{colorMenu:s,visuals:a,controlKnobs:i}=e,[l,c,u]=a,[h,g,d]=i,b=i.includes(o)?o.previousElementSibling:o,f=v(b),m=p(l),w=n-m.scrollLeft-f.left,x=r-m.scrollTop-f.top;if(o===l||o===h?(e.dragElement=b,e.changeControl1(w,x)):o===c||o===g?(e.dragElement=b,e.changeControl2(x)):o!==u&&o!==d||(e.dragElement=b,e.changeAlpha(x)),s){const t=$("li.active",s);t&&(R(t,"active"),D(t,"aria-selected"))}t.preventDefault()}pointerUp({target:t}){const e=this,{parent:o}=e,n=g(o),r=null!==$(".color-picker,color-picker.open",n),s=n.getSelection();e.dragElement||s.toString().length||o.contains(t)||e.hide(r),e.dragElement=null}pointerMove(t){const e=this,{dragElement:o,visuals:n}=e,[r,s,a]=n,{pageX:i,pageY:l}=t;if(!o)return;const c=v(o),u=p(r),h=i-u.scrollLeft-c.left,g=l-u.scrollTop-c.top;o===r&&e.changeControl1(h,g),o===s&&e.changeControl2(g),o===a&&e.changeAlpha(g)}handleKnobs(t){const{target:e,code:o}=t,n=this;if(![s,r,a,i].includes(o))return;t.preventDefault();const{controlKnobs:l,visuals:c}=n,{offsetWidth:u,offsetHeight:h}=c[0],[p,d,b]=l,{activeElement:f}=g(p),m=h/360;if(l.find(t=>t===f)){let l=0,c=0;if(e===p){const t=u/100;[a,i].includes(o)?n.controlPositions.c1x+=o===i?t:-t:[s,r].includes(o)&&(n.controlPositions.c1y+=o===r?m:-m),l=n.controlPositions.c1x,c=n.controlPositions.c1y,n.changeControl1(l,c)}else e===d?(n.controlPositions.c2y+=[r,i].includes(o)?m:-m,c=n.controlPositions.c2y,n.changeControl2(c)):e===b&&(n.controlPositions.c3y+=[r,i].includes(o)?m:-m,c=n.controlPositions.c3y,n.changeAlpha(c));n.handleScroll(t)}}changeHandler(){const t=this;let e;const{inputs:o,format:n,value:r,input:s,controlPositions:a,visuals:i}=t,{activeElement:l}=g(s),{offsetHeight:c}=i[0],[u,,,h]=o,[p,d,b,f]="rgb"===n?o.map(t=>parseFloat(t.value)/(t===h?100:1)):o.map(t=>parseFloat(t.value)/(t!==u?100:360)),m=t.hasNonColor&&O.includes(r),v=h?f:1-a.c3y/c;if(l===s||l&&o.includes(l)){e=l===s?m?"transparent"===r?"rgba(0,0,0,0)":"rgb(0,0,0)":r:"hex"===n?u.value:"hsl"===n?{h:p,s:d,l:b,a:v}:"hwb"===n?{h:p,w:d,b:b,a:v}:{r:p,g:d,b:b,a:v};const{r:o,g:a,b:i,a:c}=new ft(e);k(t.color,{r:o,g:a,b:i,a:c}),t.setControlPositions(),t.updateAppearance(),t.updateInputs(),t.updateControls(),t.updateVisuals(),l===s&&m&&(t.value=r)}}changeControl1(t,e){let[o,n]=[0,0];const{controlPositions:r,visuals:s}=this,{offsetHeight:a,offsetWidth:i}=s[0];t>i?o=i:t>=0&&(o=t),e>a?n=a:e>=0&&(n=e);const l=r.c2y/a,c=o/i,u=1-n/a,h=1-r.c3y/a,{r:g,g:p,b:d,a:b}=new ft({h:l,s:c,v:u,a:h});k(this.color,{r:g,g:p,b:d,a:b}),this.controlPositions.c1x=o,this.controlPositions.c1y=n,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeControl2(t){const{controlPositions:e,visuals:o}=this,{offsetHeight:n,offsetWidth:r}=o[0];let s=0;t>n?s=n:t>=0&&(s=t);const a=s/n,i=e.c1x/r,l=1-e.c1y/n,c=1-e.c3y/n,{r:u,g:h,b:g,a:p}=new ft({h:a,s:i,v:l,a:c});k(this.color,{r:u,g:h,b:g,a:p}),this.controlPositions.c2y=s,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeAlpha(t){const{visuals:e}=this,{offsetHeight:o}=e[0];let n=0;t>o?n=o:t>=0&&(n=t);const r=1-n/o;this.color.setAlpha(r),this.controlPositions.c3y=n,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}update(){this.updateDropdownPosition(),this.updateAppearance(),this.setControlPositions(),this.updateInputs(!0),this.updateControls(),this.updateVisuals()}updateDropdownPosition(){const{input:t,colorPicker:e,colorMenu:o}=this,n=v(t),{top:r,bottom:s}=n,{offsetHeight:a}=t,i=p(t).clientHeight,l=M(e,"show")?e:o;if(!l)return;const{offsetHeight:c}=l,u=i-s,h=r,g=r+c+a>i,d=r-c<0;(M(l,"bottom")||!d)&&u<h&&g?(R(l,"bottom"),T(l,"top")):(R(l,"top"),T(l,"bottom"))}setControlPositions(){const{visuals:t,color:e,hsv:o}=this,{offsetHeight:n,offsetWidth:r}=t[0],s=e.a,a=o.h,i=o.s,l=o.v;this.controlPositions.c1x=i*r,this.controlPositions.c1y=(1-l)*n,this.controlPositions.c2y=a*n,this.controlPositions.c3y=(1-s)*n}updateAppearance(){const t=this,{componentLabels:e,color:o,parent:n,hsv:r,hex:s,format:a,controlKnobs:i}=t,{appearanceLabel:l,hexLabel:c,valueLabel:u}=e;let{r:h,g:g,b:p}=o.toRgb();const[d,b,f]=i,m=I(360*r.h),v=o.a,w=I(100*r.s),x=I(100*r.v),$=t.appearance;let y=`${c} ${s.split("").join(" ")}`;if("hwb"===a){const{hwb:e}=t,o=I(100*e.w),n=I(100*e.b);y=`HWB: ${m}°, ${o}%, ${n}%`,F(d,"aria-valuetext",`${o}% & ${n}%`),F(d,"aria-valuenow",""+o),F(b,"aria-description",`${u}: ${y}. ${l}: ${$}.`),F(b,"aria-valuetext",m+"%"),F(b,"aria-valuenow",""+m)}else[h,g,p]=[h,g,p].map(I),y="hsl"===a?`HSL: ${m}°, ${w}%, ${x}%`:y,y="rgb"===a?`RGB: ${h}, ${g}, ${p}`:y,F(d,"aria-valuetext",`${x}% & ${w}%`),F(d,"aria-valuenow",""+x),F(b,"aria-description",`${u}: ${y}. ${l}: ${$}.`),F(b,"aria-valuetext",m+"°"),F(b,"aria-valuenow",""+m);const k=I(100*v);F(f,"aria-valuetext",k+"%"),F(f,"aria-valuenow",""+k);const S=o.toString();A(t.input,{backgroundColor:S}),t.isDark?(M(n,"txt-light")&&R(n,"txt-light"),M(n,"txt-dark")||T(n,"txt-dark")):(M(n,"txt-dark")&&R(n,"txt-dark"),M(n,"txt-light")||T(n,"txt-light"))}updateControls(){const{controlKnobs:t,controlPositions:e}=this;let{c1x:o,c1y:n,c2y:r,c3y:s}=e;const[a,i,l]=t;[o,n,r,s]=[o,n,r,s].map(I),A(a,{transform:`translate3d(${o-4}px,${n-4}px,0)`}),A(i,{transform:`translate3d(0,${r-4}px,0)`}),A(l,{transform:`translate3d(0,${s-4}px,0)`})}updateInputs(t){const e=this,{value:o,format:n,inputs:r,color:s,hsl:a}=e,[i,l,c,u]=r,h=I(100*s.a),g=I(360*a.h);let p;if("hex"===n)p=e.color.toHexString(!0),i.value=e.hex;else if("hsl"===n){const t=I(100*a.l),o=I(100*a.s);p=e.color.toHslString(),i.value=""+g,l.value=""+o,c.value=""+t,u.value=""+h}else if("hwb"===n){const{w:t,b:o}=e.hwb,n=I(100*t),r=I(100*o);p=e.color.toHwbString(),i.value=""+g,l.value=""+n,c.value=""+r,u.value=""+h}else if("rgb"===n){let{r:t,g:o,b:n}=e.rgb;[t,o,n]=[t,o,n].map(I),p=e.color.toRgbString(),i.value=""+t,l.value=""+o,c.value=""+n,u.value=""+h}e.value=""+p,t||p===o||Nt(e)}togglePicker(t){t&&t.preventDefault();const e=this,{colorPicker:o}=e;e.isOpen&&M(o,"show")?e.hide(!0):Ct(e,o)}showPicker(){const t=this,{colorPicker:e}=t;["top","bottom"].some(t=>M(e,t))||Ct(t,e)}toggleMenu(t){t&&t.preventDefault();const e=this,{colorMenu:o}=e;e.isOpen&&M(o,"show")?e.hide(!0):Ct(e,o)}hide(t){const e=this;if(e.isOpen){const{pickerToggle:o,menuToggle:n,colorPicker:r,colorMenu:s,parent:a,input:i}=e,l=M(r,"show"),c=l?r:s,u=l?o:n,h=c&&function(t){const e=d(t,"transitionProperty"),o=d(t,"transitionDuration"),n=o.includes("ms")?1:1e3,r=e&&"none"!==e?parseFloat(o)*n:0;return Number.isNaN(r)?0:r}(c);e.value=e.color.toString(!0),c&&(R(c,"show"),F(u,"aria-expanded","false"),setTimeout(()=>{Pt(c),$(".show",a)||(R(a,"open"),Et(e),e.isOpen=!1)},h)),t||C(o),F(i,"tabindex","-1"),u===n&&F(n,"tabindex","-1")}}dispose(){const{input:t,parent:e}=this;this.hide(!0),Lt(this),[...e.children].forEach(e=>{e!==t&&e.remove()}),D(t,"tabindex"),A(t,{backgroundColor:""}),["txt-light","txt-dark"].forEach(t=>R(e,t)),H.remove(t,"color-picker")}}return k(Mt,{Color:ft,ColorPalette:mt,Version:"1.0.0",getInstance:t=>{return e=t,o="color-picker",H.get(e,o);var e,o},init:t=>new Mt(t),selector:'[data-function="color-picker"]',roundPart:I,setElementStyle:A,setAttribute:F,getBoundingClientRect:v}),Mt}));
+// ColorPicker v1.0.1 | thednp © 2022 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).ColorPicker=e()}(this,(function(){"use strict";const t={};function e(e){const o=this,{type:r}=e;[...t[r]].forEach(t=>{const[s,a]=t;s===o&&[...a].forEach(t=>{const[o,a]=t;o.apply(s,[e]),a&&a.once&&n(s,r,o,a)})})}const o=(o,n,r,s)=>{t[n]||(t[n]=new Map);const a=t[n];a.has(o)||a.set(o,new Map);const i=a.get(o),{size:l}=i;i.set(r,s),l||o.addEventListener(n,e,s)},n=(o,n,r,s)=>{const a=t[n],i=a&&a.get(o),l=i&&i.get(r),{options:c}=void 0!==l?l:{options:s};i&&i.has(r)&&i.delete(r),!a||i&&i.size||a.delete(o),a&&a.size||delete t[n],i&&i.size||o.removeEventListener(n,e,c)},r="ArrowDown",s="ArrowUp",a="ArrowLeft",i="ArrowRight",l="Enter",c="Space",u="touchmove",h="pointermove";function g(t){return t instanceof HTMLElement?t.ownerDocument:t instanceof Window?t.document:window.document}function p(t){return g(t).documentElement}function d(t,e){const o=getComputedStyle(t);return e in o?o[e]:""}let b=0,f=0;const m=new Map;function v(t,e){const{width:o,height:n,top:r,right:s,bottom:a,left:i}=t.getBoundingClientRect();let l=1,c=1;if(e&&t instanceof HTMLElement){const{offsetWidth:e,offsetHeight:r}=t;l=e>0&&Math.round(o)/e||1,c=r>0&&Math.round(n)/r||1}return{width:o/l,height:n/c,top:r/c,right:s/l,bottom:a/c,left:i/l,x:i/l,y:r/c}}const w=[Document,Element,HTMLElement],x=[Element,HTMLElement];function $(t,e){const o=w.some(t=>e instanceof t)?e:g();return x.some(e=>t instanceof e)?t:o.querySelector(t)}function y(t,e){return(e&&w.some(t=>e instanceof t)?e:g()).getElementsByClassName(t)}const k=(t,e)=>Object.assign(t,e),S=new Map,H={set:(t,e,o)=>{const n=$(t);if(!n)return;S.has(e)||S.set(e,new Map);S.get(e).set(n,o)},getAllFor:t=>S.get(t)||null,get:(t,e)=>{const o=$(t),n=H.getAllFor(e);return o&&n&&n.get(o)||null},remove:(t,e)=>{const o=$(t),n=S.get(e);n&&o&&(n.delete(o),0===n.size&&S.delete(e))}},A=(t,e)=>{k(t.style,e)},L=(t,e)=>t.getAttribute(e);function E(t){return"true"===t||"false"!==t&&(Number.isNaN(+t)?""===t||"null"===t?null:t:+t)}const N=t=>Object.keys(t),P=t=>t.toLowerCase();const C=t=>t.focus();function M(t,e){return t.classList.contains(e)}function T(t,e){t.classList.add(e)}function R(t,e){t.classList.remove(e)}const F=(t,e,o)=>t.setAttribute(e,o),D=(t,e)=>t.removeAttribute(e),{head:K}=document,O=["transparent","currentColor","inherit","revert","initial"];function I(t){const e=Math.floor(t);return t-e<.5?e:Math.round(t)}const V=["rgb","hex","hsl","hsv","hwb"],U="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",B="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",_=`(?:${B})|(?:${U})`,j="(?:[,|\\s]+)",z=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${_})${j}(${B})${j}(${B})(?:[,|\\/\\s]*)?(${B})?(?:[\\s|\\)\\s]+)?`,W={CSS_UNIT:new RegExp(_),hwb:new RegExp("hwb"+z),rgb:new RegExp("rgb(?:a)?"+z),hsl:new RegExp("hsl(?:a)?"+z),hsv:new RegExp("hsv(?:a)?"+z),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 G(t){return(""+t).includes(".")&&1===parseFloat(t)}function J(t){return(""+t).includes("%")}function q(t){return!O.includes(t)&&!["#",...V].some(e=>t.includes(e))&&(!!["black","white"].includes(t)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(e=>{A(K,{color:t});const o=d(K,"color");return A(K,{color:""}),o!==e}))}function X(t){return Boolean(W.CSS_UNIT.exec(String(t)))}function Y(t,e){let o=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;G(t)&&(o="100%");const n=J(o);return o=360===e?parseFloat(o):Math.min(e,Math.max(0,parseFloat(o))),n&&(o=o*e/100),Math.abs(o-e)<1e-6?1:(o=360===e?(o<0?o%e+e:o%e)/e:o%e/e,o)}function Z(t){let e=parseFloat(""+t);return(Number.isNaN(e)||e<0||e>1)&&(e=1),e}function Q(t){return Math.min(1,Math.max(0,t))}function tt(t){A(K,{color:t});const e=d(K,"color");return A(K,{color:""}),e}function et(t){return I(255*t).toString(16)}function ot(t){return nt(t)/255}function nt(t){return parseInt(t,16)}function rt(t){return 1===t.length?"0"+t:String(t)}function st(t,e,o){const n=Math.max(t,e,o),r=Math.min(t,e,o);let s=0,a=0;const i=(n+r)/2;if(n===r)a=0,s=0;else{const l=n-r;a=i>.5?l/(2-n-r):l/(n+r),n===t&&(s=(e-o)/l+(e<o?6:0)),n===e&&(s=(o-t)/l+2),n===o&&(s=(t-e)/l+4),s/=6}return{h:s,s:a,l:i}}function at(t,e,o){let n=o;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(e-t):n<.5?e:n<2/3?t+(e-t)*(2/3-n)*6:t}function it(t,e,o){let n=0,r=0,s=0;if(0===e)r=o,s=o,n=o;else{const a=o<.5?o*(1+e):o+e-o*e,i=2*o-a;n=at(i,a,t+1/3),r=at(i,a,t),s=at(i,a,t-1/3)}return{r:n,g:r,b:s}}function lt(t,e,o){let n=0,r=0;const s=Math.min(t,e,o),a=Math.max(t,e,o),i=1-a;if(a===s)return{h:0,w:s,b:i};t===s?(n=e-o,r=3):(n=e===s?o-t:t-e,r=e===s?5:1);const l=(r-n/(a-s))/6;return{h:1===l?0:l,w:s,b:i}}function ct(t,e,o){if(e+o>=1){const t=e/(e+o);return{r:t,g:t,b:t}}let{r:n,g:r,b:s}=it(t,1,.5);return[n,r,s]=[n,r,s].map(t=>t*(1-e-o)+e),{r:n,g:r,b:s}}function ut(t,e,o){const n=Math.max(t,e,o),r=Math.min(t,e,o);let s=0;const a=n-r;return n===r?s=0:(t===n&&(s=(e-o)/a+(e<o?6:0)),e===n&&(s=(o-t)/a+2),o===n&&(s=(t-e)/a+4),s/=6),{h:s,s:0===n?0:a/n,v:n}}function ht(t,e,o){const n=6*t,r=e,s=o,a=Math.floor(n),i=n-a,l=s*(1-r),c=s*(1-i*r),u=s*(1-(1-i)*r),h=a%6;return{r:[s,c,l,l,u,s][h],g:[u,s,s,c,l,l][h],b:[l,l,u,s,s,c][h]}}function gt(t,e,o,n){const r=[rt(I(t).toString(16)),rt(I(e).toString(16)),rt(I(o).toString(16))];return n&&r[0].charAt(0)===r[0].charAt(1)&&r[1].charAt(0)===r[1].charAt(1)&&r[2].charAt(0)===r[2].charAt(1)?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function pt(t,e,o,n,r){const s=[rt(I(t).toString(16)),rt(I(e).toString(16)),rt(I(o).toString(16)),rt(et(n))];return r&&s[0].charAt(0)===s[0].charAt(1)&&s[1].charAt(0)===s[1].charAt(1)&&s[2].charAt(0)===s[2].charAt(1)&&s[3].charAt(0)===s[3].charAt(1)?s[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0)+s[3].charAt(0):s.join("")}function dt(t){let e=P(t.trim());if(0===e.length)return{r:0,g:0,b:0,a:1};if(q(e))e=tt(e);else if(O.includes(e)){return{r:0,g:0,b:0,a:"transparent"===e?0:1,format:"rgb",ok:!0}}let[,o,n,r,s]=W.rgb.exec(e)||[];return o&&n&&r?{r:o,g:n,b:r,a:void 0!==s?s:1,format:"rgb"}:([,o,n,r,s]=W.hsl.exec(e)||[],o&&n&&r?{h:o,s:n,l:r,a:void 0!==s?s:1,format:"hsl"}:([,o,n,r,s]=W.hsv.exec(e)||[],o&&n&&r?{h:o,s:n,v:r,a:void 0!==s?s:1,format:"hsv"}:([,o,n,r,s]=W.hwb.exec(e)||[],o&&n&&r?{h:o,w:n,b:r,a:void 0!==s?s:1,format:"hwb"}:([,o,n,r,s]=W.hex8.exec(e)||[],o&&n&&r&&s?{r:nt(o),g:nt(n),b:nt(r),a:ot(s),format:"hex"}:([,o,n,r]=W.hex6.exec(e)||[],o&&n&&r?{r:nt(o),g:nt(n),b:nt(r),format:"hex"}:([,o,n,r,s]=W.hex4.exec(e)||[],o&&n&&r&&s?{r:nt(o+o),g:nt(n+n),b:nt(r+r),a:ot(s+s),format:"hex"}:([,o,n,r]=W.hex3.exec(e)||[],!!(o&&n&&r)&&{r:nt(o+o),g:nt(n+n),b:nt(r+r),format:"hex"})))))))}function bt(t){let e={r:0,g:0,b:0},o=t,n=1,r=null,s=null,a=null,i=null,l=null,c=null,u=null,h=null,g=!1;const p="object"==typeof o&&o.format;let d=p&&V.includes(p)?p:"rgb";return"string"==typeof t&&(o=dt(t),o&&(g=!0)),"object"==typeof o&&(X(o.r)&&X(o.g)&&X(o.b)&&(({r:u,g:h,b:l}=o),[u,h,l]=[u,h,l].map(t=>Y(t,J(t)?100:255)),e={r:u,g:h,b:l},g=!0,d=o.format||"rgb"),X(o.h)&&X(o.s)&&X(o.v)&&(({h:c,s:r,v:s}=o),c=Y(c,360),r=Y(r,100),s=Y(s,100),e=ht(c,r,s),g=!0,d="hsv"),X(o.h)&&X(o.s)&&X(o.l)&&(({h:c,s:r,l:a}=o),c=Y(c,360),r=Y(r,100),a=Y(a,100),e=it(c,r,a),g=!0,d="hsl"),X(o.h)&&X(o.w)&&X(o.b)&&(({h:c,w:i,b:l}=o),c=Y(c,360),i=Y(i,100),l=Y(l,100),e=ct(c,i,l),g=!0,d="hwb"),X(o.a)&&(n=o.a,n=J(""+n)||parseFloat(n)>1?Y(n,100):n)),void 0===o&&(g=!0),{ok:g,format:d,r:e.r,g:e.g,b:e.b,a:Z(n)}}class ft{constructor(t,e){let o=t;const n=e&&V.includes(e)?e:"";o instanceof ft&&(o=bt(o));const{r:r,g:s,b:a,a:i,ok:l,format:c}=bt(o);this.originalInput=t,this.r=r,this.g=s,this.b=a,this.a=i,this.ok=l,this.format=n||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:e,b:o}=this;let n=0,r=0,s=0;return n=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,r=e<=.03928?e/12.92:((e+.055)/1.055)**2.4,s=o<=.03928?o/12.92:((o+.055)/1.055)**2.4,.2126*n+.7152*r+.0722*s}get brightness(){const{r:t,g:e,b:o}=this.toRgb();return(299*t+587*e+114*o)/1e3}toRgb(){let{r:t,g:e,b:o,a:n}=this;return[t,e,o]=[t,e,o].map(t=>I(255*t*100)/100),n=I(100*n)/100,{r:t,g:e,b:o,a:n}}toRgbString(){const{r:t,g:e,b:o,a:n}=this.toRgb(),[r,s,a]=[t,e,o].map(I);return 1===n?`rgb(${r}, ${s}, ${a})`:`rgba(${r}, ${s}, ${a}, ${n})`}toRgbCSS4String(){const{r:t,g:e,b:o,a:n}=this.toRgb(),[r,s,a]=[t,e,o].map(I);return`rgb(${r} ${s} ${a}${1===n?"":` / ${I(100*n)}%`})`}toHex(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return 1===r?gt(e,o,n,t):pt(e,o,n,r,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return pt(e,o,n,r,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:e,b:o,a:n}=this,{h:r,s:s,v:a}=ut(t,e,o);return{h:r,s:s,v:a,a:n}}toHsl(){const{r:t,g:e,b:o,a:n}=this,{h:r,s:s,l:a}=st(t,e,o);return{h:r,s:s,l:a,a:n}}toHslString(){let{h:t,s:e,l:o,a:n}=this.toHsl();return t=I(360*t),e=I(100*e),o=I(100*o),n=I(100*n)/100,1===n?`hsl(${t}, ${e}%, ${o}%)`:`hsla(${t}, ${e}%, ${o}%, ${n})`}toHslCSS4String(){let{h:t,s:e,l:o,a:n}=this.toHsl();t=I(360*t),e=I(100*e),o=I(100*o),n=I(100*n);return`hsl(${t}deg ${e}% ${o}%${n<100?` / ${I(n)}%`:""})`}toHwb(){const{r:t,g:e,b:o,a:n}=this,{h:r,w:s,b:a}=lt(t,e,o);return{h:r,w:s,b:a,a:n}}toHwbString(){let{h:t,w:e,b:o,a:n}=this.toHwb();t=I(360*t),e=I(100*e),o=I(100*o),n=I(100*n);return`hwb(${t}deg ${e}% ${o}%${n<100?` / ${I(n)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=Z(t)),this}saturate(t){if("number"!=typeof t)return this;const{h:e,s:o,l:n}=this.toHsl(),{r:r,g:s,b:a}=it(e,Q(o+t/100),n);return k(this,{r:r,g:s,b:a}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if("number"!=typeof t)return this;const{h:e,s:o,l:n}=this.toHsl(),{r:r,g:s,b:a}=it(e,o,Q(n+t/100));return k(this,{r:r,g:s,b:a}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:e,s:o,l:n}=this.toHsl(),{r:r,g:s,b:a}=it(Q((360*e+t)%360/360),o,n);return k(this,{r:r,g:s,b:a}),this}clone(){return new ft(this)}toString(t){const{format:e}=this;return"hex"===e?this.toHexString(t):"hsl"===e?this.toHslString():"hwb"===e?this.toHwbString():this.toRgbString()}}k(ft,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:U,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:B,CSS_UNIT2:_,PERMISSIVE_MATCH:z,matchers:W,isOnePointZero:G,isPercentage:J,isValidCSSUnit:X,isColorName:q,pad2:rt,clamp01:Q,bound01:Y,boundAlpha:Z,getRGBFromName:tt,convertHexToDecimal:ot,convertDecimalToHex:et,rgbToHsl:st,rgbToHex:gt,rgbToHsv:ut,rgbToHwb:lt,rgbaToHex:pt,hslToRgb:it,hsvToRgb:ht,hueToRgb:at,hwbToRgb:ct,parseIntFromHex:nt,stringInputToObject:dt,inputToRGB:bt,roundPart:I,getElementStyle:d,setElementStyle:A,ObjectAssign:k});class mt{constructor(...t){let e=0,o=12,n=10,r=[.5];if(3===t.length)[e,o,n]=t;else if(2===t.length&&([o,n]=t,[o,n].some(t=>t<1)))throw TypeError("ColorPalette: both arguments must be higher than 0.");const s=[],a=360/o,i=I((n-(n%2?1:0))/2),l=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],c=l.find(t=>t.includes(n)),u=c?[.25,.2,.15,.11,.09,.075][l.indexOf(c)]:100/(n+(n%2?0:1))/100;for(let t=1;t<i+1;t+=1)r=[...r,.5+u*t];for(let t=1;t<n-i;t+=1)r=[.5-u*t,...r];for(let t=0;t<o;t+=1){const o=(e+t*a)%360/360;r.forEach(t=>{s.push(new ft({h:o,s:1,l:t}))})}this.hue=e,this.hueSteps=o,this.lightSteps=n,this.colors=s}}k(mt,{Color:ft});const vt={pickerLabel:"Colour Picker",appearanceLabel:"Colour Appearance",valueLabel:"Colour Value",toggleLabel:"Select Colour",presetsLabel:"Colour Presets",defaultsLabel:"Colour Defaults",formatLabel:"Format",alphaLabel:"Alpha",hexLabel:"Hexadecimal",hueLabel:"Hue",whitenessLabel:"Whiteness",blacknessLabel:"Blackness",saturationLabel:"Saturation",lightnessLabel:"Lightness",redLabel:"Red",greenLabel:"Green",blueLabel:"Blue"},wt=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"];function xt(t){try{JSON.parse(t)}catch(t){return!1}return!0}const $t=t=>t.toUpperCase();function yt(t){if("string"==typeof t)return g().createElement(t);const{tagName:e}=t,o={...t},n=yt(e);return delete o.tagName,k(n,o),n}function kt(t,e){if("string"==typeof e)return g().createElementNS(t,e);const{tagName:o}=e,n={...e},r=kt(t,o);return delete n.tagName,k(r,n),r}function St(t,e,o){const{input:n,format:r,componentLabels:s}=t,{defaultsLabel:a,presetsLabel:i}=s,l="color-options"===o,c=e instanceof mt,u=l?i:a,h=c?e.colors:e,g=h.length,{lightSteps:p}=c?e:{lightSteps:null},d=p||[9,10].find(t=>g>=2*t&&!(g%t))||5,b=l&&g>d;let f=2;f=b&&g>2*d?3:f,f=b&&g>3*d?4:f,f=b&&g>4*d?5:f;const m=f-(g<=3*d?1:2),v=b&&g>m*d;let w=o;w+=v?" scrollable":"",w+=b?" multiline":"";const x=b?"1px":"0.25rem";let $=b?1.75:2;$=d>5&&b?1.5:$;const y=m*$+"rem",k=`calc(${f} * ${$}rem + ${f-1} * ${x})`,S=yt({tagName:"ul",className:w});var H,E;return F(S,"role","listbox"),F(S,"aria-label",u),v&&(H=S,N(E={"--grid-item-size":$+"rem","--grid-fit":d,"--grid-gap":x,"--grid-height":y,"--grid-hover-height":k}).forEach(t=>{H.style.setProperty(t,E[t])})),h.forEach(t=>{let[e,o]="string"==typeof t?t.trim().split(":"):[];t instanceof ft&&(e=t.toHexString(),o=e);const s=new ft(t instanceof ft?t:e,r).toString()===L(n,"value"),a=yt({tagName:"li",className:"color-option"+(s?" active":""),innerText:""+(o||e)});F(a,"tabindex","0"),F(a,"data-value",""+e),F(a,"role","option"),F(a,"aria-selected",s?"true":"false"),l&&A(a,{backgroundColor:e}),S.append(a)}),S}function Ht(t){const{input:e,parent:o,format:n,id:r,componentLabels:s,colorKeywords:a,colorPresets:i}=t,l=L(e,"value")||"#fff",{toggleLabel:c,pickerLabel:u,formatLabel:h,hexLabel:g}=s,p=O.includes(l)?"#fff":l;t.color=new ft(p,n);const d="hex"===n?g:$t(n),b=yt({id:"picker-btn-"+r,tagName:"button",className:"picker-toggle btn-appearance"});F(b,"aria-expanded","false"),F(b,"aria-haspopup","true"),b.append(yt({tagName:"span",className:"v-hidden",innerText:`${u}. ${h}: ${d}`}));const f=yt({tagName:"div",className:"color-dropdown picker"});F(f,"aria-labelledby","picker-btn-"+r),F(f,"role","group");const m=function(t){const{format:e,componentLabels:o}=t,{hueLabel:n,alphaLabel:r,lightnessLabel:s,saturationLabel:a,whitenessLabel:i,blacknessLabel:l}=o,c="hsl"===e?360:100,u="hsl"===e?100:360;let h="hsl"===e?`${n} & ${s}`:`${s} & ${a}`;h="hwb"===e?`${i} & ${l}`:h;const g="hsl"===e?""+a:""+n,p=yt({tagName:"div",className:"color-controls "+e});return[{i:1,c:"color-pointer",l:h,min:0,max:c},{i:2,c:"color-slider",l:g,min:0,max:u},{i:3,c:"color-slider",l:r,min:0,max:100}].forEach(t=>{const{i:e,c:o,l:n,min:r,max:s}=t,a=yt({tagName:"div",className:"color-control"});F(a,"role","presentation"),a.append(yt({tagName:"div",className:"visual-control visual-control"+e}));const i=yt({tagName:"div",className:o+" knob",ariaLive:"polite"});F(i,"aria-label",n),F(i,"role","slider"),F(i,"tabindex","0"),F(i,"aria-valuemin",""+r),F(i,"aria-valuemax",""+s),a.append(i),p.append(a)}),p}(t),v=function(t){const{format:e,id:o,componentLabels:n}=t,r=yt({tagName:"div",className:"color-form "+e});let s=["hex"];return"rgb"===e?s=["red","green","blue","alpha"]:"hsl"===e?s=["hue","saturation","lightness","alpha"]:"hwb"===e&&(s=["hue","whiteness","blackness","alpha"]),s.forEach(t=>{const[s]="hex"===e?["#"]:$t(t).split(""),a=`color_${e}_${t}_${o}`,i=n[t+"Label"],l=yt({tagName:"label"});F(l,"for",a),l.append(yt({tagName:"span",ariaHidden:"true",innerText:s+":"}),yt({tagName:"span",className:"v-hidden",innerText:i}));const c=yt({tagName:"input",id:a,type:"hex"===e?"text":"number",value:"alpha"===t?"100":"0",className:"color-input "+t});F(c,"autocomplete","off"),F(c,"spellcheck","false");let u="100",h="1";"alpha"!==t&&("rgb"===e?(u="255",h="1"):"hue"===t&&(u="360",h="1")),k(c,{min:"0",max:u,step:h}),r.append(l,c)}),r}(t);if(f.append(m,v),e.before(b),o.append(f),a||i){const e=yt({tagName:"div",className:"color-dropdown scrollable menu"});i&&e.append(St(t,i,"color-options")),a&&a.length&&e.append(St(t,a,"color-defaults"));const n=yt({tagName:"button",className:"menu-toggle btn-appearance"});F(n,"tabindex","-1"),F(n,"aria-expanded","false"),F(n,"aria-haspopup","true");const r=encodeURI("http://www.w3.org/2000/svg"),s=kt(r,{tagName:"svg"});F(s,"xmlns",r),F(s,"viewBox","0 0 512 512"),F(s,"aria-hidden","true");const l=kt(r,{tagName:"path"});F(l,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),F(l,"fill","#fff"),s.append(l),n.append(yt({tagName:"span",className:"v-hidden",innerText:""+c}),s),o.append(n,e)}a&&O.includes(l)&&(t.value=l),F(e,"tabindex","-1")}const At={componentLabels:vt,colorLabels:wt,format:"rgb",colorPresets:!1,colorKeywords:!1};function Lt(t,e){const r=e?o:n,{input:s,pickerToggle:a,menuToggle:i}=t;r(s,"focusin",t.showPicker),r(a,"click",t.togglePicker),i&&r(i,"click",t.toggleMenu)}function Et(t,e){const r=e?o:n,{input:s,colorMenu:a,parent:i}=t,l=g(s),c=l.defaultView;r(t.controls,"pointerdown",t.pointerDown),t.controlKnobs.forEach(e=>r(e,"keydown",t.handleKnobs)),r(c,"scroll",t.handleScroll),r(c,"resize",t.update),[s,...t.inputs].forEach(e=>r(e,"change",t.changeHandler)),a&&(r(a,"click",t.menuClickHandler),r(a,"keydown",t.menuKeyHandler)),r(l,h,t.pointerMove),r(l,"pointerup",t.pointerUp),r(i,"focusout",t.handleFocusOut),r(l,"keyup",t.handleDismiss)}function Nt(t){var e,o;e=t.input,o=new CustomEvent("colorpicker.change"),e.dispatchEvent(o)}function Pt(t){t&&["bottom","top"].forEach(e=>R(t,e))}function Ct(t,e){const{colorPicker:o,colorMenu:n,menuToggle:r,pickerToggle:s,parent:a}=t,i=e===o,l=i?n:o,c=i?r:s,u=i?s:r;M(a,"open")||T(a,"open"),l&&(R(l,"show"),Pt(l)),T(e,"bottom"),e.offsetHeight,T(e,"show"),i&&t.update(),t.isOpen||(Et(t,!0),t.updateDropdownPosition(),t.isOpen=!0,F(t.input,"tabindex","0"),r&&F(r,"tabindex","0")),F(u,"aria-expanded","true"),c&&F(c,"aria-expanded","false")}class Mt{constructor(t,e){const o=this,n=$(t);if(!n)throw new TypeError(`ColorPicker target "${t}" cannot be found.`);o.input=n;const r=function t(e,o){return e?e.closest(o)||t(e.getRootNode().host,o):null}(n,".color-picker,color-picker");if(!r)throw new TypeError("ColorPicker requires a specific markup to work.");o.parent=r,o.id=function t(e,o){let n=o?b:f;if(o){const r=t(e),s=m.get(r)||new Map;m.has(r)||m.set(r,s),s.has(o)?n=s.get(o):(s.set(o,n),b+=1)}else{const t=e.id||e;m.has(t)?n=m.get(t):(m.set(t,n),f+=1)}return n}(n,"color-picker"),o.dragElement=null,o.isOpen=!1,o.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},o.colorLabels={},o.colorKeywords=void 0,o.colorPresets=void 0;const{format:s,componentLabels:a,colorLabels:i,colorKeywords:l,colorPresets:c}=function(t,e,o,n){const r={...t.dataset},s={},a={};return N(r).forEach(t=>{const e=n&&t.includes(n)?t.replace(n,"").replace(/[A-Z]/,t=>P(t)):t;a[e]=E(r[t])}),N(o).forEach(t=>{o[t]=E(o[t])}),N(e).forEach(n=>{s[n]=n in o?o[n]:n in a?a[n]:"title"===n?L(t,"title"):e[n]}),s}(this.isCE?r:n,At,e||{});let u=wt;i instanceof Array&&17===i.length?u=i:i&&17===i.split(",").length&&(u=i.split(",")),wt.forEach((t,e)=>{o.colorLabels[t]=u[e].trim()});const h=a&&xt(a)?JSON.parse(a):a;if(o.componentLabels=k({...vt},h),o.color=new ft(n.value||"#fff",s),o.format=s,l instanceof Array&&l.length?o.colorKeywords=l:"string"==typeof l&&l.length&&(o.colorKeywords=l.split(",").map(t=>t.trim())),c instanceof Array&&c.length)o.colorPresets=c;else if("string"==typeof c&&c.length)if(xt(c)){const{hue:t,hueSteps:e,lightSteps:n}=JSON.parse(c);o.colorPresets=new mt(t,e,n)}else o.colorPresets=c.split(",").map(t=>t.trim());o.showPicker=o.showPicker.bind(o),o.togglePicker=o.togglePicker.bind(o),o.toggleMenu=o.toggleMenu.bind(o),o.menuClickHandler=o.menuClickHandler.bind(o),o.menuKeyHandler=o.menuKeyHandler.bind(o),o.pointerDown=o.pointerDown.bind(o),o.pointerMove=o.pointerMove.bind(o),o.pointerUp=o.pointerUp.bind(o),o.update=o.update.bind(o),o.handleScroll=o.handleScroll.bind(o),o.handleFocusOut=o.handleFocusOut.bind(o),o.changeHandler=o.changeHandler.bind(o),o.handleDismiss=o.handleDismiss.bind(o),o.handleKnobs=o.handleKnobs.bind(o),Ht(o);const[g,p]=y("color-dropdown",r);o.pickerToggle=$(".picker-toggle",r),o.menuToggle=$(".menu-toggle",r),o.colorPicker=g,o.colorMenu=p,o.inputs=[...y("color-input",r)];const[d]=y("color-controls",r);o.controls=d,o.controlKnobs=[...y("knob",d)],o.visuals=[...y("visual-control",d)],o.update(),Lt(o,!0),H.set(n,"color-picker",o)}get value(){return this.input.value}set value(t){this.input.value=t}get hasNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>O.includes(t))}get isCE(){return"color-picker"===this.parent.localName}get hex(){return this.color.toHex(!0)}get hsv(){return this.color.toHsv()}get hsl(){return this.color.toHsl()}get hwb(){return this.color.toHwb()}get rgb(){return this.color.toRgb()}get brightness(){return this.color.brightness}get luminance(){return this.color.luminance}get isDark(){const{color:t,brightness:e}=this;return e<120&&t.a>.33}get isValid(){const t=this.input.value;return""!==t&&new ft(t).isValid}get appearance(){const{colorLabels:t,hsl:e,hsv:o,format:n}=this,r=I(360*e.h),s=I(100*("hsl"===n?e.s:o.s)),a=I(100*e.l),i=100*o.v;let l;if(100===a&&0===s)l=t.white;else if(0===a)l=t.black;else if(0===s)l=t.grey;else if(r<15||r>=345)l=t.red;else if(r>=15&&r<45)l=i>80&&s>80?t.orange:t.brown;else if(r>=45&&r<75){const e=r>=54&&r<75&&i<80;l=r>46&&r<54&&i<80&&s>90?t.gold:t.yellow,l=e?t.olive:l}else r>=75&&r<155?l=i<68?t.green:t.lime:r>=155&&r<175?l=t.teal:r>=175&&r<195?l=t.cyan:r>=195&&r<255?l=t.blue:r>=255&&r<270?l=t.violet:r>=270&&r<295?l=t.magenta:r>=295&&r<345&&(l=t.pink);return l}updateVisuals(){const{controlPositions:t,visuals:e}=this,[o,n,r]=e,{offsetHeight:s}=o,a=t.c2y/s,{r:i,g:l,b:c}=new ft({h:a,s:1,l:.5}).toRgb(),u=1-t.c3y/s,h=I(100*u)/100,g=new ft({h:a,s:1,l:.5,a:u}).toRgbString();A(o,{background:`linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${h}) 100%),\n      linear-gradient(to right, rgba(255,255,255,${h}) 0%, ${g} 100%),\n      linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)`}),A(n,{background:"linear-gradient(\n      rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,\n      rgb(0,255,0) 33.33%, rgb(0,255,255) 50%,\n      rgb(0,0,255) 66.67%, rgb(255,0,255) 83.33%,\n      rgb(255,0,0) 100%)"}),A(r,{background:`linear-gradient(rgba(${i},${l},${c},1) 0%,rgba(${i},${l},${c},0) 100%)`})}handleFocusOut({relatedTarget:t}){t&&!this.parent.contains(t)&&this.hide(!0)}handleDismiss({code:t}){const e=this;e.isOpen&&"Escape"===t&&e.hide()}handleScroll(t){const{activeElement:e}=g(this.input);this.updateDropdownPosition(),([h,u].includes(t.type)&&this.dragElement||e&&this.controlKnobs.includes(e))&&(t.stopPropagation(),t.preventDefault())}menuKeyHandler(t){const{target:e,code:o}=t,{previousElementSibling:n,nextElementSibling:u,parentElement:h}=e,g=h&&M(h,"color-options"),p=[...h.children],b=g&&d(h,"grid-template-columns").split(" ").length,f=p.indexOf(e),m=f>-1&&b&&p[f-b],v=f>-1&&b&&p[f+b];[r,s,c].includes(o)&&t.preventDefault(),g?m&&o===s?C(m):v&&o===r?C(v):n&&o===a?C(n):u&&o===i&&C(u):n&&[a,s].includes(o)?C(n):u&&[i,r].includes(o)&&C(u),[l,c].includes(o)&&this.menuClickHandler({target:e})}menuClickHandler(t){const e=this,{target:o}=t,{colorMenu:n}=e,r=(L(o,"data-value")||"").trim();if(!r.length)return;const s=$("li.active",n);let a=r;a=O.includes(a)?"white":a,a="transparent"===a?"rgba(0,0,0,0)":a;const{r:i,g:l,b:c,a:u}=new ft(a);k(e.color,{r:i,g:l,b:c,a:u}),e.update(),s!==o&&(s&&(R(s,"active"),D(s,"aria-selected")),T(o,"active"),F(o,"aria-selected","true"),O.includes(r)&&(e.value=r),Nt(e))}pointerDown(t){const e=this,{target:o,pageX:n,pageY:r}=t,{colorMenu:s,visuals:a,controlKnobs:i}=e,[l,c,u]=a,[h,g,d]=i,b=i.includes(o)?o.previousElementSibling:o,f=v(b),m=p(l),w=n-m.scrollLeft-f.left,x=r-m.scrollTop-f.top;if(o===l||o===h?(e.dragElement=b,e.changeControl1(w,x)):o===c||o===g?(e.dragElement=b,e.changeControl2(x)):o!==u&&o!==d||(e.dragElement=b,e.changeAlpha(x)),s){const t=$("li.active",s);t&&(R(t,"active"),D(t,"aria-selected"))}t.preventDefault()}pointerUp({target:t}){const e=this,{parent:o}=e,n=g(o),r=null!==$(".color-picker,color-picker.open",n),s=n.getSelection();e.dragElement||s.toString().length||o.contains(t)||e.hide(r),e.dragElement=null}pointerMove(t){const e=this,{dragElement:o,visuals:n}=e,[r,s,a]=n,{pageX:i,pageY:l}=t;if(!o)return;const c=v(o),u=p(r),h=i-u.scrollLeft-c.left,g=l-u.scrollTop-c.top;o===r&&e.changeControl1(h,g),o===s&&e.changeControl2(g),o===a&&e.changeAlpha(g)}handleKnobs(t){const{target:e,code:o}=t,n=this;if(![s,r,a,i].includes(o))return;t.preventDefault();const{controlKnobs:l,visuals:c}=n,{offsetWidth:u,offsetHeight:h}=c[0],[p,d,b]=l,{activeElement:f}=g(p),m=h/360;if(l.find(t=>t===f)){let l=0,c=0;if(e===p){const t=u/100;[a,i].includes(o)?n.controlPositions.c1x+=o===i?t:-t:[s,r].includes(o)&&(n.controlPositions.c1y+=o===r?m:-m),l=n.controlPositions.c1x,c=n.controlPositions.c1y,n.changeControl1(l,c)}else e===d?(n.controlPositions.c2y+=[r,i].includes(o)?m:-m,c=n.controlPositions.c2y,n.changeControl2(c)):e===b&&(n.controlPositions.c3y+=[r,i].includes(o)?m:-m,c=n.controlPositions.c3y,n.changeAlpha(c));n.handleScroll(t)}}changeHandler(){const t=this;let e;const{inputs:o,format:n,value:r,input:s,controlPositions:a,visuals:i}=t,{activeElement:l}=g(s),{offsetHeight:c}=i[0],[u,,,h]=o,[p,d,b,f]="rgb"===n?o.map(t=>parseFloat(t.value)/(t===h?100:1)):o.map(t=>parseFloat(t.value)/(t!==u?100:360)),m=t.hasNonColor&&O.includes(r),v=h?f:1-a.c3y/c;if(l===s||l&&o.includes(l)){e=l===s?m?"transparent"===r?"rgba(0,0,0,0)":"rgb(0,0,0)":r:"hex"===n?u.value:"hsl"===n?{h:p,s:d,l:b,a:v}:"hwb"===n?{h:p,w:d,b:b,a:v}:{r:p,g:d,b:b,a:v};const{r:o,g:a,b:i,a:c}=new ft(e);k(t.color,{r:o,g:a,b:i,a:c}),t.setControlPositions(),t.updateAppearance(),t.updateInputs(),t.updateControls(),t.updateVisuals(),l===s&&m&&(t.value=r)}}changeControl1(t,e){let[o,n]=[0,0];const{controlPositions:r,visuals:s}=this,{offsetHeight:a,offsetWidth:i}=s[0];t>i?o=i:t>=0&&(o=t),e>a?n=a:e>=0&&(n=e);const l=r.c2y/a,c=o/i,u=1-n/a,h=1-r.c3y/a,{r:g,g:p,b:d,a:b}=new ft({h:l,s:c,v:u,a:h});k(this.color,{r:g,g:p,b:d,a:b}),this.controlPositions.c1x=o,this.controlPositions.c1y=n,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeControl2(t){const{controlPositions:e,visuals:o}=this,{offsetHeight:n,offsetWidth:r}=o[0];let s=0;t>n?s=n:t>=0&&(s=t);const a=s/n,i=e.c1x/r,l=1-e.c1y/n,c=1-e.c3y/n,{r:u,g:h,b:g,a:p}=new ft({h:a,s:i,v:l,a:c});k(this.color,{r:u,g:h,b:g,a:p}),this.controlPositions.c2y=s,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeAlpha(t){const{visuals:e}=this,{offsetHeight:o}=e[0];let n=0;t>o?n=o:t>=0&&(n=t);const r=1-n/o;this.color.setAlpha(r),this.controlPositions.c3y=n,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}update(){this.updateDropdownPosition(),this.updateAppearance(),this.setControlPositions(),this.updateInputs(!0),this.updateControls(),this.updateVisuals()}updateDropdownPosition(){const{input:t,colorPicker:e,colorMenu:o}=this,n=v(t),{top:r,bottom:s}=n,{offsetHeight:a}=t,i=p(t).clientHeight,l=M(e,"show")?e:o;if(!l)return;const{offsetHeight:c}=l,u=i-s,h=r,g=r+c+a>i,d=r-c<0;(M(l,"bottom")||!d)&&u<h&&g?(R(l,"bottom"),T(l,"top")):(R(l,"top"),T(l,"bottom"))}setControlPositions(){const{visuals:t,color:e,hsv:o}=this,{offsetHeight:n,offsetWidth:r}=t[0],s=e.a,a=o.h,i=o.s,l=o.v;this.controlPositions.c1x=i*r,this.controlPositions.c1y=(1-l)*n,this.controlPositions.c2y=a*n,this.controlPositions.c3y=(1-s)*n}updateAppearance(){const t=this,{componentLabels:e,color:o,parent:n,hsv:r,hex:s,format:a,controlKnobs:i}=t,{appearanceLabel:l,hexLabel:c,valueLabel:u}=e;let{r:h,g:g,b:p}=o.toRgb();const[d,b,f]=i,m=I(360*r.h),v=o.a,w=I(100*r.s),x=I(100*r.v),$=t.appearance;let y=`${c} ${s.split("").join(" ")}`;if("hwb"===a){const{hwb:e}=t,o=I(100*e.w),n=I(100*e.b);y=`HWB: ${m}°, ${o}%, ${n}%`,F(d,"aria-valuetext",`${o}% & ${n}%`),F(d,"aria-valuenow",""+o),F(b,"aria-description",`${u}: ${y}. ${l}: ${$}.`),F(b,"aria-valuetext",m+"%"),F(b,"aria-valuenow",""+m)}else[h,g,p]=[h,g,p].map(I),y="hsl"===a?`HSL: ${m}°, ${w}%, ${x}%`:y,y="rgb"===a?`RGB: ${h}, ${g}, ${p}`:y,F(d,"aria-valuetext",`${x}% & ${w}%`),F(d,"aria-valuenow",""+x),F(b,"aria-description",`${u}: ${y}. ${l}: ${$}.`),F(b,"aria-valuetext",m+"°"),F(b,"aria-valuenow",""+m);const k=I(100*v);F(f,"aria-valuetext",k+"%"),F(f,"aria-valuenow",""+k);const S=o.toString();A(t.input,{backgroundColor:S}),t.isDark?(M(n,"txt-light")&&R(n,"txt-light"),M(n,"txt-dark")||T(n,"txt-dark")):(M(n,"txt-dark")&&R(n,"txt-dark"),M(n,"txt-light")||T(n,"txt-light"))}updateControls(){const{controlKnobs:t,controlPositions:e}=this;let{c1x:o,c1y:n,c2y:r,c3y:s}=e;const[a,i,l]=t;[o,n,r,s]=[o,n,r,s].map(I),A(a,{transform:`translate3d(${o-4}px,${n-4}px,0)`}),A(i,{transform:`translate3d(0,${r-4}px,0)`}),A(l,{transform:`translate3d(0,${s-4}px,0)`})}updateInputs(t){const e=this,{value:o,format:n,inputs:r,color:s,hsl:a}=e,[i,l,c,u]=r,h=I(100*s.a),g=I(360*a.h);let p;if("hex"===n)p=e.color.toHexString(!0),i.value=e.hex;else if("hsl"===n){const t=I(100*a.l),o=I(100*a.s);p=e.color.toHslString(),i.value=""+g,l.value=""+o,c.value=""+t,u.value=""+h}else if("hwb"===n){const{w:t,b:o}=e.hwb,n=I(100*t),r=I(100*o);p=e.color.toHwbString(),i.value=""+g,l.value=""+n,c.value=""+r,u.value=""+h}else if("rgb"===n){let{r:t,g:o,b:n}=e.rgb;[t,o,n]=[t,o,n].map(I),p=e.color.toRgbString(),i.value=""+t,l.value=""+o,c.value=""+n,u.value=""+h}e.value=""+p,t||p===o||Nt(e)}togglePicker(t){t&&t.preventDefault();const e=this,{colorPicker:o}=e;e.isOpen&&M(o,"show")?e.hide(!0):Ct(e,o)}showPicker(){const t=this,{colorPicker:e}=t;["top","bottom"].some(t=>M(e,t))||Ct(t,e)}toggleMenu(t){t&&t.preventDefault();const e=this,{colorMenu:o}=e;e.isOpen&&M(o,"show")?e.hide(!0):Ct(e,o)}hide(t){const e=this;if(e.isOpen){const{pickerToggle:o,menuToggle:n,colorPicker:r,colorMenu:s,parent:a,input:i}=e,l=M(r,"show"),c=l?r:s,u=l?o:n,h=c&&function(t){const e=d(t,"transitionProperty"),o=d(t,"transitionDuration"),n=o.includes("ms")?1:1e3,r=e&&"none"!==e?parseFloat(o)*n:0;return Number.isNaN(r)?0:r}(c);e.value=e.color.toString(!0),c&&(R(c,"show"),F(u,"aria-expanded","false"),setTimeout(()=>{Pt(c),$(".show",a)||(R(a,"open"),Et(e),e.isOpen=!1)},h)),t||C(o),F(i,"tabindex","-1"),u===n&&F(n,"tabindex","-1")}}dispose(){const{input:t,parent:e}=this;this.hide(!0),Lt(this),[...e.children].forEach(e=>{e!==t&&e.remove()}),D(t,"tabindex"),A(t,{backgroundColor:""}),["txt-light","txt-dark"].forEach(t=>R(e,t)),H.remove(t,"color-picker")}}return k(Mt,{Color:ft,ColorPalette:mt,Version:"1.0.1",getInstance:t=>{return e=t,o="color-picker",H.get(e,o);var e,o},init:t=>new Mt(t),selector:'[data-function="color-picker"]',roundPart:I,setElementStyle:A,setAttribute:F,getBoundingClientRect:v}),Mt}));

package/dist/js/color.js

@@ -1,5 +1,5 @@
 /*!
-* Color v1.0.0 (http://thednp.github.io/color-picker)
+* Color v1.0.1 (http://thednp.github.io/color-picker)
 * Copyright 2022 © thednp
 * Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
 */
@@ -704,7 +704,7 @@
         format = 'hwb';
       }
       if (isValidCSSUnit(color.a)) {
-        a = color.a; // @ts-ignore -- `parseFloat` works with numbers too
+        a = color.a;
         a = isPercentage(`${a}`) || parseFloat(a) > 1 ? bound01(a, 100) : a;
       }
     }
@@ -715,9 +715,6 @@
     return {
       ok,
       format,
-      // r: Math.min(255, Math.max(rgb.r, 0)),
-      // g: Math.min(255, Math.max(rgb.g, 0)),
-      // b: Math.min(255, Math.max(rgb.b, 0)),
       r: rgb.r,
       g: rgb.g,
       b: rgb.b,

package/dist/js/color.min.js

@@ -1,2 +1,2 @@
-// Color v1.0.0 | thednp © 2022 | MIT-License
+// Color v1.0.1 | thednp © 2022 | MIT-License
 !function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(t="undefined"!=typeof globalThis?globalThis:t||self).Color=r()}(this,(function(){"use strict";const{head:t}=document;function r(t,r){const e=getComputedStyle(t);return r in e?e[r]:""}const e=(t,r)=>Object.assign(t,r),n=(t,r)=>{e(t.style,r)},o=["transparent","currentColor","inherit","revert","initial"];function s(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const i=["rgb","hex","hsl","hsv","hwb"],a="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",h="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${h})|(?:${a})`,c="(?:[,|\\s]+)",l=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${c}(${h})${c}(${h})(?:[,|\\/\\s]*)?(${h})?(?:[\\s|\\)\\s]+)?`,g={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+l),rgb:new RegExp("rgb(?:a)?"+l),hsl:new RegExp("hsl(?:a)?"+l),hsv:new RegExp("hsv(?:a)?"+l),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 b(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(e){return!o.includes(e)&&!["#",...i].some(t=>e.includes(t))&&(!!["black","white"].includes(e)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(o=>{n(t,{color:e});const s=r(t,"color");return n(t,{color:""}),s!==o}))}function d(t){return Boolean(g.CSS_UNIT.exec(String(t)))}function x(t,r){let e=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;b(t)&&(e="100%");const n=f(e);return e=360===r?parseFloat(e):Math.min(r,Math.max(0,parseFloat(e))),n&&(e=e*r/100),Math.abs(e-r)<1e-6?1:(e=360===r?(e<0?e%r+r:e%r)/r:e%r/r,e)}function S(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function p(t){return Math.min(1,Math.max(0,t))}function A(e){n(t,{color:e});const o=r(t,"color");return n(t,{color:""}),o}function $(t){return s(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function v(t){return 1===t.length?"0"+t:String(t)}function R(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0,i=0;const a=(n+o)/2;if(n===o)i=0,s=0;else{const h=n-o;i=a>.5?h/(2-n-o):h/(n+o),n===t&&(s=(r-e)/h+(r<e?6:0)),n===r&&(s=(e-t)/h+2),n===e&&(s=(t-r)/h+4),s/=6}return{h:s,s:i,l:a}}function F(t,r,e){let n=e;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(r-t):n<.5?r:n<2/3?t+(r-t)*(2/3-n)*6:t}function T(t,r,e){let n=0,o=0,s=0;if(0===r)o=e,s=e,n=e;else{const i=e<.5?e*(1+r):e+r-e*r,a=2*e-i;n=F(a,i,t+1/3),o=F(a,i,t),s=F(a,i,t-1/3)}return{r:n,g:o,b:s}}function y(t,r,e){let n=0,o=0;const s=Math.min(t,r,e),i=Math.max(t,r,e),a=1-i;if(i===s)return{h:0,w:s,b:a};t===s?(n=r-e,o=3):(n=r===s?e-t:t-r,o=r===s?5:1);const h=(o-n/(i-s))/6;return{h:1===h?0:h,w:s,b:a}}function M(t,r,e){if(r+e>=1){const t=r/(r+e);return{r:t,g:t,b:t}}let{r:n,g:o,b:s}=T(t,1,.5);return[n,o,s]=[n,o,s].map(t=>t*(1-r-e)+r),{r:n,g:o,b:s}}function C(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0;const i=n-o;return n===o?s=0:(t===n&&(s=(r-e)/i+(r<e?6:0)),r===n&&(s=(e-t)/i+2),e===n&&(s=(t-r)/i+4),s/=6),{h:s,s:0===n?0:i/n,v:n}}function E(t,r,e){const n=6*t,o=r,s=e,i=Math.floor(n),a=n-i,h=s*(1-o),u=s*(1-a*o),c=s*(1-(1-a)*o),l=i%6;return{r:[s,u,h,h,c,s][l],g:[c,s,s,u,h,h][l],b:[h,h,c,s,s,u][l]}}function N(t,r,e,n){const o=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(e).toString(16))];return n&&o[0].charAt(0)===o[0].charAt(1)&&o[1].charAt(0)===o[1].charAt(1)&&o[2].charAt(0)===o[2].charAt(1)?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function I(t,r,e,n,o){const i=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(e).toString(16)),v($(n))];return o&&i[0].charAt(0)===i[0].charAt(1)&&i[1].charAt(0)===i[1].charAt(1)&&i[2].charAt(0)===i[2].charAt(1)&&i[3].charAt(0)===i[3].charAt(1)?i[0].charAt(0)+i[1].charAt(0)+i[2].charAt(0)+i[3].charAt(0):i.join("")}function j(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};if(m(r))r=A(r);else if(o.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,e,n,s,i]=g.rgb.exec(r)||[];return e&&n&&s?{r:e,g:n,b:s,a:void 0!==i?i:1,format:"rgb"}:([,e,n,s,i]=g.hsl.exec(r)||[],e&&n&&s?{h:e,s:n,l:s,a:void 0!==i?i:1,format:"hsl"}:([,e,n,s,i]=g.hsv.exec(r)||[],e&&n&&s?{h:e,s:n,v:s,a:void 0!==i?i:1,format:"hsv"}:([,e,n,s,i]=g.hwb.exec(r)||[],e&&n&&s?{h:e,w:n,b:s,a:void 0!==i?i:1,format:"hwb"}:([,e,n,s,i]=g.hex8.exec(r)||[],e&&n&&s&&i?{r:H(e),g:H(n),b:H(s),a:w(i),format:"hex"}:([,e,n,s]=g.hex6.exec(r)||[],e&&n&&s?{r:H(e),g:H(n),b:H(s),format:"hex"}:([,e,n,s,i]=g.hex4.exec(r)||[],e&&n&&s&&i?{r:H(e+e),g:H(n+n),b:H(s+s),a:w(i+i),format:"hex"}:([,e,n,s]=g.hex3.exec(r)||[],!!(e&&n&&s)&&{r:H(e+e),g:H(n+n),b:H(s+s),format:"hex"})))))))}function k(t){let r={r:0,g:0,b:0},e=t,n=1,o=null,s=null,a=null,h=null,u=null,c=null,l=null,g=null,b=!1;const m="object"==typeof e&&e.format;let p=m&&i.includes(m)?m:"rgb";return"string"==typeof t&&(e=j(t),e&&(b=!0)),"object"==typeof e&&(d(e.r)&&d(e.g)&&d(e.b)&&(({r:l,g:g,b:u}=e),[l,g,u]=[l,g,u].map(t=>x(t,f(t)?100:255)),r={r:l,g:g,b:u},b=!0,p=e.format||"rgb"),d(e.h)&&d(e.s)&&d(e.v)&&(({h:c,s:o,v:s}=e),c=x(c,360),o=x(o,100),s=x(s,100),r=E(c,o,s),b=!0,p="hsv"),d(e.h)&&d(e.s)&&d(e.l)&&(({h:c,s:o,l:a}=e),c=x(c,360),o=x(o,100),a=x(a,100),r=T(c,o,a),b=!0,p="hsl"),d(e.h)&&d(e.w)&&d(e.b)&&(({h:c,w:h,b:u}=e),c=x(c,360),h=x(h,100),u=x(u,100),r=M(c,h,u),b=!0,p="hwb"),d(e.a)&&(n=e.a,n=f(""+n)||parseFloat(n)>1?x(n,100):n)),void 0===e&&(b=!0),{ok:b,format:p,r:r.r,g:r.g,b:r.b,a:S(n)}}class _{constructor(t,r){let e=t;const n=r&&i.includes(r)?r:"";e instanceof _&&(e=k(e));const{r:o,g:s,b:a,a:h,ok:u,format:c}=k(e);this.originalInput=t,this.r=o,this.g=s,this.b=a,this.a=h,this.ok=u,this.format=n||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:r,b:e}=this;let n=0,o=0,s=0;return n=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,s=e<=.03928?e/12.92:((e+.055)/1.055)**2.4,.2126*n+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:e}=this.toRgb();return(299*t+587*r+114*e)/1e3}toRgb(){let{r:t,g:r,b:e,a:n}=this;return[t,r,e]=[t,r,e].map(t=>s(255*t*100)/100),n=s(100*n)/100,{r:t,g:r,b:e,a:n}}toRgbString(){const{r:t,g:r,b:e,a:n}=this.toRgb(),[o,i,a]=[t,r,e].map(s);return 1===n?`rgb(${o}, ${i}, ${a})`:`rgba(${o}, ${i}, ${a}, ${n})`}toRgbCSS4String(){const{r:t,g:r,b:e,a:n}=this.toRgb(),[o,i,a]=[t,r,e].map(s);return`rgb(${o} ${i} ${a}${1===n?"":` / ${s(100*n)}%`})`}toHex(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return 1===o?N(r,e,n,t):I(r,e,n,o,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return I(r,e,n,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,v:i}=C(t,r,e);return{h:o,s:s,v:i,a:n}}toHsl(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,l:i}=R(t,r,e);return{h:o,s:s,l:i,a:n}}toHslString(){let{h:t,s:r,l:e,a:n}=this.toHsl();return t=s(360*t),r=s(100*r),e=s(100*e),n=s(100*n)/100,1===n?`hsl(${t}, ${r}%, ${e}%)`:`hsla(${t}, ${r}%, ${e}%, ${n})`}toHslCSS4String(){let{h:t,s:r,l:e,a:n}=this.toHsl();t=s(360*t),r=s(100*r),e=s(100*e),n=s(100*n);return`hsl(${t}deg ${r}% ${e}%${n<100?` / ${s(n)}%`:""})`}toHwb(){const{r:t,g:r,b:e,a:n}=this,{h:o,w:s,b:i}=y(t,r,e);return{h:o,w:s,b:i,a:n}}toHwbString(){let{h:t,w:r,b:e,a:n}=this.toHwb();t=s(360*t),r=s(100*r),e=s(100*e),n=s(100*n);return`hwb(${t}deg ${r}% ${e}%${n<100?` / ${s(n)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=S(t)),this}saturate(t){if("number"!=typeof t)return this;const{h:r,s:n,l:o}=this.toHsl(),{r:s,g:i,b:a}=T(r,p(n+t/100),o);return e(this,{r:s,g:i,b:a}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if("number"!=typeof t)return this;const{h:r,s:n,l:o}=this.toHsl(),{r:s,g:i,b:a}=T(r,n,p(o+t/100));return e(this,{r:s,g:i,b:a}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:r,s:n,l:o}=this.toHsl(),{r:s,g:i,b:a}=T(p((360*r+t)%360/360),n,o);return e(this,{r:s,g:i,b:a}),this}clone(){return new _(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}return e(_,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:a,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:h,CSS_UNIT2:u,PERMISSIVE_MATCH:l,matchers:g,isOnePointZero:b,isPercentage:f,isValidCSSUnit:d,isColorName:m,pad2:v,clamp01:p,bound01:x,boundAlpha:S,getRGBFromName:A,convertHexToDecimal:w,convertDecimalToHex:$,rgbToHsl:R,rgbToHex:N,rgbToHsv:C,rgbToHwb:y,rgbaToHex:I,hslToRgb:T,hsvToRgb:E,hueToRgb:F,hwbToRgb:M,parseIntFromHex:H,stringInputToObject:j,inputToRGB:k,roundPart:s,getElementStyle:r,setElementStyle:n,ObjectAssign:e}),_}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thednp/color-picker",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Modern Color Picker Web Component",
   "main": "dist/js/color-picker.min.js",
   "module": "dist/js/color-picker.esm.js",
@@ -75,7 +75,7 @@
   },
   "homepage": "http://thednp.github.io/color-picker",
   "dependencies": {
-    "@thednp/event-listener": "^1.0.2",
+    "@thednp/event-listener": "^1.0.4",
     "shorter-js": "^0.3.4"
   },
   "devDependencies": {
@@ -85,7 +85,7 @@
     "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
-    "cypress": "^9.6.0",
+    "cypress": "^9.7.0",
     "esbuild": "^0.14.30",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",

package/src/js/color-picker-element.js

@@ -62,13 +62,10 @@ class ColorPickerElement extends HTMLElement {
     self.append(input);
 
     /** @type {HTMLInputElement} */
-    // @ts-ignore - `HTMLInputElement` is `HTMLElement`
     self.input = input;
 
-    // @ts-ignore - `HTMLInputElement` is `HTMLElement`
     self.colorPicker = new ColorPicker(input);
 
-    // @ts-ignore - `shadowRoot` is defined in the constructor
     self.shadowRoot.append(createElement('slot'));
 
     // remove Attributes
@@ -100,7 +97,7 @@ class ColorPickerElement extends HTMLElement {
 ObjectAssign(ColorPickerElement, {
   Color,
   ColorPicker,
-  ColorPalette, // @ts-ignore
+  ColorPalette,
   getInstance: ColorPicker.getInstance,
   Version,
 });

package/src/js/color-picker.js

@@ -114,15 +114,12 @@ function toggleEventsOnShown(self, action) {
   const fn = action ? addListener : removeListener;
   const { input, colorMenu, parent } = self;
   const doc = getDocument(input);
-  // const win = getWindow(input);
   const win = doc.defaultView;
 
   fn(self.controls, pointerdownEvent, self.pointerDown);
   self.controlKnobs.forEach((x) => fn(x, keydownEvent, self.handleKnobs));
 
-  // @ts-ignore -- this is `Window`
   fn(win, scrollEvent, self.handleScroll);
-  // @ts-ignore -- this is `Window`
   fn(win, resizeEvent, self.update);
 
   [input, ...self.inputs].forEach((x) => fn(x, changeEvent, self.changeHandler));
@@ -216,7 +213,6 @@ export default class ColorPicker {
   constructor(target, config) {
     const self = this;
     /** @type {HTMLInputElement} */
-    // @ts-ignore
     const input = querySelector(target);
 
     // invalidate
@@ -227,7 +223,6 @@ export default class ColorPicker {
     if (!parent) throw new TypeError('ColorPicker requires a specific markup to work.');
 
     /** @type {HTMLElement} */
-    // @ts-ignore
     self.parent = parent;
 
     /** @type {number} */
@@ -321,26 +316,20 @@ export default class ColorPicker {
     const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
     // set main elements
     /** @type {HTMLElement} */
-    // @ts-ignore
     self.pickerToggle = querySelector('.picker-toggle', parent);
     /** @type {HTMLElement} */
-    // @ts-ignore
     self.menuToggle = querySelector('.menu-toggle', parent);
     /** @type {HTMLElement} */
-    // @ts-ignore
     self.colorPicker = colorPicker;
     /** @type {HTMLElement} */
-    // @ts-ignore
     self.colorMenu = colorMenu;
     /** @type {HTMLInputElement[]} */
-    // @ts-ignore
     self.inputs = [...getElementsByClassName('color-input', parent)];
     const [controls] = getElementsByClassName('color-controls', parent);
     self.controls = controls;
     /** @type {(HTMLElement | Element)[]} */
     self.controlKnobs = [...getElementsByClassName('knob', controls)];
     /** @type {(HTMLElement)[]} */
-    // @ts-ignore
     self.visuals = [...getElementsByClassName('visual-control', controls)];
 
     // update colour picker controls, inputs and visuals
@@ -493,7 +482,6 @@ export default class ColorPicker {
    * @this {ColorPicker}
    */
   handleFocusOut({ relatedTarget }) {
-    // @ts-ignore
     if (relatedTarget && !this.parent.contains(relatedTarget)) {
       this.hide(true);
     }
@@ -537,7 +525,6 @@ export default class ColorPicker {
    */
   menuKeyHandler(e) {
     const { target, code } = e;
-    // @ts-ignore
     const { previousElementSibling, nextElementSibling, parentElement } = target;
     const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
     const allSiblings = [...parentElement.children];
@@ -576,20 +563,20 @@ export default class ColorPicker {
 
   /**
    * The `ColorPicker` click event listener for the colour menu presets / defaults.
-   * @param {Partial<Event>} e
+   * @param {Event} e
    * @this {ColorPicker}
    */
   menuClickHandler(e) {
     const self = this;
-    /** @type {*} */
     const { target } = e;
     const { colorMenu } = self;
     const newOption = (getAttribute(target, 'data-value') || '').trim();
     // invalidate for targets other than color options
     if (!newOption.length) return;
     const currentActive = querySelector('li.active', colorMenu);
-    let newColor = nonColors.includes(newOption) ? 'white' : newOption;
-    newColor = newOption === 'transparent' ? 'rgba(0,0,0,0)' : newOption;
+    let newColor = newOption;
+    newColor = nonColors.includes(newColor) ? 'white' : newColor;
+    newColor = newColor === 'transparent' ? 'rgba(0,0,0,0)' : newColor;
 
     const {
       r, g, b, a,

package/src/js/color.js

@@ -640,7 +640,7 @@ function inputToRGB(input) {
       format = 'hwb';
     }
     if (isValidCSSUnit(color.a)) {
-      a = color.a; // @ts-ignore -- `parseFloat` works with numbers too
+      a = color.a;
       a = isPercentage(`${a}`) || parseFloat(a) > 1 ? bound01(a, 100) : a;
     }
   }
@@ -651,9 +651,6 @@ function inputToRGB(input) {
   return {
     ok,
     format,
-    // r: Math.min(255, Math.max(rgb.r, 0)),
-    // g: Math.min(255, Math.max(rgb.g, 0)),
-    // b: Math.min(255, Math.max(rgb.b, 0)),
     r: rgb.r,
     g: rgb.g,
     b: rgb.b,

package/src/js/index.js

@@ -1,3 +1,8 @@
+/**
+ * A single import is required to add the `CP` namespace to `src` sources.
+ * @typedef {import("../../types/index")}
+ */
+
 import ColorPicker from './color-picker';
 
 export default ColorPicker;

package/src/js/util/version.js

@@ -1,4 +1,3 @@
-// @ts-ignore
 import { version } from '../../../package.json';
 
 const Version = version;

package/src/js/version.js

@@ -1,4 +1,3 @@
-// @ts-ignore
 import { version } from '../../package.json';
 
 const Version = version;

package/src/scss/color-picker.scss

@@ -129,7 +129,7 @@ color-picker:focus,
 }
 .txt-light .color-preview:focus {
   color: var(--black-75);
-  box-shadow: 0 0 0 1px var(--black-50) inset, 0 0 0 3px var(--black-15);
+  box-shadow: 0 0 0 1px #000 inset, 0 0 0 3px var(--black-15);
 }
 .txt-light .color-preview::placeholder {
   color: var(--black-50);

package/types/cp.d.ts

@@ -334,12 +334,6 @@ declare module "color-picker/src/js/color-picker" {
         format: CP.ColorFormats;
         /** Shows the `ColorPicker` dropdown. */
         showPicker(): void;
-        /**
-         * The `Space` & `Enter` keys specific event listener.
-         * Toggle visibility of the `ColorPicker` / the presets menu, showing one will hide the other.
-         * @param {KeyboardEvent} e
-         * @this {ColorPicker}
-         */
         /**
          * Toggle the `ColorPicker` dropdown visibility.
          * @param {Event=} e
@@ -354,10 +348,10 @@ declare module "color-picker/src/js/color-picker" {
         toggleMenu(this: ColorPicker, e?: Event | undefined): void;
         /**
          * The `ColorPicker` click event listener for the colour menu presets / defaults.
-         * @param {Partial<Event>} e
+         * @param {Event} e
          * @this {ColorPicker}
          */
-        menuClickHandler(this: ColorPicker, e: Partial<Event>): void;
+        menuClickHandler(this: ColorPicker, e: Event): void;
         /**
          * The `ColorPicker` keyboard event listener for menu navigation.
          * @param {KeyboardEvent} e
@@ -366,21 +360,21 @@ declare module "color-picker/src/js/color-picker" {
         menuKeyHandler(this: ColorPicker, e: KeyboardEvent): void;
         /**
          * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
-         * @param {TouchEvent} e
+         * @param {PointerEvent} e
          * @this {ColorPicker}
          */
-        pointerDown(this: ColorPicker, e: TouchEvent): void;
+        pointerDown(this: ColorPicker, e: PointerEvent): void;
         /**
          * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
-         * @param {TouchEvent} e
+         * @param {PointerEvent} e
          */
-        pointerMove(e: TouchEvent): void;
+        pointerMove(e: PointerEvent): void;
         /**
          * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
-         * @param {TouchEvent} e
+         * @param {PointerEvent} e
          * @this {ColorPicker}
          */
-        pointerUp(this: ColorPicker, { target }: TouchEvent): void;
+        pointerUp(this: ColorPicker, { target }: PointerEvent): void;
         /**
          * Updates `ColorPicker` control positions on:
          * * initialization
@@ -422,7 +416,7 @@ declare module "color-picker/src/js/color-picker" {
         colorMenu: HTMLElement;
         /** @type {HTMLInputElement[]} */
         inputs: HTMLInputElement[];
-        controls: Element | HTMLElement;
+        controls: any;
         /** @type {(HTMLElement | Element)[]} */
         controlKnobs: (HTMLElement | Element)[];
         /** @type {(HTMLElement)[]} */
@@ -508,14 +502,34 @@ declare module "color-picker/src/js/color-picker" {
     import ColorPalette from "color-picker/src/js/color-palette";
     import Color from "color-picker/src/js/color";
 }
+declare module "color-picker/src/js/util/toggleCEAttr" {
+    /**
+     * A small utility to toggle `ColorPickerElement` attributes
+     * when `connectedCallback` or `disconnectedCallback` methods
+     * are called and helps the instance keep its value and settings instact.
+     *
+     * @param {CP.ColorPickerElement} self ColorPickerElement instance
+     * @param {Function=} callback when `true`, attributes are added
+     *
+     * @example
+     * const attributes = [
+     *   // essentials
+     *   'value', 'format',
+     *   // presets menus
+     *   'color-presets', 'color-keywords',
+     *   // labels
+     *   'color-labels', 'component-labels',
+     * ];
+     */
+    export default function toggleCEAttr(self: CP.ColorPickerElement, callback?: Function | undefined): void;
+}
 declare module "color-picker/src/js/color-picker-element" {
     export default ColorPickerElement;
     /**
      * `ColorPickerElement` Web Component.
      * @example
      * <label for="UNIQUE_ID">Label</label>
-     * <color-picker>
-     *   <input id="UNIQUE_ID" value="red" format="hex" class="color-preview btn-appearance">
+     * <color-picker data-id="UNIQUE_ID" data-value="red" data-format="hex">
      * </color-picker>
      * // or
      * <label for="UNIQUE_ID">Label</label>

package/types/index.d.ts

@@ -18,7 +18,6 @@ export {
   InitCallback,
 } from './source/types';
 
-import './cp';
 import { default as Color } from "color-picker/src/js/color";
 import { default as ColorPalette } from "color-picker/src/js/color-palette";
 import { default as ColorPicker } from "color-picker/src/js/color-picker";
@@ -43,6 +42,3 @@ declare module "@thednp/color-picker/src/js/color-picker" {
 declare module "@thednp/color-picker/src/js/color-picker-element" {
   export default ColorPickerElement;
 }
-
-export * as SHORTER from "shorter-js";
-export * as EventListener from "@thednp/event-listener";

package/types/source/source.ts

@@ -1,4 +1,3 @@
-// export { default as Color } from "../../types/source/types";
 export { default as Color } from "../../src/js/color";
 export { default as ColorPalette } from "../../src/js/color-palette";
 export { default as ColorPicker } from "../../src/js/color-picker";