@melloware/coloris - npm Package Compare versions

Comparing version 0.22.0 to 0.23.0

dist/esm/coloris.js

@@ -6,3 +6,3 @@ const Coloris = (() => {
   * https://github.com/mdbassit/Coloris
-  * Version: 0.21.1
+  * Version: 0.23.0
   * NPM: https://github.com/melloware/coloris-npm
@@ -846,5 +846,2 @@ */
 
-        // Workaround to mitigate a Chromium bug where the alpha value is rounded incorrectly
-        rgba.a = +rgba.a.toFixed(2);
-
       } else {
@@ -851,0 +848,0 @@ match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map((h) => parseInt(h, 16));

dist/esm/coloris.min.js

@@ -1,1 +0,1 @@
-const Coloris=(()=>{{var E=window,x=document,C=Math,$=void 0;const J=x.createElement("canvas").getContext("2d"),Q={r:0,g:0,b:0,h:0,s:0,v:0,a:1};let u,d,p,c,i,h,f,b,v,a,y,g,m,w,l,o,k={};const V={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!1,wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:()=>$,a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},Z={};let n="",s={},L=!1;function A(t){if("object"==typeof t)for(const o in t)switch(o){case"el":B(t.el),!1!==t.wrap&&I(t.el);break;case"parent":(u=x.querySelector(t.parent))&&(u.appendChild(d),V.parent=t.parent,u===x.body)&&(u=$);break;case"themeMode":V.themeMode=t.themeMode,"auto"===t.themeMode&&E.matchMedia&&E.matchMedia("(prefers-color-scheme: dark)").matches&&(V.themeMode="dark");case"theme":t.theme&&(V.theme=t.theme),d.className=`clr-picker clr-${V.theme} clr-`+V.themeMode,V.inline&&M();break;case"rtl":V.rtl=!!t.rtl,x.querySelectorAll(".clr-field").forEach(e=>e.classList.toggle("clr-rtl",V.rtl));break;case"margin":t.margin*=1,V.margin=(isNaN(t.margin)?V:t).margin;break;case"wrap":t.el&&t.wrap&&I(t.el);break;case"formatToggle":V.formatToggle=!!t.formatToggle,U("clr-format").style.display=V.formatToggle?"block":"none",V.formatToggle&&(V.format="auto");break;case"swatches":if(Array.isArray(t.swatches)){const n=[];t.swatches.forEach((e,t)=>{n.push(`<button type="button" id="clr-swatch-${t}" aria-labelledby="clr-swatch-label clr-swatch-${t}" style="color: ${e};">${e}</button>`)}),U("clr-swatches").innerHTML=n.length?`<div>${n.join("")}</div>`:"",V.swatches=t.swatches.slice()}break;case"swatchesOnly":V.swatchesOnly=!!t.swatchesOnly,d.setAttribute("data-minimal",V.swatchesOnly);break;case"alpha":V.alpha=!!t.alpha,d.setAttribute("data-alpha",V.alpha);break;case"inline":V.inline=!!t.inline,d.setAttribute("data-inline",V.inline),V.inline&&(l=t.defaultColor||V.defaultColor,w=O(l),M(),_(l));break;case"clearButton":"object"==typeof t.clearButton&&(t.clearButton.label&&(V.clearLabel=t.clearButton.label,f.innerHTML=V.clearLabel),t.clearButton=t.clearButton.show),V.clearButton=!!t.clearButton,f.style.display=V.clearButton?"block":"none";break;case"clearLabel":V.clearLabel=t.clearLabel,f.innerHTML=V.clearLabel;break;case"closeButton":V.closeButton=!!t.closeButton,V.closeButton?d.insertBefore(b,i):i.appendChild(b);break;case"closeLabel":V.closeLabel=t.closeLabel,b.innerHTML=V.closeLabel;break;case"a11y":var l,a,r=t.a11y;let e=!1;if("object"==typeof r)for(const s in r)r[s]&&V.a11y[s]&&(V.a11y[s]=r[s],e=!0);e&&(l=U("clr-open-label"),a=U("clr-swatch-label"),l.innerHTML=V.a11y.open,a.innerHTML=V.a11y.swatch,b.setAttribute("aria-label",V.a11y.close),f.setAttribute("aria-label",V.a11y.clear),v.setAttribute("aria-label",V.a11y.hueSlider),y.setAttribute("aria-label",V.a11y.alphaSlider),h.setAttribute("aria-label",V.a11y.input),p.setAttribute("aria-label",V.a11y.instruction));break;default:V[o]=t[o]}}function e(e,t){"string"==typeof e&&"object"==typeof t&&(Z[e]=t,L=!0)}function S(e){delete Z[e],0===Object.keys(Z).length&&(L=!1,e===n)&&T()}function r(e){if(L){var t,l=["el","wrap","rtl","inline","defaultColor","a11y"];for(t in Z){const r=Z[t];if(e.matches(t)){for(var a in n=t,s={},l.forEach(e=>delete r[e]),r)s[a]=Array.isArray(V[a])?V[a].slice():V[a];A(r);break}}}}function T(){0<Object.keys(s).length&&(A(s),n="",s={})}function B(e){X(x,"click",e,e=>{V.inline||(r(e.target),m=e.target,l=m.value,w=O(l),d.classList.add("clr-open"),M(),_(l),(V.focusInput||V.selectInput)&&(h.focus({preventScroll:!0}),h.setSelectionRange(m.selectionStart,m.selectionEnd)),V.selectInput&&h.select(),(o||V.swatchesOnly)&&Y().shift().focus(),m.dispatchEvent(new Event("open",{bubbles:!0})))}),X(x,"input",e,e=>{var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function M(){if(d&&(m||V.inline)){var r=u,o=E.scrollY,n=d.offsetWidth,s=d.offsetHeight,c={left:!1,top:!1};let e,l,t,a={x:0,y:0};if(r&&(e=E.getComputedStyle(r),l=parseFloat(e.marginTop),t=parseFloat(e.borderTopWidth),(a=r.getBoundingClientRect()).y+=t+o),!V.inline){var i=m.getBoundingClientRect();let e=i.x,t=o+i.y+i.height+V.margin;r?(e-=a.x,t-=a.y,e+n>r.clientWidth&&(e+=i.width-n,c.left=!0),t+s>r.clientHeight-l&&s+V.margin<=i.top-(a.y-o)&&(t-=i.height+s+2*V.margin,c.top=!0),t+=r.scrollTop):(e+n>x.documentElement.clientWidth&&(e+=i.width-n,c.left=!0),t+s-o>x.documentElement.clientHeight&&s+V.margin<=i.top&&(t=o+i.y-s-V.margin,c.top=!0)),d.classList.toggle("clr-left",c.left),d.classList.toggle("clr-top",c.top),d.style.left=e+"px",d.style.top=t+"px",a.x+=d.offsetLeft,a.y+=d.offsetTop}k={width:p.offsetWidth,height:p.offsetHeight,x:p.offsetLeft+a.x,y:p.offsetTop+a.y}}}function I(e){x.querySelectorAll(e).forEach(t=>{var l=t.parentNode;if(!l.classList.contains("clr-field")){var a=x.createElement("div");let e="clr-field";(V.rtl||t.classList.contains("clr-rtl"))&&(e+=" clr-rtl"),a.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(a,t),a.setAttribute("class",e),a.style.color=t.value,a.appendChild(t)}})}function H(e){if(m&&!V.inline){const t=m;e&&(m=$,l!==t.value)&&(t.value=l,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(()=>{l!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),d.classList.remove("clr-open"),L&&T(),t.dispatchEvent(new Event("close",{bubbles:!0})),V.focusInput&&t.focus({preventScroll:!0}),m=$}}function _(e){var e=function(e){let t,l;J.fillStyle="#000",J.fillStyle=e,(t=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(J.fillStyle))?(l={r:+t[3],g:+t[4],b:+t[5],a:+t[6]}).a=+l.a.toFixed(2):(t=J.fillStyle.replace("#","").match(/.{2}/g).map(e=>parseInt(e,16)),l={r:t[0],g:t[1],b:t[2],a:1});return l}(e),t=function(e){var t=e.r/255,l=e.g/255,a=e.b/255,r=C.max(t,l,a),o=C.min(t,l,a),o=r-o,n=r;let s=0,c=0;o&&(r===t&&(s=(l-a)/o),r===l&&(s=2+(a-t)/o),r===a&&(s=4+(t-l)/o),r)&&(c=o/r);return{h:(s=C.floor(60*s))<0?s+360:s,s:C.round(100*c),v:C.round(100*n),a:e.a}}(e);P(t.s,t.v),R(e,t),v.value=t.h,d.style.color=`hsl(${t.h}, 100%, 50%)`,a.style.left=t.h/360*100+"%",c.style.left=k.width*t.s/100+"px",c.style.top=k.height-k.height*t.v/100+"px",y.value=100*t.a,g.style.left=100*t.a+"%"}function O(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function D(e){e=e!==$?e:h.value,m&&(m.value=e,m.dispatchEvent(new Event("input",{bubbles:!0}))),V.onChange&&V.onChange.call(E,e,m),x.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:m}}))}function N(e,t){var l,a,r,o,n,e={h:+v.value,s:e/k.width*100,v:100-t/k.height*100,a:y.value/100},s=(s=(t=e).s/100,l=t.v/100,s*=l,a=t.h/60,r=s*(1-C.abs(a%2-1)),s+=l-=s,r+=l,a=C.floor(a)%6,o=[s,r,l,l,r,s][a],n=[r,s,s,r,l,l][a],l=[l,l,r,s,s,r][a],{r:C.round(255*o),g:C.round(255*n),b:C.round(255*l),a:t.a});P(e.s,e.v),R(s,e),D()}function P(e,t){let l=V.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),l=(l=l.replace("{s}",e)).replace("{v}",t),c.setAttribute("aria-label",l)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},l=t.pageX-k.x;let a=t.pageY-k.y;u&&(a+=u.scrollTop),j(l,a),e.preventDefault(),e.stopPropagation()}function j(e,t){e=e<0?0:e>k.width?k.width:e,t=t<0?0:t>k.height?k.height:t,c.style.left=e+"px",c.style.top=t+"px",N(e,t),c.focus()}function R(e,t){void 0===e&&(e={}),void 0===t&&(t={});let l=V.format;for(const n in e)Q[n]=e[n];for(const s in t)Q[s]=t[s];var a,r=function(e){let t=e.r.toString(16),l=e.g.toString(16),a=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(l="0"+l);e.b<16&&(a="0"+a);V.alpha&&(e.a<1||V.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+l+a+r}(Q),o=r.substring(0,7);switch(c.style.color=o,g.parentNode.style.color=o,g.style.color=r,i.style.color=r,p.style.display="none",p.offsetHeight,p.style.display="",g.nextElementSibling.style.display="none",g.nextElementSibling.offsetHeight,g.nextElementSibling.style.display="","mixed"===l?l=1===Q.a?"hex":"rgb":"auto"===l&&(l=w),l){case"hex":h.value=r;break;case"rgb":h.value=(a=Q,!V.alpha||1===a.a&&!V.forceAlpha?`rgb(${a.r}, ${a.g}, ${a.b})`:`rgba(${a.r}, ${a.g}, ${a.b}, ${a.a})`);break;case"hsl":h.value=(a=function(e){var t=e.v/100,l=t*(1-e.s/100/2);let a;0<l&&l<1&&(a=C.round((t-l)/C.min(l,1-l)*100));return{h:e.h,s:a||0,l:C.round(100*l),a:e.a}}(Q),!V.alpha||1===a.a&&!V.forceAlpha?`hsl(${a.h}, ${a.s}%, ${a.l}%)`:`hsla(${a.h}, ${a.s}%, ${a.l}%, ${a.a})`)}x.querySelector(`.clr-format [value="${l}"]`).checked=!0}function W(){var e=+v.value,t=+c.style.left.replace("px",""),l=+c.style.top.replace("px","");d.style.color=`hsl(${e}, 100%, 50%)`,a.style.left=e/360*100+"%",N(t,l)}function q(){var e=y.value/100;g.style.left=100*e+"%",R({a:e}),D()}function F(){x.getElementById("clr-picker")||(u=$,(d=x.createElement("div")).setAttribute("id","clr-picker"),d.className="clr-picker",d.innerHTML=`<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${V.a11y.input}">`+`<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${V.a11y.instruction}">`+'<div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue">'+`<input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${V.a11y.hueSlider}">`+'<div id="clr-hue-marker"></div></div><div class="clr-alpha">'+`<input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${V.a11y.alphaSlider}">`+'<div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented">'+`<legend>${V.a11y.format}</legend>`+'<input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div>'+`<button type="button" id="clr-clear" class="clr-clear" aria-label="${V.a11y.clear}">${V.clearLabel}</button>`+'<div id="clr-color-preview" class="clr-preview">'+`<button type="button" id="clr-close" class="clr-close" aria-label="${V.a11y.close}">${V.closeLabel}</button>`+"</div>"+`<span id="clr-open-label" hidden>${V.a11y.open}</span>`+`<span id="clr-swatch-label" hidden>${V.a11y.swatch}</span>`,x.body.appendChild(d),p=U("clr-color-area"),c=U("clr-color-marker"),f=U("clr-clear"),b=U("clr-close"),i=U("clr-color-preview"),h=U("clr-color-value"),v=U("clr-hue-slider"),a=U("clr-hue-marker"),y=U("clr-alpha-slider"),g=U("clr-alpha-marker"),B(V.el),I(V.el),X(d,"mousedown",e=>{d.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),X(p,"mousedown",e=>{X(x,"mousemove",t)}),X(p,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),X(c,"mousedown",e=>{X(x,"mousemove",t)}),X(c,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),X(h,"change",e=>{var t=h.value;(m||V.inline)&&D(""===t?t:_(t))}),X(f,"click",e=>{D(""),H()}),X(b,"click",e=>{D(),H()}),X(U("clr-format"),"click",".clr-format input",e=>{w=e.target.value,R(),D()}),X(d,"click",".clr-swatches button",e=>{_(e.target.textContent),D(),V.swatchesOnly&&H()}),X(x,"mouseup",e=>{x.removeEventListener("mousemove",t)}),X(x,"touchend",e=>{x.removeEventListener("touchmove",t)}),X(x,"mousedown",e=>{o=!1,d.classList.remove("clr-keyboard-nav"),H()}),X(x,"keydown",e=>{var t,l=e.key,a=e.target,r=e.shiftKey;"Escape"===l?H(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(l)&&(o=!0,d.classList.add("clr-keyboard-nav")),"Tab"===l&&a.matches(".clr-picker *")&&(t=(l=Y()).shift(),l=l.pop(),r&&a===t?(l.focus(),e.preventDefault()):r||a!==l||(t.focus(),e.preventDefault()))}),X(x,"click",".clr-field button",e=>{L&&T(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),X(c,"keydown",e=>{var t,l={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(l).includes(e.key)&&([l,t]=[...l[e.key]],j(+c.style.left.replace("px","")+l,+c.style.top.replace("px","")+t),e.preventDefault())}),X(p,"click",t),X(v,"input",W),X(y,"input",q))}function Y(){return Array.from(d.querySelectorAll("input, button")).filter(e=>!!e.offsetWidth)}function U(e){return x.getElementById(e)}function X(e,t,l,a){const r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof l?e.addEventListener(t,e=>{r.call(e.target,l)&&a.call(e.target,e)}):(a=l,e.addEventListener(t,a))}function z(e,t){t=t!==$?t:[],"loading"!==x.readyState?e(...t):x.addEventListener("DOMContentLoaded",()=>{e(...t)})}function G(e,t){m=t,l=m.value,r(t),w=O(e),M(),_(e),D(),l!==e&&m.dispatchEvent(new Event("change",{bubbles:!0}))}NodeList!==$&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach);var K=(()=>{const a={init:F,set:A,wrap:I,close:H,setInstance:e,setColor:G,removeInstance:S,updatePosition:M,ready:z};function t(e){z(()=>{e&&("string"==typeof e?B:A)(e)})}for(const r in a)t[r]=function(){for(var e=arguments.length,t=new Array(e),l=0;l<e;l++)t[l]=arguments[l];z(a[r],t)};return z(()=>{E.addEventListener("resize",e=>{t.updatePosition()}),E.addEventListener("scroll",e=>{t.updatePosition()})}),t})();return K.coloris=K}})(),_coloris=Coloris.coloris,_init=Coloris.init,_set=Coloris.set,_wrap=Coloris.wrap,_close=Coloris.close,_setInstance=Coloris.setInstance,_removeInstance=Coloris.removeInstance,_updatePosition=Coloris.updatePosition;export default Coloris;export{_coloris as coloris,_close as close,_init as init,_set as set,_wrap as wrap,_setInstance as setInstance,_removeInstance as removeInstance,_updatePosition as updatePosition};
+const Coloris=(()=>{{var E=window,x=document,C=Math,$=void 0;const J=x.createElement("canvas").getContext("2d"),Q={r:0,g:0,b:0,h:0,s:0,v:0,a:1};let u,d,p,c,i,h,f,b,v,a,y,g,m,w,l,o,k={};const V={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!1,wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:()=>$,a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},Z={};let n="",s={},L=!1;function A(t){if("object"==typeof t)for(const o in t)switch(o){case"el":B(t.el),!1!==t.wrap&&I(t.el);break;case"parent":(u=x.querySelector(t.parent))&&(u.appendChild(d),V.parent=t.parent,u===x.body)&&(u=$);break;case"themeMode":V.themeMode=t.themeMode,"auto"===t.themeMode&&E.matchMedia&&E.matchMedia("(prefers-color-scheme: dark)").matches&&(V.themeMode="dark");case"theme":t.theme&&(V.theme=t.theme),d.className=`clr-picker clr-${V.theme} clr-`+V.themeMode,V.inline&&M();break;case"rtl":V.rtl=!!t.rtl,x.querySelectorAll(".clr-field").forEach(e=>e.classList.toggle("clr-rtl",V.rtl));break;case"margin":t.margin*=1,V.margin=(isNaN(t.margin)?V:t).margin;break;case"wrap":t.el&&t.wrap&&I(t.el);break;case"formatToggle":V.formatToggle=!!t.formatToggle,U("clr-format").style.display=V.formatToggle?"block":"none",V.formatToggle&&(V.format="auto");break;case"swatches":if(Array.isArray(t.swatches)){const n=[];t.swatches.forEach((e,t)=>{n.push(`<button type="button" id="clr-swatch-${t}" aria-labelledby="clr-swatch-label clr-swatch-${t}" style="color: ${e};">${e}</button>`)}),U("clr-swatches").innerHTML=n.length?`<div>${n.join("")}</div>`:"",V.swatches=t.swatches.slice()}break;case"swatchesOnly":V.swatchesOnly=!!t.swatchesOnly,d.setAttribute("data-minimal",V.swatchesOnly);break;case"alpha":V.alpha=!!t.alpha,d.setAttribute("data-alpha",V.alpha);break;case"inline":V.inline=!!t.inline,d.setAttribute("data-inline",V.inline),V.inline&&(l=t.defaultColor||V.defaultColor,w=O(l),M(),_(l));break;case"clearButton":"object"==typeof t.clearButton&&(t.clearButton.label&&(V.clearLabel=t.clearButton.label,f.innerHTML=V.clearLabel),t.clearButton=t.clearButton.show),V.clearButton=!!t.clearButton,f.style.display=V.clearButton?"block":"none";break;case"clearLabel":V.clearLabel=t.clearLabel,f.innerHTML=V.clearLabel;break;case"closeButton":V.closeButton=!!t.closeButton,V.closeButton?d.insertBefore(b,i):i.appendChild(b);break;case"closeLabel":V.closeLabel=t.closeLabel,b.innerHTML=V.closeLabel;break;case"a11y":var l,a,r=t.a11y;let e=!1;if("object"==typeof r)for(const s in r)r[s]&&V.a11y[s]&&(V.a11y[s]=r[s],e=!0);e&&(l=U("clr-open-label"),a=U("clr-swatch-label"),l.innerHTML=V.a11y.open,a.innerHTML=V.a11y.swatch,b.setAttribute("aria-label",V.a11y.close),f.setAttribute("aria-label",V.a11y.clear),v.setAttribute("aria-label",V.a11y.hueSlider),y.setAttribute("aria-label",V.a11y.alphaSlider),h.setAttribute("aria-label",V.a11y.input),p.setAttribute("aria-label",V.a11y.instruction));break;default:V[o]=t[o]}}function e(e,t){"string"==typeof e&&"object"==typeof t&&(Z[e]=t,L=!0)}function S(e){delete Z[e],0===Object.keys(Z).length&&(L=!1,e===n)&&T()}function r(e){if(L){var t,l=["el","wrap","rtl","inline","defaultColor","a11y"];for(t in Z){const r=Z[t];if(e.matches(t)){for(var a in n=t,s={},l.forEach(e=>delete r[e]),r)s[a]=Array.isArray(V[a])?V[a].slice():V[a];A(r);break}}}}function T(){0<Object.keys(s).length&&(A(s),n="",s={})}function B(e){X(x,"click",e,e=>{V.inline||(r(e.target),m=e.target,l=m.value,w=O(l),d.classList.add("clr-open"),M(),_(l),(V.focusInput||V.selectInput)&&(h.focus({preventScroll:!0}),h.setSelectionRange(m.selectionStart,m.selectionEnd)),V.selectInput&&h.select(),(o||V.swatchesOnly)&&Y().shift().focus(),m.dispatchEvent(new Event("open",{bubbles:!0})))}),X(x,"input",e,e=>{var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function M(){if(d&&(m||V.inline)){var r=u,o=E.scrollY,n=d.offsetWidth,s=d.offsetHeight,c={left:!1,top:!1};let e,l,t,a={x:0,y:0};if(r&&(e=E.getComputedStyle(r),l=parseFloat(e.marginTop),t=parseFloat(e.borderTopWidth),(a=r.getBoundingClientRect()).y+=t+o),!V.inline){var i=m.getBoundingClientRect();let e=i.x,t=o+i.y+i.height+V.margin;r?(e-=a.x,t-=a.y,e+n>r.clientWidth&&(e+=i.width-n,c.left=!0),t+s>r.clientHeight-l&&s+V.margin<=i.top-(a.y-o)&&(t-=i.height+s+2*V.margin,c.top=!0),t+=r.scrollTop):(e+n>x.documentElement.clientWidth&&(e+=i.width-n,c.left=!0),t+s-o>x.documentElement.clientHeight&&s+V.margin<=i.top&&(t=o+i.y-s-V.margin,c.top=!0)),d.classList.toggle("clr-left",c.left),d.classList.toggle("clr-top",c.top),d.style.left=e+"px",d.style.top=t+"px",a.x+=d.offsetLeft,a.y+=d.offsetTop}k={width:p.offsetWidth,height:p.offsetHeight,x:p.offsetLeft+a.x,y:p.offsetTop+a.y}}}function I(e){x.querySelectorAll(e).forEach(t=>{var l=t.parentNode;if(!l.classList.contains("clr-field")){var a=x.createElement("div");let e="clr-field";(V.rtl||t.classList.contains("clr-rtl"))&&(e+=" clr-rtl"),a.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(a,t),a.setAttribute("class",e),a.style.color=t.value,a.appendChild(t)}})}function H(e){if(m&&!V.inline){const t=m;e&&(m=$,l!==t.value)&&(t.value=l,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(()=>{l!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),d.classList.remove("clr-open"),L&&T(),t.dispatchEvent(new Event("close",{bubbles:!0})),V.focusInput&&t.focus({preventScroll:!0}),m=$}}function _(e){var e=function(e){let t,l;J.fillStyle="#000",J.fillStyle=e,l=(t=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(J.fillStyle))?{r:+t[3],g:+t[4],b:+t[5],a:+t[6]}:(t=J.fillStyle.replace("#","").match(/.{2}/g).map(e=>parseInt(e,16)),{r:t[0],g:t[1],b:t[2],a:1});return l}(e),t=function(e){var t=e.r/255,l=e.g/255,a=e.b/255,r=C.max(t,l,a),o=C.min(t,l,a),o=r-o,n=r;let s=0,c=0;o&&(r===t&&(s=(l-a)/o),r===l&&(s=2+(a-t)/o),r===a&&(s=4+(t-l)/o),r)&&(c=o/r);return{h:(s=C.floor(60*s))<0?s+360:s,s:C.round(100*c),v:C.round(100*n),a:e.a}}(e);P(t.s,t.v),R(e,t),v.value=t.h,d.style.color=`hsl(${t.h}, 100%, 50%)`,a.style.left=t.h/360*100+"%",c.style.left=k.width*t.s/100+"px",c.style.top=k.height-k.height*t.v/100+"px",y.value=100*t.a,g.style.left=100*t.a+"%"}function O(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function D(e){e=e!==$?e:h.value,m&&(m.value=e,m.dispatchEvent(new Event("input",{bubbles:!0}))),V.onChange&&V.onChange.call(E,e,m),x.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:m}}))}function N(e,t){var l,a,r,o,n,e={h:+v.value,s:e/k.width*100,v:100-t/k.height*100,a:y.value/100},s=(s=(t=e).s/100,l=t.v/100,s*=l,a=t.h/60,r=s*(1-C.abs(a%2-1)),s+=l-=s,r+=l,a=C.floor(a)%6,o=[s,r,l,l,r,s][a],n=[r,s,s,r,l,l][a],l=[l,l,r,s,s,r][a],{r:C.round(255*o),g:C.round(255*n),b:C.round(255*l),a:t.a});P(e.s,e.v),R(s,e),D()}function P(e,t){let l=V.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),l=(l=l.replace("{s}",e)).replace("{v}",t),c.setAttribute("aria-label",l)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},l=t.pageX-k.x;let a=t.pageY-k.y;u&&(a+=u.scrollTop),j(l,a),e.preventDefault(),e.stopPropagation()}function j(e,t){e=e<0?0:e>k.width?k.width:e,t=t<0?0:t>k.height?k.height:t,c.style.left=e+"px",c.style.top=t+"px",N(e,t),c.focus()}function R(e,t){void 0===e&&(e={}),void 0===t&&(t={});let l=V.format;for(const n in e)Q[n]=e[n];for(const s in t)Q[s]=t[s];var a,r=function(e){let t=e.r.toString(16),l=e.g.toString(16),a=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(l="0"+l);e.b<16&&(a="0"+a);V.alpha&&(e.a<1||V.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+l+a+r}(Q),o=r.substring(0,7);switch(c.style.color=o,g.parentNode.style.color=o,g.style.color=r,i.style.color=r,p.style.display="none",p.offsetHeight,p.style.display="",g.nextElementSibling.style.display="none",g.nextElementSibling.offsetHeight,g.nextElementSibling.style.display="","mixed"===l?l=1===Q.a?"hex":"rgb":"auto"===l&&(l=w),l){case"hex":h.value=r;break;case"rgb":h.value=(a=Q,!V.alpha||1===a.a&&!V.forceAlpha?`rgb(${a.r}, ${a.g}, ${a.b})`:`rgba(${a.r}, ${a.g}, ${a.b}, ${a.a})`);break;case"hsl":h.value=(a=function(e){var t=e.v/100,l=t*(1-e.s/100/2);let a;0<l&&l<1&&(a=C.round((t-l)/C.min(l,1-l)*100));return{h:e.h,s:a||0,l:C.round(100*l),a:e.a}}(Q),!V.alpha||1===a.a&&!V.forceAlpha?`hsl(${a.h}, ${a.s}%, ${a.l}%)`:`hsla(${a.h}, ${a.s}%, ${a.l}%, ${a.a})`)}x.querySelector(`.clr-format [value="${l}"]`).checked=!0}function W(){var e=+v.value,t=+c.style.left.replace("px",""),l=+c.style.top.replace("px","");d.style.color=`hsl(${e}, 100%, 50%)`,a.style.left=e/360*100+"%",N(t,l)}function q(){var e=y.value/100;g.style.left=100*e+"%",R({a:e}),D()}function F(){x.getElementById("clr-picker")||(u=$,(d=x.createElement("div")).setAttribute("id","clr-picker"),d.className="clr-picker",d.innerHTML=`<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${V.a11y.input}">`+`<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${V.a11y.instruction}">`+'<div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue">'+`<input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${V.a11y.hueSlider}">`+'<div id="clr-hue-marker"></div></div><div class="clr-alpha">'+`<input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${V.a11y.alphaSlider}">`+'<div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented">'+`<legend>${V.a11y.format}</legend>`+'<input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div>'+`<button type="button" id="clr-clear" class="clr-clear" aria-label="${V.a11y.clear}">${V.clearLabel}</button>`+'<div id="clr-color-preview" class="clr-preview">'+`<button type="button" id="clr-close" class="clr-close" aria-label="${V.a11y.close}">${V.closeLabel}</button>`+"</div>"+`<span id="clr-open-label" hidden>${V.a11y.open}</span>`+`<span id="clr-swatch-label" hidden>${V.a11y.swatch}</span>`,x.body.appendChild(d),p=U("clr-color-area"),c=U("clr-color-marker"),f=U("clr-clear"),b=U("clr-close"),i=U("clr-color-preview"),h=U("clr-color-value"),v=U("clr-hue-slider"),a=U("clr-hue-marker"),y=U("clr-alpha-slider"),g=U("clr-alpha-marker"),B(V.el),I(V.el),X(d,"mousedown",e=>{d.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),X(p,"mousedown",e=>{X(x,"mousemove",t)}),X(p,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),X(c,"mousedown",e=>{X(x,"mousemove",t)}),X(c,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),X(h,"change",e=>{var t=h.value;(m||V.inline)&&D(""===t?t:_(t))}),X(f,"click",e=>{D(""),H()}),X(b,"click",e=>{D(),H()}),X(U("clr-format"),"click",".clr-format input",e=>{w=e.target.value,R(),D()}),X(d,"click",".clr-swatches button",e=>{_(e.target.textContent),D(),V.swatchesOnly&&H()}),X(x,"mouseup",e=>{x.removeEventListener("mousemove",t)}),X(x,"touchend",e=>{x.removeEventListener("touchmove",t)}),X(x,"mousedown",e=>{o=!1,d.classList.remove("clr-keyboard-nav"),H()}),X(x,"keydown",e=>{var t,l=e.key,a=e.target,r=e.shiftKey;"Escape"===l?H(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(l)&&(o=!0,d.classList.add("clr-keyboard-nav")),"Tab"===l&&a.matches(".clr-picker *")&&(t=(l=Y()).shift(),l=l.pop(),r&&a===t?(l.focus(),e.preventDefault()):r||a!==l||(t.focus(),e.preventDefault()))}),X(x,"click",".clr-field button",e=>{L&&T(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),X(c,"keydown",e=>{var t,l={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(l).includes(e.key)&&([l,t]=[...l[e.key]],j(+c.style.left.replace("px","")+l,+c.style.top.replace("px","")+t),e.preventDefault())}),X(p,"click",t),X(v,"input",W),X(y,"input",q))}function Y(){return Array.from(d.querySelectorAll("input, button")).filter(e=>!!e.offsetWidth)}function U(e){return x.getElementById(e)}function X(e,t,l,a){const r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof l?e.addEventListener(t,e=>{r.call(e.target,l)&&a.call(e.target,e)}):(a=l,e.addEventListener(t,a))}function z(e,t){t=t!==$?t:[],"loading"!==x.readyState?e(...t):x.addEventListener("DOMContentLoaded",()=>{e(...t)})}function G(e,t){m=t,l=m.value,r(t),w=O(e),M(),_(e),D(),l!==e&&m.dispatchEvent(new Event("change",{bubbles:!0}))}NodeList!==$&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach);var K=(()=>{const a={init:F,set:A,wrap:I,close:H,setInstance:e,setColor:G,removeInstance:S,updatePosition:M,ready:z};function t(e){z(()=>{e&&("string"==typeof e?B:A)(e)})}for(const r in a)t[r]=function(){for(var e=arguments.length,t=new Array(e),l=0;l<e;l++)t[l]=arguments[l];z(a[r],t)};return z(()=>{E.addEventListener("resize",e=>{t.updatePosition()}),E.addEventListener("scroll",e=>{t.updatePosition()})}),t})();return K.coloris=K}})(),_coloris=Coloris.coloris,_init=Coloris.init,_set=Coloris.set,_wrap=Coloris.wrap,_close=Coloris.close,_setInstance=Coloris.setInstance,_removeInstance=Coloris.removeInstance,_updatePosition=Coloris.updatePosition;export default Coloris;export{_coloris as coloris,_close as close,_init as init,_set as set,_wrap as wrap,_setInstance as setInstance,_removeInstance as removeInstance,_updatePosition as updatePosition};

dist/umd/coloris.js

@@ -47,3 +47,3 @@ // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
   * https://github.com/mdbassit/Coloris
-  * Version: 0.21.1
+  * Version: 0.23.0
   * NPM: https://github.com/melloware/coloris-npm
@@ -887,5 +887,2 @@ */
 
-        // Workaround to mitigate a Chromium bug where the alpha value is rounded incorrectly
-        rgba.a = +rgba.a.toFixed(2);
-
       } else {
@@ -892,0 +889,0 @@ match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map((h) => parseInt(h, 16));

dist/umd/coloris.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof module&&module.exports?module.exports=t():(e.Coloris=t(),"object"==typeof window&&e.Coloris.init())}("undefined"!=typeof self?self:void 0,function(){{var E=window,x=document,$=Math,A=void 0;const Q=x.createElement("canvas").getContext("2d"),V={r:0,g:0,b:0,h:0,s:0,v:0,a:1};let d,u,p,i,s,h,f,b,y,a,v,g,m,w,l,o,k={};const Z={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!1,wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:()=>A,a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},_={};let n="",c={},L=!1;function S(t){if("object"==typeof t)for(const o in t)switch(o){case"el":B(t.el),!1!==t.wrap&&H(t.el);break;case"parent":(d=x.querySelector(t.parent))&&(d.appendChild(u),Z.parent=t.parent,d===x.body)&&(d=A);break;case"themeMode":Z.themeMode=t.themeMode,"auto"===t.themeMode&&E.matchMedia&&E.matchMedia("(prefers-color-scheme: dark)").matches&&(Z.themeMode="dark");case"theme":t.theme&&(Z.theme=t.theme),u.className=`clr-picker clr-${Z.theme} clr-`+Z.themeMode,Z.inline&&M();break;case"rtl":Z.rtl=!!t.rtl,x.querySelectorAll(".clr-field").forEach(e=>e.classList.toggle("clr-rtl",Z.rtl));break;case"margin":t.margin*=1,Z.margin=(isNaN(t.margin)?Z:t).margin;break;case"wrap":t.el&&t.wrap&&H(t.el);break;case"formatToggle":Z.formatToggle=!!t.formatToggle,X("clr-format").style.display=Z.formatToggle?"block":"none",Z.formatToggle&&(Z.format="auto");break;case"swatches":if(Array.isArray(t.swatches)){const n=[];t.swatches.forEach((e,t)=>{n.push(`<button type="button" id="clr-swatch-${t}" aria-labelledby="clr-swatch-label clr-swatch-${t}" style="color: ${e};">${e}</button>`)}),X("clr-swatches").innerHTML=n.length?`<div>${n.join("")}</div>`:"",Z.swatches=t.swatches.slice()}break;case"swatchesOnly":Z.swatchesOnly=!!t.swatchesOnly,u.setAttribute("data-minimal",Z.swatchesOnly);break;case"alpha":Z.alpha=!!t.alpha,u.setAttribute("data-alpha",Z.alpha);break;case"inline":Z.inline=!!t.inline,u.setAttribute("data-inline",Z.inline),Z.inline&&(l=t.defaultColor||Z.defaultColor,w=I(l),M(),D(l));break;case"clearButton":"object"==typeof t.clearButton&&(t.clearButton.label&&(Z.clearLabel=t.clearButton.label,f.innerHTML=Z.clearLabel),t.clearButton=t.clearButton.show),Z.clearButton=!!t.clearButton,f.style.display=Z.clearButton?"block":"none";break;case"clearLabel":Z.clearLabel=t.clearLabel,f.innerHTML=Z.clearLabel;break;case"closeButton":Z.closeButton=!!t.closeButton,Z.closeButton?u.insertBefore(b,s):s.appendChild(b);break;case"closeLabel":Z.closeLabel=t.closeLabel,b.innerHTML=Z.closeLabel;break;case"a11y":var l,a,r=t.a11y;let e=!1;if("object"==typeof r)for(const c in r)r[c]&&Z.a11y[c]&&(Z.a11y[c]=r[c],e=!0);e&&(l=X("clr-open-label"),a=X("clr-swatch-label"),l.innerHTML=Z.a11y.open,a.innerHTML=Z.a11y.swatch,b.setAttribute("aria-label",Z.a11y.close),f.setAttribute("aria-label",Z.a11y.clear),y.setAttribute("aria-label",Z.a11y.hueSlider),v.setAttribute("aria-label",Z.a11y.alphaSlider),h.setAttribute("aria-label",Z.a11y.input),p.setAttribute("aria-label",Z.a11y.instruction));break;default:Z[o]=t[o]}}function e(e,t){"string"==typeof e&&"object"==typeof t&&(_[e]=t,L=!0)}function C(e){delete _[e],0===Object.keys(_).length&&(L=!1,e===n)&&T()}function r(e){if(L){var t,l=["el","wrap","rtl","inline","defaultColor","a11y"];for(t in _){const r=_[t];if(e.matches(t)){for(var a in n=t,c={},l.forEach(e=>delete r[e]),r)c[a]=Array.isArray(Z[a])?Z[a].slice():Z[a];S(r);break}}}}function T(){0<Object.keys(c).length&&(S(c),n="",c={})}function B(e){z(x,"click",e,e=>{Z.inline||(r(e.target),m=e.target,l=m.value,w=I(l),u.classList.add("clr-open"),M(),D(l),(Z.focusInput||Z.selectInput)&&(h.focus({preventScroll:!0}),h.setSelectionRange(m.selectionStart,m.selectionEnd)),Z.selectInput&&h.select(),(o||Z.swatchesOnly)&&U().shift().focus(),m.dispatchEvent(new Event("open",{bubbles:!0})))}),z(x,"input",e,e=>{var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function M(){if(u&&(m||Z.inline)){var r=d,o=E.scrollY,n=u.offsetWidth,c=u.offsetHeight,i={left:!1,top:!1};let e,l,t,a={x:0,y:0};if(r&&(e=E.getComputedStyle(r),l=parseFloat(e.marginTop),t=parseFloat(e.borderTopWidth),(a=r.getBoundingClientRect()).y+=t+o),!Z.inline){var s=m.getBoundingClientRect();let e=s.x,t=o+s.y+s.height+Z.margin;r?(e-=a.x,t-=a.y,e+n>r.clientWidth&&(e+=s.width-n,i.left=!0),t+c>r.clientHeight-l&&c+Z.margin<=s.top-(a.y-o)&&(t-=s.height+c+2*Z.margin,i.top=!0),t+=r.scrollTop):(e+n>x.documentElement.clientWidth&&(e+=s.width-n,i.left=!0),t+c-o>x.documentElement.clientHeight&&c+Z.margin<=s.top&&(t=o+s.y-c-Z.margin,i.top=!0)),u.classList.toggle("clr-left",i.left),u.classList.toggle("clr-top",i.top),u.style.left=e+"px",u.style.top=t+"px",a.x+=u.offsetLeft,a.y+=u.offsetTop}k={width:p.offsetWidth,height:p.offsetHeight,x:p.offsetLeft+a.x,y:p.offsetTop+a.y}}}function H(e){x.querySelectorAll(e).forEach(t=>{var l=t.parentNode;if(!l.classList.contains("clr-field")){var a=x.createElement("div");let e="clr-field";(Z.rtl||t.classList.contains("clr-rtl"))&&(e+=" clr-rtl"),a.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(a,t),a.setAttribute("class",e),a.style.color=t.value,a.appendChild(t)}})}function O(e){if(m&&!Z.inline){const t=m;e&&(m=A,l!==t.value)&&(t.value=l,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(()=>{l!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),u.classList.remove("clr-open"),L&&T(),t.dispatchEvent(new Event("close",{bubbles:!0})),Z.focusInput&&t.focus({preventScroll:!0}),m=A}}function D(e){var e=function(e){let t,l;Q.fillStyle="#000",Q.fillStyle=e,(t=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(Q.fillStyle))?(l={r:+t[3],g:+t[4],b:+t[5],a:+t[6]}).a=+l.a.toFixed(2):(t=Q.fillStyle.replace("#","").match(/.{2}/g).map(e=>parseInt(e,16)),l={r:t[0],g:t[1],b:t[2],a:1});return l}(e),t=function(e){var t=e.r/255,l=e.g/255,a=e.b/255,r=$.max(t,l,a),o=$.min(t,l,a),o=r-o,n=r;let c=0,i=0;o&&(r===t&&(c=(l-a)/o),r===l&&(c=2+(a-t)/o),r===a&&(c=4+(t-l)/o),r)&&(i=o/r);return{h:(c=$.floor(60*c))<0?c+360:c,s:$.round(100*i),v:$.round(100*n),a:e.a}}(e);R(t.s,t.v),q(e,t),y.value=t.h,u.style.color=`hsl(${t.h}, 100%, 50%)`,a.style.left=t.h/360*100+"%",i.style.left=k.width*t.s/100+"px",i.style.top=k.height-k.height*t.v/100+"px",v.value=100*t.a,g.style.left=100*t.a+"%"}function I(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function N(e){e=e!==A?e:h.value,m&&(m.value=e,m.dispatchEvent(new Event("input",{bubbles:!0}))),Z.onChange&&Z.onChange.call(E,e,m),x.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:m}}))}function j(e,t){var l,a,r,o,n,e={h:+y.value,s:e/k.width*100,v:100-t/k.height*100,a:v.value/100},c=(c=(t=e).s/100,l=t.v/100,c*=l,a=t.h/60,r=c*(1-$.abs(a%2-1)),c+=l-=c,r+=l,a=$.floor(a)%6,o=[c,r,l,l,r,c][a],n=[r,c,c,r,l,l][a],l=[l,l,r,c,c,r][a],{r:$.round(255*o),g:$.round(255*n),b:$.round(255*l),a:t.a});R(e.s,e.v),q(c,e),N()}function R(e,t){let l=Z.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),l=(l=l.replace("{s}",e)).replace("{v}",t),i.setAttribute("aria-label",l)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},l=t.pageX-k.x;let a=t.pageY-k.y;d&&(a+=d.scrollTop),W(l,a),e.preventDefault(),e.stopPropagation()}function W(e,t){e=e<0?0:e>k.width?k.width:e,t=t<0?0:t>k.height?k.height:t,i.style.left=e+"px",i.style.top=t+"px",j(e,t),i.focus()}function q(e,t){void 0===e&&(e={}),void 0===t&&(t={});let l=Z.format;for(const n in e)V[n]=e[n];for(const c in t)V[c]=t[c];var a,r=function(e){let t=e.r.toString(16),l=e.g.toString(16),a=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(l="0"+l);e.b<16&&(a="0"+a);Z.alpha&&(e.a<1||Z.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+l+a+r}(V),o=r.substring(0,7);switch(i.style.color=o,g.parentNode.style.color=o,g.style.color=r,s.style.color=r,p.style.display="none",p.offsetHeight,p.style.display="",g.nextElementSibling.style.display="none",g.nextElementSibling.offsetHeight,g.nextElementSibling.style.display="","mixed"===l?l=1===V.a?"hex":"rgb":"auto"===l&&(l=w),l){case"hex":h.value=r;break;case"rgb":h.value=(a=V,!Z.alpha||1===a.a&&!Z.forceAlpha?`rgb(${a.r}, ${a.g}, ${a.b})`:`rgba(${a.r}, ${a.g}, ${a.b}, ${a.a})`);break;case"hsl":h.value=(a=function(e){var t=e.v/100,l=t*(1-e.s/100/2);let a;0<l&&l<1&&(a=$.round((t-l)/$.min(l,1-l)*100));return{h:e.h,s:a||0,l:$.round(100*l),a:e.a}}(V),!Z.alpha||1===a.a&&!Z.forceAlpha?`hsl(${a.h}, ${a.s}%, ${a.l}%)`:`hsla(${a.h}, ${a.s}%, ${a.l}%, ${a.a})`)}x.querySelector(`.clr-format [value="${l}"]`).checked=!0}function F(){var e=+y.value,t=+i.style.left.replace("px",""),l=+i.style.top.replace("px","");u.style.color=`hsl(${e}, 100%, 50%)`,a.style.left=e/360*100+"%",j(t,l)}function P(){var e=v.value/100;g.style.left=100*e+"%",q({a:e}),N()}function Y(){x.getElementById("clr-picker")||(d=A,(u=x.createElement("div")).setAttribute("id","clr-picker"),u.className="clr-picker",u.innerHTML=`<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${Z.a11y.input}">`+`<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${Z.a11y.instruction}">`+'<div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue">'+`<input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${Z.a11y.hueSlider}">`+'<div id="clr-hue-marker"></div></div><div class="clr-alpha">'+`<input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${Z.a11y.alphaSlider}">`+'<div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented">'+`<legend>${Z.a11y.format}</legend>`+'<input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div>'+`<button type="button" id="clr-clear" class="clr-clear" aria-label="${Z.a11y.clear}">${Z.clearLabel}</button>`+'<div id="clr-color-preview" class="clr-preview">'+`<button type="button" id="clr-close" class="clr-close" aria-label="${Z.a11y.close}">${Z.closeLabel}</button>`+"</div>"+`<span id="clr-open-label" hidden>${Z.a11y.open}</span>`+`<span id="clr-swatch-label" hidden>${Z.a11y.swatch}</span>`,x.body.appendChild(u),p=X("clr-color-area"),i=X("clr-color-marker"),f=X("clr-clear"),b=X("clr-close"),s=X("clr-color-preview"),h=X("clr-color-value"),y=X("clr-hue-slider"),a=X("clr-hue-marker"),v=X("clr-alpha-slider"),g=X("clr-alpha-marker"),B(Z.el),H(Z.el),z(u,"mousedown",e=>{u.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),z(p,"mousedown",e=>{z(x,"mousemove",t)}),z(p,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),z(i,"mousedown",e=>{z(x,"mousemove",t)}),z(i,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),z(h,"change",e=>{var t=h.value;(m||Z.inline)&&N(""===t?t:D(t))}),z(f,"click",e=>{N(""),O()}),z(b,"click",e=>{N(),O()}),z(X("clr-format"),"click",".clr-format input",e=>{w=e.target.value,q(),N()}),z(u,"click",".clr-swatches button",e=>{D(e.target.textContent),N(),Z.swatchesOnly&&O()}),z(x,"mouseup",e=>{x.removeEventListener("mousemove",t)}),z(x,"touchend",e=>{x.removeEventListener("touchmove",t)}),z(x,"mousedown",e=>{o=!1,u.classList.remove("clr-keyboard-nav"),O()}),z(x,"keydown",e=>{var t,l=e.key,a=e.target,r=e.shiftKey;"Escape"===l?O(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(l)&&(o=!0,u.classList.add("clr-keyboard-nav")),"Tab"===l&&a.matches(".clr-picker *")&&(t=(l=U()).shift(),l=l.pop(),r&&a===t?(l.focus(),e.preventDefault()):r||a!==l||(t.focus(),e.preventDefault()))}),z(x,"click",".clr-field button",e=>{L&&T(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),z(i,"keydown",e=>{var t,l={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(l).includes(e.key)&&([l,t]=[...l[e.key]],W(+i.style.left.replace("px","")+l,+i.style.top.replace("px","")+t),e.preventDefault())}),z(p,"click",t),z(y,"input",F),z(v,"input",P))}function U(){return Array.from(u.querySelectorAll("input, button")).filter(e=>!!e.offsetWidth)}function X(e){return x.getElementById(e)}function z(e,t,l,a){const r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof l?e.addEventListener(t,e=>{r.call(e.target,l)&&a.call(e.target,e)}):(a=l,e.addEventListener(t,a))}function G(e,t){t=t!==A?t:[],"loading"!==x.readyState?e(...t):x.addEventListener("DOMContentLoaded",()=>{e(...t)})}function K(e,t){m=t,l=m.value,r(t),w=I(e),M(),D(e),N(),l!==e&&m.dispatchEvent(new Event("change",{bubbles:!0}))}NodeList!==A&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach);var J=(()=>{const a={init:Y,set:S,wrap:H,close:O,setInstance:e,setColor:K,removeInstance:C,updatePosition:M,ready:G};function t(e){G(()=>{e&&("string"==typeof e?B:S)(e)})}for(const r in a)t[r]=function(){for(var e=arguments.length,t=new Array(e),l=0;l<e;l++)t[l]=arguments[l];G(a[r],t)};return G(()=>{E.addEventListener("resize",e=>{t.updatePosition()}),E.addEventListener("scroll",e=>{t.updatePosition()})}),t})();return J.coloris=J}});
+!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof module&&module.exports?module.exports=t():(e.Coloris=t(),"object"==typeof window&&e.Coloris.init())}("undefined"!=typeof self?self:void 0,function(){{var E=window,x=document,$=Math,A=void 0;const Q=x.createElement("canvas").getContext("2d"),V={r:0,g:0,b:0,h:0,s:0,v:0,a:1};let d,u,p,i,s,h,f,b,y,a,v,g,m,w,l,o,k={};const Z={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!1,wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:()=>A,a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},_={};let n="",c={},L=!1;function S(t){if("object"==typeof t)for(const o in t)switch(o){case"el":B(t.el),!1!==t.wrap&&H(t.el);break;case"parent":(d=x.querySelector(t.parent))&&(d.appendChild(u),Z.parent=t.parent,d===x.body)&&(d=A);break;case"themeMode":Z.themeMode=t.themeMode,"auto"===t.themeMode&&E.matchMedia&&E.matchMedia("(prefers-color-scheme: dark)").matches&&(Z.themeMode="dark");case"theme":t.theme&&(Z.theme=t.theme),u.className=`clr-picker clr-${Z.theme} clr-`+Z.themeMode,Z.inline&&M();break;case"rtl":Z.rtl=!!t.rtl,x.querySelectorAll(".clr-field").forEach(e=>e.classList.toggle("clr-rtl",Z.rtl));break;case"margin":t.margin*=1,Z.margin=(isNaN(t.margin)?Z:t).margin;break;case"wrap":t.el&&t.wrap&&H(t.el);break;case"formatToggle":Z.formatToggle=!!t.formatToggle,X("clr-format").style.display=Z.formatToggle?"block":"none",Z.formatToggle&&(Z.format="auto");break;case"swatches":if(Array.isArray(t.swatches)){const n=[];t.swatches.forEach((e,t)=>{n.push(`<button type="button" id="clr-swatch-${t}" aria-labelledby="clr-swatch-label clr-swatch-${t}" style="color: ${e};">${e}</button>`)}),X("clr-swatches").innerHTML=n.length?`<div>${n.join("")}</div>`:"",Z.swatches=t.swatches.slice()}break;case"swatchesOnly":Z.swatchesOnly=!!t.swatchesOnly,u.setAttribute("data-minimal",Z.swatchesOnly);break;case"alpha":Z.alpha=!!t.alpha,u.setAttribute("data-alpha",Z.alpha);break;case"inline":Z.inline=!!t.inline,u.setAttribute("data-inline",Z.inline),Z.inline&&(l=t.defaultColor||Z.defaultColor,w=I(l),M(),D(l));break;case"clearButton":"object"==typeof t.clearButton&&(t.clearButton.label&&(Z.clearLabel=t.clearButton.label,f.innerHTML=Z.clearLabel),t.clearButton=t.clearButton.show),Z.clearButton=!!t.clearButton,f.style.display=Z.clearButton?"block":"none";break;case"clearLabel":Z.clearLabel=t.clearLabel,f.innerHTML=Z.clearLabel;break;case"closeButton":Z.closeButton=!!t.closeButton,Z.closeButton?u.insertBefore(b,s):s.appendChild(b);break;case"closeLabel":Z.closeLabel=t.closeLabel,b.innerHTML=Z.closeLabel;break;case"a11y":var l,a,r=t.a11y;let e=!1;if("object"==typeof r)for(const c in r)r[c]&&Z.a11y[c]&&(Z.a11y[c]=r[c],e=!0);e&&(l=X("clr-open-label"),a=X("clr-swatch-label"),l.innerHTML=Z.a11y.open,a.innerHTML=Z.a11y.swatch,b.setAttribute("aria-label",Z.a11y.close),f.setAttribute("aria-label",Z.a11y.clear),y.setAttribute("aria-label",Z.a11y.hueSlider),v.setAttribute("aria-label",Z.a11y.alphaSlider),h.setAttribute("aria-label",Z.a11y.input),p.setAttribute("aria-label",Z.a11y.instruction));break;default:Z[o]=t[o]}}function e(e,t){"string"==typeof e&&"object"==typeof t&&(_[e]=t,L=!0)}function C(e){delete _[e],0===Object.keys(_).length&&(L=!1,e===n)&&T()}function r(e){if(L){var t,l=["el","wrap","rtl","inline","defaultColor","a11y"];for(t in _){const r=_[t];if(e.matches(t)){for(var a in n=t,c={},l.forEach(e=>delete r[e]),r)c[a]=Array.isArray(Z[a])?Z[a].slice():Z[a];S(r);break}}}}function T(){0<Object.keys(c).length&&(S(c),n="",c={})}function B(e){z(x,"click",e,e=>{Z.inline||(r(e.target),m=e.target,l=m.value,w=I(l),u.classList.add("clr-open"),M(),D(l),(Z.focusInput||Z.selectInput)&&(h.focus({preventScroll:!0}),h.setSelectionRange(m.selectionStart,m.selectionEnd)),Z.selectInput&&h.select(),(o||Z.swatchesOnly)&&U().shift().focus(),m.dispatchEvent(new Event("open",{bubbles:!0})))}),z(x,"input",e,e=>{var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function M(){if(u&&(m||Z.inline)){var r=d,o=E.scrollY,n=u.offsetWidth,c=u.offsetHeight,i={left:!1,top:!1};let e,l,t,a={x:0,y:0};if(r&&(e=E.getComputedStyle(r),l=parseFloat(e.marginTop),t=parseFloat(e.borderTopWidth),(a=r.getBoundingClientRect()).y+=t+o),!Z.inline){var s=m.getBoundingClientRect();let e=s.x,t=o+s.y+s.height+Z.margin;r?(e-=a.x,t-=a.y,e+n>r.clientWidth&&(e+=s.width-n,i.left=!0),t+c>r.clientHeight-l&&c+Z.margin<=s.top-(a.y-o)&&(t-=s.height+c+2*Z.margin,i.top=!0),t+=r.scrollTop):(e+n>x.documentElement.clientWidth&&(e+=s.width-n,i.left=!0),t+c-o>x.documentElement.clientHeight&&c+Z.margin<=s.top&&(t=o+s.y-c-Z.margin,i.top=!0)),u.classList.toggle("clr-left",i.left),u.classList.toggle("clr-top",i.top),u.style.left=e+"px",u.style.top=t+"px",a.x+=u.offsetLeft,a.y+=u.offsetTop}k={width:p.offsetWidth,height:p.offsetHeight,x:p.offsetLeft+a.x,y:p.offsetTop+a.y}}}function H(e){x.querySelectorAll(e).forEach(t=>{var l=t.parentNode;if(!l.classList.contains("clr-field")){var a=x.createElement("div");let e="clr-field";(Z.rtl||t.classList.contains("clr-rtl"))&&(e+=" clr-rtl"),a.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(a,t),a.setAttribute("class",e),a.style.color=t.value,a.appendChild(t)}})}function O(e){if(m&&!Z.inline){const t=m;e&&(m=A,l!==t.value)&&(t.value=l,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(()=>{l!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),u.classList.remove("clr-open"),L&&T(),t.dispatchEvent(new Event("close",{bubbles:!0})),Z.focusInput&&t.focus({preventScroll:!0}),m=A}}function D(e){var e=function(e){let t,l;Q.fillStyle="#000",Q.fillStyle=e,l=(t=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(Q.fillStyle))?{r:+t[3],g:+t[4],b:+t[5],a:+t[6]}:(t=Q.fillStyle.replace("#","").match(/.{2}/g).map(e=>parseInt(e,16)),{r:t[0],g:t[1],b:t[2],a:1});return l}(e),t=function(e){var t=e.r/255,l=e.g/255,a=e.b/255,r=$.max(t,l,a),o=$.min(t,l,a),o=r-o,n=r;let c=0,i=0;o&&(r===t&&(c=(l-a)/o),r===l&&(c=2+(a-t)/o),r===a&&(c=4+(t-l)/o),r)&&(i=o/r);return{h:(c=$.floor(60*c))<0?c+360:c,s:$.round(100*i),v:$.round(100*n),a:e.a}}(e);R(t.s,t.v),q(e,t),y.value=t.h,u.style.color=`hsl(${t.h}, 100%, 50%)`,a.style.left=t.h/360*100+"%",i.style.left=k.width*t.s/100+"px",i.style.top=k.height-k.height*t.v/100+"px",v.value=100*t.a,g.style.left=100*t.a+"%"}function I(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function N(e){e=e!==A?e:h.value,m&&(m.value=e,m.dispatchEvent(new Event("input",{bubbles:!0}))),Z.onChange&&Z.onChange.call(E,e,m),x.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:m}}))}function j(e,t){var l,a,r,o,n,e={h:+y.value,s:e/k.width*100,v:100-t/k.height*100,a:v.value/100},c=(c=(t=e).s/100,l=t.v/100,c*=l,a=t.h/60,r=c*(1-$.abs(a%2-1)),c+=l-=c,r+=l,a=$.floor(a)%6,o=[c,r,l,l,r,c][a],n=[r,c,c,r,l,l][a],l=[l,l,r,c,c,r][a],{r:$.round(255*o),g:$.round(255*n),b:$.round(255*l),a:t.a});R(e.s,e.v),q(c,e),N()}function R(e,t){let l=Z.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),l=(l=l.replace("{s}",e)).replace("{v}",t),i.setAttribute("aria-label",l)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},l=t.pageX-k.x;let a=t.pageY-k.y;d&&(a+=d.scrollTop),W(l,a),e.preventDefault(),e.stopPropagation()}function W(e,t){e=e<0?0:e>k.width?k.width:e,t=t<0?0:t>k.height?k.height:t,i.style.left=e+"px",i.style.top=t+"px",j(e,t),i.focus()}function q(e,t){void 0===e&&(e={}),void 0===t&&(t={});let l=Z.format;for(const n in e)V[n]=e[n];for(const c in t)V[c]=t[c];var a,r=function(e){let t=e.r.toString(16),l=e.g.toString(16),a=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(l="0"+l);e.b<16&&(a="0"+a);Z.alpha&&(e.a<1||Z.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+l+a+r}(V),o=r.substring(0,7);switch(i.style.color=o,g.parentNode.style.color=o,g.style.color=r,s.style.color=r,p.style.display="none",p.offsetHeight,p.style.display="",g.nextElementSibling.style.display="none",g.nextElementSibling.offsetHeight,g.nextElementSibling.style.display="","mixed"===l?l=1===V.a?"hex":"rgb":"auto"===l&&(l=w),l){case"hex":h.value=r;break;case"rgb":h.value=(a=V,!Z.alpha||1===a.a&&!Z.forceAlpha?`rgb(${a.r}, ${a.g}, ${a.b})`:`rgba(${a.r}, ${a.g}, ${a.b}, ${a.a})`);break;case"hsl":h.value=(a=function(e){var t=e.v/100,l=t*(1-e.s/100/2);let a;0<l&&l<1&&(a=$.round((t-l)/$.min(l,1-l)*100));return{h:e.h,s:a||0,l:$.round(100*l),a:e.a}}(V),!Z.alpha||1===a.a&&!Z.forceAlpha?`hsl(${a.h}, ${a.s}%, ${a.l}%)`:`hsla(${a.h}, ${a.s}%, ${a.l}%, ${a.a})`)}x.querySelector(`.clr-format [value="${l}"]`).checked=!0}function P(){var e=+y.value,t=+i.style.left.replace("px",""),l=+i.style.top.replace("px","");u.style.color=`hsl(${e}, 100%, 50%)`,a.style.left=e/360*100+"%",j(t,l)}function F(){var e=v.value/100;g.style.left=100*e+"%",q({a:e}),N()}function Y(){x.getElementById("clr-picker")||(d=A,(u=x.createElement("div")).setAttribute("id","clr-picker"),u.className="clr-picker",u.innerHTML=`<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${Z.a11y.input}">`+`<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${Z.a11y.instruction}">`+'<div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue">'+`<input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${Z.a11y.hueSlider}">`+'<div id="clr-hue-marker"></div></div><div class="clr-alpha">'+`<input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${Z.a11y.alphaSlider}">`+'<div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented">'+`<legend>${Z.a11y.format}</legend>`+'<input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div>'+`<button type="button" id="clr-clear" class="clr-clear" aria-label="${Z.a11y.clear}">${Z.clearLabel}</button>`+'<div id="clr-color-preview" class="clr-preview">'+`<button type="button" id="clr-close" class="clr-close" aria-label="${Z.a11y.close}">${Z.closeLabel}</button>`+"</div>"+`<span id="clr-open-label" hidden>${Z.a11y.open}</span>`+`<span id="clr-swatch-label" hidden>${Z.a11y.swatch}</span>`,x.body.appendChild(u),p=X("clr-color-area"),i=X("clr-color-marker"),f=X("clr-clear"),b=X("clr-close"),s=X("clr-color-preview"),h=X("clr-color-value"),y=X("clr-hue-slider"),a=X("clr-hue-marker"),v=X("clr-alpha-slider"),g=X("clr-alpha-marker"),B(Z.el),H(Z.el),z(u,"mousedown",e=>{u.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),z(p,"mousedown",e=>{z(x,"mousemove",t)}),z(p,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),z(i,"mousedown",e=>{z(x,"mousemove",t)}),z(i,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),z(h,"change",e=>{var t=h.value;(m||Z.inline)&&N(""===t?t:D(t))}),z(f,"click",e=>{N(""),O()}),z(b,"click",e=>{N(),O()}),z(X("clr-format"),"click",".clr-format input",e=>{w=e.target.value,q(),N()}),z(u,"click",".clr-swatches button",e=>{D(e.target.textContent),N(),Z.swatchesOnly&&O()}),z(x,"mouseup",e=>{x.removeEventListener("mousemove",t)}),z(x,"touchend",e=>{x.removeEventListener("touchmove",t)}),z(x,"mousedown",e=>{o=!1,u.classList.remove("clr-keyboard-nav"),O()}),z(x,"keydown",e=>{var t,l=e.key,a=e.target,r=e.shiftKey;"Escape"===l?O(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(l)&&(o=!0,u.classList.add("clr-keyboard-nav")),"Tab"===l&&a.matches(".clr-picker *")&&(t=(l=U()).shift(),l=l.pop(),r&&a===t?(l.focus(),e.preventDefault()):r||a!==l||(t.focus(),e.preventDefault()))}),z(x,"click",".clr-field button",e=>{L&&T(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),z(i,"keydown",e=>{var t,l={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(l).includes(e.key)&&([l,t]=[...l[e.key]],W(+i.style.left.replace("px","")+l,+i.style.top.replace("px","")+t),e.preventDefault())}),z(p,"click",t),z(y,"input",P),z(v,"input",F))}function U(){return Array.from(u.querySelectorAll("input, button")).filter(e=>!!e.offsetWidth)}function X(e){return x.getElementById(e)}function z(e,t,l,a){const r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof l?e.addEventListener(t,e=>{r.call(e.target,l)&&a.call(e.target,e)}):(a=l,e.addEventListener(t,a))}function G(e,t){t=t!==A?t:[],"loading"!==x.readyState?e(...t):x.addEventListener("DOMContentLoaded",()=>{e(...t)})}function K(e,t){m=t,l=m.value,r(t),w=I(e),M(),D(e),N(),l!==e&&m.dispatchEvent(new Event("change",{bubbles:!0}))}NodeList!==A&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach);var J=(()=>{const a={init:Y,set:S,wrap:H,close:O,setInstance:e,setColor:K,removeInstance:C,updatePosition:M,ready:G};function t(e){G(()=>{e&&("string"==typeof e?B:S)(e)})}for(const r in a)t[r]=function(){for(var e=arguments.length,t=new Array(e),l=0;l<e;l++)t[l]=arguments[l];G(a[r],t)};return G(()=>{E.addEventListener("resize",e=>{t.updatePosition()}),E.addEventListener("scroll",e=>{t.updatePosition()})}),t})();return J.coloris=J}});

package.json

 {
   "name": "@melloware/coloris",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "A lightweight and elegant color picker.",
@@ -49,5 +49,5 @@ "author": "Momo Bassit",
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/register": "^7.16.0",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/register": "^7.23.7",
     "gulp": "^4.0.2",
@@ -57,3 +57,3 @@ "gulp-babel": "^8.0.0",
     "gulp-rename": "^2.0.0",
-    "gulp-replace": "^1.1.3",
+    "gulp-replace": "^1.1.4",
     "gulp-uglify": "^3.0.2",
@@ -60,0 +60,0 @@ "gulp-wrap": "^0.15.0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

152184

decreased by-0.17%

Lines of code

3108

decreased by-0.13%

No dependency changes