@melloware/coloris - npm Package Compare versions

Comparing version 0.20.0 to 0.21.0

dist/esm/coloris.js

@@ -6,3 +6,3 @@ var Coloris = function () {
   * https://github.com/mdbassit/Coloris
-  * Version: 0.20.0
+  * Version: 0.21.0
   * NPM: https://github.com/melloware/coloris-npm
@@ -323,2 +323,3 @@ */
           colorValue.focus({ preventScroll: true });
+          colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd);
         }
@@ -1007,5 +1008,7 @@
       addListener(colorValue, 'change', function (event) {
+        var value = colorValue.value;
+
         if (currentEl || settings.inline) {
-          setColorFromStr(colorValue.value);
-          pickColor();
+          var color = value === '' ? value : setColorFromStr(value);
+          pickColor(color);
         }
@@ -1024,3 +1027,3 @@ });
 
-      addListener(document, 'click', '.clr-format input', function (event) {
+      addListener(getEl('clr-format'), 'click', '.clr-format input', function (event) {
         currentFormat = event.target.value;
@@ -1027,0 +1030,0 @@ updateColor();

dist/esm/coloris.min.js

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

dist/umd/coloris.js

@@ -47,3 +47,3 @@ // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
   * https://github.com/mdbassit/Coloris
-  * Version: 0.20.0
+  * Version: 0.21.0
   * NPM: https://github.com/melloware/coloris-npm
@@ -364,2 +364,3 @@ */
           colorValue.focus({ preventScroll: true });
+          colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd);
         }
@@ -1048,5 +1049,7 @@
       addListener(colorValue, 'change', function (event) {
+        var value = colorValue.value;
+
         if (currentEl || settings.inline) {
-          setColorFromStr(colorValue.value);
-          pickColor();
+          var color = value === '' ? value : setColorFromStr(value);
+          pickColor(color);
         }
@@ -1065,3 +1068,3 @@ });
 
-      addListener(document, 'click', '.clr-format input', function (event) {
+      addListener(getEl('clr-format'), 'click', '.clr-format input', function (event) {
         currentFormat = event.target.value;
@@ -1068,0 +1071,0 @@ updateColor();

dist/umd/coloris.min.js

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

package.json

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

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

154648

increased by0.34%

Lines of code

3122

increased by0.13%

No dependency changes