@thednp/color-picker 0.0.1-alpha1 → 0.0.1-alpha2

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

@@ -1,2 +1,2 @@
-// ColorPickerElement v0.0.1alpha1 | thednp © 2022 | MIT-License
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).ColorPickerElement=t()}(this,(function(){"use strict";function e(e){return e instanceof HTMLElement?e.ownerDocument:e instanceof Window?e.document:window.document}const t=[Document,Element,HTMLElement],o=[Element,HTMLElement];function n(n,r){const a=t.some(e=>r instanceof e)?r:e();return o.some(e=>n instanceof e)?n:a.querySelector(n)}const r=(e,t)=>Object.assign(e,t);function a(t){if("string"==typeof t)return e().createElement(t);const{tagName:o}=t,n={...t},s=a(o);return delete n.tagName,r(s,n),s}const s=(e,t)=>{r(e.style,t)},i=["aliceblue","antiquewhite","aqua","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brown","burlywood","cadetblue","chartreuse","chocolate","coral","cornflowerblue","cornsilk","crimson","cyan","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkgrey","darkkhaki","darkmagenta","darkolivegreen","darkorange","darkorchid","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkslategrey","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dimgrey","dodgerblue","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","ghostwhite","goldenrod","gold","gray","green","greenyellow","grey","honeydew","hotpink","indianred","indigo","ivory","khaki","lavenderblush","lavender","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgoldenrodyellow","lightgray","lightgreen","lightgrey","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslategray","lightslategrey","lightsteelblue","lightyellow","lime","limegreen","linen","magenta","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurple","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","oldlace","olive","olivedrab","orange","orangered","orchid","palegoldenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","rebeccapurple","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","seagreen","seashell","sienna","silver","skyblue","slateblue","slategray","slategrey","snow","springgreen","steelblue","tan","teal","thistle","tomato","turquoise","violet","wheat","white","whitesmoke","yellow","yellowgreen"],l="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",c=`[\\s|\\(]+(${l})[,|\\s]+(${l})[,|\\s]+(${l})\\s*\\)?`,h=`[\\s|\\(]+(${l})[,|\\s]+(${l})[,|\\s]+(${l})[,|\\s]+(${l})\\s*\\)?`,u={CSS_UNIT:new RegExp(l),rgb:new RegExp("rgb"+c),rgba:new RegExp("rgba"+h),hsl:new RegExp("hsl"+c),hsla:new RegExp("hsla"+h),hsv:new RegExp("hsv"+c),hsva:new RegExp("hsva"+h),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 d(e){return"string"==typeof e&&e.includes(".")&&1===parseFloat(e)}function g(e){return"string"==typeof e&&e.includes("%")}function p(e){return Boolean(u.CSS_UNIT.exec(String(e)))}function m(e,t){let o=e;return d(e)&&(o="100%"),o=360===t?o:Math.min(t,Math.max(0,parseFloat(o))),g(o)&&(o=parseInt(String(o*t),10)/100),Math.abs(o-t)<1e-6?1:(o=360===t?(o<0?o%t+t:o%t)/parseFloat(String(t)):o%t/parseFloat(String(t)),o)}function f(e){let t=parseFloat(e);return(Number.isNaN(t)||t<0||t>1)&&(t=1),t}function b(e){return Math.min(1,Math.max(0,e))}function w(t){const o=e(n).head;var n;s(o,{color:t});const r=function(e,t){const o=getComputedStyle(e);return t in o?o[t]:""}(o,"color");return s(o,{color:""}),r}function v(e){return e<=1?100*Number(e)+"%":e}function k(e){return 1===e.length?"0"+e:String(e)}function x(e,t,o){return{r:255*m(e,255),g:255*m(t,255),b:255*m(o,255)}}function y(e,t,o){const n=m(e,255),r=m(t,255),a=m(o,255),s=Math.max(n,r,a),i=Math.min(n,r,a);let l=0,c=0;const h=(s+i)/2;if(s===i)c=0,l=0;else{const e=s-i;switch(c=h>.5?e/(2-s-i):e/(s+i),s){case n:l=(r-a)/e+(r<a?6:0);break;case r:l=(a-n)/e+2;break;case a:l=(n-r)/e+4}l/=6}return{h:l,s:c,l:h}}function S(e,t,o){let n=o;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?e+6*n*(t-e):n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}function M(e,t,o){let n=0,r=0,a=0;const s=m(e,360),i=m(t,100),l=m(o,100);if(0===i)r=l,a=l,n=l;else{const e=l<.5?l*(1+i):l+i-l*i,t=2*l-e;n=S(t,e,s+1/3),r=S(t,e,s),a=S(t,e,s-1/3)}return{r:255*n,g:255*r,b:255*a}}function C(e,t,o){const n=m(e,255),r=m(t,255),a=m(o,255),s=Math.max(n,r,a),i=Math.min(n,r,a);let l=0;const c=s,h=s-i,u=0===s?0:h/s;if(s===i)l=0;else{switch(s){case n:l=(r-a)/h+(r<a?6:0);break;case r:l=(a-n)/h+2;break;case a:l=(n-r)/h+4}l/=6}return{h:l,s:u,v:c}}function $(e,t,o){const n=6*m(e,360),r=m(t,100),a=m(o,100),s=Math.floor(n),i=n-s,l=a*(1-r),c=a*(1-i*r),h=a*(1-(1-i)*r),u=s%6;return{r:255*[a,c,l,l,h,a][u],g:255*[h,a,a,c,l,l][u],b:255*[l,l,h,a,a,c][u]}}function L(e,t,o){return[k(Math.round(e).toString(16)),k(Math.round(t).toString(16)),k(Math.round(o).toString(16))].join("")}function N(e){return P(e)/255}function P(e){return parseInt(e,16)}function H(e){return{r:e>>16,g:(65280&e)>>8,b:255&e}}function E(e){let t=e.trim().toLowerCase();if(0===t.length)return{r:0,g:0,b:0,a:0};let o=!1;if(i.includes(t))t=w(t),o=!0;else if("transparent"===t)return{r:0,g:0,b:0,a:0,format:"name"};let n=u.rgb.exec(t);return n?{r:n[1],g:n[2],b:n[3]}:(n=u.rgba.exec(t),n?{r:n[1],g:n[2],b:n[3],a:n[4]}:(n=u.hsl.exec(t),n?{h:n[1],s:n[2],l:n[3]}:(n=u.hsla.exec(t),n?{h:n[1],s:n[2],l:n[3],a:n[4]}:(n=u.hsv.exec(t),n?{h:n[1],s:n[2],v:n[3]}:(n=u.hsva.exec(t),n?{h:n[1],s:n[2],v:n[3],a:n[4]}:(n=u.hex8.exec(t),n?{r:P(n[1]),g:P(n[2]),b:P(n[3]),a:N(n[4]),format:o?"name":"hex8"}:(n=u.hex6.exec(t),n?{r:P(n[1]),g:P(n[2]),b:P(n[3]),format:o?"name":"hex"}:(n=u.hex4.exec(t),n?{r:P(n[1]+n[1]),g:P(n[2]+n[2]),b:P(n[3]+n[3]),a:N(n[4]+n[4]),format:o?"name":"hex8"}:(n=u.hex3.exec(t),!!n&&{r:P(n[1]+n[1]),g:P(n[2]+n[2]),b:P(n[3]+n[3]),format:o?"name":"hex"})))))))))}function A(e){let t,o={r:0,g:0,b:0},n=e,r=null,a=null,s=null,i=!1,l="hex";return"string"==typeof e&&(n=E(e),n&&(i=!0)),"object"==typeof n&&(p(n.r)&&p(n.g)&&p(n.b)?(o=x(n.r,n.g,n.b),i=!0,l="%"===(""+n.r).slice(-1)?"prgb":"rgb"):p(n.h)&&p(n.s)&&p(n.v)?(r=v(n.s),a=v(n.v),o=$(n.h,r,a),i=!0,l="hsv"):p(n.h)&&p(n.s)&&p(n.l)&&(r=v(n.s),s=v(n.l),o=M(n.h,r,s),i=!0,l="hsl"),"a"in n&&(t=n.a)),{ok:i,format:n.format||l,r:Math.min(255,Math.max(o.r,0)),g:Math.min(255,Math.max(o.g,0)),b:Math.min(255,Math.max(o.b,0)),a:f(t)}}const T={format:"hex"};class R{constructor(e,t){let o=e;const n="object"==typeof t?r(T,t):r({},T);o instanceof R&&(o=A(o)),"number"==typeof o&&(o=H(o));const{r:a,g:s,b:i,a:l,ok:c,format:h}=A(o);this.originalInput=o,this.r=a,this.g=s,this.b=i,this.a=l,this.ok=c,this.roundA=Math.round(100*this.a)/100,this.format=n.format||h,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))}get isValid(){return this.ok}get isDark(){return this.brightness<128}get luminance(){const{r:e,g:t,b:o}=this;let n=0,r=0,a=0;const s=e/255,i=t/255,l=o/255;return n=s<=.03928?s/12.92:((s+.055)/1.055)**2.4,r=i<=.03928?i/12.92:((i+.055)/1.055)**2.4,a=l<=.03928?l/12.92:((l+.055)/1.055)**2.4,.2126*n+.7152*r+.0722*a}get brightness(){const{r:e,g:t,b:o}=this;return(299*e+587*t+114*o)/1e3}toRgb(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}}toRgbString(){const e=Math.round(this.r),t=Math.round(this.g),o=Math.round(this.b);return 1===this.a?`rgb(${e},${t},${o})`:`rgba(${e},${t},${o},${this.roundA})`}toHex(){return L(this.r,this.g,this.b)}toHexString(){return"#"+this.toHex()}toHsv(){const{h:e,s:t,v:o}=C(this.r,this.g,this.b);return{h:360*e,s:t,v:o,a:this.a}}toHsl(){const{h:e,s:t,l:o}=y(this.r,this.g,this.b);return{h:360*e,s:t,l:o,a:this.a}}toHslString(){const e=this.toHsl(),t=Math.round(e.h),o=Math.round(100*e.s),n=Math.round(100*e.l);return 1===this.a?`hsl(${t},${o}%,${n}%)`:`hsla(${t},${o}%,${n}%,${this.roundA})`}setAlpha(e){return this.a=f(e),this.roundA=Math.round(100*this.a)/100,this}saturate(e){if(!e)return this;const t=this.toHsl();return t.s+=e/100,t.s=b(t.s),new R(t)}desaturate(e){return e?this.saturate(-e):this}greyscale(){return this.desaturate(100)}clone(){return new R(this)}toString(){const{format:e}=this;return"rgb"===e?this.toRgbString():"hsl"===e?this.toHslString():this.toHexString()}}r(R,{colorNames:i,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:l,PERMISSIVE_MATCH3:c,PERMISSIVE_MATCH4:h,matchers:u,isOnePointZero:d,isPercentage:g,isValidCSSUnit:p,bound01:m,boundAlpha:f,clamp01:b,getHexFromColorName:w,convertToPercentage:v,convertHexToDecimal:N,pad2:k,rgbToRgb:x,rgbToHsl:y,rgbToHex:L,rgbToHsv:C,hslToRgb:M,hsvToRgb:$,hue2rgb:S,parseIntFromHex:P,numberInputToObject:H,stringInputToObject:E,inputToRGB:A});const F={};function D(e){const t=this,{type:o}=e;(F[o]?[...F[o]]:[]).forEach(n=>{const[r,a]=n;[...a].forEach(n=>{if(r===t){const[t,a]=n;t.apply(r,[e]),a&&a.once&&O(r,o,t,a)}})})}const I=(e,t,o,n)=>{F[t]||(F[t]=new Map);const r=F[t];r.has(e)||r.set(e,new Map);const a=r.get(e),{size:s}=a;a&&a.set(o,n),s||e.addEventListener(t,D,n)},O=(e,t,o,n)=>{const r=F[t],a=r&&r.get(e),s=a&&a.get(o),{options:i}=void 0!==s?s:{options:n};a&&a.has(o)&&a.delete(o),!r||a&&a.size||r.delete(e),r&&r.size||delete F[t],a&&a.size||e.removeEventListener(t,D,i)},q="ArrowDown",Y="ArrowUp",_="ArrowLeft",V="ArrowRight",K="Enter",G="Space",{userAgentData:U}=navigator,X=U,{userAgent:j}=navigator,B=j,z=/iPhone|iPad|iPod|Android/i;let W=!1;W=X?X.brands.some(e=>z.test(e.brand)):z.test(B);const J=W;let Z=1;const Q=new Map;function ee(e,t){const{width:o,height:n,top:r,right:a,bottom:s,left:i}=e.getBoundingClientRect();let l=1,c=1;if(t&&e instanceof HTMLElement){const{offsetWidth:t,offsetHeight:r}=e;l=t>0&&Math.round(o)/t||1,c=r>0&&Math.round(n)/r||1}return{width:o/l,height:n/c,top:r/c,right:a/l,bottom:s/c,left:i/l,x:i/l,y:r/c}}function te(o,n){return(n&&t.some(e=>n instanceof e)?n:e()).querySelectorAll(o)}function oe(t,o){if("string"==typeof o)return e().createElementNS(t,o);const{tagName:n}=o,a={...o},s=oe(t,n);return delete a.tagName,r(s,a),s}const ne=new Map,re={set:(e,t,o)=>{const r=n(e);if(!r)return;ne.has(t)||ne.set(t,new Map);ne.get(t).set(r,o)},getAllFor:e=>ne.get(e)||null,get:(e,t)=>{const o=n(e),r=re.getAllFor(t);return o&&r&&r.get(o)||null},remove:(e,t)=>{const o=n(e),r=ne.get(t);r&&o&&(r.delete(o),0===r.size&&ne.delete(t))}};function ae(e,t){return e.classList.contains(t)}function se(e,t){e.classList.add(t)}function ie(e,t){e.classList.remove(t)}const le=(e,t,o)=>e.setAttribute(t,o),ce=(e,t)=>e.getAttribute(t),he="v-hidden";function ue(e,t,o,n,r){const s=`appearance${e}_${t}`,i=1===e?"color-pointer":"color-slider",l=a({tagName:"div",className:"color-control"});le(l,"role","presentation"),l.append(a({id:s,tagName:"label",className:"color-label "+he,ariaLive:"polite"}),a({tagName:"canvas",className:"visual-control"+e,ariaHidden:"true",width:""+o,height:""+n}));const c=a({tagName:"div",className:i+" knob"});return le(c,"aria-labelledby",r||s),le(c,"tabindex","0"),l.append(c),l}const de=["transparent","currentColor","inherit","initial"],ge=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"],pe={pickerLabel:"Colour Picker",toggleLabel:"Select colour",menuLabel:"Select colour preset",requiredLabel:"Required",formatLabel:"Colour Format",formatHEX:"Hexadecimal Format",formatRGB:"RGB Format",formatHSL:"HSL Format",alphaLabel:"Alpha",appearanceLabel:"Colour Appearance",hexLabel:"Hexadecimal",hueLabel:"Hue",saturationLabel:"Saturation",lightnessLabel:"Lightness",redLabel:"Red",greenLabel:"Green",blueLabel:"Blue"};function me(e,t){const o=t?I:O,{input:n,pickerToggle:r,menuToggle:a}=e;o(n,"focusin",e.showPicker),o(r,"click",e.togglePicker),o(n,"keydown",e.keyHandler),a&&o(a,"click",e.toggleMenu)}function fe(e){const{input:t,parent:o,format:n,id:s,componentLabels:i,keywords:l}=e,c=ce(t,"value")||"#fff",{toggleLabel:h,menuLabel:u,formatLabel:d,pickerLabel:g,appearanceLabel:p}=i,m=de.includes(c)?"#fff":c;e.color=new R(m,{format:n});const f=J?150:230,b=J?150:230,w=J?" mobile":"",v="hsl"===n?`appearance_${s} appearance1_${s}`:"appearance1_"+s,k="hsl"===n?"appearance2_"+s:`appearance_${s} appearance2_${s}`,x=a({tagName:"button",className:"picker-toggle button-appearance",ariaExpanded:"false",ariaHasPopup:"true",ariaLive:"polite"});le(x,"tabindex","-1"),x.append(a({tagName:"span",className:he,innerText:"Open Color Picker"}));const y=a({tagName:"div",className:"color-dropdown picker"+w});le(y,"aria-labelledby",`picker-label-${s} format-label-${s}`),le(y,"role","group"),y.append(a({tagName:"label",className:he,ariaHidden:"true",id:"picker-label-"+s,innerText:""+g}),a({tagName:"label",className:he,ariaHidden:"true",id:"format-label-"+s,innerText:""+d}),a({tagName:"label",className:"color-appearance "+he,ariaHidden:"true",ariaLive:"polite",id:"appearance_"+s,innerText:""+p}));const S=a({tagName:"div",className:"color-controls "+n});S.append(ue(1,s,f,b,v),ue(2,s,21,b,k)),"hex"!==n&&S.append(ue(3,s,21,b));const M=function(e){const{format:t,id:o}=e,n=a({tagName:"div",className:"color-form "+t});let s=["hex"];return"rgb"===t?s=["red","green","blue","alpha"]:"hsl"===t&&(s=["hue","saturation","lightness","alpha"]),s.forEach(e=>{const[s]="hex"===t?["#"]:(i=e,i.toUpperCase()).split("");var i;const l=`color_${t}_${e}_${o}`,c=a({tagName:"label"});le(c,"for",l),c.append(a({tagName:"span",ariaHidden:"true",innerText:s+":"}),a({tagName:"span",className:he,innerText:""+e}));const h=a({tagName:"input",id:l,type:"hex"===t?"text":"number",value:"alpha"===e?"1":"0",className:"color-input "+e,autocomplete:"off",spellcheck:"false"});if("hex"!==t){let o="1",n="0.01";"alpha"!==e&&("rgb"===t?(o="255",n="1"):"hue"===e?(o="360",n="1"):(o="100",n="1")),r(h,{min:"0",max:o,step:n})}n.append(c,h)}),n}(e);if(y.append(S,M),o.append(x,y),l){const e=l,r=a({tagName:"div",className:"color-dropdown menu"+w}),s=a({tagName:"ul",ariaLabel:""+u,className:"color-menu"});le(s,"role","listbox"),r.append(s),e.forEach(e=>{const o=e.trim(),r=new R(o,{format:n}).toString()===ce(t,"value"),i=a({tagName:"li",className:"color-option"+(r?" active":""),ariaSelected:r?"true":"false",innerText:""+e});le(i,"role","option"),le(i,"tabindex","0"),le(i,"data-value",""+o),s.append(i)});const i=a({tagName:"button",className:"menu-toggle button-appearance",ariaExpanded:"false",ariaHasPopup:"true"}),c=encodeURI("http://www.w3.org/2000/svg"),d=oe(c,{tagName:"svg"});le(d,"xmlns",c),le(d,"aria-hidden","true"),le(d,"viewBox","0 0 512 512");const g=oe(c,{tagName:"path"});le(g,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),le(g,"fill","#fff"),d.append(g),i.append(a({tagName:"span",className:he,innerText:""+h}),d),o.append(i,r)}l&&de.includes(c)&&(e.value=c)}function be(e,t){const o=t?I:O,n="ontouchstart"in document?{down:"touchstart",move:"touchmove",up:"touchend"}:{down:"mousedown",move:"mousemove",up:"mouseup"};o(e.controls,n.down,e.pointerDown),e.controlKnobs.forEach(t=>o(t,"keydown",e.handleKnobs)),o(window,"scroll",e.handleScroll),[e.input,...e.inputs].forEach(t=>o(t,"change",e.changeHandler)),e.colorMenu&&(o(e.colorMenu,"click",e.menuClickHandler),o(e.colorMenu,"keydown",e.menuKeyHandler)),o(document,n.move,e.pointerMove),o(document,n.up,e.pointerUp),o(window,"keyup",e.handleDismiss),o(e.parent,"focusout",e.handleFocusOut)}function we(e){var t,o;t=e.input,o=new CustomEvent("colorpicker.change"),t.dispatchEvent(o)}function ve(e,t){const o=t?ae:ie;return!!e&&["show","show-top"][t?"some":"forEach"](t=>o(e,t))}class ke{constructor(e){const t=this;if(t.input=n(e),!t.input)throw new TypeError(`ColorPicker target ${e} cannot be found.`);const{input:o}=t;if(t.parent=function e(t,o){return t?t.closest(o)||e(t.getRootNode().host,o):null}(o,".color-picker,color-picker"),!t.parent)throw new TypeError("ColorPicker requires a specific markup to work.");t.id=function(e,t){Z+=1;let o=Q.get(e),n=Z;if(t&&t.length)if(o){const e=o.get(t);Number.isNaN(e)?o.set(t,n):n=e}else Q.set(e,new Map),o=Q.get(e),o.set(t,n);else Number.isNaN(o)?Q.set(e,n):n=o;return n}(o,"color-picker"),t.dragElement=null,t.isOpen=!1,t.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},t.colorLabels={},t.keywords=!1,t.color=new R("white",{format:t.format}),t.componentLabels=r({},pe);const{componentLabels:a,colorLabels:s,keywords:i}=o.dataset,l=a?JSON.parse(a):{};t.componentLabels=r(t.componentLabels,l);const c=s&&17===s.split(",").length?s.split(","):ge;ge.forEach((e,o)=>{t.colorLabels[e]=c[o]}),"false"!==i&&(t.keywords=i?i.split(","):de),t.showPicker=t.showPicker.bind(t),t.togglePicker=t.togglePicker.bind(t),t.toggleMenu=t.toggleMenu.bind(t),t.menuClickHandler=t.menuClickHandler.bind(t),t.menuKeyHandler=t.menuKeyHandler.bind(t),t.pointerDown=t.pointerDown.bind(t),t.pointerMove=t.pointerMove.bind(t),t.pointerUp=t.pointerUp.bind(t),t.handleScroll=t.handleScroll.bind(t),t.handleFocusOut=t.handleFocusOut.bind(t),t.changeHandler=t.changeHandler.bind(t),t.handleDismiss=t.handleDismiss.bind(t),t.keyHandler=t.keyHandler.bind(t),t.handleKnobs=t.handleKnobs.bind(t),fe(t);const{parent:h}=t;t.pickerToggle=n(".picker-toggle",h),t.menuToggle=n(".menu-toggle",h),t.colorMenu=n(".color-dropdown.menu",h),t.colorPicker=n(".color-dropdown.picker",h),t.controls=n(".color-controls",h),t.inputs=[...te(".color-input",h)],t.controlKnobs=[...te(".knob",h)],t.visuals=[...te("canvas",t.controls)],t.knobLabels=[...te(".color-label",h)],t.appearance=n(".color-appearance",h);const[u,d,g]=t.visuals;t.width1=u.width,t.height1=u.height,t.width2=d.width,t.height2=d.height,t.ctx1=u.getContext("2d"),t.ctx2=d.getContext("2d"),t.ctx1.rect(0,0,t.width1,t.height1),t.ctx2.rect(0,0,t.width2,t.height2),t.width3=0,t.height3=0,"hex"!==t.format&&(t.width3=g.width,t.height3=g.height,this.ctx3=g.getContext("2d"),t.ctx3.rect(0,0,t.width3,t.height3)),this.setControlPositions(),this.setColorAppearence(),this.updateInputs(!0),this.updateControls(),this.updateVisuals(),me(t,!0),re.set(o,"color-picker",t)}get value(){return this.input.value}set value(e){this.input.value=e}get required(){return e=this.input,t="required",e.hasAttribute(t);var e,t}get format(){return ce(this.input,"format")||"hex"}get name(){return ce(this.input,"name")}get label(){return n(`[for="${this.input.id}"]`)}get includeNonColor(){return this.keywords instanceof Array&&this.keywords.some(e=>de.includes(e))}get hex(){return this.color.toHex()}get hsv(){return this.color.toHsv()}get hsl(){return this.color.toHsl()}get rgb(){return this.color.toRgb()}get brightness(){return this.color.brightness}get luminance(){return this.color.luminance}get isDark(){const{rgb:e,brightness:t}=this;return t<120&&e.a>.33}get isValid(){const e=this.input.value;return""!==e&&new R(e).isValid}updateVisuals(){const{color:e,format:t,controlPositions:o,width1:n,width2:r,width3:a,height1:s,height2:i,height3:l,ctx1:c,ctx2:h,ctx3:u}=this,{r:d,g:g,b:p}=e;if("hsl"!==t){const e=Math.round(o.c2y/i*360);c.fillStyle=new R(`hsl(${e},100%,50%})`).toRgbString(),c.fillRect(0,0,n,s);const t=h.createLinearGradient(0,0,n,0);t.addColorStop(0,"rgba(255,255,255,1)"),t.addColorStop(1,"rgba(255,255,255,0)"),c.fillStyle=t,c.fillRect(0,0,n,s);const a=h.createLinearGradient(0,0,0,s);a.addColorStop(0,"rgba(0,0,0,0)"),a.addColorStop(1,"rgba(0,0,0,1)"),c.fillStyle=a,c.fillRect(0,0,n,s);const l=h.createLinearGradient(0,0,0,s);l.addColorStop(0,"rgba(255,0,0,1)"),l.addColorStop(.17,"rgba(255,255,0,1)"),l.addColorStop(.34,"rgba(0,255,0,1)"),l.addColorStop(.51,"rgba(0,255,255,1)"),l.addColorStop(.68,"rgba(0,0,255,1)"),l.addColorStop(.85,"rgba(255,0,255,1)"),l.addColorStop(1,"rgba(255,0,0,1)"),h.fillStyle=l,h.fillRect(0,0,r,i)}else{const t=c.createLinearGradient(0,0,n,0),r=Math.round(100*(1-o.c2y/i));t.addColorStop(0,new R("rgba(255,0,0,1)").desaturate(100-r).toRgbString()),t.addColorStop(.17,new R("rgba(255,255,0,1)").desaturate(100-r).toRgbString()),t.addColorStop(.34,new R("rgba(0,255,0,1)").desaturate(100-r).toRgbString()),t.addColorStop(.51,new R("rgba(0,255,255,1)").desaturate(100-r).toRgbString()),t.addColorStop(.68,new R("rgba(0,0,255,1)").desaturate(100-r).toRgbString()),t.addColorStop(.85,new R("rgba(255,0,255,1)").desaturate(100-r).toRgbString()),t.addColorStop(1,new R("rgba(255,0,0,1)").desaturate(100-r).toRgbString()),c.fillStyle=t,c.fillRect(0,0,n,s);const u=c.createLinearGradient(0,0,0,s);u.addColorStop(0,"rgba(255,255,255,1)"),u.addColorStop(.5,"rgba(255,255,255,0)"),c.fillStyle=u,c.fillRect(0,0,n,s);const m=c.createLinearGradient(0,0,0,s);m.addColorStop(.5,"rgba(0,0,0,0)"),m.addColorStop(1,"rgba(0,0,0,1)"),c.fillStyle=m,c.fillRect(0,0,n,s);const f=h.createLinearGradient(0,0,0,i),b=e.clone().greyscale().toRgb();f.addColorStop(0,`rgba(${d},${g},${p},1)`),f.addColorStop(1,`rgba(${b.r},${b.g},${b.b},1)`),h.fillStyle=f,h.fillRect(0,0,a,l)}if("hex"!==t){u.clearRect(0,0,a,l);const e=u.createLinearGradient(0,0,0,l);e.addColorStop(0,`rgba(${d},${g},${p},1)`),e.addColorStop(1,`rgba(${d},${g},${p},0)`),u.fillStyle=e,u.fillRect(0,0,a,l)}}handleFocusOut({relatedTarget:e}){e&&!this.parent.contains(e)&&this.hide(!0)}handleDismiss({code:e}){const t=this;t.isOpen&&"Escape"===e&&t.hide()}handleScroll(e){const{activeElement:t}=document;(J&&this.dragElement||t&&this.controlKnobs.includes(t))&&(e.stopPropagation(),e.preventDefault()),this.updateDropdownPosition()}menuKeyHandler(e){const{target:t,code:o}=e;[q,Y].includes(o)?e.preventDefault():[K,G].includes(o)&&this.menuClickHandler({target:t})}menuClickHandler(e){const t=this,{target:o}=e,{format:n}=t,r=(ce(o,"data-value")||"").trim(),a=t.colorMenu.querySelector("li.active"),s=de.includes(r)?"white":r;var i;t.color=new R(s,{format:n}),t.setControlPositions(),t.setColorAppearence(),t.updateInputs(!0),t.updateControls(),t.updateVisuals(),a&&(ie(a,"active"),i="aria-selected",a.removeAttribute(i)),a!==o&&(se(o,"active"),le(o,"aria-selected","true"),de.includes(r)&&(t.value=r,we(t)))}pointerDown(e){const t=this,{type:o,target:r,touches:a,pageX:s,pageY:i}=e,{visuals:l,controlKnobs:c,format:h}=t,[u,d,g]=l,[p,m,f]=c,b="canvas"===r.tagName?r:n("canvas",r.parentElement),w=ee(b),v="touchstart"===o?a[0].pageX:s,k="touchstart"===o?a[0].pageY:i,x=v-window.pageXOffset-w.left,y=k-window.pageYOffset-w.top;r===u||r===p?(t.dragElement=b,t.changeControl1({offsetX:x,offsetY:y})):r===d||r===m?(t.dragElement=b,t.changeControl2({offsetY:y})):"hex"===h||r!==g&&r!==f||(t.dragElement=b,t.changeAlpha({offsetY:y})),e.preventDefault()}pointerUp({target:e}){const t=this,o=document.getSelection();t.dragElement||o.toString().length||t.parent.contains(e)||t.hide(),t.dragElement=null}pointerMove(e){const t=this,{dragElement:o,visuals:n,format:r}=t,[a,s,i]=n,{type:l,touches:c,pageX:h,pageY:u}=e;if(!o)return;const d=ee(o),g="touchmove"===l?c[0].pageX:h,p="touchmove"===l?c[0].pageY:u,m=g-window.pageXOffset-d.left,f=p-window.pageYOffset-d.top;o===a&&t.changeControl1({offsetX:m,offsetY:f}),o===s&&t.changeControl2({offsetY:f}),o===i&&"hex"!==r&&t.changeAlpha({offsetY:f})}handleKnobs(e){const{target:t,code:o}=e,n=this;if(![Y,q,_,V].includes(o))return;e.preventDefault();const{activeElement:r}=document,{controlKnobs:a}=n,s=a.find(e=>e===r),[i,l,c]=a;if(s){let r=0,a=0;t===i?([_,V].includes(o)?n.controlPositions.c1x+=o===V?1:-1:[Y,q].includes(o)&&(n.controlPositions.c1y+=o===q?1:-1),r=n.controlPositions.c1x,a=n.controlPositions.c1y,n.changeControl1({offsetX:r,offsetY:a})):t===l?(n.controlPositions.c2y+=[q,V].includes(o)?1:-1,a=n.controlPositions.c2y,n.changeControl2({offsetY:a})):t===c&&(n.controlPositions.c3y+=[q,V].includes(o)?1:-1,a=n.controlPositions.c3y,n.changeAlpha({offsetY:a})),n.setColorAppearence(),n.updateInputs(),n.updateControls(),n.updateVisuals(),n.handleScroll(e)}}changeHandler(){const e=this;let t;const{activeElement:o}=document,{inputs:n,format:r,value:a,input:s}=e,[i,l,c,h]=n,u=e.includeNonColor&&de.includes(a);(o===s||o&&n.includes(o))&&(t=o===s?u?"white":a:"hex"===r?i.value:"hsl"===r?`hsla(${i.value},${l.value}%,${c.value}%,${h.value})`:`rgba(${n.map(e=>e.value).join(",")})`,e.color=new R(t,{format:r}),e.setControlPositions(),e.setColorAppearence(),e.updateInputs(),e.updateControls(),e.updateVisuals(),o===s&&u&&(e.value=a))}changeControl1(e){let[t,o]=[0,0];const{offsetX:n,offsetY:r}=e,{format:a,controlPositions:s,height1:i,height2:l,height3:c,width1:h}=this;n>h?t=h:n>=0&&(t=n),r>i?o=i:r>=0&&(o=r);const u="hsl"!==a?Math.round(s.c2y/l*360):Math.round(t/h*360),d="hsl"!==a?Math.round(t/h*100):Math.round(100*(1-s.c2y/l)),g=Math.round(100*(1-o/i)),p="hex"!==a?Math.round(100*(1-s.c3y/c))/100:1,m="hsl"!==a?"hsva":"hsla";this.color=new R(`${m}(${u},${d}%,${g}%,${p})`,{format:a}),this.controlPositions.c1x=t,this.controlPositions.c1y=o,this.setColorAppearence(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeControl2(e){const{offsetY:t}=e,{format:o,width1:n,height1:r,height2:a,height3:s,controlPositions:i}=this;let l=0;t>a?l=a:t>=0&&(l=t);const c="hsl"!==o?Math.round(l/a*360):Math.round(i.c1x/n*360),h="hsl"!==o?Math.round(i.c1x/n*100):Math.round(100*(1-l/a)),u=Math.round(100*(1-i.c1y/r)),d="hex"!==o?Math.round(100*(1-i.c3y/s))/100:1,g="hsl"!==o?"hsva":"hsla";this.color=new R(`${g}(${c},${h}%,${u}%,${d})`,{format:o}),this.controlPositions.c2y=l,this.setColorAppearence(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeAlpha(e){const{height3:t}=this,{offsetY:o}=e;let n=0;o>t?n=t:o>=0&&(n=o);const r=Math.round(100*(1-n/t));this.color.setAlpha(r/100),this.controlPositions.c3y=n,this.updateInputs(),this.updateControls(),this.updateVisuals()}updateDropdownPosition(){const{input:e,colorPicker:t,colorMenu:o}=this,n=ee(e),{offsetHeight:r}=e,a=document.documentElement.clientHeight,s=ve(t,!0)?t:o,{offsetHeight:i}=s,l=a-n.bottom,c=n.top,h=n.top+i+r>a,u=n.top-i<0;ae(s,"show")&&l<c&&h&&(ie(s,"show"),se(s,"show-top")),ae(s,"show-top")&&l>c&&u&&(ie(s,"show-top"),se(s,"show"))}setControlPositions(){const e=this,{hsv:t,hsl:o,format:n,height1:r,height2:a,height3:s,width1:i}=e,l=o.h,c="hsl"!==n?t.s:o.s,h="hsl"!==n?t.v:o.l,u=t.a;e.controlPositions.c1x="hsl"!==n?c*i:l/360*i,e.controlPositions.c1y=(1-h)*r,e.controlPositions.c2y="hsl"!==n?l/360*a:(1-c)*a,"hex"!==n&&(e.controlPositions.c3y=(1-u)*s)}setColorAppearence(){const e=this,{componentLabels:t,colorLabels:o,hsl:n,hsv:r,hex:a,format:s,knobLabels:i}=e,{lightnessLabel:l,saturationLabel:c,hueLabel:h,alphaLabel:u,appearanceLabel:d,hexLabel:g}=t;let{requiredLabel:p}=t;const[m,f,b]=i,w=Math.round(n.h),v=r.a,k="hsl"===s?n.s:r.s,x=Math.round(100*k),y=Math.round(100*n.l),S=100*r.v;let M;if(100===y&&0===x)M=o.white;else if(0===y)M=o.black;else if(0===x)M=o.grey;else if(w<15||w>=345)M=o.red;else if(w>=15&&w<45)M=S>80&&x>80?o.orange:o.brown;else if(w>=45&&w<75){const e=w>=54&&w<75&&S<80;M=w>46&&w<54&&S<80&&x>90?o.gold:o.yellow,M=e?o.olive:M}else w>=75&&w<155?M=S<68?o.green:o.lime:w>=155&&w<175?M=o.teal:w>=175&&w<195?M=o.cyan:w>=195&&w<255?M=o.blue:w>=255&&w<270?M=o.violet:w>=270&&w<295?M=o.magenta:w>=295&&w<345&&(M=o.pink);if("hsl"===s?(m.innerText=`${h}: ${w}°. ${l}: ${y}%`,f.innerText=`${c}: ${x}%`):(m.innerText=`${l}: ${y}%. ${c}: ${x}%`,f.innerText=`${h}: ${w}°`),"hex"!==s){const e=Math.round(100*v);b.innerText=`${u}: ${e}%`}e.appearance.innerText=`${d}: ${M}.`;const C="hex"===s?`${g} ${a.split("").join(" ")}.`:e.value.toUpperCase();if(e.label){const t=e.label.innerText.replace("*","").trim(),[o]=e.pickerToggle.children;p=e.required?" "+p:"",o.innerText=`${t}: ${C}${p}`}}updateControls(){const{format:e,controlKnobs:t,controlPositions:o}=this,[n,r,a]=t;n.style.transform=`translate3d(${o.c1x-3}px,${o.c1y-3}px,0)`,r.style.transform=`translate3d(0,${o.c2y-3}px,0)`,"hex"!==e&&(a.style.transform=`translate3d(0,${o.c3y-3}px,0)`)}updateInputs(e){const t=this,{value:o,rgb:n,hsl:a,hsv:s,format:i,parent:l,input:c,inputs:h}=t,[u,d,g,p]=h,m=a.a,f=Math.round(a.h),b=Math.round(100*a.s),w="hsl"===i?a.l:s.v,v=Math.round(100*w);let k;"hex"===i?(k=t.color.toHexString(),u.value=t.hex):"hsl"===i?(k=t.color.toHslString(),u.value=""+f,d.value=""+b,g.value=""+v,p.value=""+m):"rgb"===i&&(k=t.color.toRgbString(),u.value=""+n.r,d.value=""+n.g,g.value=""+n.b,p.value=""+m),t.value=""+k,r(c.style,{backgroundColor:k}),t.isDark?(ae(l,"light")&&ie(l,"light"),ae(l,"dark")||se(l,"dark")):(ae(l,"dark")&&ie(l,"dark"),ae(l,"light")||se(l,"light")),e||k===o||we(t)}keyHandler(e){const t=this,{menuToggle:o}=t,{activeElement:n}=document,{code:r}=e;[K,G].includes(r)&&(o&&n===o||!n)&&(e.preventDefault(),n?t.toggleMenu():t.togglePicker(e))}togglePicker(e){e.preventDefault();const t=this,o=ve(t.colorPicker,!0);t.isOpen&&o?t.hide(!0):t.showPicker()}showPicker(){ve(this.colorMenu),se(this.colorPicker,"show"),this.input.focus(),this.show(),le(this.pickerToggle,"aria-expanded","true")}toggleMenu(){const e=this,t=ve(e.colorMenu,!0);e.isOpen&&t?e.hide(!0):function(e){ve(e.colorPicker),se(e.colorMenu,"show"),e.show(),le(e.menuToggle,"aria-expanded","true")}(e)}show(){const e=this;e.isOpen||(se(e.parent,"open"),be(e,!0),e.updateDropdownPosition(),e.isOpen=!0)}hide(e){const t=this;if(t.isOpen){const{pickerToggle:o,colorMenu:n}=t;be(t),ie(t.parent,"open"),ve(t.colorPicker),le(o,"aria-expanded","false"),n&&(ve(n),le(t.menuToggle,"aria-expanded","false")),t.isValid||(t.value=t.color.toString()),t.isOpen=!1,e||o.focus()}}dispose(){const{input:e,parent:t}=this;this.hide(!0),me(this),[...t.children].forEach(t=>{t!==e&&t.remove()}),re.remove(e,"color-picker")}}r(ke,{Color:R,getInstance:e=>{return t=e,o="color-picker",re.get(t,o);var t,o},init:e=>new ke(e),selector:'[data-function="color-picker"]'});class xe extends HTMLElement{constructor(){super(),this.colorPicker=null,this.input=n("input",this),this.isDisconnected=!0,this.attachShadow({mode:"open"})}get value(){return this.input.value}get color(){return this.colorPicker&&this.colorPicker.color}connectedCallback(){this.colorPicker?this.isDisconnected&&(this.isDisconnected=!1):(this.colorPicker=new ke(this.input),this.isDisconnected=!1,this.shadowRoot&&this.shadowRoot.append(a("slot")))}disconnectedCallback(){this.colorPicker&&this.colorPicker.dispose(),this.isDisconnected=!0}}return r(xe,{Color:R,ColorPicker:ke}),customElements.define("color-picker",xe),xe}));
+// ColorPickerElement v0.0.1alpha2 | thednp © 2022 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).ColorPickerElement=e()}(this,(function(){"use strict";function t(t){return t instanceof HTMLElement?t.ownerDocument:t instanceof Window?t.document:window.document}const e=[Document,Element,HTMLElement];const o=(t,e)=>Object.assign(t,e);function n(e){if("string"==typeof e)return t().createElement(e);const{tagName:r}=e,a={...e},s=n(r);return delete a.tagName,o(s,a),s}const r=(t,e,o)=>t.setAttribute(e,o),a=(t,e)=>t.getAttribute(e);function s(t,e){const o=getComputedStyle(t);return e in o?o[e]:""}const i=(t,e)=>{o(t.style,e)},l=["transparent","currentColor","inherit","revert","initial"],c=["rgb","hex","hsl","hsb","hwb"],u="deg|rad|grad|turn",h=`[-\\+]?\\d*\\.?\\d+(?:${u})?`,g="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",d=`(?:${g})|(?:${h})`,p=`[\\s|\\(]+(${d})[,|\\s]+(${g})[,|\\s]+(${g})[,|\\s|\\/\\s]*(${g})?\\s*\\)?`,b={CSS_UNIT:new RegExp(d),hwb:new RegExp("hwb"+p),rgb:new RegExp("rgb(?:a)?"+p),hsl:new RegExp("hsl(?:a)?"+p),hsv:new RegExp("hsv(?:a)?"+p),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 f(t){return(""+t).includes(".")&&1===parseFloat(t)}function m(t){return(""+t).includes("%")}function w(t){return Boolean(b.CSS_UNIT.exec(String(t)))}function v(t,e){let o=t;return f(o)&&(o="100%"),o=360===e?o:Math.min(e,Math.max(0,parseFloat(o))),function(t){return u.split("|").some(e=>(""+t).includes(e))}(t)&&(o=t.replace(new RegExp(u),"")),m(o)&&(o=parseInt(String(o*e),10)/100),Math.abs(o-e)<1e-6?1:(o=360===e?(o<0?o%e+e:o%e)/parseFloat(String(e)):o%e/parseFloat(String(e)),o)}function x(t){let e=parseFloat(""+t);return(Number.isNaN(e)||e<0||e>1)&&(e=1),e}function $(t){return Math.min(1,Math.max(0,t))}function k(e){const o=t(n).head;var n;i(o,{color:e});const r=s(o,"color");return i(o,{color:""}),r}function y(t){return Math.round(255*t).toString(16)}function M(t){return S(t)/255}function S(t){return parseInt(t,16)}function A(t){return 1===t.length?"0"+t:String(t)}function H(t,e,o){const n=t/255,r=e/255,a=o/255,s=Math.max(n,r,a),i=Math.min(n,r,a);let l=0,c=0;const u=(s+i)/2;if(s===i)c=0,l=0;else{const t=s-i;switch(c=u>.5?t/(2-s-i):t/(s+i),s){case n:l=(r-a)/t+(r<a?6:0);break;case r:l=(a-n)/t+2;break;case a:l=(n-r)/t+4}l/=6}return{h:l,s:c,l:u}}function P(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 N(t,e,o){const n=t/255,r=e/255,a=o/255;let s=0,i=0;const l=Math.min(n,r,a),c=Math.max(n,r,a),u=1-c;if(c===l)return{h:0,w:l,b:u};n===l?(s=r-a,i=3):(s=r===l?a-n:n-r,i=r===l?5:1);const h=(i-s/(c-l))/6;return{h:1===h?0:h,w:l,b:u}}function E(t,e,o){if(e+o>=1){const t=e/(e+o)*255;return{r:t,g:t,b:t}}let{r:n,g:r,b:a}=L(t,1,.5);return[n,r,a]=[n,r,a].map(t=>t/255*(1-e-o)+e).map(t=>255*t),{r:n,g:r,b:a}}function L(t,e,o){let n=0,r=0,a=0;if(0===e)r=o,a=o,n=o;else{const s=o<.5?o*(1+e):o+e-o*e,i=2*o-s;n=P(i,s,t+1/3),r=P(i,s,t),a=P(i,s,t-1/3)}return[n,r,a]=[n,r,a].map(t=>255*t),{r:n,g:r,b:a}}function C(t,e,o){const n=t/255,r=e/255,a=o/255,s=Math.max(n,r,a),i=Math.min(n,r,a);let l=0;const c=s,u=s-i,h=0===s?0:u/s;if(s===i)l=0;else{switch(s){case n:l=(r-a)/u+(r<a?6:0);break;case r:l=(a-n)/u+2;break;case a:l=(n-r)/u+4}l/=6}return{h:l,s:h,v:c}}function T(t,e,o){const n=6*t,r=e,a=o,s=Math.floor(n),i=n-s,l=a*(1-r),c=a*(1-i*r),u=a*(1-(1-i)*r),h=s%6;return{r:255*[a,c,l,l,u,a][h],g:255*[u,a,a,c,l,l][h],b:255*[l,l,u,a,a,c][h]}}function R(t,e,o,n){const r=[A(Math.round(t).toString(16)),A(Math.round(e).toString(16)),A(Math.round(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 D(t,e,o,n,r){const a=[A(Math.round(t).toString(16)),A(Math.round(e).toString(16)),A(Math.round(o).toString(16)),A(y(n))];return r&&a[0].charAt(0)===a[0].charAt(1)&&a[1].charAt(0)===a[1].charAt(1)&&a[2].charAt(0)===a[2].charAt(1)&&a[3].charAt(0)===a[3].charAt(1)?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join("")}function F(t){return{r:t>>16,g:(65280&t)>>8,b:255&t}}function O(t){let e=t.trim().toLowerCase();if(0===e.length)return{r:0,g:0,b:0,a:0};let o=!1;if(function(t){return!["#",...c].some(e=>t.includes(e))&&!/[0-9]/.test(t)}(e))e=k(e),o=!0;else if(l.includes(e)){const t="transparent"===e,o=t?0:255;return{r:o,g:o,b:o,a:t?0:1,format:"rgb"}}let[,n,r,a,s]=b.rgb.exec(e)||[];return n&&r&&a?{r:n,g:r,b:a,a:void 0!==s?s:1,format:"rgb"}:([,n,r,a,s]=b.hsl.exec(e)||[],n&&r&&a?{h:n,s:r,l:a,a:void 0!==s?s:1,format:"hsl"}:([,n,r,a,s]=b.hsv.exec(e)||[],n&&r&&a?{h:n,s:r,v:a,a:void 0!==s?s:1,format:"hsv"}:([,n,r,a,s]=b.hwb.exec(e)||[],n&&r&&a?{h:n,w:r,b:a,a:void 0!==s?s:1,format:"hwb"}:([,n,r,a,s]=b.hex8.exec(e)||[],n&&r&&a&&s?{r:S(n),g:S(r),b:S(a),a:M(s),format:o?"rgb":"hex"}:([,n,r,a]=b.hex6.exec(e)||[],n&&r&&a?{r:S(n),g:S(r),b:S(a),format:o?"rgb":"hex"}:([,n,r,a,s]=b.hex4.exec(e)||[],n&&r&&a&&s?{r:S(n+n),g:S(r+r),b:S(a+a),a:M(s+s),format:o?"rgb":"hex"}:([,n,r,a]=b.hex3.exec(e)||[],!!(n&&r&&a)&&{r:S(n+n),g:S(r+r),b:S(a+a),format:o?"rgb":"hex"})))))))}function K(t){let e={r:0,g:0,b:0},o=t,n=1,r=null,a=null,s=null,i=null,l=null,c=null,u=!1,h="hex";return"string"==typeof t&&(o=O(t),o&&(u=!0)),"object"==typeof o&&(w(o.r)&&w(o.g)&&w(o.b)?(e={r:o.r,g:o.g,b:o.b},u=!0,h="rgb"):w(o.h)&&w(o.s)&&w(o.v)?(({h:c,s:r,v:a}=o),c="number"==typeof c?c:v(c,360),r="number"==typeof r?r:v(r,100),a="number"==typeof a?a:v(a,100),e=T(c,r,a),u=!0,h="hsv"):w(o.h)&&w(o.s)&&w(o.l)?(({h:c,s:r,l:s}=o),c="number"==typeof c?c:v(c,360),r="number"==typeof r?r:v(r,100),s="number"==typeof s?s:v(s,100),e=L(c,r,s),u=!0,h="hsl"):w(o.h)&&w(o.w)&&w(o.b)&&(({h:c,w:i,b:l}=o),c="number"==typeof c?c:v(c,360),i="number"==typeof i?i:v(i,100),l="number"==typeof l?l:v(l,100),e=E(c,i,l),u=!0,h="hwb"),w(o.a)&&(n=o.a,n=m(""+n)?v(n,100):n)),{ok:u,format:o.format||h,r:Math.min(255,Math.max(e.r,0)),g:Math.min(255,Math.max(e.g,0)),b:Math.min(255,Math.max(e.b,0)),a:x(n)}}class I{constructor(t,e){let o=t;const n=e&&c.includes(e)?e:"rgb";o instanceof I&&(o=K(o)),"number"==typeof o&&(o=F(o));const{r:r,g:a,b:s,a:i,ok:l,format:u}=K(o);this.originalInput=o,this.r=r,this.g=a,this.b=s,this.a=i,this.ok=l,this.format=n||u,r<1&&(this.r=Math.round(r)),a<1&&(this.g=Math.round(a)),s<1&&(this.b=Math.round(s))}get isValid(){return this.ok}get isDark(){return this.brightness<128}get luminance(){const{r:t,g:e,b:o}=this;let n=0,r=0,a=0;const s=t/255,i=e/255,l=o/255;return n=s<=.03928?s/12.92:((s+.055)/1.055)**2.4,r=i<=.03928?i/12.92:((i+.055)/1.055)**2.4,a=l<=.03928?l/12.92:((l+.055)/1.055)**2.4,.2126*n+.7152*r+.0722*a}get brightness(){const{r:t,g:e,b:o}=this;return(299*t+587*e+114*o)/1e3}toRgb(){const{r:t,g:e,b:o,a:n}=this,[r,a,s]=[t,e,o].map(t=>Math.round(t));return{r:r,g:a,b:s,a:Math.round(100*n)/100}}toRgbString(){const{r:t,g:e,b:o,a:n}=this.toRgb();return 1===n?`rgb(${t}, ${e}, ${o})`:`rgba(${t}, ${e}, ${o}, ${n})`}toRgbCSS4String(){const{r:t,g:e,b:o,a:n}=this.toRgb();return`rgb(${t} ${e} ${o}${1===n?"":` / ${Math.round(100*n)}%`})`}toHex(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return 1===r?R(e,o,n,t):D(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 D(e,o,n,r,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:e,b:o,a:n}=this.toRgb(),{h:r,s:a,v:s}=C(t,e,o);return{h:r,s:a,v:s,a:n}}toHsl(){const{r:t,g:e,b:o,a:n}=this.toRgb(),{h:r,s:a,l:s}=H(t,e,o);return{h:r,s:a,l:s,a:n}}toHslString(){let{h:t,s:e,l:o,a:n}=this.toHsl();return t=Math.round(360*t),e=Math.round(100*e),o=Math.round(100*o),n=Math.round(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=Math.round(360*t),e=Math.round(100*e),o=Math.round(100*o),n=Math.round(100*n);return`hsl(${t}deg ${e}% ${o}%${n<100?` / ${Math.round(n)}%`:""})`}toHwb(){const{r:t,g:e,b:o,a:n}=this,{h:r,w:a,b:s}=N(t,e,o);return{h:r,w:a,b:s,a:n}}toHwbString(){let{h:t,w:e,b:o,a:n}=this.toHwb();t=Math.round(360*t),e=Math.round(100*e),o=Math.round(100*o),n=Math.round(100*n);return`hwb(${t}deg ${e}% ${o}%${n<100?` / ${Math.round(n)}%`:""})`}setAlpha(t){return this.a=x(t),this}saturate(t){if("number"!=typeof t)return this;const{h:e,s:n,l:r}=this.toHsl(),{r:a,g:s,b:i}=L(e,$(n+t/100),r);return o(this,{r:a,g:s,b:i}),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:n,l:r}=this.toHsl(),{r:a,g:s,b:i}=L(e,n,$(r+t/100));return o(this,{r:a,g:s,b:i}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:e,s:n,l:r}=this.toHsl(),{r:a,g:s,b:i}=L($((360*e+t)%360/360),n,r);return o(this,{r:a,g:s,b:i}),this}clone(){return new I(this)}toString(t){const{format:e}=this;return"hex"===e?this.toHexString(t):"hsl"===e?this.toHslString():"hwb"===e?this.toHwbString():this.toRgbString()}}o(I,{ANGLES:u,CSS_ANGLE:h,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:g,CSS_UNIT2:d,PERMISSIVE_MATCH:p,matchers:b,isOnePointZero:f,isPercentage:m,isValidCSSUnit:w,pad2:A,clamp01:$,bound01:v,boundAlpha:x,getRGBFromName:k,convertHexToDecimal:M,convertDecimalToHex:y,rgbToHsl:H,rgbToHex:R,rgbToHsv:C,rgbToHwb:N,rgbaToHex:D,hslToRgb:L,hsvToRgb:T,hueToRgb:P,hwbToRgb:E,parseIntFromHex:S,numberInputToObject:F,stringInputToObject:O,inputToRGB:K,ObjectAssign:o});const V={};function U(t){const e=this,{type:o}=t;(V[o]?[...V[o]]:[]).forEach(n=>{const[r,a]=n;[...a].forEach(n=>{if(r===e){const[e,a]=n;e.apply(r,[t]),a&&a.once&&_(r,o,e,a)}})})}const B=(t,e,o,n)=>{V[e]||(V[e]=new Map);const r=V[e];r.has(t)||r.set(t,new Map);const a=r.get(t),{size:s}=a;a&&a.set(o,n),s||t.addEventListener(e,U,n)},_=(t,e,o,n)=>{const r=V[e],a=r&&r.get(t),s=a&&a.get(o),{options:i}=void 0!==s?s:{options:n};a&&a.has(o)&&a.delete(o),!r||a&&a.size||r.delete(t),r&&r.size||delete V[e],a&&a.size||t.removeEventListener(e,U,i)},j="ArrowDown",W="ArrowUp",z="ArrowLeft",G="ArrowRight",X="Enter",Y="Space",{userAgentData:q}=navigator,J=q,{userAgent:Z}=navigator,Q=Z,tt=/iPhone|iPad|iPod|Android/i;let et=!1;et=J?J.brands.some(t=>tt.test(t.brand)):tt.test(Q);const ot=et;let nt=0,rt=0;const at=new Map;function st(t,e){const{width:o,height:n,top:r,right:a,bottom:s,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:a/l,bottom:s/c,left:i/l,x:i/l,y:r/c}}const it=[Element,HTMLElement];function lt(o,n){const r=e.some(t=>n instanceof t)?n:t();return it.some(t=>o instanceof t)?o:r.querySelector(o)}function ct(o,n){return(n&&e.some(t=>n instanceof t)?n:t()).getElementsByClassName(o)}function ut(e,n){if("string"==typeof n)return t().createElementNS(e,n);const{tagName:r}=n,a={...n},s=ut(e,r);return delete a.tagName,o(s,a),s}const ht=new Map,gt={set:(t,e,o)=>{const n=lt(t);if(!n)return;ht.has(e)||ht.set(e,new Map);ht.get(e).set(n,o)},getAllFor:t=>ht.get(t)||null,get:(t,e)=>{const o=lt(t),n=gt.getAllFor(e);return o&&n&&n.get(o)||null},remove:(t,e)=>{const o=lt(t),n=ht.get(e);n&&o&&(n.delete(o),0===n.size&&ht.delete(e))}};function dt(t){return"true"===t||"false"!==t&&(Number.isNaN(+t)?""===t||"null"===t?null:t:+t)}const pt=t=>Object.keys(t);const bt=t=>t.focus();function ft(t,e){return t.classList.contains(e)}function mt(t,e){t.classList.add(e)}function wt(t,e){t.classList.remove(e)}const vt=(t,e)=>t.removeAttribute(e),xt={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"},$t=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"];class kt{constructor(...t){let e=0,o=12,n=10,r=[.5];if(3===t.length)[e,o,n]=t;else{if(2!==t.length)throw TypeError("The ColorPalette requires minimum 2 arguments");[o,n]=t}const a=[],s=360/o,i=100/(n+(n%2?0:1))/100,l=Math.round((n-(n%2?1:0))/2);for(let t=0;t<l;t+=1)r=[...r,.5+i*(t+1)];for(let t=0;t<n-l-1;t+=1)r=[.5-i*(t+1),...r];for(let t=0;t<o;t+=1){const o=(e+t*s)%360/360;r.forEach(t=>{a.push(new I({h:o,s:1,l:t}).toHexString())})}this.hue=e,this.hueSteps=o,this.lightSteps=n,this.colors=a}}function yt(t,e,o){const{input:s,format:l,componentLabels:c}=t,{defaultsLabel:u,presetsLabel:h}=c,g="color-options"===o,d=e instanceof kt,p=g?h:u;let b=d?e.colors:e;b=b instanceof Array?b:[];const f=b.length,{lightSteps:m}=d?e:{lightSteps:null};let w=m||Math.max(...[5,6,7,8,9,10].filter(t=>f>2*t&&!(f%t)));w=Number.isFinite(w)?w:5;const v=g&&f>w;let x=1;x=v&&f<27?2:x,x=f>=27?3:x,x=f>=36?4:x,x=f>=45?5:x;const $=v&&f>x*w;let k=o;k+=$?" scrollable":"",k+=v?" multiline":"";const y=v?"1px":"0.25rem";let M=v?1.75:2;M=f%10||!v?M:1.5;const S=(x-(f<27?1:2)||1)*M+"rem",A=`calc(${x} * ${M}rem + ${x-1} * ${y})`,H=`repeat(${w}, ${M}rem)`,P=`repeat(auto-fill, ${M}rem)`,N=n({tagName:"ul",className:k});if(r(N,"role","listbox"),r(N,"aria-label",""+p),g){if($){const t="this.style.height=";r(N,"onmouseout",`${t}'${S}'`),r(N,"onmouseover",`${t}'${A}'`)}i(N,{height:$?S:"",gridTemplateColumns:H,gridTemplateRows:P,gap:y})}return b.forEach(t=>{const[e,o]=t.trim().split(":"),c=new I(e,l).toString()===a(s,"value"),u=n({tagName:"li",className:"color-option"+(c?" active":""),innerText:""+(o||t)});r(u,"tabindex","0"),r(u,"data-value",""+e),r(u,"role","option"),r(u,"aria-selected",c?"true":"false"),g&&i(u,{width:M+"rem",height:M+"rem",backgroundColor:t}),N.append(u)}),N}function Mt(t){try{JSON.parse(t)}catch(t){return!1}return!0}const St={componentLabels:xt,colorLabels:$t,format:"rgb",colorPresets:void 0,colorKeywords:l};function At(t){const{input:e,parent:s,format:i,id:c,componentLabels:u,colorKeywords:h,colorPresets:g}=t,d=a(e,"value")||"#fff",{toggleLabel:p,pickerLabel:b,formatLabel:f,hexLabel:m}=u,w=l.includes(d)?"#fff":d;t.color=new I(w,i);const v=ot?" mobile":"",x="hex"===i?m:i.toUpperCase(),$=n({id:"picker-btn-"+c,tagName:"button",className:"picker-toggle btn-appearance"});r($,"aria-expanded","false"),r($,"aria-haspopup","true"),$.append(n({tagName:"span",className:"v-hidden",innerText:`${b}. ${f}: ${x}`}));const k=n({tagName:"div",className:"color-dropdown picker"+v});r(k,"aria-labelledby","picker-btn-"+c),r(k,"role","group");const y=function(t){const{format:e,componentLabels:o}=t,{hueLabel:a,alphaLabel:s,lightnessLabel:i,saturationLabel:l,whitenessLabel:c,blacknessLabel:u}=o,h="hsl"===e?360:100,g="hsl"===e?100:360;let d="hsl"===e?`${a} & ${i}`:`${i} & ${l}`;d="hwb"===e?`${c} & ${u}`:d;const p="hsl"===e?""+l:""+a,b=n({tagName:"div",className:"color-controls "+e});return[{i:1,c:"color-pointer",l:d,min:0,max:h},{i:2,c:"color-slider",l:p,min:0,max:g},{i:3,c:"color-slider",l:s,min:0,max:100}].forEach(t=>{const{i:e,c:o,l:a,min:s,max:i}=t,l=n({tagName:"div",className:"color-control"});r(l,"role","presentation"),l.append(n({tagName:"div",className:"visual-control visual-control"+e}));const c=n({tagName:"div",className:o+" knob",ariaLive:"polite"});r(c,"aria-label",a),r(c,"role","slider"),r(c,"tabindex","0"),r(c,"aria-valuemin",""+s),r(c,"aria-valuemax",""+i),l.append(c),b.append(l)}),b}(t),M=function(t){const{format:e,id:a,componentLabels:s}=t,i=n({tagName:"div",className:"color-form "+e});let l=["hex"];return"rgb"===e?l=["red","green","blue","alpha"]:"hsl"===e?l=["hue","saturation","lightness","alpha"]:"hwb"===e&&(l=["hue","whiteness","blackness","alpha"]),l.forEach(t=>{const[l]="hex"===e?["#"]:(c=t,c.toUpperCase()).split("");var c;const u=`color_${e}_${t}_${a}`,h=s[t+"Label"],g=n({tagName:"label"});r(g,"for",u),g.append(n({tagName:"span",ariaHidden:"true",innerText:l+":"}),n({tagName:"span",className:"v-hidden",innerText:h}));const d=n({tagName:"input",id:u,type:"hex"===e?"text":"number",value:"alpha"===t?"100":"0",className:"color-input "+t});r(d,"autocomplete","off"),r(d,"spellcheck","false");let p="100",b="1";"alpha"!==t&&("rgb"===e?(p="255",b="1"):"hue"===t&&(p="360",b="1")),o(d,{min:"0",max:p,step:b}),i.append(g,d)}),i}(t);if(k.append(y,M),e.before($),s.append(k),h||g){const e=n({tagName:"div",className:"color-dropdown scrollable menu"+v});if(g instanceof Array&&g.length||g instanceof kt&&g.colors){const o=yt(t,g,"color-options");e.append(o)}if(h&&h.length){const o=yt(t,h,"color-defaults");e.append(o)}const o=n({tagName:"button",className:"menu-toggle btn-appearance"});r(o,"tabindex","-1"),r(o,"aria-expanded","false"),r(o,"aria-haspopup","true");const a=encodeURI("http://www.w3.org/2000/svg"),i=ut(a,{tagName:"svg"});r(i,"xmlns",a),r(i,"viewBox","0 0 512 512"),r(i,"aria-hidden","true");const l=ut(a,{tagName:"path"});r(l,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),r(l,"fill","#fff"),i.append(l),o.append(n({tagName:"span",className:"v-hidden",innerText:""+p}),i),s.append(o,e)}h&&l.includes(d)&&(t.value=d),r(e,"tabindex","-1")}function Ht(t,e){const o=e?B:_,{input:n,pickerToggle:r,menuToggle:a}=t;o(n,"focusin",t.showPicker),o(r,"click",t.togglePicker),o(n,"keydown",t.keyToggle),a&&o(a,"click",t.toggleMenu)}function Pt(e,o){const n=o?B:_,{input:r,colorMenu:a,parent:s}=e,i=t(r),l=function(t){if(null==t)return window;if(!(t instanceof Window)){const{ownerDocument:e}=t;return e&&e.defaultView||window}return t}(r),c="ontouchstart"in i?{down:"touchstart",move:"touchmove",up:"touchend"}:{down:"mousedown",move:"mousemove",up:"mouseup"};n(e.controls,c.down,e.pointerDown),e.controlKnobs.forEach(t=>n(t,"keydown",e.handleKnobs)),n(l,"scroll",e.handleScroll),n(l,"resize",e.update),[r,...e.inputs].forEach(t=>n(t,"change",e.changeHandler)),a&&(n(a,"click",e.menuClickHandler),n(a,"keydown",e.menuKeyHandler)),n(i,c.move,e.pointerMove),n(i,c.up,e.pointerUp),n(s,"focusout",e.handleFocusOut),n(l,"keyup",e.handleDismiss)}function Nt(t){var e,o;e=t.input,o=new CustomEvent("colorpicker.change"),e.dispatchEvent(o)}function Et(t){t&&["bottom","top"].forEach(e=>wt(t,e))}function Lt(t,e){const{colorPicker:o,colorMenu:n,menuToggle:a,pickerToggle:s,parent:i}=t,l=e===o,c=l?n:o,u=l?a:s,h=l?s:a;ft(i,"open")||mt(i,"open"),c&&(wt(c,"show"),Et(c)),mt(e,"bottom"),e.offsetHeight,mt(e,"show"),l&&t.update(),t.show(),r(h,"aria-expanded","true"),u&&r(u,"aria-expanded","false")}class Ct{constructor(t,e){const n=this,r=lt(t);if(!r)throw new TypeError(`ColorPicker target ${t} cannot be found.`);n.input=r;const s=function t(e,o){return e?e.closest(o)||t(e.getRootNode().host,o):null}(r,".color-picker,color-picker");if(!s)throw new TypeError("ColorPicker requires a specific markup to work.");n.parent=s,n.id=function t(e,o){let n=o?nt:rt;if(o){const r=t(e),a=at.get(r)||new Map;at.has(r)||at.set(r,a),a.has(o)?n=a.get(o):(a.set(o,n),nt+=1)}else{const t=e.id||e;at.has(t)?n=at.get(t):(at.set(t,n),rt+=1)}return n}(r,"color-picker"),n.dragElement=null,n.isOpen=!1,n.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},n.colorLabels={},n.colorKeywords=void 0,n.colorPresets=void 0;const{format:i,componentLabels:l,colorLabels:c,colorKeywords:u,colorPresets:h}=function(t,e,o,n){const r={...t.dataset},s={},i={};return pt(r).forEach(t=>{const e=n&&t.includes(n)?t.replace(n,"").replace(/[A-Z]/,t=>t.toLowerCase()):t;i[e]=dt(r[t])}),pt(o).forEach(t=>{o[t]=dt(o[t])}),pt(e).forEach(n=>{s[n]=n in o?o[n]:n in i?i[n]:"title"===n?a(t,"title"):e[n]}),s}(this.isCE?s:r,St,e||{});let g=$t;c instanceof Array&&17===c.length?g=c:c&&17===c.split(",").length&&(g=c.split(",")),$t.forEach((t,e)=>{n.colorLabels[t]=g[e].trim()});const d=o({},xt),p=l&&Mt(l)?JSON.parse(l):l||{};if(n.componentLabels=o(d,p),n.color=new I("white",i),n.format=i,u instanceof Array?n.colorKeywords=u:"string"==typeof u&&u.length&&(n.colorKeywords=u.split(",")),h instanceof Array)n.colorPresets=h;else if("string"==typeof h&&h.length)if(Mt(h)){const{hue:t,hueSteps:e,lightSteps:o}=JSON.parse(h);n.colorPresets=new kt(t,e,o)}else n.colorPresets=h.split(",").map(t=>t.trim());n.showPicker=n.showPicker.bind(n),n.togglePicker=n.togglePicker.bind(n),n.toggleMenu=n.toggleMenu.bind(n),n.menuClickHandler=n.menuClickHandler.bind(n),n.menuKeyHandler=n.menuKeyHandler.bind(n),n.pointerDown=n.pointerDown.bind(n),n.pointerMove=n.pointerMove.bind(n),n.pointerUp=n.pointerUp.bind(n),n.update=n.update.bind(n),n.handleScroll=n.handleScroll.bind(n),n.handleFocusOut=n.handleFocusOut.bind(n),n.changeHandler=n.changeHandler.bind(n),n.handleDismiss=n.handleDismiss.bind(n),n.keyToggle=n.keyToggle.bind(n),n.handleKnobs=n.handleKnobs.bind(n),At(n);const[b,f]=ct("color-dropdown",s);n.pickerToggle=lt(".picker-toggle",s),n.menuToggle=lt(".menu-toggle",s),n.colorPicker=b,n.colorMenu=f,n.inputs=[...ct("color-input",s)];const[m]=ct("color-controls",s);n.controls=m,n.controlKnobs=[...ct("knob",m)],n.visuals=[...ct("visual-control",m)],n.update(),Ht(n,!0),gt.set(r,"color-picker",n)}get value(){return this.input.value}set value(t){this.input.value=t}get includeNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>l.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 I(t).isValid}updateVisuals(){const{format:t,controlPositions:e,visuals:o}=this,[n,r,a]=o,{offsetWidth:s,offsetHeight:l}=n,c="hsl"===t?e.c1x/s:e.c2y/l,{r:u,g:h,b:g}=I.hslToRgb(c,1,.5),d="linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)",p=1-e.c3y/l,b=Math.round(100*p)/100;if("hsl"!==t){const t=new I({h:c,s:1,l:.5,a:p}).toRgbString(),e="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%)";i(n,{background:`linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${b}) 100%),\n        linear-gradient(to right, rgba(255,255,255,${b}) 0%, ${t} 100%),\n        ${d}`}),i(r,{background:e})}else{const t=Math.round(e.c2y/l*100),o=new I({r:255,g:0,b:0,a:p}).saturate(-t).toRgbString(),a=new I({r:255,g:255,b:0,a:p}).saturate(-t).toRgbString(),s=new I({r:0,g:255,b:0,a:p}).saturate(-t).toRgbString(),c=new I({r:0,g:255,b:255,a:p}).saturate(-t).toRgbString(),f=new I({r:0,g:0,b:255,a:p}).saturate(-t).toRgbString(),m=new I({r:255,g:0,b:255,a:p}).saturate(-t).toRgbString(),w=new I({r:255,g:0,b:0,a:p}).saturate(-t).toRgbString();i(n,{background:`${`linear-gradient(rgba(255,255,255,${b}) 0%, rgba(255,255,255,0) 50%),\n        linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,${b}) 100%)`},${`linear-gradient(to right,\n        ${o} 0%, ${a} 16.67%, ${s} 33.33%, ${c} 50%,\n        ${f} 66.67%, ${m} 83.33%, ${w} 100%)`},${d}`});const{r:v,g:x,b:$}=new I({r:u,g:h,b:g}).greyscale().toRgb();i(r,{background:`linear-gradient(rgb(${u},${h},${g}) 0%, rgb(${v},${x},${$}) 100%)`})}i(a,{background:`linear-gradient(rgba(${u},${h},${g},1) 0%,rgba(${u},${h},${g},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(e){const{activeElement:o}=t(this.input);(ot&&this.dragElement||o&&this.controlKnobs.includes(o))&&(e.stopPropagation(),e.preventDefault()),this.updateDropdownPosition()}menuKeyHandler(t){const{target:e,code:o}=t,{previousElementSibling:n,nextElementSibling:r,parentElement:a}=e,i=a&&ft(a,"color-options"),l=[...a.children],c=i&&s(a,"grid-template-columns").split(" ").length,u=l.indexOf(e),h=u>-1&&c&&l[u-c],g=u>-1&&c&&l[u+c];[j,W,Y].includes(o)&&t.preventDefault(),i?h&&o===W?bt(h):g&&o===j?bt(g):n&&o===z?bt(n):r&&o===G&&bt(r):n&&[z,W].includes(o)?bt(n):r&&[G,j].includes(o)&&bt(r),[X,Y].includes(o)&&this.menuClickHandler({target:e})}menuClickHandler(t){const e=this,{target:n}=t,{colorMenu:s}=e,i=(a(n,"data-value")||"").trim();if(!i.length)return;const c=lt("li.active",s);let u=l.includes(i)?"white":i;u="transparent"===i?"rgba(0,0,0,0)":i;const{r:h,g:g,b:d,a:p}=new I(u);o(e.color,{r:h,g:g,b:d,a:p}),e.update(),c&&(wt(c,"active"),vt(c,"aria-selected")),c!==n&&(mt(n,"active"),r(n,"aria-selected","true"),l.includes(i)&&(e.value=i),Nt(e))}pointerDown(t){const e=this,{type:o,target:n,touches:r,pageX:a,pageY:s}=t,{colorMenu:i,visuals:l,controlKnobs:c}=e,[u,h,g]=l,[d,p,b]=c,f=ft(n,"visual-control")?n:lt(".visual-control",n.parentElement),m=st(f),w="touchstart"===o?r[0].pageX:a,v="touchstart"===o?r[0].pageY:s,x=w-window.pageXOffset-m.left,$=v-window.pageYOffset-m.top;if(n===u||n===d?(e.dragElement=f,e.changeControl1(x,$)):n===h||n===p?(e.dragElement=f,e.changeControl2($)):n!==g&&n!==b||(e.dragElement=f,e.changeAlpha($)),i){const t=lt("li.active",i);t&&(wt(t,"active"),vt(t,"aria-selected"))}t.preventDefault()}pointerUp({target:e}){const o=this,{parent:n}=o,r=t(n),a=null!==lt(".color-picker,color-picker.open",r),s=r.getSelection();o.dragElement||s.toString().length||n.contains(e)||o.hide(a),o.dragElement=null}pointerMove(t){const e=this,{dragElement:o,visuals:n}=e,[r,a,s]=n,{type:i,touches:l,pageX:c,pageY:u}=t;if(!o)return;const h=st(o),g="touchmove"===i?l[0].pageX:c,d="touchmove"===i?l[0].pageY:u,p=g-window.pageXOffset-h.left,b=d-window.pageYOffset-h.top;o===r&&e.changeControl1(p,b),o===a&&e.changeControl2(b),o===s&&e.changeAlpha(b)}handleKnobs(e){const{target:o,code:n}=e,r=this;if(![W,j,z,G].includes(n))return;e.preventDefault();const{controlKnobs:a}=r,[s,i,l]=a,{activeElement:c}=t(s);if(a.find(t=>t===c)){let t=0,a=0;o===s?([z,G].includes(n)?r.controlPositions.c1x+=n===G?1:-1:[W,j].includes(n)&&(r.controlPositions.c1y+=n===j?1:-1),t=r.controlPositions.c1x,a=r.controlPositions.c1y,r.changeControl1(t,a)):o===i?(r.controlPositions.c2y+=[j,G].includes(n)?1:-1,a=r.controlPositions.c2y,r.changeControl2(a)):o===l&&(r.controlPositions.c3y+=[j,G].includes(n)?1:-1,a=r.controlPositions.c3y,r.changeAlpha(a)),r.handleScroll(e)}}changeHandler(){const e=this;let n;const{inputs:r,format:a,value:s,input:i,controlPositions:c,visuals:u}=e,{activeElement:h}=t(i),{offsetHeight:g}=u[0],[d,,,p]=r,[b,f,m,w]="rgb"===a?r.map(t=>parseFloat(t.value)/(t===p?100:1)):r.map(t=>parseFloat(t.value)/(t!==d?100:360)),v=e.includeNonColor&&l.includes(s),x=p?w:1-c.c3y/g;if(h===i||h&&r.includes(h)){n=h===i?v?"white":s:"hex"===a?d.value:"hsl"===a?{h:b,s:f,l:m,a:x}:"hwb"===a?{h:b,w:f,b:m,a:x}:{r:b,g:f,b:m,a:x};const{r:t,g:r,b:l,a:c}=new I(n);o(e.color,{r:t,g:r,b:l,a:c}),e.setControlPositions(),e.updateAppearance(),e.updateInputs(),e.updateControls(),e.updateVisuals(),h===i&&v&&(e.value=s)}}changeControl1(t,e){let[n,r]=[0,0];const{format:a,controlPositions:s,visuals:i}=this,{offsetHeight:l,offsetWidth:c}=i[0];t>c?n=c:t>=0&&(n=t),e>l?r=l:e>=0&&(r=e);const u="hsl"===a?n/c:s.c2y/l,h="hsl"===a?1-s.c2y/l:n/c,g=1-r/l,d=1-s.c3y/l,p="hsl"===a?{h:u,s:h,l:g,a:d}:{h:u,s:h,v:g,a:d},{r:b,g:f,b:m,a:w}=new I(p);o(this.color,{r:b,g:f,b:m,a:w}),this.controlPositions.c1x=n,this.controlPositions.c1y=r,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeControl2(t){const{format:e,controlPositions:n,visuals:r}=this,{offsetHeight:a,offsetWidth:s}=r[0];let i=0;t>a?i=a:t>=0&&(i=t);const l="hsl"===e?n.c1x/s:i/a,c="hsl"===e?1-i/a:n.c1x/s,u=1-n.c1y/a,h=1-n.c3y/a,g="hsl"===e?{h:l,s:c,l:u,a:h}:{h:l,s:c,v:u,a:h},{r:d,g:p,b:b,a:f}=new I(g);o(this.color,{r:d,g:p,b:b,a:f}),this.controlPositions.c2y=i,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:e,colorPicker:o,colorMenu:n}=this,r=st(e),{top:a,bottom:s}=r,{offsetHeight:i}=e,l=(c=e,t(c).documentElement).clientHeight;var c;const u=ft(o,"show")?o:n;if(!u)return;const{offsetHeight:h}=u,g=l-s,d=a,p=a+h+i>l,b=a-h<0;(ft(u,"bottom")||!b)&&g<d&&p?(wt(u,"bottom"),mt(u,"top")):(wt(u,"top"),mt(u,"bottom"))}setControlPositions(){const{format:t,visuals:e,color:o,hsl:n,hsv:r}=this,{offsetHeight:a,offsetWidth:s}=e[0],i=o.a,l=n.h,c="hsl"!==t?r.s:n.s,u="hsl"!==t?r.v:n.l;this.controlPositions.c1x="hsl"!==t?c*s:l*s,this.controlPositions.c1y=(1-u)*a,this.controlPositions.c2y="hsl"!==t?l*a:(1-c)*a,this.controlPositions.c3y=(1-i)*a}updateAppearance(){const t=this,{componentLabels:e,colorLabels:o,color:n,parent:a,hsl:s,hsv:l,hex:c,format:u,controlKnobs:h}=t,{appearanceLabel:g,hexLabel:d,valueLabel:p}=e,{r:b,g:f,b:m}=n.toRgb(),[w,v,x]=h,$=Math.round(360*s.h),k=n.a,y="hsl"===u?s.s:l.s,M=Math.round(100*y),S=Math.round(100*s.l),A=100*l.v;let H;if(100===S&&0===M)H=o.white;else if(0===S)H=o.black;else if(0===M)H=o.grey;else if($<15||$>=345)H=o.red;else if($>=15&&$<45)H=A>80&&M>80?o.orange:o.brown;else if($>=45&&$<75){const t=$>=54&&$<75&&A<80;H=$>46&&$<54&&A<80&&M>90?o.gold:o.yellow,H=t?o.olive:H}else $>=75&&$<155?H=A<68?o.green:o.lime:$>=155&&$<175?H=o.teal:$>=175&&$<195?H=o.cyan:$>=195&&$<255?H=o.blue:$>=255&&$<270?H=o.violet:$>=270&&$<295?H=o.magenta:$>=295&&$<345&&(H=o.pink);let P=`${d} ${c.split("").join(" ")}`;if("hsl"===u)P=`HSL: ${$}°, ${M}%, ${S}%`,r(w,"aria-description",`${p}: ${P}. ${g}: ${H}.`),r(w,"aria-valuetext",`${$}° & ${S}%`),r(w,"aria-valuenow",""+$),r(v,"aria-valuetext",M+"%"),r(v,"aria-valuenow",""+M);else if("hwb"===u){const{hwb:e}=t,o=Math.round(100*e.w),n=Math.round(100*e.b);P=`HWB: ${$}°, ${o}%, ${n}%`,r(w,"aria-description",`${p}: ${P}. ${g}: ${H}.`),r(w,"aria-valuetext",`${o}% & ${n}%`),r(w,"aria-valuenow",""+o),r(v,"aria-valuetext",$+"%"),r(v,"aria-valuenow",""+$)}else P="rgb"===u?`RGB: ${b}, ${f}, ${m}`:P,r(v,"aria-description",`${p}: ${P}. ${g}: ${H}.`),r(w,"aria-valuetext",`${S}% & ${M}%`),r(w,"aria-valuenow",""+S),r(v,"aria-valuetext",$+"°"),r(v,"aria-valuenow",""+$);const N=Math.round(100*k);r(x,"aria-valuetext",N+"%"),r(x,"aria-valuenow",""+N);const E=n.toString();i(t.input,{backgroundColor:E}),t.isDark?(ft(a,"txt-light")&&wt(a,"txt-light"),ft(a,"txt-dark")||mt(a,"txt-dark")):(ft(a,"txt-dark")&&wt(a,"txt-dark"),ft(a,"txt-light")||mt(a,"txt-light"))}updateControls(){const{controlKnobs:t,controlPositions:e}=this,[o,n,r]=t;i(o,{transform:`translate3d(${e.c1x-4}px,${e.c1y-4}px,0)`}),i(n,{transform:`translate3d(0,${e.c2y-4}px,0)`}),i(r,{transform:`translate3d(0,${e.c3y-4}px,0)`})}updateInputs(t){const e=this,{value:o,format:n,inputs:r,color:a,hsl:s}=e,[i,l,c,u]=r,h=Math.round(100*a.a),g=Math.round(360*s.h);let d;if("hex"===n)d=e.color.toHexString(!0),i.value=e.hex;else if("hsl"===n){const t=Math.round(100*s.l),o=Math.round(100*s.s);d=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=Math.round(100*t),r=Math.round(100*o);d=e.color.toHwbString(),i.value=""+g,l.value=""+n,c.value=""+r,u.value=""+h}else if("rgb"===n){const{r:t,g:o,b:n}=e.rgb;d=e.color.toRgbString(),i.value=""+t,l.value=""+o,c.value=""+n,u.value=""+h}e.value=""+d,t||d===o||Nt(e)}keyToggle(e){const o=this,{menuToggle:n}=o,{activeElement:r}=t(n),{code:a}=e;[X,Y].includes(a)&&(n&&r===n||!r)&&(e.preventDefault(),r?o.toggleMenu():o.togglePicker(e))}togglePicker(t){t.preventDefault();const e=this,{colorPicker:o}=e;e.isOpen&&ft(o,"show")?e.hide(!0):Lt(e,o)}showPicker(){const t=this,{colorPicker:e}=t;ft(e,"show")||Lt(t,e)}toggleMenu(){const t=this,{colorMenu:e}=t;t.isOpen&&ft(e,"show")?t.hide(!0):Lt(t,e)}show(){const t=this,{menuToggle:e}=t;t.isOpen||(Pt(t,!0),t.updateDropdownPosition(),t.isOpen=!0,r(t.input,"tabindex","0"),e&&r(e,"tabindex","0"))}hide(t){const e=this;if(e.isOpen){const{pickerToggle:o,menuToggle:n,colorPicker:a,colorMenu:i,parent:l,input:c}=e,u=ft(a,"show"),h=u?a:i,g=u?o:n,d=h&&function(t){const e=s(t,"transitionProperty"),o=s(t,"transitionDuration"),n=o.includes("ms")?1:1e3,r=e&&"none"!==e?parseFloat(o)*n:0;return Number.isNaN(r)?0:r}(h);h&&(wt(h,"show"),r(g,"aria-expanded","false"),setTimeout(()=>{Et(h),lt(".show",l)||(wt(l,"open"),Pt(e),e.isOpen=!1)},d)),e.isValid||(e.value=e.color.toString()),t||bt(o),r(c,"tabindex","-1"),n&&r(n,"tabindex","-1")}}dispose(){const{input:t,parent:e}=this;this.hide(!0),Ht(this),[...e.children].forEach(e=>{e!==t&&e.remove()}),i(t,{backgroundColor:""}),["txt-light","txt-dark"].forEach(t=>wt(e,t)),gt.remove(t,"color-picker")}}o(Ct,{Color:I,Version:"0.0.1alpha2",getInstance:t=>{return e=t,o="color-picker",gt.get(e,o);var e,o},init:t=>new Ct(t),selector:'[data-function="color-picker"]'});let Tt=0;class Rt extends HTMLElement{constructor(){super(),this.isDisconnected=!0,this.attachShadow({mode:"open"})}get value(){return this.input?this.input.value:null}connectedCallback(){if(this.colorPicker)return void(this.isDisconnected&&(this.isDisconnected=!1));const o=(s="input",((i=this)&&e.some(t=>i instanceof t)?i:t()).getElementsByTagName(s));var s,i;if(!o.length){const t=a(this,"data-label"),e=a(this,"data-value")||"#069",o=a(this,"data-format")||"rgb",s=n({tagName:"input",type:"text",className:"color-preview btn-appearance"});let i=a(this,"data-id");i||(i=`color-picker-${o}-${Tt}`,Tt+=1);const l=n({tagName:"label",innerText:t||"Color Picker"});this.before(l),r(l,"for",i),r(s,"id",i),r(s,"name",i),r(s,"autocomplete","off"),r(s,"spellcheck","false"),r(s,"value",e),this.append(s)}const[l]=o;l&&(this.input=l,this.colorPicker=new Ct(l),this.color=this.colorPicker.color,this.shadowRoot&&this.shadowRoot.append(n("slot")),this.isDisconnected=!1)}disconnectedCallback(){this.colorPicker&&this.colorPicker.dispose(),this.isDisconnected=!0}}return o(Rt,{Color:I,ColorPicker:Ct,Version:"0.0.1alpha2"}),customElements.define("color-picker",Rt),Rt}));