@melloware/coloris - npm Package Compare versions

Comparing version 0.10.4-rc1 to 0.11.0

dist/coloris.d.ts

@@ -0,0 +0,0 @@ /**

dist/esm/coloris.js

@@ -239,2 +239,5 @@ var Coloris = function () {
         }
+
+        // Trigger an "open" event
+        currentEl.dispatchEvent(new Event('open', { bubbles: true }));
       });
@@ -291,4 +294,8 @@
 
+        // Hide the picker dialog
         picker.classList.remove('clr-open');
 
+        // Trigger a "close" event
+        currentEl.dispatchEvent(new Event('close', { bubbles: true }));
+
         if (settings.focusInput) {
@@ -295,0 +302,0 @@ currentEl.focus({ preventScroll: true });

dist/esm/coloris.min.js

@@ -7,2 +7,2 @@ var Coloris=function(){
   */
-return v=window,y=document,b=Math,N=y.createElement("canvas").getContext("2d"),_={el:"[data-coloris]",parent:null,theme:"default",themeMode:"light",wrap:!0,margin:2,format:"hex",formatToggle:!(O={r:0,g:0,b:0,h:0,s:0,v:0,a:1}),swatches:[],swatchesOnly:!1,alpha:!0,focusInput:!0,autoClose:!1,clearButton:{show:!1,label:"Clear"},a11y:{open:"Open color picker",close:"Close color picker",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."}},void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(D=function(){var r={init:F,set:a,wrap:c,close:l};function e(e){f(function(){e&&("string"==typeof e?i:a)(e)})}for(var t in r)!function(l){e[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];f(r[l],t)}}(t);return e}()).coloris=D;function a(e){if("object"==typeof e)for(var t in e)switch(t){case"el":i(e.el),!1!==e.wrap&&c(e.el);break;case"parent":_.parent=y.querySelector(e.parent),_.parent&&_.parent.appendChild(g);break;case"themeMode":_.themeMode=e.themeMode,"auto"===e.themeMode&&v.matchMedia&&v.matchMedia("(prefers-color-scheme: dark)").matches&&(_.themeMode="dark");case"theme":e.theme&&(_.theme=e.theme),g.className="clr-picker clr-"+_.theme+" clr-"+_.themeMode;break;case"margin":e.margin*=1,_.margin=(isNaN(e.margin)?_:e).margin;break;case"wrap":e.el&&e.wrap&&c(e.el);break;case"formatToggle":h("clr-format").style.display=e.formatToggle?"block":"none",e.formatToggle&&(_.format="auto");break;case"swatches":Array.isArray(e.swatches)&&!function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),h("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":""}();break;case"swatchesOnly":_.swatchesOnly=!!e.swatchesOnly,g.setAttribute("data-minimal",_.swatchesOnly),_.swatchesOnly&&(_.autoClose=!0);break;case"alpha":_.alpha=!!e.alpha,g.setAttribute("data-alpha",_.alpha);break;case"clearButton":var a="none";e.clearButton.show&&(a="block"),e.clearButton.label&&(L.innerHTML=e.clearButton.label),L.style.display=a;break;case"a11y":var l,r=e.a11y,o=!1;if("object"==typeof r)for(var n in r)r[n]&&_.a11y[n]&&(_.a11y[n]=r[n],o=!0);o&&(a=h("clr-open-label"),l=h("clr-swatch-label"),a.innerHTML=_.a11y.open,l.innerHTML=_.a11y.swatch,x.setAttribute("aria-label",_.a11y.close),S.setAttribute("aria-label",_.a11y.hueSlider),T.setAttribute("aria-label",_.a11y.alphaSlider),E.setAttribute("aria-label",_.a11y.input),m.setAttribute("aria-label",_.a11y.instruction));default:_[t]=e[t]}}function i(e){n(y,"click",e,function(e){var t,a,l=_.parent,r=e.target.getBoundingClientRect(),o=v.scrollY,n={left:!1,top:!1},i={x:0,y:0},c=r.x,s=o+r.y+r.height+_.margin,e=(M=e.target,B=M.value,H=function(e){e=e.substring(0,3).toLowerCase();return"rgb"!==e&&"hsl"!==e?"hex":e}(B),g.classList.add("clr-open"),g.offsetWidth),u=g.offsetHeight;l?(a=v.getComputedStyle(l),t=parseFloat(a.marginTop),a=parseFloat(a.borderTopWidth),(i=l.getBoundingClientRect()).y+=a+o,c-=i.x,s-=i.y,c+e>l.clientWidth&&(c+=r.width-e,n.left=!0),s+u>l.clientHeight-t&&(s-=r.height+u+2*_.margin,n.top=!0),s+=l.scrollTop):(c+e>y.documentElement.clientWidth&&(c+=r.width-e,n.left=!0),s+u-o>y.documentElement.clientHeight&&(s=o+r.y-u-_.margin,n.top=!0)),g.classList.toggle("clr-left",n.left),g.classList.toggle("clr-top",n.top),g.style.left=c+"px",g.style.top=s+"px",w={width:m.offsetWidth,height:m.offsetHeight,x:g.offsetLeft+m.offsetLeft+i.x,y:g.offsetTop+m.offsetTop+i.y},p(B),_.focusInput&&E.focus({preventScroll:!0})}),n(y,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function c(e){y.querySelectorAll(e).forEach(function(e){var t,a=e.parentNode;a.classList.contains("clr-field")||((t=y.createElement("div")).innerHTML='<button aria-labelledby="clr-open-label"></button>',a.insertBefore(t,e),t.setAttribute("class","clr-field"),t.style.color=e.value,t.appendChild(e))})}function l(e){M&&(e&&B!==M.value&&(M.value=B,M.dispatchEvent(new Event("input",{bubbles:!0}))),B!==M.value&&M.dispatchEvent(new Event("change",{bubbles:!0})),g.classList.remove("clr-open"),_.focusInput&&M.focus({preventScroll:!0}),M=null)}function p(e){var e=function(e){var t;N.fillStyle="#000",N.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(N.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=N.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=b.max(t,a,l),o=b.min(t,a,l),o=r-o,n=r,i=0,c=0;o&&(r===t&&(i=(a-l)/o),r===a&&(i=2+(l-t)/o),r===l&&(i=4+(t-a)/o),r&&(c=o/r));return{h:(i=b.floor(60*i))<0?i+360:i,s:b.round(100*c),v:b.round(100*n),a:e.a}}(e);u(t.s,t.v),d(e,t),S.value=t.h,g.style.color="hsl("+t.h+", 100%, 50%)",C.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",T.value=100*t.a,A.style.left=100*t.a+"%"}function s(e){M&&(M.value=void 0!==e?e:E.value,M.dispatchEvent(new Event("input",{bubbles:!0})))}function r(e,t){var a,l,r,o,n,e={h:+S.value,s:e/w.width*100,v:100-t/w.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-b.abs(l%2-1)),i+=a-=i,r+=a,l=b.floor(l)%6,o=[i,r,a,a,r,i][l],n=[r,i,i,r,a,a][l],a=[a,a,r,i,i,r][l],{r:b.round(255*o),g:b.round(255*n),b:b.round(255*a),a:t.a});u(e.s,e.v),d(i,e),s()}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),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;_.parent&&(t+=_.parent.scrollTop),a=a<0?0:a>w.width?w.width:a,t=t<0?0:t>w.height?w.height:t,k.style.left=a+"px",k.style.top=t+"px",r(a,t),e.preventDefault(),e.stopPropagation()}function d(e,t){void 0===t&&(t={});var a,l,r=_.format;for(a in e=void 0===e?{}:e)O[a]=e[a];for(l in t)O[l]=t[l];var o,n=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&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(O),i=n.substring(0,7);switch(k.style.color=i,A.parentNode.style.color=i,A.style.color=n,x.style.color=n,m.style.display="none",m.offsetHeight,m.style.display="",A.nextElementSibling.style.display="none",A.nextElementSibling.offsetHeight,A.nextElementSibling.style.display="","mixed"===r?r=1===O.a?"hex":"rgb":"auto"===r&&(r=H),r){case"hex":E.value=n;break;case"rgb":E.value=(o=O,_.alpha&&1!==o.a?"rgba("+o.r+", "+o.g+", "+o.b+", "+o.a+")":"rgb("+o.r+", "+o.g+", "+o.b+")");break;case"hsl":E.value=(o=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=b.round((a-l)/b.min(l,1-l)*100));return{h:e.h,s:t||0,l:b.round(100*l),a:e.a}}(O),_.alpha&&1!==o.a?"hsla("+o.h+", "+o.s+"%, "+o.l+"%, "+o.a+")":"hsl("+o.h+", "+o.s+"%, "+o.l+"%)")}y.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+S.value,t=+k.style.left.replace("px",""),a=+k.style.top.replace("px","");g.style.color="hsl("+e+", 100%, 50%)",C.style.left=e/360*100+"%",r(t,a)}function o(){var e=T.value/100;A.style.left=100*e+"%",d({a:e}),s()}function F(){(g=y.createElement("div")).setAttribute("id","clr-picker"),g.className="clr-picker",g.innerHTML='<input id="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" 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" 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 id="clr-clear" class="clr-clear">'+_.clearButton.label+'</button><button id="clr-color-preview" class="clr-preview" aria-label="'+_.a11y.close+'"></button><span id="clr-open-label" hidden>'+_.a11y.open+'</span><span id="clr-swatch-label" hidden>'+_.a11y.swatch+"</span>",y.body.appendChild(g),m=h("clr-color-area"),k=h("clr-color-marker"),L=h("clr-clear"),x=h("clr-color-preview"),E=h("clr-color-value"),S=h("clr-hue-slider"),C=h("clr-hue-marker"),T=h("clr-alpha-slider"),A=h("clr-alpha-marker"),i(_.el),c(_.el),n(g,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),n(m,"mousedown",function(e){n(y,"mousemove",t)}),n(m,"touchstart",function(e){y.addEventListener("touchmove",t,{passive:!1})}),n(k,"mousedown",function(e){n(y,"mousemove",t)}),n(k,"touchstart",function(e){y.addEventListener("touchmove",t,{passive:!1})}),n(E,"change",function(e){p(E.value),s()}),n(L,"click",function(e){s(""),l()}),n(x,"click",function(e){s(),l()}),n(y,"click",".clr-format input",function(e){H=e.target.value,d(),s()}),n(g,"click",".clr-swatches button",function(e){p(e.target.textContent),s(),_.autoClose&&l()}),n(y,"mouseup",function(e){y.removeEventListener("mousemove",t)}),n(y,"touchend",function(e){y.removeEventListener("touchmove",t)}),n(y,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),l()}),n(y,"keydown",function(e){"Escape"===e.key?l(!0):"Tab"===e.key&&g.classList.add("clr-keyboard-nav")}),n(y,"click",".clr-field button",function(e){e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),n(k,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};-1!==Object.keys(t).indexOf(e.key)&&(!function(e,t){e=+k.style.left.replace("px","")+e,t=+k.style.top.replace("px","")+t,k.style.left=e+"px",k.style.top=t+"px",r(e,t)}.apply(void 0,t[e.key]),e.preventDefault())}),n(m,"click",t),n(S,"input",e),n(T,"input",o)}function h(e){return y.getElementById(e)}function n(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 f(e,t){t=void 0!==t?t:[],"loading"!==y.readyState?e.apply(void 0,t):y.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}var v,y,b,g,m,w,k,x,E,L,S,C,T,A,M,H,B,N,O,_,D}(),_coloris=Coloris.coloris,_init=Coloris.init,_set=Coloris.set,_wrap=Coloris.wrap,_close=Coloris.close;export default Coloris;export{_coloris as coloris,_close as close,_init as init,_set as set,_wrap as wrap};
+return v=window,y=document,b=Math,N=y.createElement("canvas").getContext("2d"),_={el:"[data-coloris]",parent:null,theme:"default",themeMode:"light",wrap:!0,margin:2,format:"hex",formatToggle:!(O={r:0,g:0,b:0,h:0,s:0,v:0,a:1}),swatches:[],swatchesOnly:!1,alpha:!0,focusInput:!0,autoClose:!1,clearButton:{show:!1,label:"Clear"},a11y:{open:"Open color picker",close:"Close color picker",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."}},void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(D=function(){var r={init:F,set:a,wrap:c,close:l};function e(e){f(function(){e&&("string"==typeof e?i:a)(e)})}for(var t in r)!function(l){e[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];f(r[l],t)}}(t);return e}()).coloris=D;function a(e){if("object"==typeof e)for(var t in e)switch(t){case"el":i(e.el),!1!==e.wrap&&c(e.el);break;case"parent":_.parent=y.querySelector(e.parent),_.parent&&_.parent.appendChild(g);break;case"themeMode":_.themeMode=e.themeMode,"auto"===e.themeMode&&v.matchMedia&&v.matchMedia("(prefers-color-scheme: dark)").matches&&(_.themeMode="dark");case"theme":e.theme&&(_.theme=e.theme),g.className="clr-picker clr-"+_.theme+" clr-"+_.themeMode;break;case"margin":e.margin*=1,_.margin=(isNaN(e.margin)?_:e).margin;break;case"wrap":e.el&&e.wrap&&c(e.el);break;case"formatToggle":h("clr-format").style.display=e.formatToggle?"block":"none",e.formatToggle&&(_.format="auto");break;case"swatches":Array.isArray(e.swatches)&&!function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),h("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":""}();break;case"swatchesOnly":_.swatchesOnly=!!e.swatchesOnly,g.setAttribute("data-minimal",_.swatchesOnly),_.swatchesOnly&&(_.autoClose=!0);break;case"alpha":_.alpha=!!e.alpha,g.setAttribute("data-alpha",_.alpha);break;case"clearButton":var a="none";e.clearButton.show&&(a="block"),e.clearButton.label&&(L.innerHTML=e.clearButton.label),L.style.display=a;break;case"a11y":var l,r=e.a11y,o=!1;if("object"==typeof r)for(var n in r)r[n]&&_.a11y[n]&&(_.a11y[n]=r[n],o=!0);o&&(a=h("clr-open-label"),l=h("clr-swatch-label"),a.innerHTML=_.a11y.open,l.innerHTML=_.a11y.swatch,x.setAttribute("aria-label",_.a11y.close),S.setAttribute("aria-label",_.a11y.hueSlider),T.setAttribute("aria-label",_.a11y.alphaSlider),E.setAttribute("aria-label",_.a11y.input),m.setAttribute("aria-label",_.a11y.instruction));default:_[t]=e[t]}}function i(e){n(y,"click",e,function(e){var t,a,l=_.parent,r=e.target.getBoundingClientRect(),o=v.scrollY,n={left:!1,top:!1},i={x:0,y:0},c=r.x,s=o+r.y+r.height+_.margin,e=(M=e.target,B=M.value,H=function(e){e=e.substring(0,3).toLowerCase();return"rgb"!==e&&"hsl"!==e?"hex":e}(B),g.classList.add("clr-open"),g.offsetWidth),u=g.offsetHeight;l?(a=v.getComputedStyle(l),t=parseFloat(a.marginTop),a=parseFloat(a.borderTopWidth),(i=l.getBoundingClientRect()).y+=a+o,c-=i.x,s-=i.y,c+e>l.clientWidth&&(c+=r.width-e,n.left=!0),s+u>l.clientHeight-t&&(s-=r.height+u+2*_.margin,n.top=!0),s+=l.scrollTop):(c+e>y.documentElement.clientWidth&&(c+=r.width-e,n.left=!0),s+u-o>y.documentElement.clientHeight&&(s=o+r.y-u-_.margin,n.top=!0)),g.classList.toggle("clr-left",n.left),g.classList.toggle("clr-top",n.top),g.style.left=c+"px",g.style.top=s+"px",w={width:m.offsetWidth,height:m.offsetHeight,x:g.offsetLeft+m.offsetLeft+i.x,y:g.offsetTop+m.offsetTop+i.y},p(B),_.focusInput&&E.focus({preventScroll:!0}),M.dispatchEvent(new Event("open",{bubbles:!0}))}),n(y,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function c(e){y.querySelectorAll(e).forEach(function(e){var t,a=e.parentNode;a.classList.contains("clr-field")||((t=y.createElement("div")).innerHTML='<button aria-labelledby="clr-open-label"></button>',a.insertBefore(t,e),t.setAttribute("class","clr-field"),t.style.color=e.value,t.appendChild(e))})}function l(e){M&&(e&&B!==M.value&&(M.value=B,M.dispatchEvent(new Event("input",{bubbles:!0}))),B!==M.value&&M.dispatchEvent(new Event("change",{bubbles:!0})),g.classList.remove("clr-open"),M.dispatchEvent(new Event("close",{bubbles:!0})),_.focusInput&&M.focus({preventScroll:!0}),M=null)}function p(e){var e=function(e){var t;N.fillStyle="#000",N.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(N.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=N.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=b.max(t,a,l),o=b.min(t,a,l),o=r-o,n=r,i=0,c=0;o&&(r===t&&(i=(a-l)/o),r===a&&(i=2+(l-t)/o),r===l&&(i=4+(t-a)/o),r&&(c=o/r));return{h:(i=b.floor(60*i))<0?i+360:i,s:b.round(100*c),v:b.round(100*n),a:e.a}}(e);u(t.s,t.v),d(e,t),S.value=t.h,g.style.color="hsl("+t.h+", 100%, 50%)",C.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",T.value=100*t.a,A.style.left=100*t.a+"%"}function s(e){M&&(M.value=void 0!==e?e:E.value,M.dispatchEvent(new Event("input",{bubbles:!0})))}function r(e,t){var a,l,r,o,n,e={h:+S.value,s:e/w.width*100,v:100-t/w.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-b.abs(l%2-1)),i+=a-=i,r+=a,l=b.floor(l)%6,o=[i,r,a,a,r,i][l],n=[r,i,i,r,a,a][l],a=[a,a,r,i,i,r][l],{r:b.round(255*o),g:b.round(255*n),b:b.round(255*a),a:t.a});u(e.s,e.v),d(i,e),s()}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),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;_.parent&&(t+=_.parent.scrollTop),a=a<0?0:a>w.width?w.width:a,t=t<0?0:t>w.height?w.height:t,k.style.left=a+"px",k.style.top=t+"px",r(a,t),e.preventDefault(),e.stopPropagation()}function d(e,t){void 0===t&&(t={});var a,l,r=_.format;for(a in e=void 0===e?{}:e)O[a]=e[a];for(l in t)O[l]=t[l];var o,n=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&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(O),i=n.substring(0,7);switch(k.style.color=i,A.parentNode.style.color=i,A.style.color=n,x.style.color=n,m.style.display="none",m.offsetHeight,m.style.display="",A.nextElementSibling.style.display="none",A.nextElementSibling.offsetHeight,A.nextElementSibling.style.display="","mixed"===r?r=1===O.a?"hex":"rgb":"auto"===r&&(r=H),r){case"hex":E.value=n;break;case"rgb":E.value=(o=O,_.alpha&&1!==o.a?"rgba("+o.r+", "+o.g+", "+o.b+", "+o.a+")":"rgb("+o.r+", "+o.g+", "+o.b+")");break;case"hsl":E.value=(o=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=b.round((a-l)/b.min(l,1-l)*100));return{h:e.h,s:t||0,l:b.round(100*l),a:e.a}}(O),_.alpha&&1!==o.a?"hsla("+o.h+", "+o.s+"%, "+o.l+"%, "+o.a+")":"hsl("+o.h+", "+o.s+"%, "+o.l+"%)")}y.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+S.value,t=+k.style.left.replace("px",""),a=+k.style.top.replace("px","");g.style.color="hsl("+e+", 100%, 50%)",C.style.left=e/360*100+"%",r(t,a)}function o(){var e=T.value/100;A.style.left=100*e+"%",d({a:e}),s()}function F(){(g=y.createElement("div")).setAttribute("id","clr-picker"),g.className="clr-picker",g.innerHTML='<input id="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" 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" 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 id="clr-clear" class="clr-clear">'+_.clearButton.label+'</button><button id="clr-color-preview" class="clr-preview" aria-label="'+_.a11y.close+'"></button><span id="clr-open-label" hidden>'+_.a11y.open+'</span><span id="clr-swatch-label" hidden>'+_.a11y.swatch+"</span>",y.body.appendChild(g),m=h("clr-color-area"),k=h("clr-color-marker"),L=h("clr-clear"),x=h("clr-color-preview"),E=h("clr-color-value"),S=h("clr-hue-slider"),C=h("clr-hue-marker"),T=h("clr-alpha-slider"),A=h("clr-alpha-marker"),i(_.el),c(_.el),n(g,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),n(m,"mousedown",function(e){n(y,"mousemove",t)}),n(m,"touchstart",function(e){y.addEventListener("touchmove",t,{passive:!1})}),n(k,"mousedown",function(e){n(y,"mousemove",t)}),n(k,"touchstart",function(e){y.addEventListener("touchmove",t,{passive:!1})}),n(E,"change",function(e){p(E.value),s()}),n(L,"click",function(e){s(""),l()}),n(x,"click",function(e){s(),l()}),n(y,"click",".clr-format input",function(e){H=e.target.value,d(),s()}),n(g,"click",".clr-swatches button",function(e){p(e.target.textContent),s(),_.autoClose&&l()}),n(y,"mouseup",function(e){y.removeEventListener("mousemove",t)}),n(y,"touchend",function(e){y.removeEventListener("touchmove",t)}),n(y,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),l()}),n(y,"keydown",function(e){"Escape"===e.key?l(!0):"Tab"===e.key&&g.classList.add("clr-keyboard-nav")}),n(y,"click",".clr-field button",function(e){e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),n(k,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};-1!==Object.keys(t).indexOf(e.key)&&(!function(e,t){e=+k.style.left.replace("px","")+e,t=+k.style.top.replace("px","")+t,k.style.left=e+"px",k.style.top=t+"px",r(e,t)}.apply(void 0,t[e.key]),e.preventDefault())}),n(m,"click",t),n(S,"input",e),n(T,"input",o)}function h(e){return y.getElementById(e)}function n(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 f(e,t){t=void 0!==t?t:[],"loading"!==y.readyState?e.apply(void 0,t):y.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}var v,y,b,g,m,w,k,x,E,L,S,C,T,A,M,H,B,N,O,_,D}(),_coloris=Coloris.coloris,_init=Coloris.init,_set=Coloris.set,_wrap=Coloris.wrap,_close=Coloris.close;export default Coloris;export{_coloris as coloris,_close as close,_init as init,_set as set,_wrap as wrap};

dist/esm/package.json

 {
     "type": "module"
 }

dist/umd/coloris.js

@@ -280,2 +280,5 @@ // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
         }
+
+        // Trigger an "open" event
+        currentEl.dispatchEvent(new Event('open', { bubbles: true }));
       });
@@ -332,4 +335,8 @@
 
+        // Hide the picker dialog
         picker.classList.remove('clr-open');
 
+        // Trigger a "close" event
+        currentEl.dispatchEvent(new Event('close', { bubbles: true }));
+
         if (settings.focusInput) {
@@ -336,0 +343,0 @@ currentEl.focus({ preventScroll: true });

dist/umd/coloris.min.js

@@ -7,2 +7,2 @@ !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(){
   */
-return v=window,y=document,b=Math,N=y.createElement("canvas").getContext("2d"),D={el:"[data-coloris]",parent:null,theme:"default",themeMode:"light",wrap:!0,margin:2,format:"hex",formatToggle:!(O={r:0,g:0,b:0,h:0,s:0,v:0,a:1}),swatches:[],swatchesOnly:!1,alpha:!0,focusInput:!0,autoClose:!1,clearButton:{show:!1,label:"Clear"},a11y:{open:"Open color picker",close:"Close color picker",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."}},void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(j=function(){var r={init:F,set:a,wrap:c,close:l};function e(e){h(function(){e&&("string"==typeof e?i:a)(e)})}for(var t in r)!function(l){e[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];h(r[l],t)}}(t);return e}()).coloris=j;function a(e){if("object"==typeof e)for(var t in e)switch(t){case"el":i(e.el),!1!==e.wrap&&c(e.el);break;case"parent":D.parent=y.querySelector(e.parent),D.parent&&D.parent.appendChild(m);break;case"themeMode":D.themeMode=e.themeMode,"auto"===e.themeMode&&v.matchMedia&&v.matchMedia("(prefers-color-scheme: dark)").matches&&(D.themeMode="dark");case"theme":e.theme&&(D.theme=e.theme),m.className="clr-picker clr-"+D.theme+" clr-"+D.themeMode;break;case"margin":e.margin*=1,D.margin=(isNaN(e.margin)?D:e).margin;break;case"wrap":e.el&&e.wrap&&c(e.el);break;case"formatToggle":f("clr-format").style.display=e.formatToggle?"block":"none",e.formatToggle&&(D.format="auto");break;case"swatches":Array.isArray(e.swatches)&&!function(){var a=[];e.swatches.forEach(function(e,t){a.push('<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>":""}();break;case"swatchesOnly":D.swatchesOnly=!!e.swatchesOnly,m.setAttribute("data-minimal",D.swatchesOnly),D.swatchesOnly&&(D.autoClose=!0);break;case"alpha":D.alpha=!!e.alpha,m.setAttribute("data-alpha",D.alpha);break;case"clearButton":var a="none";e.clearButton.show&&(a="block"),e.clearButton.label&&(L.innerHTML=e.clearButton.label),L.style.display=a;break;case"a11y":var l,r=e.a11y,o=!1;if("object"==typeof r)for(var n in r)r[n]&&D.a11y[n]&&(D.a11y[n]=r[n],o=!0);o&&(a=f("clr-open-label"),l=f("clr-swatch-label"),a.innerHTML=D.a11y.open,l.innerHTML=D.a11y.swatch,x.setAttribute("aria-label",D.a11y.close),S.setAttribute("aria-label",D.a11y.hueSlider),C.setAttribute("aria-label",D.a11y.alphaSlider),E.setAttribute("aria-label",D.a11y.input),g.setAttribute("aria-label",D.a11y.instruction));default:D[t]=e[t]}}function i(e){n(y,"click",e,function(e){var t,a,l=D.parent,r=e.target.getBoundingClientRect(),o=v.scrollY,n={left:!1,top:!1},i={x:0,y:0},c=r.x,s=o+r.y+r.height+D.margin,e=(M=e.target,B=M.value,H=function(e){e=e.substring(0,3).toLowerCase();return"rgb"!==e&&"hsl"!==e?"hex":e}(B),m.classList.add("clr-open"),m.offsetWidth),u=m.offsetHeight;l?(a=v.getComputedStyle(l),t=parseFloat(a.marginTop),a=parseFloat(a.borderTopWidth),(i=l.getBoundingClientRect()).y+=a+o,c-=i.x,s-=i.y,c+e>l.clientWidth&&(c+=r.width-e,n.left=!0),s+u>l.clientHeight-t&&(s-=r.height+u+2*D.margin,n.top=!0),s+=l.scrollTop):(c+e>y.documentElement.clientWidth&&(c+=r.width-e,n.left=!0),s+u-o>y.documentElement.clientHeight&&(s=o+r.y-u-D.margin,n.top=!0)),m.classList.toggle("clr-left",n.left),m.classList.toggle("clr-top",n.top),m.style.left=c+"px",m.style.top=s+"px",w={width:g.offsetWidth,height:g.offsetHeight,x:m.offsetLeft+g.offsetLeft+i.x,y:m.offsetTop+g.offsetTop+i.y},d(B),D.focusInput&&E.focus({preventScroll:!0})}),n(y,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function c(e){y.querySelectorAll(e).forEach(function(e){var t,a=e.parentNode;a.classList.contains("clr-field")||((t=y.createElement("div")).innerHTML='<button aria-labelledby="clr-open-label"></button>',a.insertBefore(t,e),t.setAttribute("class","clr-field"),t.style.color=e.value,t.appendChild(e))})}function l(e){M&&(e&&B!==M.value&&(M.value=B,M.dispatchEvent(new Event("input",{bubbles:!0}))),B!==M.value&&M.dispatchEvent(new Event("change",{bubbles:!0})),m.classList.remove("clr-open"),D.focusInput&&M.focus({preventScroll:!0}),M=null)}function d(e){var e=function(e){var t;N.fillStyle="#000",N.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(N.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=N.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=b.max(t,a,l),o=b.min(t,a,l),o=r-o,n=r,i=0,c=0;o&&(r===t&&(i=(a-l)/o),r===a&&(i=2+(l-t)/o),r===l&&(i=4+(t-a)/o),r&&(c=o/r));return{h:(i=b.floor(60*i))<0?i+360:i,s:b.round(100*c),v:b.round(100*n),a:e.a}}(e);u(t.s,t.v),p(e,t),S.value=t.h,m.style.color="hsl("+t.h+", 100%, 50%)",T.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,A.style.left=100*t.a+"%"}function s(e){M&&(M.value=void 0!==e?e:E.value,M.dispatchEvent(new Event("input",{bubbles:!0})))}function r(e,t){var a,l,r,o,n,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,a=t.v/100,i*=a,l=t.h/60,r=i*(1-b.abs(l%2-1)),i+=a-=i,r+=a,l=b.floor(l)%6,o=[i,r,a,a,r,i][l],n=[r,i,i,r,a,a][l],a=[a,a,r,i,i,r][l],{r:b.round(255*o),g:b.round(255*n),b:b.round(255*a),a:t.a});u(e.s,e.v),p(i,e),s()}function u(e,t){var a=D.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;D.parent&&(t+=D.parent.scrollTop),a=a<0?0:a>w.width?w.width:a,t=t<0?0:t>w.height?w.height:t,k.style.left=a+"px",k.style.top=t+"px",r(a,t),e.preventDefault(),e.stopPropagation()}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 o,n=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&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(O),i=n.substring(0,7);switch(k.style.color=i,A.parentNode.style.color=i,A.style.color=n,x.style.color=n,g.style.display="none",g.offsetHeight,g.style.display="",A.nextElementSibling.style.display="none",A.nextElementSibling.offsetHeight,A.nextElementSibling.style.display="","mixed"===r?r=1===O.a?"hex":"rgb":"auto"===r&&(r=H),r){case"hex":E.value=n;break;case"rgb":E.value=(o=O,D.alpha&&1!==o.a?"rgba("+o.r+", "+o.g+", "+o.b+", "+o.a+")":"rgb("+o.r+", "+o.g+", "+o.b+")");break;case"hsl":E.value=(o=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=b.round((a-l)/b.min(l,1-l)*100));return{h:e.h,s:t||0,l:b.round(100*l),a:e.a}}(O),D.alpha&&1!==o.a?"hsla("+o.h+", "+o.s+"%, "+o.l+"%, "+o.a+")":"hsl("+o.h+", "+o.s+"%, "+o.l+"%)")}y.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+S.value,t=+k.style.left.replace("px",""),a=+k.style.top.replace("px","");m.style.color="hsl("+e+", 100%, 50%)",T.style.left=e/360*100+"%",r(t,a)}function o(){var e=C.value/100;A.style.left=100*e+"%",p({a:e}),s()}function F(){(m=y.createElement("div")).setAttribute("id","clr-picker"),m.className="clr-picker",m.innerHTML='<input id="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" 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" 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 id="clr-clear" class="clr-clear">'+D.clearButton.label+'</button><button id="clr-color-preview" class="clr-preview" aria-label="'+D.a11y.close+'"></button><span id="clr-open-label" hidden>'+D.a11y.open+'</span><span id="clr-swatch-label" hidden>'+D.a11y.swatch+"</span>",y.body.appendChild(m),g=f("clr-color-area"),k=f("clr-color-marker"),L=f("clr-clear"),x=f("clr-color-preview"),E=f("clr-color-value"),S=f("clr-hue-slider"),T=f("clr-hue-marker"),C=f("clr-alpha-slider"),A=f("clr-alpha-marker"),i(D.el),c(D.el),n(m,"mousedown",function(e){m.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),n(g,"mousedown",function(e){n(y,"mousemove",t)}),n(g,"touchstart",function(e){y.addEventListener("touchmove",t,{passive:!1})}),n(k,"mousedown",function(e){n(y,"mousemove",t)}),n(k,"touchstart",function(e){y.addEventListener("touchmove",t,{passive:!1})}),n(E,"change",function(e){d(E.value),s()}),n(L,"click",function(e){s(""),l()}),n(x,"click",function(e){s(),l()}),n(y,"click",".clr-format input",function(e){H=e.target.value,p(),s()}),n(m,"click",".clr-swatches button",function(e){d(e.target.textContent),s(),D.autoClose&&l()}),n(y,"mouseup",function(e){y.removeEventListener("mousemove",t)}),n(y,"touchend",function(e){y.removeEventListener("touchmove",t)}),n(y,"mousedown",function(e){m.classList.remove("clr-keyboard-nav"),l()}),n(y,"keydown",function(e){"Escape"===e.key?l(!0):"Tab"===e.key&&m.classList.add("clr-keyboard-nav")}),n(y,"click",".clr-field button",function(e){e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),n(k,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};-1!==Object.keys(t).indexOf(e.key)&&(!function(e,t){e=+k.style.left.replace("px","")+e,t=+k.style.top.replace("px","")+t,k.style.left=e+"px",k.style.top=t+"px",r(e,t)}.apply(void 0,t[e.key]),e.preventDefault())}),n(g,"click",t),n(S,"input",e),n(C,"input",o)}function f(e){return y.getElementById(e)}function n(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 h(e,t){t=void 0!==t?t:[],"loading"!==y.readyState?e.apply(void 0,t):y.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}var v,y,b,m,g,w,k,x,E,L,S,T,C,A,M,H,B,N,O,D,j});
+return v=window,y=document,b=Math,N=y.createElement("canvas").getContext("2d"),D={el:"[data-coloris]",parent:null,theme:"default",themeMode:"light",wrap:!0,margin:2,format:"hex",formatToggle:!(O={r:0,g:0,b:0,h:0,s:0,v:0,a:1}),swatches:[],swatchesOnly:!1,alpha:!0,focusInput:!0,autoClose:!1,clearButton:{show:!1,label:"Clear"},a11y:{open:"Open color picker",close:"Close color picker",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."}},void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(j=function(){var r={init:F,set:a,wrap:c,close:l};function e(e){h(function(){e&&("string"==typeof e?i:a)(e)})}for(var t in r)!function(l){e[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];h(r[l],t)}}(t);return e}()).coloris=j;function a(e){if("object"==typeof e)for(var t in e)switch(t){case"el":i(e.el),!1!==e.wrap&&c(e.el);break;case"parent":D.parent=y.querySelector(e.parent),D.parent&&D.parent.appendChild(m);break;case"themeMode":D.themeMode=e.themeMode,"auto"===e.themeMode&&v.matchMedia&&v.matchMedia("(prefers-color-scheme: dark)").matches&&(D.themeMode="dark");case"theme":e.theme&&(D.theme=e.theme),m.className="clr-picker clr-"+D.theme+" clr-"+D.themeMode;break;case"margin":e.margin*=1,D.margin=(isNaN(e.margin)?D:e).margin;break;case"wrap":e.el&&e.wrap&&c(e.el);break;case"formatToggle":f("clr-format").style.display=e.formatToggle?"block":"none",e.formatToggle&&(D.format="auto");break;case"swatches":Array.isArray(e.swatches)&&!function(){var a=[];e.swatches.forEach(function(e,t){a.push('<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>":""}();break;case"swatchesOnly":D.swatchesOnly=!!e.swatchesOnly,m.setAttribute("data-minimal",D.swatchesOnly),D.swatchesOnly&&(D.autoClose=!0);break;case"alpha":D.alpha=!!e.alpha,m.setAttribute("data-alpha",D.alpha);break;case"clearButton":var a="none";e.clearButton.show&&(a="block"),e.clearButton.label&&(L.innerHTML=e.clearButton.label),L.style.display=a;break;case"a11y":var l,r=e.a11y,o=!1;if("object"==typeof r)for(var n in r)r[n]&&D.a11y[n]&&(D.a11y[n]=r[n],o=!0);o&&(a=f("clr-open-label"),l=f("clr-swatch-label"),a.innerHTML=D.a11y.open,l.innerHTML=D.a11y.swatch,x.setAttribute("aria-label",D.a11y.close),S.setAttribute("aria-label",D.a11y.hueSlider),C.setAttribute("aria-label",D.a11y.alphaSlider),E.setAttribute("aria-label",D.a11y.input),g.setAttribute("aria-label",D.a11y.instruction));default:D[t]=e[t]}}function i(e){n(y,"click",e,function(e){var t,a,l=D.parent,r=e.target.getBoundingClientRect(),o=v.scrollY,n={left:!1,top:!1},i={x:0,y:0},c=r.x,s=o+r.y+r.height+D.margin,e=(M=e.target,B=M.value,H=function(e){e=e.substring(0,3).toLowerCase();return"rgb"!==e&&"hsl"!==e?"hex":e}(B),m.classList.add("clr-open"),m.offsetWidth),u=m.offsetHeight;l?(a=v.getComputedStyle(l),t=parseFloat(a.marginTop),a=parseFloat(a.borderTopWidth),(i=l.getBoundingClientRect()).y+=a+o,c-=i.x,s-=i.y,c+e>l.clientWidth&&(c+=r.width-e,n.left=!0),s+u>l.clientHeight-t&&(s-=r.height+u+2*D.margin,n.top=!0),s+=l.scrollTop):(c+e>y.documentElement.clientWidth&&(c+=r.width-e,n.left=!0),s+u-o>y.documentElement.clientHeight&&(s=o+r.y-u-D.margin,n.top=!0)),m.classList.toggle("clr-left",n.left),m.classList.toggle("clr-top",n.top),m.style.left=c+"px",m.style.top=s+"px",w={width:g.offsetWidth,height:g.offsetHeight,x:m.offsetLeft+g.offsetLeft+i.x,y:m.offsetTop+g.offsetTop+i.y},d(B),D.focusInput&&E.focus({preventScroll:!0}),M.dispatchEvent(new Event("open",{bubbles:!0}))}),n(y,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function c(e){y.querySelectorAll(e).forEach(function(e){var t,a=e.parentNode;a.classList.contains("clr-field")||((t=y.createElement("div")).innerHTML='<button aria-labelledby="clr-open-label"></button>',a.insertBefore(t,e),t.setAttribute("class","clr-field"),t.style.color=e.value,t.appendChild(e))})}function l(e){M&&(e&&B!==M.value&&(M.value=B,M.dispatchEvent(new Event("input",{bubbles:!0}))),B!==M.value&&M.dispatchEvent(new Event("change",{bubbles:!0})),m.classList.remove("clr-open"),M.dispatchEvent(new Event("close",{bubbles:!0})),D.focusInput&&M.focus({preventScroll:!0}),M=null)}function d(e){var e=function(e){var t;N.fillStyle="#000",N.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(N.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=N.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=b.max(t,a,l),o=b.min(t,a,l),o=r-o,n=r,i=0,c=0;o&&(r===t&&(i=(a-l)/o),r===a&&(i=2+(l-t)/o),r===l&&(i=4+(t-a)/o),r&&(c=o/r));return{h:(i=b.floor(60*i))<0?i+360:i,s:b.round(100*c),v:b.round(100*n),a:e.a}}(e);u(t.s,t.v),p(e,t),S.value=t.h,m.style.color="hsl("+t.h+", 100%, 50%)",T.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,A.style.left=100*t.a+"%"}function s(e){M&&(M.value=void 0!==e?e:E.value,M.dispatchEvent(new Event("input",{bubbles:!0})))}function r(e,t){var a,l,r,o,n,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,a=t.v/100,i*=a,l=t.h/60,r=i*(1-b.abs(l%2-1)),i+=a-=i,r+=a,l=b.floor(l)%6,o=[i,r,a,a,r,i][l],n=[r,i,i,r,a,a][l],a=[a,a,r,i,i,r][l],{r:b.round(255*o),g:b.round(255*n),b:b.round(255*a),a:t.a});u(e.s,e.v),p(i,e),s()}function u(e,t){var a=D.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;D.parent&&(t+=D.parent.scrollTop),a=a<0?0:a>w.width?w.width:a,t=t<0?0:t>w.height?w.height:t,k.style.left=a+"px",k.style.top=t+"px",r(a,t),e.preventDefault(),e.stopPropagation()}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 o,n=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&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(O),i=n.substring(0,7);switch(k.style.color=i,A.parentNode.style.color=i,A.style.color=n,x.style.color=n,g.style.display="none",g.offsetHeight,g.style.display="",A.nextElementSibling.style.display="none",A.nextElementSibling.offsetHeight,A.nextElementSibling.style.display="","mixed"===r?r=1===O.a?"hex":"rgb":"auto"===r&&(r=H),r){case"hex":E.value=n;break;case"rgb":E.value=(o=O,D.alpha&&1!==o.a?"rgba("+o.r+", "+o.g+", "+o.b+", "+o.a+")":"rgb("+o.r+", "+o.g+", "+o.b+")");break;case"hsl":E.value=(o=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=b.round((a-l)/b.min(l,1-l)*100));return{h:e.h,s:t||0,l:b.round(100*l),a:e.a}}(O),D.alpha&&1!==o.a?"hsla("+o.h+", "+o.s+"%, "+o.l+"%, "+o.a+")":"hsl("+o.h+", "+o.s+"%, "+o.l+"%)")}y.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+S.value,t=+k.style.left.replace("px",""),a=+k.style.top.replace("px","");m.style.color="hsl("+e+", 100%, 50%)",T.style.left=e/360*100+"%",r(t,a)}function o(){var e=C.value/100;A.style.left=100*e+"%",p({a:e}),s()}function F(){(m=y.createElement("div")).setAttribute("id","clr-picker"),m.className="clr-picker",m.innerHTML='<input id="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" 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" 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 id="clr-clear" class="clr-clear">'+D.clearButton.label+'</button><button id="clr-color-preview" class="clr-preview" aria-label="'+D.a11y.close+'"></button><span id="clr-open-label" hidden>'+D.a11y.open+'</span><span id="clr-swatch-label" hidden>'+D.a11y.swatch+"</span>",y.body.appendChild(m),g=f("clr-color-area"),k=f("clr-color-marker"),L=f("clr-clear"),x=f("clr-color-preview"),E=f("clr-color-value"),S=f("clr-hue-slider"),T=f("clr-hue-marker"),C=f("clr-alpha-slider"),A=f("clr-alpha-marker"),i(D.el),c(D.el),n(m,"mousedown",function(e){m.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),n(g,"mousedown",function(e){n(y,"mousemove",t)}),n(g,"touchstart",function(e){y.addEventListener("touchmove",t,{passive:!1})}),n(k,"mousedown",function(e){n(y,"mousemove",t)}),n(k,"touchstart",function(e){y.addEventListener("touchmove",t,{passive:!1})}),n(E,"change",function(e){d(E.value),s()}),n(L,"click",function(e){s(""),l()}),n(x,"click",function(e){s(),l()}),n(y,"click",".clr-format input",function(e){H=e.target.value,p(),s()}),n(m,"click",".clr-swatches button",function(e){d(e.target.textContent),s(),D.autoClose&&l()}),n(y,"mouseup",function(e){y.removeEventListener("mousemove",t)}),n(y,"touchend",function(e){y.removeEventListener("touchmove",t)}),n(y,"mousedown",function(e){m.classList.remove("clr-keyboard-nav"),l()}),n(y,"keydown",function(e){"Escape"===e.key?l(!0):"Tab"===e.key&&m.classList.add("clr-keyboard-nav")}),n(y,"click",".clr-field button",function(e){e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),n(k,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};-1!==Object.keys(t).indexOf(e.key)&&(!function(e,t){e=+k.style.left.replace("px","")+e,t=+k.style.top.replace("px","")+t,k.style.left=e+"px",k.style.top=t+"px",r(e,t)}.apply(void 0,t[e.key]),e.preventDefault())}),n(g,"click",t),n(S,"input",e),n(C,"input",o)}function f(e){return y.getElementById(e)}function n(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 h(e,t){t=void 0!==t?t:[],"loading"!==y.readyState?e.apply(void 0,t):y.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}var v,y,b,m,g,w,k,x,E,L,S,T,C,A,M,H,B,N,O,D,j});

dist/umd/package.json

 {
     "type": "commonjs"
 }

package.json

 {
   "name": "@melloware/coloris",
-  "version": "0.10.4-rc1",
+  "version": "0.11.0",
   "description": "A lightweight and elegant color picker.",
@@ -32,3 +32,3 @@ "author": "Momo Bassit",
   "bugs": {
-    "url": "https://github.com/mdbassit/Coloris/issues"
+    "url" : "https://github.com/mdbassit/Coloris/issues"
   },
@@ -35,0 +35,0 @@ "homepage": "https://coloris.js.org",

README.md

@@ -0,0 +0,0 @@ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

118032

decreased by-26.02%

Number of package files

12

decreased by-14.29%

Lines of code

2330

decreased by-25.96%

No dependency changes