@melloware/coloris - npm Package Compare versions

Comparing version 0.12.2 to 0.14.0

dist/coloris.d.ts

@@ -188,2 +188,9 @@ /**
     /**
+     * Select and focus the color value input when the color picker dialog is opened.
+     *
+     * @default false
+     */
+    selectInput?: boolean;
+
+    /**
      * Set to true to close the color picker when a color is selected.
@@ -213,2 +220,9 @@ *
     /**
+     * Set to true to always include the alpha value in the color value even if the opacity is 100%.
+     *
+     * @default false
+     */
+    forceAlpha?: boolean,
+
+    /**
      * Shows a clear button and set its label. By default, no clear button is
@@ -215,0 +229,0 @@ * shown.

dist/esm/coloris.js

@@ -27,3 +27,5 @@ var Coloris = function () {
       alpha: true,
+      forceAlpha: false,
       focusInput: true,
+      selectInput: false,
       autoClose: false,
@@ -135,2 +137,4 @@ inline: false,
               var defaultColor = options.defaultColor || settings.defaultColor;
+
+              currentFormat = getColorFormatFromStr(defaultColor);
               updatePickerPosition();
@@ -204,6 +208,10 @@ setColorFromStr(defaultColor);
 
-        if (settings.focusInput) {
+        if (settings.focusInput || settings.selectInput) {
           colorValue.focus({ preventScroll: true });
         }
 
+        if (settings.selectInput) {
+          colorValue.select();
+        }
+
         // Trigger an "open" event
@@ -714,3 +722,3 @@ currentEl.dispatchEvent(new Event('open', { bubbles: true }));
 
-      if (settings.alpha && rgba.a < 1) {
+      if (settings.alpha && (rgba.a < 1 || settings.forceAlpha)) {
         var alpha = rgba.a * 255 | 0;
@@ -733,3 +741,3 @@ A = alpha.toString(16);
     function RGBAToStr(rgba) {
-      if (!settings.alpha || rgba.a === 1) {
+      if (!settings.alpha || rgba.a === 1 && !settings.forceAlpha) {
         return "rgb(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ")";
@@ -747,3 +755,3 @@ } else {
     function HSLAToStr(hsla) {
-      if (!settings.alpha || hsla.a === 1) {
+      if (!settings.alpha || hsla.a === 1 && !settings.forceAlpha) {
         return "hsl(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%)";
@@ -750,0 +758,0 @@ } else {

dist/esm/coloris.min.js

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

@@ -68,3 +68,5 @@ // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
       alpha: true,
+      forceAlpha: false,
       focusInput: true,
+      selectInput: false,
       autoClose: false,
@@ -176,2 +178,4 @@ inline: false,
               var defaultColor = options.defaultColor || settings.defaultColor;
+
+              currentFormat = getColorFormatFromStr(defaultColor);
               updatePickerPosition();
@@ -245,6 +249,10 @@ setColorFromStr(defaultColor);
 
-        if (settings.focusInput) {
+        if (settings.focusInput || settings.selectInput) {
           colorValue.focus({ preventScroll: true });
         }
 
+        if (settings.selectInput) {
+          colorValue.select();
+        }
+
         // Trigger an "open" event
@@ -755,3 +763,3 @@ currentEl.dispatchEvent(new Event('open', { bubbles: true }));
 
-      if (settings.alpha && rgba.a < 1) {
+      if (settings.alpha && (rgba.a < 1 || settings.forceAlpha)) {
         var alpha = rgba.a * 255 | 0;
@@ -774,3 +782,3 @@ A = alpha.toString(16);
     function RGBAToStr(rgba) {
-      if (!settings.alpha || rgba.a === 1) {
+      if (!settings.alpha || rgba.a === 1 && !settings.forceAlpha) {
         return "rgb(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ")";
@@ -788,3 +796,3 @@ } else {
     function HSLAToStr(hsla) {
-      if (!settings.alpha || hsla.a === 1) {
+      if (!settings.alpha || hsla.a === 1 && !settings.forceAlpha) {
         return "hsl(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%)";
@@ -791,0 +799,0 @@ } else {

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

package.json

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

README.md

@@ -68,3 +68,3 @@ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
    <artifactId>melloware__coloris</artifactId>
-   <version>0.12.2</version>
+   <version>0.14.0</version>
 </dependency>
@@ -71,0 +71,0 @@ ```

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

123441

increased by0.98%

Lines of code

2439

increased by0.99%

No dependency changes