@melloware/coloris - npm Package Compare versions

Comparing version 0.17.1 to 0.18.0

dist/coloris.d.ts

@@ -152,2 +152,10 @@ /**
     wrap?: boolean;
+    
+    // Set to true to activate basic right-to-left support.
+    /**
+     * Set to true to activate basic right-to-left support.
+     *
+     * @default false
+     */
+    rtl?: boolean;
 
@@ -321,2 +329,1 @@ /**
 
-

dist/esm/coloris.js

 var Coloris = function () {
   /*!
-  * Copyright (c) 2021 Momo Bassit.
+  * Copyright (c) 2021-2023 Momo Bassit.
   * Licensed under the MIT License (MIT)
   * https://github.com/mdbassit/Coloris
+  * Version: 0.18.0
+  * NPM: https://github.com/melloware/coloris-npm
   */
@@ -20,2 +22,3 @@
       themeMode: 'light',
+      rtl: false,
       wrap: true,
@@ -37,2 +40,3 @@ margin: 2,
       closeLabel: 'Close',
+      onChange: function onChange() {return undefined;},
       a11y: {
@@ -106,2 +110,6 @@ open: 'Open color picker',
             break;
+          case 'rtl':
+            settings.rtl = !!options.rtl;
+            document.querySelectorAll('.clr-field').forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);});
+            break;
           case 'margin':
@@ -213,2 +221,3 @@ options.margin *= 1;
             }
+            break;
           default:
@@ -255,3 +264,3 @@ settings[key] = options[key];}
         // These options can only be set globally, not per instance
-        var unsupportedOptions = ['el', 'wrap', 'inline', 'defaultColor', 'a11y'];var _loop2 = function _loop2()
+        var unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];var _loop2 = function _loop2()
 
@@ -404,2 +413,4 @@ {
         picker.style.top = top + "px";
+        offset.x += picker.offsetLeft;
+        offset.y += picker.offsetTop;
       }
@@ -410,4 +421,4 @@
         height: colorArea.offsetHeight,
-        x: picker.offsetLeft + colorArea.offsetLeft + offset.x,
-        y: picker.offsetTop + colorArea.offsetTop + offset.y
+        x: colorArea.offsetLeft + offset.x,
+        y: colorArea.offsetTop + offset.y
       };
@@ -426,6 +437,11 @@ }
           var wrapper = document.createElement('div');
+          var classes = 'clr-field';
 
+          if (settings.rtl || field.classList.contains('clr-rtl')) {
+            classes += ' clr-rtl';
+          }
+
           wrapper.innerHTML = "<button type=\"button\" aria-labelledby=\"clr-open-label\"></button>";
           parentNode.insertBefore(wrapper, field);
-          wrapper.setAttribute('class', 'clr-field');
+          wrapper.setAttribute('class', classes);
           wrapper.style.color = field.value;
@@ -535,2 +551,6 @@ wrapper.appendChild(field);
 
+      if (settings.onChange) {
+        settings.onChange.call(window, color);
+      }
+
       document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color: color } }));
@@ -907,2 +927,3 @@ }
     function init() {
+      if (document.getElementById('clr-picker')) return; /**** DO NOT REMOVE: Prevent binding events multiple times */
       // Render the UI
@@ -914,11 +935,11 @@ container = null;
       picker.innerHTML =
-      "<input id=\"clr-color-value\" class=\"clr-color\" type=\"text\" value=\"\" spellcheck=\"false\" aria-label=\"" + settings.a11y.input + "\">" + ("<div id=\"clr-color-area\" class=\"clr-gradient\" role=\"application\" aria-label=\"" +
+      "<input id=\"clr-color-value\" name=\"clr-color-value\" class=\"clr-color\" type=\"text\" value=\"\" spellcheck=\"false\" aria-label=\"" + settings.a11y.input + "\">" + ("<div id=\"clr-color-area\" class=\"clr-gradient\" role=\"application\" aria-label=\"" +
       settings.a11y.instruction + "\">") +
       '<div id="clr-color-marker" class="clr-marker" tabindex="0"></div>' +
       '</div>' +
-      '<div class="clr-hue">' + ("<input id=\"clr-hue-slider\" type=\"range\" min=\"0\" max=\"360\" step=\"1\" aria-label=\"" +
+      '<div class="clr-hue">' + ("<input id=\"clr-hue-slider\" name=\"clr-hue-slider\" type=\"range\" min=\"0\" max=\"360\" step=\"1\" aria-label=\"" +
       settings.a11y.hueSlider + "\">") +
       '<div id="clr-hue-marker"></div>' +
       '</div>' +
-      '<div class="clr-alpha">' + ("<input id=\"clr-alpha-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" aria-label=\"" +
+      '<div class="clr-alpha">' + ("<input id=\"clr-alpha-slider\" name=\"clr-alpha-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" aria-label=\"" +
       settings.a11y.alphaSlider + "\">") +
@@ -925,0 +946,0 @@ '<div id="clr-alpha-marker"></div>' +

dist/esm/coloris.min.js

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

@@ -44,5 +44,7 @@ // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
   /*!
-  * Copyright (c) 2021 Momo Bassit.
+  * Copyright (c) 2021-2023 Momo Bassit.
   * Licensed under the MIT License (MIT)
   * https://github.com/mdbassit/Coloris
+  * Version: 0.18.0
+  * NPM: https://github.com/melloware/coloris-npm
   */
@@ -62,2 +64,3 @@
       themeMode: 'light',
+      rtl: false,
       wrap: true,
@@ -79,2 +82,3 @@ margin: 2,
       closeLabel: 'Close',
+      onChange: function onChange() {return undefined;},
       a11y: {
@@ -148,2 +152,6 @@ open: 'Open color picker',
             break;
+          case 'rtl':
+            settings.rtl = !!options.rtl;
+            document.querySelectorAll('.clr-field').forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);});
+            break;
           case 'margin':
@@ -255,2 +263,3 @@ options.margin *= 1;
             }
+            break;
           default:
@@ -297,3 +306,3 @@ settings[key] = options[key];}
         // These options can only be set globally, not per instance
-        var unsupportedOptions = ['el', 'wrap', 'inline', 'defaultColor', 'a11y'];var _loop2 = function _loop2()
+        var unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];var _loop2 = function _loop2()
 
@@ -446,2 +455,4 @@ {
         picker.style.top = top + "px";
+        offset.x += picker.offsetLeft;
+        offset.y += picker.offsetTop;
       }
@@ -452,4 +463,4 @@
         height: colorArea.offsetHeight,
-        x: picker.offsetLeft + colorArea.offsetLeft + offset.x,
-        y: picker.offsetTop + colorArea.offsetTop + offset.y
+        x: colorArea.offsetLeft + offset.x,
+        y: colorArea.offsetTop + offset.y
       };
@@ -468,6 +479,11 @@ }
           var wrapper = document.createElement('div');
+          var classes = 'clr-field';
 
+          if (settings.rtl || field.classList.contains('clr-rtl')) {
+            classes += ' clr-rtl';
+          }
+
           wrapper.innerHTML = "<button type=\"button\" aria-labelledby=\"clr-open-label\"></button>";
           parentNode.insertBefore(wrapper, field);
-          wrapper.setAttribute('class', 'clr-field');
+          wrapper.setAttribute('class', classes);
           wrapper.style.color = field.value;
@@ -577,2 +593,6 @@ wrapper.appendChild(field);
 
+      if (settings.onChange) {
+        settings.onChange.call(window, color);
+      }
+
       document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color: color } }));
@@ -949,2 +969,3 @@ }
     function init() {
+      if (document.getElementById('clr-picker')) return; /**** DO NOT REMOVE: Prevent binding events multiple times */
       // Render the UI
@@ -956,11 +977,11 @@ container = null;
       picker.innerHTML =
-      "<input id=\"clr-color-value\" class=\"clr-color\" type=\"text\" value=\"\" spellcheck=\"false\" aria-label=\"" + settings.a11y.input + "\">" + ("<div id=\"clr-color-area\" class=\"clr-gradient\" role=\"application\" aria-label=\"" +
+      "<input id=\"clr-color-value\" name=\"clr-color-value\" class=\"clr-color\" type=\"text\" value=\"\" spellcheck=\"false\" aria-label=\"" + settings.a11y.input + "\">" + ("<div id=\"clr-color-area\" class=\"clr-gradient\" role=\"application\" aria-label=\"" +
       settings.a11y.instruction + "\">") +
       '<div id="clr-color-marker" class="clr-marker" tabindex="0"></div>' +
       '</div>' +
-      '<div class="clr-hue">' + ("<input id=\"clr-hue-slider\" type=\"range\" min=\"0\" max=\"360\" step=\"1\" aria-label=\"" +
+      '<div class="clr-hue">' + ("<input id=\"clr-hue-slider\" name=\"clr-hue-slider\" type=\"range\" min=\"0\" max=\"360\" step=\"1\" aria-label=\"" +
       settings.a11y.hueSlider + "\">") +
       '<div id="clr-hue-marker"></div>' +
       '</div>' +
-      '<div class="clr-alpha">' + ("<input id=\"clr-alpha-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" aria-label=\"" +
+      '<div class="clr-alpha">' + ("<input id=\"clr-alpha-slider\" name=\"clr-alpha-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" aria-label=\"" +
       settings.a11y.alphaSlider + "\">") +
@@ -967,0 +988,0 @@ '<div id="clr-alpha-marker"></div>' +

dist/umd/coloris.min.js

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

package.json

 {
   "name": "@melloware/coloris",
-  "version": "0.17.1",
+  "version": "0.18.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

142213

increased by2.23%

Lines of code

2850

increased by2.08%

No dependency changes