@melloware/coloris - npm Package Compare versions

Comparing version 0.19.1 to 0.20.0

dist/esm/coloris.js

@@ -6,7 +6,7 @@ var Coloris = function () {
   * https://github.com/mdbassit/Coloris
-  * Version: 0.19.0
+  * Version: 0.20.0
   * NPM: https://github.com/melloware/coloris-npm
   */
 
-  return function (window, document, Math) {
+  return function (window, document, Math, undefined) {
     var ctx = document.createElement('canvas').getContext('2d');
@@ -86,3 +86,3 @@ var currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 };
               if (container === document.body) {
-                container = null;
+                container = undefined;
               }
@@ -222,4 +222,4 @@ }
           default:
-            settings[key] = options[key];}
-
+            settings[key] = options[key];
+        }
       };for (var key in options) {_loop();}
@@ -465,3 +465,3 @@ }
           // This will prevent the "change" event on the colorValue input to execute its handler
-          currentEl = null;
+          currentEl = undefined;
 
@@ -499,3 +499,3 @@ if (oldColor !== prevEl.value) {
         // This essentially marks the picker as closed
-        currentEl = null;
+        currentEl = undefined;
       }
@@ -555,6 +555,6 @@ }
       if (settings.onChange) {
-        settings.onChange.call(window, color);
+        settings.onChange.call(window, color, currentEl);
       }
 
-      document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color: color } }));
+      document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color: color, currentEl: currentEl } }));
     }
@@ -709,5 +709,5 @@
           colorValue.value = HSLAToStr(HSVAtoHSLA(currentColor));
-          break;}
+          break;
+      }
 
-
       // Select the current format in the format switcher
@@ -933,3 +933,3 @@ document.querySelector(".clr-format [value=\"" + format + "\"]").checked = true;
       // Render the UI
-      container = null;
+      container = undefined;
       picker = document.createElement('div');
@@ -1267,9 +1267,9 @@ picker.setAttribute('id', 'clr-picker');
 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 };
+  _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/esm/coloris.min.js

@@ -6,5 +6,5 @@ var Coloris=function(){
   * https://github.com/mdbassit/Coloris
-  * Version: 0.19.0
+  * Version: 0.20.0
   * NPM: https://github.com/melloware/coloris-npm
   */
-return h=window,b=document,v=Math,i=b.createElement("canvas").getContext("2d"),H={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!(I={r:0,g:0,b:0,h:0,s:0,v:0,a: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:function(){},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."}},_={},O="",N=!(D={}),void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(V=function(){var r={init:z,set:n,wrap:s,close:o,setInstance:P,setColor:$,removeInstance:j,updatePosition:c};function t(e){K(function(){e&&("string"==typeof e?q:n)(e)})}for(var e in r)!function(l){t[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];K(r[l],t)}}(e);return K(function(){h.addEventListener("resize",function(e){t.updatePosition()}),h.addEventListener("scroll",function(e){t.updatePosition()})}),t}()).coloris=V;function n(o){if("object"==typeof o)for(var i in o)!function(){switch(i){case"el":q(o.el),!1!==o.wrap&&s(o.el);break;case"parent":(y=b.querySelector(o.parent))&&(y.appendChild(g),H.parent=o.parent,y===b.body)&&(y=null);break;case"themeMode":H.themeMode=o.themeMode,"auto"===o.themeMode&&h.matchMedia&&h.matchMedia("(prefers-color-scheme: dark)").matches&&(H.themeMode="dark");case"theme":o.theme&&(H.theme=o.theme),g.className="clr-picker clr-"+H.theme+" clr-"+H.themeMode,H.inline&&c();break;case"rtl":H.rtl=!!o.rtl,b.querySelectorAll(".clr-field").forEach(function(e){return e.classList.toggle("clr-rtl",H.rtl)});break;case"margin":o.margin*=1,H.margin=(isNaN(o.margin)?H:o).margin;break;case"wrap":o.el&&o.wrap&&s(o.el);break;case"formatToggle":H.formatToggle=!!o.formatToggle,f("clr-format").style.display=H.formatToggle?"block":"none",H.formatToggle&&(H.format="auto");break;case"swatches":var a;Array.isArray(o.swatches)&&(a=[],o.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),f("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",H.swatches=o.swatches.slice());break;case"swatchesOnly":H.swatchesOnly=!!o.swatchesOnly,g.setAttribute("data-minimal",H.swatchesOnly);break;case"alpha":H.alpha=!!o.alpha,g.setAttribute("data-alpha",H.alpha);break;case"inline":H.inline=!!o.inline,g.setAttribute("data-inline",H.inline),H.inline&&(e=o.defaultColor||H.defaultColor,M=F(e),c(),u(e));break;case"clearButton":"object"==typeof o.clearButton&&(o.clearButton.label&&(H.clearLabel=o.clearButton.label,x.innerHTML=H.clearLabel),o.clearButton=o.clearButton.show),H.clearButton=!!o.clearButton,x.style.display=H.clearButton?"block":"none";break;case"clearLabel":H.clearLabel=o.clearLabel,x.innerHTML=H.clearLabel;break;case"closeButton":H.closeButton=!!o.closeButton,H.closeButton?g.insertBefore(C,L):L.appendChild(C);break;case"closeLabel":H.closeLabel=o.closeLabel,C.innerHTML=H.closeLabel;break;case"a11y":var e,t,l=o.a11y,r=!1;if("object"==typeof l)for(var n in l)l[n]&&H.a11y[n]&&(H.a11y[n]=l[n],r=!0);r&&(e=f("clr-open-label"),t=f("clr-swatch-label"),e.innerHTML=H.a11y.open,t.innerHTML=H.a11y.swatch,C.setAttribute("aria-label",H.a11y.close),x.setAttribute("aria-label",H.a11y.clear),A.setAttribute("aria-label",H.a11y.hueSlider),S.setAttribute("aria-label",H.a11y.alphaSlider),E.setAttribute("aria-label",H.a11y.input),m.setAttribute("aria-label",H.a11y.instruction));break;default:H[i]=o[i]}}()}function P(e,t){"string"==typeof e&&"object"==typeof t&&(_[e]=t,N=!0)}function j(e){delete _[e],0===Object.keys(_).length&&(N=!1,e===O)&&a()}function W(a){if(N){var l,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(l in _)if("break"===function(){var t=_[l];if(a.matches(l)){for(var e in O=l,D={},r.forEach(function(e){return delete t[e]}),t)D[e]=Array.isArray(H[e])?H[e].slice():H[e];return n(t),"break"}}())break}}function a(){0<Object.keys(D).length&&(n(D),O="",D={})}function q(e){l(b,"click",e,function(e){H.inline||(W(e.target),B=e.target,r=B.value,M=F(r),g.classList.add("clr-open"),c(),u(r),(H.focusInput||H.selectInput)&&E.focus({preventScroll:!0}),H.selectInput&&E.select(),(Q||H.swatchesOnly)&&G().shift().focus(),B.dispatchEvent(new Event("open",{bubbles:!0})))}),l(b,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function c(){var e,t,a,l,r,n,o,i,c,s;g&&(B||H.inline)&&(e=y,t=h.scrollY,a=g.offsetWidth,l=g.offsetHeight,r={left:!1,top:!1},o={x:0,y:0},e&&(i=h.getComputedStyle(e),n=parseFloat(i.marginTop),i=parseFloat(i.borderTopWidth),(o=e.getBoundingClientRect()).y+=i+t),H.inline||(c=(i=B.getBoundingClientRect()).x,s=t+i.y+i.height+H.margin,e?(c-=o.x,s-=o.y,c+a>e.clientWidth&&(c+=i.width-a,r.left=!0),s+l>e.clientHeight-n&&l+H.margin<=i.top-(o.y-t)&&(s-=i.height+l+2*H.margin,r.top=!0),s+=e.scrollTop):(c+a>b.documentElement.clientWidth&&(c+=i.width-a,r.left=!0),s+l-t>b.documentElement.clientHeight&&l+H.margin<=i.top&&(s=t+i.y-l-H.margin,r.top=!0)),g.classList.toggle("clr-left",r.left),g.classList.toggle("clr-top",r.top),g.style.left=c+"px",g.style.top=s+"px",o.x+=g.offsetLeft,o.y+=g.offsetTop),w={width:m.offsetWidth,height:m.offsetHeight,x:m.offsetLeft+o.x,y:m.offsetTop+o.y})}function s(e){b.querySelectorAll(e).forEach(function(e){var t,a,l=e.parentNode;l.classList.contains("clr-field")||(t=b.createElement("div"),a="clr-field",(H.rtl||e.classList.contains("clr-rtl"))&&(a+=" clr-rtl"),t.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(t,e),t.setAttribute("class",a),t.style.color=e.value,t.appendChild(e))})}function o(e){var t;B&&!H.inline&&(t=B,e&&(B=null,r!==t.value)&&(t.value=r,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(function(){r!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),g.classList.remove("clr-open"),N&&a(),t.dispatchEvent(new Event("close",{bubbles:!0})),H.focusInput&&t.focus({preventScroll:!0}),B=null)}function u(e){var e=function(e){var t;i.fillStyle="#000",i.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(i.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=i.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),t={r:e[0],g:e[1],b:e[2],a:1});return t}(e),t=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=v.max(t,a,l),n=v.min(t,a,l),n=r-n,o=r,i=0,c=0;n&&(r===t&&(i=(a-l)/n),r===a&&(i=2+(l-t)/n),r===l&&(i=4+(t-a)/n),r)&&(c=n/r);return{h:(i=v.floor(60*i))<0?i+360:i,s:v.round(100*c),v:v.round(100*o),a:e.a}}(e);Y(t.s,t.v),p(e,t),A.value=t.h,g.style.color="hsl("+t.h+", 100%, 50%)",J.style.left=t.h/360*100+"%",k.style.left=w.width*t.s/100+"px",k.style.top=w.height-w.height*t.v/100+"px",S.value=100*t.a,T.style.left=100*t.a+"%"}function F(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function d(e){e=void 0!==e?e:E.value,B&&(B.value=e,B.dispatchEvent(new Event("input",{bubbles:!0}))),H.onChange&&H.onChange.call(h,e),b.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e}}))}function R(e,t){var a,l,r,n,o,e={h:+A.value,s:e/w.width*100,v:100-t/w.height*100,a:S.value/100},i=(i=(t=e).s/100,a=t.v/100,i*=a,l=t.h/60,r=i*(1-v.abs(l%2-1)),i+=a-=i,r+=a,l=v.floor(l)%6,n=[i,r,a,a,r,i][l],o=[r,i,i,r,a,a][l],a=[a,a,r,i,i,r][l],{r:v.round(255*n),g:v.round(255*o),b:v.round(255*a),a:t.a});Y(e.s,e.v),p(i,e),d()}function Y(e,t){var a=H.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),k.setAttribute("aria-label",a)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},a=t.pageX-w.x,t=t.pageY-w.y;y&&(t+=y.scrollTop),U(a,t),e.preventDefault(),e.stopPropagation()}function U(e,t){e=e<0?0:e>w.width?w.width:e,t=t<0?0:t>w.height?w.height:t,k.style.left=e+"px",k.style.top=t+"px",R(e,t),k.focus()}function p(e,t){void 0===t&&(t={});var a,l,r=H.format;for(a in e=void 0===e?{}:e)I[a]=e[a];for(l in t)I[l]=t[l];var n,o=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);H.alpha&&(e.a<1||H.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+a+l+r}(I),i=o.substring(0,7);switch(k.style.color=i,T.parentNode.style.color=i,T.style.color=o,L.style.color=o,m.style.display="none",m.offsetHeight,m.style.display="",T.nextElementSibling.style.display="none",T.nextElementSibling.offsetHeight,T.nextElementSibling.style.display="","mixed"===r?r=1===I.a?"hex":"rgb":"auto"===r&&(r=M),r){case"hex":E.value=o;break;case"rgb":E.value=(n=I,!H.alpha||1===n.a&&!H.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":E.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=v.round((a-l)/v.min(l,1-l)*100));return{h:e.h,s:t||0,l:v.round(100*l),a:e.a}}(I),!H.alpha||1===n.a&&!H.forceAlpha?"hsl("+n.h+", "+n.s+"%, "+n.l+"%)":"hsla("+n.h+", "+n.s+"%, "+n.l+"%, "+n.a+")")}b.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+A.value,t=+k.style.left.replace("px",""),a=+k.style.top.replace("px","");g.style.color="hsl("+e+", 100%, 50%)",J.style.left=e/360*100+"%",R(t,a)}function X(){var e=S.value/100;T.style.left=100*e+"%",p({a:e}),d()}function z(){b.getElementById("clr-picker")||(y=null,(g=b.createElement("div")).setAttribute("id","clr-picker"),g.className="clr-picker",g.innerHTML='<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="'+H.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+H.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="'+H.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="'+H.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+H.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="'+H.a11y.clear+'">'+H.clearLabel+'</button><div id="clr-color-preview" class="clr-preview"><button type="button" id="clr-close" class="clr-close" aria-label="'+H.a11y.close+'">'+H.closeLabel+'</button></div><span id="clr-open-label" hidden>'+H.a11y.open+'</span><span id="clr-swatch-label" hidden>'+H.a11y.swatch+"</span>",b.body.appendChild(g),m=f("clr-color-area"),k=f("clr-color-marker"),x=f("clr-clear"),C=f("clr-close"),L=f("clr-color-preview"),E=f("clr-color-value"),A=f("clr-hue-slider"),J=f("clr-hue-marker"),S=f("clr-alpha-slider"),T=f("clr-alpha-marker"),q(H.el),s(H.el),l(g,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),l(m,"mousedown",function(e){l(b,"mousemove",t)}),l(m,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),l(k,"mousedown",function(e){l(b,"mousemove",t)}),l(k,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),l(E,"change",function(e){(B||H.inline)&&(u(E.value),d())}),l(x,"click",function(e){d(""),o()}),l(C,"click",function(e){d(),o()}),l(b,"click",".clr-format input",function(e){M=e.target.value,p(),d()}),l(g,"click",".clr-swatches button",function(e){u(e.target.textContent),d(),H.swatchesOnly&&o()}),l(b,"mouseup",function(e){b.removeEventListener("mousemove",t)}),l(b,"touchend",function(e){b.removeEventListener("touchmove",t)}),l(b,"mousedown",function(e){Q=!1,g.classList.remove("clr-keyboard-nav"),o()}),l(b,"keydown",function(e){var t,a=e.key,l=e.target,r=e.shiftKey;"Escape"===a?o(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(a)&&(Q=!0,g.classList.add("clr-keyboard-nav")),"Tab"===a&&l.matches(".clr-picker *")&&(t=(a=G()).shift(),a=a.pop(),r&&l===t?(a.focus(),e.preventDefault()):r||l!==a||(t.focus(),e.preventDefault()))}),l(b,"click",".clr-field button",function(e){N&&a(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),l(k,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){U(+k.style.left.replace("px","")+e,+k.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),l(m,"click",t),l(A,"input",e),l(S,"input",X))}function G(){return Array.from(g.querySelectorAll("input, button")).filter(function(e){return!!e.offsetWidth})}function f(e){return b.getElementById(e)}function l(e,t,a,l){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof a?e.addEventListener(t,function(e){r.call(e.target,a)&&l.call(e.target,e)}):(l=a,e.addEventListener(t,l))}function K(e,t){t=void 0!==t?t:[],"loading"!==b.readyState?e.apply(void 0,t):b.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}function $(e,t){r=(B=t).value,W(t),M=F(e),c(),u(e),d(),r!==e&&B.dispatchEvent(new Event("change",{bubbles:!0}))}var h,b,v,y,g,m,w,k,L,E,x,C,A,J,S,T,B,M,r,Q,i,I,H,_,O,D,N,V}(),_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};
+return h=window,b=document,v=Math,r=b.createElement("canvas").getContext("2d"),_={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!(H={r:0,g:0,b:0,h:0,s:0,v:0,a: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:function(){return y},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."}},i={},O="",N=!(D={}),NodeList!==y&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(Z=function(){var r={init:G,set:n,wrap:s,close:o,setInstance:P,setColor:J,removeInstance:j,updatePosition:c};function t(e){$(function(){e&&("string"==typeof e?F:n)(e)})}for(var e in r)!function(l){t[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];$(r[l],t)}}(e);return $(function(){h.addEventListener("resize",function(e){t.updatePosition()}),h.addEventListener("scroll",function(e){t.updatePosition()})}),t}()).coloris=Z;function n(o){if("object"==typeof o)for(var i in o)!function(){switch(i){case"el":F(o.el),!1!==o.wrap&&s(o.el);break;case"parent":(g=b.querySelector(o.parent))&&(g.appendChild(m),_.parent=o.parent,g===b.body)&&(g=y);break;case"themeMode":_.themeMode=o.themeMode,"auto"===o.themeMode&&h.matchMedia&&h.matchMedia("(prefers-color-scheme: dark)").matches&&(_.themeMode="dark");case"theme":o.theme&&(_.theme=o.theme),m.className="clr-picker clr-"+_.theme+" clr-"+_.themeMode,_.inline&&c();break;case"rtl":_.rtl=!!o.rtl,b.querySelectorAll(".clr-field").forEach(function(e){return e.classList.toggle("clr-rtl",_.rtl)});break;case"margin":o.margin*=1,_.margin=(isNaN(o.margin)?_:o).margin;break;case"wrap":o.el&&o.wrap&&s(o.el);break;case"formatToggle":_.formatToggle=!!o.formatToggle,f("clr-format").style.display=_.formatToggle?"block":"none",_.formatToggle&&(_.format="auto");break;case"swatches":var a;Array.isArray(o.swatches)&&(a=[],o.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),f("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",_.swatches=o.swatches.slice());break;case"swatchesOnly":_.swatchesOnly=!!o.swatchesOnly,m.setAttribute("data-minimal",_.swatchesOnly);break;case"alpha":_.alpha=!!o.alpha,m.setAttribute("data-alpha",_.alpha);break;case"inline":_.inline=!!o.inline,m.setAttribute("data-inline",_.inline),_.inline&&(e=o.defaultColor||_.defaultColor,I=R(e),c(),u(e));break;case"clearButton":"object"==typeof o.clearButton&&(o.clearButton.label&&(_.clearLabel=o.clearButton.label,C.innerHTML=_.clearLabel),o.clearButton=o.clearButton.show),_.clearButton=!!o.clearButton,C.style.display=_.clearButton?"block":"none";break;case"clearLabel":_.clearLabel=o.clearLabel,C.innerHTML=_.clearLabel;break;case"closeButton":_.closeButton=!!o.closeButton,_.closeButton?m.insertBefore(A,E):E.appendChild(A);break;case"closeLabel":_.closeLabel=o.closeLabel,A.innerHTML=_.closeLabel;break;case"a11y":var e,t,l=o.a11y,r=!1;if("object"==typeof l)for(var n in l)l[n]&&_.a11y[n]&&(_.a11y[n]=l[n],r=!0);r&&(e=f("clr-open-label"),t=f("clr-swatch-label"),e.innerHTML=_.a11y.open,t.innerHTML=_.a11y.swatch,A.setAttribute("aria-label",_.a11y.close),C.setAttribute("aria-label",_.a11y.clear),S.setAttribute("aria-label",_.a11y.hueSlider),T.setAttribute("aria-label",_.a11y.alphaSlider),x.setAttribute("aria-label",_.a11y.input),w.setAttribute("aria-label",_.a11y.instruction));break;default:_[i]=o[i]}}()}function P(e,t){"string"==typeof e&&"object"==typeof t&&(i[e]=t,N=!0)}function j(e){delete i[e],0===Object.keys(i).length&&(N=!1,e===O)&&q()}function W(a){if(N){var l,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(l in i)if("break"===function(){var t=i[l];if(a.matches(l)){for(var e in O=l,D={},r.forEach(function(e){return delete t[e]}),t)D[e]=Array.isArray(_[e])?_[e].slice():_[e];return n(t),"break"}}())break}}function q(){0<Object.keys(D).length&&(n(D),O="",D={})}function F(e){a(b,"click",e,function(e){_.inline||(W(e.target),M=e.target,l=M.value,I=R(l),m.classList.add("clr-open"),c(),u(l),(_.focusInput||_.selectInput)&&x.focus({preventScroll:!0}),_.selectInput&&x.select(),(V||_.swatchesOnly)&&K().shift().focus(),M.dispatchEvent(new Event("open",{bubbles:!0})))}),a(b,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function c(){var e,t,a,l,r,n,o,i,c,s;m&&(M||_.inline)&&(e=g,t=h.scrollY,a=m.offsetWidth,l=m.offsetHeight,r={left:!1,top:!1},o={x:0,y:0},e&&(i=h.getComputedStyle(e),n=parseFloat(i.marginTop),i=parseFloat(i.borderTopWidth),(o=e.getBoundingClientRect()).y+=i+t),_.inline||(c=(i=M.getBoundingClientRect()).x,s=t+i.y+i.height+_.margin,e?(c-=o.x,s-=o.y,c+a>e.clientWidth&&(c+=i.width-a,r.left=!0),s+l>e.clientHeight-n&&l+_.margin<=i.top-(o.y-t)&&(s-=i.height+l+2*_.margin,r.top=!0),s+=e.scrollTop):(c+a>b.documentElement.clientWidth&&(c+=i.width-a,r.left=!0),s+l-t>b.documentElement.clientHeight&&l+_.margin<=i.top&&(s=t+i.y-l-_.margin,r.top=!0)),m.classList.toggle("clr-left",r.left),m.classList.toggle("clr-top",r.top),m.style.left=c+"px",m.style.top=s+"px",o.x+=m.offsetLeft,o.y+=m.offsetTop),k={width:w.offsetWidth,height:w.offsetHeight,x:w.offsetLeft+o.x,y:w.offsetTop+o.y})}function s(e){b.querySelectorAll(e).forEach(function(e){var t,a,l=e.parentNode;l.classList.contains("clr-field")||(t=b.createElement("div"),a="clr-field",(_.rtl||e.classList.contains("clr-rtl"))&&(a+=" clr-rtl"),t.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(t,e),t.setAttribute("class",a),t.style.color=e.value,t.appendChild(e))})}function o(e){var t;M&&!_.inline&&(t=M,e&&(M=y,l!==t.value)&&(t.value=l,t.dispatchEvent(new Event("input",{bubbles:!0}))),setTimeout(function(){l!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),m.classList.remove("clr-open"),N&&q(),t.dispatchEvent(new Event("close",{bubbles:!0})),_.focusInput&&t.focus({preventScroll:!0}),M=y)}function u(e){var e=function(e){var t;r.fillStyle="#000",r.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(r.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=r.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),t={r:e[0],g:e[1],b:e[2],a:1});return t}(e),t=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=v.max(t,a,l),n=v.min(t,a,l),n=r-n,o=r,i=0,c=0;n&&(r===t&&(i=(a-l)/n),r===a&&(i=2+(l-t)/n),r===l&&(i=4+(t-a)/n),r)&&(c=n/r);return{h:(i=v.floor(60*i))<0?i+360:i,s:v.round(100*c),v:v.round(100*o),a:e.a}}(e);U(t.s,t.v),d(e,t),S.value=t.h,m.style.color="hsl("+t.h+", 100%, 50%)",Q.style.left=t.h/360*100+"%",L.style.left=k.width*t.s/100+"px",L.style.top=k.height-k.height*t.v/100+"px",T.value=100*t.a,B.style.left=100*t.a+"%"}function R(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function p(e){e=e!==y?e:x.value,M&&(M.value=e,M.dispatchEvent(new Event("input",{bubbles:!0}))),_.onChange&&_.onChange.call(h,e,M),b.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:M}}))}function Y(e,t){var a,l,r,n,o,e={h:+S.value,s:e/k.width*100,v:100-t/k.height*100,a:T.value/100},i=(i=(t=e).s/100,a=t.v/100,i*=a,l=t.h/60,r=i*(1-v.abs(l%2-1)),i+=a-=i,r+=a,l=v.floor(l)%6,n=[i,r,a,a,r,i][l],o=[r,i,i,r,a,a][l],a=[a,a,r,i,i,r][l],{r:v.round(255*n),g:v.round(255*o),b:v.round(255*a),a:t.a});U(e.s,e.v),d(i,e),p()}function U(e,t){var a=_.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),L.setAttribute("aria-label",a)}function t(e){var t={pageX:((t=e).changedTouches?t.changedTouches[0]:t).pageX,pageY:(t.changedTouches?t.changedTouches[0]:t).pageY},a=t.pageX-k.x,t=t.pageY-k.y;g&&(t+=g.scrollTop),X(a,t),e.preventDefault(),e.stopPropagation()}function X(e,t){e=e<0?0:e>k.width?k.width:e,t=t<0?0:t>k.height?k.height:t,L.style.left=e+"px",L.style.top=t+"px",Y(e,t),L.focus()}function d(e,t){void 0===t&&(t={});var a,l,r=_.format;for(a in e=void 0===e?{}:e)H[a]=e[a];for(l in t)H[l]=t[l];var n,o=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);_.alpha&&(e.a<1||_.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16)&&(r="0"+r);return"#"+t+a+l+r}(H),i=o.substring(0,7);switch(L.style.color=i,B.parentNode.style.color=i,B.style.color=o,E.style.color=o,w.style.display="none",w.offsetHeight,w.style.display="",B.nextElementSibling.style.display="none",B.nextElementSibling.offsetHeight,B.nextElementSibling.style.display="","mixed"===r?r=1===H.a?"hex":"rgb":"auto"===r&&(r=I),r){case"hex":x.value=o;break;case"rgb":x.value=(n=H,!_.alpha||1===n.a&&!_.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":x.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=v.round((a-l)/v.min(l,1-l)*100));return{h:e.h,s:t||0,l:v.round(100*l),a:e.a}}(H),!_.alpha||1===n.a&&!_.forceAlpha?"hsl("+n.h+", "+n.s+"%, "+n.l+"%)":"hsla("+n.h+", "+n.s+"%, "+n.l+"%, "+n.a+")")}b.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+S.value,t=+L.style.left.replace("px",""),a=+L.style.top.replace("px","");m.style.color="hsl("+e+", 100%, 50%)",Q.style.left=e/360*100+"%",Y(t,a)}function z(){var e=T.value/100;B.style.left=100*e+"%",d({a:e}),p()}function G(){b.getElementById("clr-picker")||(g=y,(m=b.createElement("div")).setAttribute("id","clr-picker"),m.className="clr-picker",m.innerHTML='<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="'+_.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+_.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="'+_.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="'+_.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+_.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="'+_.a11y.clear+'">'+_.clearLabel+'</button><div id="clr-color-preview" class="clr-preview"><button type="button" id="clr-close" class="clr-close" aria-label="'+_.a11y.close+'">'+_.closeLabel+'</button></div><span id="clr-open-label" hidden>'+_.a11y.open+'</span><span id="clr-swatch-label" hidden>'+_.a11y.swatch+"</span>",b.body.appendChild(m),w=f("clr-color-area"),L=f("clr-color-marker"),C=f("clr-clear"),A=f("clr-close"),E=f("clr-color-preview"),x=f("clr-color-value"),S=f("clr-hue-slider"),Q=f("clr-hue-marker"),T=f("clr-alpha-slider"),B=f("clr-alpha-marker"),F(_.el),s(_.el),a(m,"mousedown",function(e){m.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),a(w,"mousedown",function(e){a(b,"mousemove",t)}),a(w,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),a(L,"mousedown",function(e){a(b,"mousemove",t)}),a(L,"touchstart",function(e){b.addEventListener("touchmove",t,{passive:!1})}),a(x,"change",function(e){(M||_.inline)&&(u(x.value),p())}),a(C,"click",function(e){p(""),o()}),a(A,"click",function(e){p(),o()}),a(b,"click",".clr-format input",function(e){I=e.target.value,d(),p()}),a(m,"click",".clr-swatches button",function(e){u(e.target.textContent),p(),_.swatchesOnly&&o()}),a(b,"mouseup",function(e){b.removeEventListener("mousemove",t)}),a(b,"touchend",function(e){b.removeEventListener("touchmove",t)}),a(b,"mousedown",function(e){V=!1,m.classList.remove("clr-keyboard-nav"),o()}),a(b,"keydown",function(e){var t,a=e.key,l=e.target,r=e.shiftKey;"Escape"===a?o(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(a)&&(V=!0,m.classList.add("clr-keyboard-nav")),"Tab"===a&&l.matches(".clr-picker *")&&(t=(a=K()).shift(),a=a.pop(),r&&l===t?(a.focus(),e.preventDefault()):r||l!==a||(t.focus(),e.preventDefault()))}),a(b,"click",".clr-field button",function(e){N&&q(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),a(L,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){X(+L.style.left.replace("px","")+e,+L.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),a(w,"click",t),a(S,"input",e),a(T,"input",z))}function K(){return Array.from(m.querySelectorAll("input, button")).filter(function(e){return!!e.offsetWidth})}function f(e){return b.getElementById(e)}function a(e,t,a,l){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof a?e.addEventListener(t,function(e){r.call(e.target,a)&&l.call(e.target,e)}):(l=a,e.addEventListener(t,l))}function $(e,t){t=t!==y?t:[],"loading"!==b.readyState?e.apply(void 0,t):b.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}function J(e,t){l=(M=t).value,W(t),I=R(e),c(),u(e),p(),l!==e&&M.dispatchEvent(new Event("change",{bubbles:!0}))}var h,b,v,y,g,m,w,k,L,E,x,C,A,S,Q,T,B,M,I,l,V,r,H,_,i,O,D,N,Z}(),_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,7 +47,7 @@ // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
   * https://github.com/mdbassit/Coloris
-  * Version: 0.19.0
+  * Version: 0.20.0
   * NPM: https://github.com/melloware/coloris-npm
   */
 
-  return function (window, document, Math) {
+  return function (window, document, Math, undefined) {
     var ctx = document.createElement('canvas').getContext('2d');
@@ -127,3 +127,3 @@ var currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 };
               if (container === document.body) {
-                container = null;
+                container = undefined;
               }
@@ -263,4 +263,4 @@ }
           default:
-            settings[key] = options[key];}
-
+            settings[key] = options[key];
+        }
       };for (var key in options) {_loop();}
@@ -506,3 +506,3 @@ }
           // This will prevent the "change" event on the colorValue input to execute its handler
-          currentEl = null;
+          currentEl = undefined;
 
@@ -540,3 +540,3 @@ if (oldColor !== prevEl.value) {
         // This essentially marks the picker as closed
-        currentEl = null;
+        currentEl = undefined;
       }
@@ -596,6 +596,6 @@ }
       if (settings.onChange) {
-        settings.onChange.call(window, color);
+        settings.onChange.call(window, color, currentEl);
       }
 
-      document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color: color } }));
+      document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color: color, currentEl: currentEl } }));
     }
@@ -750,5 +750,5 @@
           colorValue.value = HSLAToStr(HSVAtoHSLA(currentColor));
-          break;}
+          break;
+      }
 
-
       // Select the current format in the format switcher
@@ -974,3 +974,3 @@ document.querySelector(".clr-format [value=\"" + format + "\"]").checked = true;
       // Render the UI
-      container = null;
+      container = undefined;
       picker = document.createElement('div');
@@ -977,0 +977,0 @@ picker.setAttribute('id', 'clr-picker');

dist/umd/coloris.min.js

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

package.json

 {
   "name": "@melloware/coloris",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "A lightweight and elegant color picker.",
@@ -5,0 +5,0 @@ "author": "Momo Bassit",

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

154130

increased by0.11%

Lines of code

3118

increased by0.13%

No dependency changes