@melloware/coloris - npm Package Compare versions

Comparing version 0.23.0 to 0.23.1

dist/esm/coloris.js

@@ -102,3 +102,3 @@ const Coloris = (() => {
             // Set the theme and color scheme
-            picker.className = `clr-picker clr-${settings.theme} clr-${settings.themeMode}`;
+            picker.className = "clr-picker clr-" + settings.theme + " clr-" + settings.themeMode;
 
@@ -135,6 +135,6 @@ // Update the color picker's position if inline mode is in use
               options.swatches.forEach((swatch, i) => {
-                swatches.push(`<button type="button" id="clr-swatch-${i}" aria-labelledby="clr-swatch-label clr-swatch-${i}" style="color: ${swatch};">${swatch}</button>`);
+                swatches.push("<button type=\"button\" id=\"clr-swatch-" + i + "\" aria-labelledby=\"clr-swatch-label clr-swatch-" + i + "\" style=\"color: " + swatch + ";\">" + swatch + "</button>");
               });
 
-              getEl('clr-swatches').innerHTML = swatches.length ? `<div>${swatches.join('')}</div>` : '';
+              getEl('clr-swatches').innerHTML = swatches.length ? "<div>" + swatches.join('') + "</div>" : '';
               settings.swatches = options.swatches.slice();
@@ -416,4 +416,4 @@ }
         picker.classList.toggle('clr-top', reposition.top);
-        picker.style.left = `${left}px`;
-        picker.style.top = `${top}px`;
+        picker.style.left = left + "px";
+        picker.style.top = top + "px";
         offset.x += picker.offsetLeft;
@@ -447,3 +447,3 @@ offset.y += picker.offsetTop;
 
-          wrapper.innerHTML = `<button type="button" aria-labelledby="clr-open-label"></button>`;
+          wrapper.innerHTML = "<button type=\"button\" aria-labelledby=\"clr-open-label\"></button>";
           parentNode.insertBefore(wrapper, field);
@@ -518,10 +518,10 @@ wrapper.setAttribute('class', classes);
       hueSlider.value = hsva.h;
-      picker.style.color = `hsl(${hsva.h}, 100%, 50%)`;
-      hueMarker.style.left = `${hsva.h / 360 * 100}%`;
+      picker.style.color = "hsl(" + hsva.h + ", 100%, 50%)";
+      hueMarker.style.left = hsva.h / 360 * 100 + "%";
 
-      colorMarker.style.left = `${colorAreaDims.width * hsva.s / 100}px`;
-      colorMarker.style.top = `${colorAreaDims.height - colorAreaDims.height * hsva.v / 100}px`;
+      colorMarker.style.left = colorAreaDims.width * hsva.s / 100 + "px";
+      colorMarker.style.top = colorAreaDims.height - colorAreaDims.height * hsva.v / 100 + "px";
 
       alphaSlider.value = hsva.a * 100;
-      alphaMarker.style.left = `${hsva.a * 100}%`;
+      alphaMarker.style.left = hsva.a * 100 + "%";
     }
@@ -653,4 +653,4 @@
       // Set the position
-      colorMarker.style.left = `${x}px`;
-      colorMarker.style.top = `${y}px`;
+      colorMarker.style.left = x + "px";
+      colorMarker.style.top = y + "px";
 
@@ -715,3 +715,3 @@ // Update the color
       // Select the current format in the format switcher
-      document.querySelector(`.clr-format [value="${format}"]`).checked = true;
+      document.querySelector(".clr-format [value=\"" + format + "\"]").checked = true;
     }
@@ -727,4 +727,4 @@
 
-      picker.style.color = `hsl(${hue}, 100%, 50%)`;
-      hueMarker.style.left = `${hue / 360 * 100}%`;
+      picker.style.color = "hsl(" + hue + ", 100%, 50%)";
+      hueMarker.style.left = hue / 360 * 100 + "%";
 
@@ -740,3 +740,3 @@ setColorAtPosition(x, y);
 
-      alphaMarker.style.left = `${alpha * 100}%`;
+      alphaMarker.style.left = alpha * 100 + "%";
       updateColor({ a: alpha });
@@ -909,5 +909,5 @@ pickColor();
       if (!settings.alpha || rgba.a === 1 && !settings.forceAlpha) {
-        return `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})`;
+        return "rgb(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ")";
       } else {
-        return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+        return "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + ")";
       }
@@ -923,5 +923,5 @@ }
       if (!settings.alpha || hsla.a === 1 && !settings.forceAlpha) {
-        return `hsl(${hsla.h}, ${hsla.s}%, ${hsla.l}%)`;
+        return "hsl(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%)";
       } else {
-        return `hsla(${hsla.h}, ${hsla.s}%, ${hsla.l}%, ${hsla.a})`;
+        return "hsla(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%, " + hsla.a + ")";
       }
@@ -941,12 +941,12 @@ }
       picker.innerHTML =
-      `<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${settings.a11y.input}">` +
-      `<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${settings.a11y.instruction}">` +
+      "<input id=\"clr-color-value\" name=\"clr-color-value\" class=\"clr-color\" type=\"text\" value=\"\" spellcheck=\"false\" aria-label=\"" + settings.a11y.input + "\">" + ("<div id=\"clr-color-area\" class=\"clr-gradient\" role=\"application\" aria-label=\"" +
+      settings.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="${settings.a11y.hueSlider}">` +
+      '<div class="clr-hue">' + ("<input id=\"clr-hue-slider\" name=\"clr-hue-slider\" type=\"range\" min=\"0\" max=\"360\" step=\"1\" aria-label=\"" +
+      settings.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="${settings.a11y.alphaSlider}">` +
+      '<div class="clr-alpha">' + ("<input id=\"clr-alpha-slider\" name=\"clr-alpha-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" aria-label=\"" +
+      settings.a11y.alphaSlider + "\">") +
       '<div id="clr-alpha-marker"></div>' +
@@ -956,4 +956,4 @@ '<span></span>' +
       '<div id="clr-format" class="clr-format">' +
-      '<fieldset class="clr-segmented">' +
-      `<legend>${settings.a11y.format}</legend>` +
+      '<fieldset class="clr-segmented">' + ("<legend>" +
+      settings.a11y.format + "</legend>") +
       '<input id="clr-f1" type="radio" name="clr-format" value="hex">' +
@@ -968,9 +968,9 @@ '<label for="clr-f1">Hex</label>' +
       '</div>' +
-      '<div id="clr-swatches" class="clr-swatches"></div>' +
-      `<button type="button" id="clr-clear" class="clr-clear" aria-label="${settings.a11y.clear}">${settings.clearLabel}</button>` +
-      '<div id="clr-color-preview" class="clr-preview">' +
-      `<button type="button" id="clr-close" class="clr-close" aria-label="${settings.a11y.close}">${settings.closeLabel}</button>` +
-      '</div>' +
-      `<span id="clr-open-label" hidden>${settings.a11y.open}</span>` +
-      `<span id="clr-swatch-label" hidden>${settings.a11y.swatch}</span>`;
+      '<div id="clr-swatches" class="clr-swatches"></div>' + ("<button type=\"button\" id=\"clr-clear\" class=\"clr-clear\" aria-label=\"" +
+      settings.a11y.clear + "\">" + settings.clearLabel + "</button>") +
+      '<div id="clr-color-preview" class="clr-preview">' + ("<button type=\"button\" id=\"clr-close\" class=\"clr-close\" aria-label=\"" +
+      settings.a11y.close + "\">" + settings.closeLabel + "</button>") +
+      '</div>' + ("<span id=\"clr-open-label\" hidden>" +
+      settings.a11y.open + "</span>") + ("<span id=\"clr-swatch-label\" hidden>" +
+      settings.a11y.swatch + "</span>");
 
@@ -977,0 +977,0 @@ // Append the color picker to the DOM

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,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};
+const Coloris=(()=>{{var E=window,x=document,C=Math,A=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:()=>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."}},Z={};let n="",s={},L=!1;function S(t){if("object"==typeof t)for(const o in t)switch(o){case"el":M(t.el),!1!==t.wrap&&H(t.el);break;case"parent":(u=x.querySelector(t.parent))&&(u.appendChild(d),V.parent=t.parent,u===x.body)&&(u=A);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&&I();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&&H(t.el);break;case"formatToggle":V.formatToggle=!!t.formatToggle,X("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>")}),X("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=D(l),I(),O(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=X("clr-open-label"),a=X("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 T(e){delete Z[e],0===Object.keys(Z).length&&(L=!1,e===n)&&B()}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];S(r);break}}}}function B(){0<Object.keys(s).length&&(S(s),n="",s={})}function M(e){z(x,"click",e,e=>{V.inline||(r(e.target),m=e.target,l=m.value,w=D(l),d.classList.add("clr-open"),I(),O(l),(V.focusInput||V.selectInput)&&(h.focus({preventScroll:!0}),h.setSelectionRange(m.selectionStart,m.selectionEnd)),V.selectInput&&h.select(),(o||V.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 I(){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 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";(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 _(e){if(m&&!V.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}))}),d.classList.remove("clr-open"),L&&B(),t.dispatchEvent(new Event("close",{bubbles:!0})),V.focusInput&&t.focus({preventScroll:!0}),m=A}}function O(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);j(t.s,t.v),W(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 D(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}))),V.onChange&&V.onChange.call(E,e,m),x.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:m}}))}function P(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});j(e.s,e.v),W(s,e),N()}function j(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),R(l,a),e.preventDefault(),e.stopPropagation()}function R(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",P(e,t),c.focus()}function W(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 q(){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+"%",P(t,l)}function F(){var e=y.value/100;g.style.left=100*e+"%",W({a:e}),N()}function Y(){x.getElementById("clr-picker")||(u=A,(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=X("clr-color-area"),c=X("clr-color-marker"),f=X("clr-clear"),b=X("clr-close"),i=X("clr-color-preview"),h=X("clr-color-value"),v=X("clr-hue-slider"),a=X("clr-hue-marker"),y=X("clr-alpha-slider"),g=X("clr-alpha-marker"),M(V.el),H(V.el),z(d,"mousedown",e=>{d.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(c,"mousedown",e=>{z(x,"mousemove",t)}),z(c,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),z(h,"change",e=>{var t=h.value;(m||V.inline)&&N(""===t?t:O(t))}),z(f,"click",e=>{N(""),_()}),z(b,"click",e=>{N(),_()}),z(X("clr-format"),"click",".clr-format input",e=>{w=e.target.value,W(),N()}),z(d,"click",".clr-swatches button",e=>{O(e.target.textContent),N(),V.swatchesOnly&&_()}),z(x,"mouseup",e=>{x.removeEventListener("mousemove",t)}),z(x,"touchend",e=>{x.removeEventListener("touchmove",t)}),z(x,"mousedown",e=>{o=!1,d.classList.remove("clr-keyboard-nav"),_()}),z(x,"keydown",e=>{var t,l=e.key,a=e.target,r=e.shiftKey;"Escape"===l?_(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(l)&&(o=!0,d.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&&B(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),z(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]],R(+c.style.left.replace("px","")+l,+c.style.top.replace("px","")+t),e.preventDefault())}),z(p,"click",t),z(v,"input",q),z(y,"input",F))}function U(){return Array.from(d.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=D(e),I(),O(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 $=(()=>{const a={init:Y,set:S,wrap:H,close:_,setInstance:e,setColor:K,removeInstance:T,updatePosition:I,ready:G};function t(e){G(()=>{e&&("string"==typeof e?M: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 $.coloris=$}})(),_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

@@ -143,3 +143,3 @@ // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
             // Set the theme and color scheme
-            picker.className = `clr-picker clr-${settings.theme} clr-${settings.themeMode}`;
+            picker.className = "clr-picker clr-" + settings.theme + " clr-" + settings.themeMode;
 
@@ -176,6 +176,6 @@ // Update the color picker's position if inline mode is in use
               options.swatches.forEach((swatch, i) => {
-                swatches.push(`<button type="button" id="clr-swatch-${i}" aria-labelledby="clr-swatch-label clr-swatch-${i}" style="color: ${swatch};">${swatch}</button>`);
+                swatches.push("<button type=\"button\" id=\"clr-swatch-" + i + "\" aria-labelledby=\"clr-swatch-label clr-swatch-" + i + "\" style=\"color: " + swatch + ";\">" + swatch + "</button>");
               });
 
-              getEl('clr-swatches').innerHTML = swatches.length ? `<div>${swatches.join('')}</div>` : '';
+              getEl('clr-swatches').innerHTML = swatches.length ? "<div>" + swatches.join('') + "</div>" : '';
               settings.swatches = options.swatches.slice();
@@ -457,4 +457,4 @@ }
         picker.classList.toggle('clr-top', reposition.top);
-        picker.style.left = `${left}px`;
-        picker.style.top = `${top}px`;
+        picker.style.left = left + "px";
+        picker.style.top = top + "px";
         offset.x += picker.offsetLeft;
@@ -488,3 +488,3 @@ offset.y += picker.offsetTop;
 
-          wrapper.innerHTML = `<button type="button" aria-labelledby="clr-open-label"></button>`;
+          wrapper.innerHTML = "<button type=\"button\" aria-labelledby=\"clr-open-label\"></button>";
           parentNode.insertBefore(wrapper, field);
@@ -559,10 +559,10 @@ wrapper.setAttribute('class', classes);
       hueSlider.value = hsva.h;
-      picker.style.color = `hsl(${hsva.h}, 100%, 50%)`;
-      hueMarker.style.left = `${hsva.h / 360 * 100}%`;
+      picker.style.color = "hsl(" + hsva.h + ", 100%, 50%)";
+      hueMarker.style.left = hsva.h / 360 * 100 + "%";
 
-      colorMarker.style.left = `${colorAreaDims.width * hsva.s / 100}px`;
-      colorMarker.style.top = `${colorAreaDims.height - colorAreaDims.height * hsva.v / 100}px`;
+      colorMarker.style.left = colorAreaDims.width * hsva.s / 100 + "px";
+      colorMarker.style.top = colorAreaDims.height - colorAreaDims.height * hsva.v / 100 + "px";
 
       alphaSlider.value = hsva.a * 100;
-      alphaMarker.style.left = `${hsva.a * 100}%`;
+      alphaMarker.style.left = hsva.a * 100 + "%";
     }
@@ -694,4 +694,4 @@
       // Set the position
-      colorMarker.style.left = `${x}px`;
-      colorMarker.style.top = `${y}px`;
+      colorMarker.style.left = x + "px";
+      colorMarker.style.top = y + "px";
 
@@ -756,3 +756,3 @@ // Update the color
       // Select the current format in the format switcher
-      document.querySelector(`.clr-format [value="${format}"]`).checked = true;
+      document.querySelector(".clr-format [value=\"" + format + "\"]").checked = true;
     }
@@ -768,4 +768,4 @@
 
-      picker.style.color = `hsl(${hue}, 100%, 50%)`;
-      hueMarker.style.left = `${hue / 360 * 100}%`;
+      picker.style.color = "hsl(" + hue + ", 100%, 50%)";
+      hueMarker.style.left = hue / 360 * 100 + "%";
 
@@ -781,3 +781,3 @@ setColorAtPosition(x, y);
 
-      alphaMarker.style.left = `${alpha * 100}%`;
+      alphaMarker.style.left = alpha * 100 + "%";
       updateColor({ a: alpha });
@@ -950,5 +950,5 @@ pickColor();
       if (!settings.alpha || rgba.a === 1 && !settings.forceAlpha) {
-        return `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})`;
+        return "rgb(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ")";
       } else {
-        return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+        return "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + ")";
       }
@@ -964,5 +964,5 @@ }
       if (!settings.alpha || hsla.a === 1 && !settings.forceAlpha) {
-        return `hsl(${hsla.h}, ${hsla.s}%, ${hsla.l}%)`;
+        return "hsl(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%)";
       } else {
-        return `hsla(${hsla.h}, ${hsla.s}%, ${hsla.l}%, ${hsla.a})`;
+        return "hsla(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%, " + hsla.a + ")";
       }
@@ -982,12 +982,12 @@ }
       picker.innerHTML =
-      `<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${settings.a11y.input}">` +
-      `<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${settings.a11y.instruction}">` +
+      "<input id=\"clr-color-value\" name=\"clr-color-value\" class=\"clr-color\" type=\"text\" value=\"\" spellcheck=\"false\" aria-label=\"" + settings.a11y.input + "\">" + ("<div id=\"clr-color-area\" class=\"clr-gradient\" role=\"application\" aria-label=\"" +
+      settings.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="${settings.a11y.hueSlider}">` +
+      '<div class="clr-hue">' + ("<input id=\"clr-hue-slider\" name=\"clr-hue-slider\" type=\"range\" min=\"0\" max=\"360\" step=\"1\" aria-label=\"" +
+      settings.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="${settings.a11y.alphaSlider}">` +
+      '<div class="clr-alpha">' + ("<input id=\"clr-alpha-slider\" name=\"clr-alpha-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" aria-label=\"" +
+      settings.a11y.alphaSlider + "\">") +
       '<div id="clr-alpha-marker"></div>' +
@@ -997,4 +997,4 @@ '<span></span>' +
       '<div id="clr-format" class="clr-format">' +
-      '<fieldset class="clr-segmented">' +
-      `<legend>${settings.a11y.format}</legend>` +
+      '<fieldset class="clr-segmented">' + ("<legend>" +
+      settings.a11y.format + "</legend>") +
       '<input id="clr-f1" type="radio" name="clr-format" value="hex">' +
@@ -1009,9 +1009,9 @@ '<label for="clr-f1">Hex</label>' +
       '</div>' +
-      '<div id="clr-swatches" class="clr-swatches"></div>' +
-      `<button type="button" id="clr-clear" class="clr-clear" aria-label="${settings.a11y.clear}">${settings.clearLabel}</button>` +
-      '<div id="clr-color-preview" class="clr-preview">' +
-      `<button type="button" id="clr-close" class="clr-close" aria-label="${settings.a11y.close}">${settings.closeLabel}</button>` +
-      '</div>' +
-      `<span id="clr-open-label" hidden>${settings.a11y.open}</span>` +
-      `<span id="clr-swatch-label" hidden>${settings.a11y.swatch}</span>`;
+      '<div id="clr-swatches" class="clr-swatches"></div>' + ("<button type=\"button\" id=\"clr-clear\" class=\"clr-clear\" aria-label=\"" +
+      settings.a11y.clear + "\">" + settings.clearLabel + "</button>") +
+      '<div id="clr-color-preview" class="clr-preview">' + ("<button type=\"button\" id=\"clr-close\" class=\"clr-close\" aria-label=\"" +
+      settings.a11y.close + "\">" + settings.closeLabel + "</button>") +
+      '</div>' + ("<span id=\"clr-open-label\" hidden>" +
+      settings.a11y.open + "</span>") + ("<span id=\"clr-swatch-label\" hidden>" +
+      settings.a11y.swatch + "</span>");
 
@@ -1018,0 +1018,0 @@ // Append the color picker to the DOM

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,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}});
+!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,A=Math,S=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:()=>S,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 C(t){if("object"==typeof t)for(const o in t)switch(o){case"el":M(t.el),!1!==t.wrap&&O(t.el);break;case"parent":(d=x.querySelector(t.parent))&&(d.appendChild(u),Z.parent=t.parent,d===x.body)&&(d=S);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&&H();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&&O(t.el);break;case"formatToggle":Z.formatToggle=!!t.formatToggle,z("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>")}),z("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=N(l),H(),I(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=z("clr-open-label"),a=z("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 T(e){delete _[e],0===Object.keys(_).length&&(L=!1,e===n)&&B()}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];C(r);break}}}}function B(){0<Object.keys(c).length&&(C(c),n="",c={})}function M(e){G(x,"click",e,e=>{Z.inline||(r(e.target),m=e.target,l=m.value,w=N(l),u.classList.add("clr-open"),H(),I(l),(Z.focusInput||Z.selectInput)&&(h.focus({preventScroll:!0}),h.setSelectionRange(m.selectionStart,m.selectionEnd)),Z.selectInput&&h.select(),(o||Z.swatchesOnly)&&X().shift().focus(),m.dispatchEvent(new Event("open",{bubbles:!0})))}),G(x,"input",e,e=>{var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function H(){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 O(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 D(e){if(m&&!Z.inline){const t=m;e&&(m=S,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&&B(),t.dispatchEvent(new Event("close",{bubbles:!0})),Z.focusInput&&t.focus({preventScroll:!0}),m=S}}function I(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=A.max(t,l,a),o=A.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=A.floor(60*c))<0?c+360:c,s:A.round(100*i),v:A.round(100*n),a:e.a}}(e);W(t.s,t.v),P(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 N(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function j(e){e=e!==S?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 R(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-A.abs(a%2-1)),c+=l-=c,r+=l,a=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:A.round(255*o),g:A.round(255*n),b:A.round(255*l),a:t.a});W(e.s,e.v),P(c,e),j()}function W(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),q(l,a),e.preventDefault(),e.stopPropagation()}function q(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",R(e,t),i.focus()}function P(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=A.round((t-l)/A.min(l,1-l)*100));return{h:e.h,s:a||0,l:A.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+"%",R(t,l)}function Y(){var e=v.value/100;g.style.left=100*e+"%",P({a:e}),j()}function U(){x.getElementById("clr-picker")||(d=S,(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=z("clr-color-area"),i=z("clr-color-marker"),f=z("clr-clear"),b=z("clr-close"),s=z("clr-color-preview"),h=z("clr-color-value"),y=z("clr-hue-slider"),a=z("clr-hue-marker"),v=z("clr-alpha-slider"),g=z("clr-alpha-marker"),M(Z.el),O(Z.el),G(u,"mousedown",e=>{u.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),G(p,"mousedown",e=>{G(x,"mousemove",t)}),G(p,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),G(i,"mousedown",e=>{G(x,"mousemove",t)}),G(i,"touchstart",e=>{x.addEventListener("touchmove",t,{passive:!1})}),G(h,"change",e=>{var t=h.value;(m||Z.inline)&&j(""===t?t:I(t))}),G(f,"click",e=>{j(""),D()}),G(b,"click",e=>{j(),D()}),G(z("clr-format"),"click",".clr-format input",e=>{w=e.target.value,P(),j()}),G(u,"click",".clr-swatches button",e=>{I(e.target.textContent),j(),Z.swatchesOnly&&D()}),G(x,"mouseup",e=>{x.removeEventListener("mousemove",t)}),G(x,"touchend",e=>{x.removeEventListener("touchmove",t)}),G(x,"mousedown",e=>{o=!1,u.classList.remove("clr-keyboard-nav"),D()}),G(x,"keydown",e=>{var t,l=e.key,a=e.target,r=e.shiftKey;"Escape"===l?D(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(l)&&(o=!0,u.classList.add("clr-keyboard-nav")),"Tab"===l&&a.matches(".clr-picker *")&&(t=(l=X()).shift(),l=l.pop(),r&&a===t?(l.focus(),e.preventDefault()):r||a!==l||(t.focus(),e.preventDefault()))}),G(x,"click",".clr-field button",e=>{L&&B(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),G(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]],q(+i.style.left.replace("px","")+l,+i.style.top.replace("px","")+t),e.preventDefault())}),G(p,"click",t),G(y,"input",F),G(v,"input",Y))}function X(){return Array.from(u.querySelectorAll("input, button")).filter(e=>!!e.offsetWidth)}function z(e){return x.getElementById(e)}function G(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 K(e,t){t=t!==S?t:[],"loading"!==x.readyState?e(...t):x.addEventListener("DOMContentLoaded",()=>{e(...t)})}function $(e,t){m=t,l=m.value,r(t),w=N(e),H(),I(e),j(),l!==e&&m.dispatchEvent(new Event("change",{bubbles:!0}))}NodeList!==S&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach);var J=(()=>{const a={init:U,set:C,wrap:O,close:D,setInstance:e,setColor:$,removeInstance:T,updatePosition:H,ready:K};function t(e){K(()=>{e&&("string"==typeof e?M:C)(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];K(a[r],t)};return K(()=>{E.addEventListener("resize",e=>{t.updatePosition()}),E.addEventListener("scroll",e=>{t.updatePosition()})}),t})();return J.coloris=J}});

package.json

 {
   "name": "@melloware/coloris",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "description": "A lightweight and elegant color picker.",
@@ -19,6 +19,3 @@ "author": "Momo Bassit",
     },
-    "./dist/coloris.css": {
-      "import": "./dist/coloris.css",
-      "require": "./dist/coloris.css"
-    }
+    "./dist/coloris.css": "./dist/coloris.css"
   },
@@ -53,3 +50,3 @@ "types": "dist/coloris.d.ts",
     "@babel/register": "^7.23.7",
-    "gulp": "^4.0.2",
+    "gulp": "^5.0.0",
     "gulp-babel": "^8.0.0",
@@ -56,0 +53,0 @@ "gulp-clean-css": "^4.3.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

Improved metrics

Total package byte prevSize

152642

increased by0.3%

No dependency changes