Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@melloware/coloris

Package Overview
Dependencies
Maintainers
2
Versions
32
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@melloware/coloris - npm Package Compare versions

Comparing version 0.16.0 to 0.16.1

35

dist/esm/coloris.js

@@ -417,14 +417,24 @@ var Coloris = function () {

if (currentEl && !settings.inline) {
var prevEl = currentEl;
// Revert the color to the original value if needed
if (revert && oldColor !== currentEl.value) {
currentEl.value = oldColor;
if (revert) {
// This will prevent the "change" event on the colorValue input to execute its handler
currentEl = null;
// Trigger an "input" event to force update the thumbnail next to the input field
currentEl.dispatchEvent(new Event('input', { bubbles: true }));
}
if (oldColor !== prevEl.value) {
prevEl.value = oldColor;
if (oldColor !== currentEl.value) {
currentEl.dispatchEvent(new Event('change', { bubbles: true }));
// Trigger an "input" event to force update the thumbnail next to the input field
prevEl.dispatchEvent(new Event('input', { bubbles: true }));
}
}
// Trigger a "change" event if needed
setTimeout(function () {// Add this to the end of the event loop
if (oldColor !== prevEl.value) {
prevEl.dispatchEvent(new Event('change', { bubbles: true }));
}
});
// Hide the picker dialog

@@ -439,8 +449,9 @@ picker.classList.remove('clr-open');

// Trigger a "close" event
currentEl.dispatchEvent(new Event('close', { bubbles: true }));
prevEl.dispatchEvent(new Event('close', { bubbles: true }));
if (settings.focusInput) {
currentEl.focus({ preventScroll: true });
prevEl.focus({ preventScroll: true });
}
// This essentially marks the picker as closed
currentEl = null;

@@ -936,4 +947,6 @@ }

addListener(colorValue, 'change', function (event) {
setColorFromStr(colorValue.value);
pickColor();
if (currentEl) {
setColorFromStr(colorValue.value);
pickColor();
}
});

@@ -940,0 +953,0 @@

@@ -7,2 +7,2 @@ var Coloris=function(){

*/
return h=window,b=document,v=Math,B=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",a11y:{open:"Open color picker",close:"Close color picker",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},N={},I="",j=!(_={}),void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),($=function(){var r={init:X,set:n,wrap:s,close:a,setInstance:D,removeInstance:F,updatePosition:c};function e(e){U(function(){e&&("string"==typeof e?i: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];U(r[l],t)}}(t);return e}()).coloris=$;function n(e){if("object"==typeof e)for(var t in e)switch(t){case"el":i(e.el),!1!==e.wrap&&s(e.el);break;case"parent":(y=b.querySelector(e.parent))&&(y.appendChild(g),O.parent=e.parent,y===b.body&&(y=null));break;case"themeMode":O.themeMode=e.themeMode,"auto"===e.themeMode&&h.matchMedia&&h.matchMedia("(prefers-color-scheme: dark)").matches&&(O.themeMode="dark");case"theme":e.theme&&(O.theme=e.theme),g.className="clr-picker clr-"+O.theme+" clr-"+O.themeMode,O.inline&&c();break;case"margin":e.margin*=1,O.margin=(isNaN(e.margin)?O:e).margin;break;case"wrap":e.el&&e.wrap&&s(e.el);break;case"formatToggle":O.formatToggle=!!e.formatToggle,f("clr-format").style.display=O.formatToggle?"block":"none",O.formatToggle&&(O.format="auto");break;case"swatches":Array.isArray(e.swatches)&&!function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),f("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",O.swatches=e.swatches.slice()}();break;case"swatchesOnly":O.swatchesOnly=!!e.swatchesOnly,g.setAttribute("data-minimal",O.swatchesOnly);break;case"alpha":O.alpha=!!e.alpha,g.setAttribute("data-alpha",O.alpha);break;case"inline":O.inline=!!e.inline,g.setAttribute("data-inline",O.inline),O.inline&&(a=e.defaultColor||O.defaultColor,M=R(a),c(),u(a));break;case"clearButton":"object"==typeof e.clearButton&&(e.clearButton.label&&(O.clearLabel=e.clearButton.label,E.innerHTML=O.clearLabel),e.clearButton=e.clearButton.show),O.clearButton=!!e.clearButton,E.style.display=O.clearButton?"block":"none";break;case"clearLabel":O.clearLabel=e.clearLabel,E.innerHTML=O.clearLabel;break;case"a11y":var a,l,r=e.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&O.a11y[o]&&(O.a11y[o]=r[o],n=!0);n&&(a=f("clr-open-label"),l=f("clr-swatch-label"),a.innerHTML=O.a11y.open,l.innerHTML=O.a11y.swatch,x.setAttribute("aria-label",O.a11y.close),S.setAttribute("aria-label",O.a11y.hueSlider),C.setAttribute("aria-label",O.a11y.alphaSlider),L.setAttribute("aria-label",O.a11y.input),m.setAttribute("aria-label",O.a11y.instruction));default:O[t]=e[t]}}function D(e,t){"string"==typeof e&&"object"==typeof t&&(N[e]=t,j=!0)}function F(e){delete N[e],0===Object.keys(N).length&&(j=!1,e===I&&t())}function W(l){if(j){var e,r=["el","wrap","inline","defaultColor","a11y"];for(e in N)if("break"===function(e){var t=N[e];if(l.matches(e)){for(var a in I=e,_={},r.forEach(function(e){return delete t[e]}),t)_[a]=Array.isArray(O[a])?O[a].slice():O[a];return n(t),"break"}}(e))break}}function t(){0<Object.keys(_).length&&(n(_),I="",_={})}function i(e){r(b,"click",e,function(e){O.inline||(W(e.target),T=e.target,o=T.value,M=R(o),g.classList.add("clr-open"),c(),u(o),(O.focusInput||O.selectInput)&&L.focus({preventScroll:!0}),O.selectInput&&L.select(),T.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=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+n),O.inline||(a=(t=T.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)),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 a(e){T&&!O.inline&&(e&&o!==T.value&&(T.value=o,T.dispatchEvent(new Event("input",{bubbles:!0}))),o!==T.value&&T.dispatchEvent(new Event("change",{bubbles:!0})),g.classList.remove("clr-open"),j&&t(),T.dispatchEvent(new Event("close",{bubbles:!0})),O.focusInput&&T.focus({preventScroll:!0}),T=null)}function u(e){var e=function(e){var t;B.fillStyle="#000",B.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(B.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=B.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);q(t.s,t.v),d(e,t),S.value=t.h,g.style.color="hsl("+t.h+", 100%, 50%)",G.style.left=t.h/360*100+"%",k.style.left=w.width*t.s/100+"px",k.style.top=w.height-w.height*t.v/100+"px",C.value=100*t.a,A.style.left=100*t.a+"%"}function R(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function p(e){e=void 0!==e?e:L.value,T&&(T.value=e,T.dispatchEvent(new Event("input",{bubbles:!0}))),b.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e}}))}function Y(e,t){var a,l,r,n,o,e={h:+S.value,s:e/w.width*100,v:100-t/w.height*100,a:C.value/100},i=(i=(t=e).s/100,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});q(e.s,e.v),d(i,e),p()}function q(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 l(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),a=a<0?0:a>w.width?w.width:a,t=t<0?0:t>w.height?w.height:t,k.style.left=a+"px",k.style.top=t+"px",Y(a,t),e.preventDefault(),e.stopPropagation()}function d(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,A.parentNode.style.color=i,A.style.color=o,x.style.color=o,m.style.display="none",m.offsetHeight,m.style.display="",A.nextElementSibling.style.display="none",A.nextElementSibling.offsetHeight,A.nextElementSibling.style.display="","mixed"===r?r=1===H.a?"hex":"rgb":"auto"===r&&(r=M),r){case"hex":L.value=o;break;case"rgb":L.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":L.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","");g.style.color="hsl("+e+", 100%, 50%)",G.style.left=e/360*100+"%",Y(t,a)}function P(){var e=C.value/100;A.style.left=100*e+"%",d({a:e}),p()}function X(){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">'+O.clearLabel+'</button><button type="button" id="clr-color-preview" class="clr-preview" aria-label="'+O.a11y.close+'"></button><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"),x=f("clr-color-preview"),L=f("clr-color-value"),S=f("clr-hue-slider"),G=f("clr-hue-marker"),C=f("clr-alpha-slider"),A=f("clr-alpha-marker"),i(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",l)}),r(m,"touchstart",function(e){b.addEventListener("touchmove",l,{passive:!1})}),r(k,"mousedown",function(e){r(b,"mousemove",l)}),r(k,"touchstart",function(e){b.addEventListener("touchmove",l,{passive:!1})}),r(L,"change",function(e){u(L.value),p()}),r(E,"click",function(e){p(""),a()}),r(x,"click",function(e){p(),a()}),r(b,"click",".clr-format input",function(e){M=e.target.value,d(),p()}),r(g,"click",".clr-swatches button",function(e){u(e.target.textContent),p(),O.swatchesOnly&&a()}),r(b,"mouseup",function(e){b.removeEventListener("mousemove",l)}),r(b,"touchend",function(e){b.removeEventListener("touchmove",l)}),r(b,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),a()}),r(b,"keydown",function(e){"Escape"===e.key?a(!0):"Tab"===e.key&&g.classList.add("clr-keyboard-nav")}),r(b,"click",".clr-field button",function(e){j&&t(),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]};-1!==Object.keys(t).indexOf(e.key)&&(!function(e,t){e=+k.style.left.replace("px","")+e,t=+k.style.top.replace("px","")+t,k.style.left=e+"px",k.style.top=t+"px",Y(e,t)}.apply(void 0,t[e.key]),e.preventDefault())}),r(m,"click",l),r(S,"input",e),r(C,"input",P)}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 U(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,x,L,E,S,G,C,A,T,M,o,B,H,O,N,I,_,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,v=document,b=Math,B=v.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",a11y:{open:"Open color picker",close:"Close color picker",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},N={},I="",j=!(_={}),void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),($=function(){var r={init:X,set:n,wrap:s,close:l,setInstance:D,removeInstance:F,updatePosition:c};function e(e){U(function(){e&&("string"==typeof e?i: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];U(r[l],t)}}(t);return e}()).coloris=$;function n(e){if("object"==typeof e)for(var t in e)switch(t){case"el":i(e.el),!1!==e.wrap&&s(e.el);break;case"parent":(y=v.querySelector(e.parent))&&(y.appendChild(g),O.parent=e.parent,y===v.body&&(y=null));break;case"themeMode":O.themeMode=e.themeMode,"auto"===e.themeMode&&h.matchMedia&&h.matchMedia("(prefers-color-scheme: dark)").matches&&(O.themeMode="dark");case"theme":e.theme&&(O.theme=e.theme),g.className="clr-picker clr-"+O.theme+" clr-"+O.themeMode,O.inline&&c();break;case"margin":e.margin*=1,O.margin=(isNaN(e.margin)?O:e).margin;break;case"wrap":e.el&&e.wrap&&s(e.el);break;case"formatToggle":O.formatToggle=!!e.formatToggle,f("clr-format").style.display=O.formatToggle?"block":"none",O.formatToggle&&(O.format="auto");break;case"swatches":Array.isArray(e.swatches)&&!function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),f("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",O.swatches=e.swatches.slice()}();break;case"swatchesOnly":O.swatchesOnly=!!e.swatchesOnly,g.setAttribute("data-minimal",O.swatchesOnly);break;case"alpha":O.alpha=!!e.alpha,g.setAttribute("data-alpha",O.alpha);break;case"inline":O.inline=!!e.inline,g.setAttribute("data-inline",O.inline),O.inline&&(a=e.defaultColor||O.defaultColor,M=R(a),c(),u(a));break;case"clearButton":"object"==typeof e.clearButton&&(e.clearButton.label&&(O.clearLabel=e.clearButton.label,E.innerHTML=O.clearLabel),e.clearButton=e.clearButton.show),O.clearButton=!!e.clearButton,E.style.display=O.clearButton?"block":"none";break;case"clearLabel":O.clearLabel=e.clearLabel,E.innerHTML=O.clearLabel;break;case"a11y":var a,l,r=e.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&O.a11y[o]&&(O.a11y[o]=r[o],n=!0);n&&(a=f("clr-open-label"),l=f("clr-swatch-label"),a.innerHTML=O.a11y.open,l.innerHTML=O.a11y.swatch,x.setAttribute("aria-label",O.a11y.close),S.setAttribute("aria-label",O.a11y.hueSlider),C.setAttribute("aria-label",O.a11y.alphaSlider),L.setAttribute("aria-label",O.a11y.input),m.setAttribute("aria-label",O.a11y.instruction));default:O[t]=e[t]}}function D(e,t){"string"==typeof e&&"object"==typeof t&&(N[e]=t,j=!0)}function F(e){delete N[e],0===Object.keys(N).length&&(j=!1,e===I&&a())}function W(l){if(j){var e,r=["el","wrap","inline","defaultColor","a11y"];for(e in N)if("break"===function(e){var t=N[e];if(l.matches(e)){for(var a in I=e,_={},r.forEach(function(e){return delete t[e]}),t)_[a]=Array.isArray(O[a])?O[a].slice():O[a];return n(t),"break"}}(e))break}}function a(){0<Object.keys(_).length&&(n(_),I="",_={})}function i(e){r(v,"click",e,function(e){O.inline||(W(e.target),T=e.target,o=T.value,M=R(o),g.classList.add("clr-open"),c(),u(o),(O.focusInput||O.selectInput)&&L.focus({preventScroll:!0}),O.selectInput&&L.select(),T.dispatchEvent(new Event("open",{bubbles:!0})))}),r(v,"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=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+n),O.inline||(a=(t=T.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>v.documentElement.clientWidth&&(a+=t.width-o,c.left=!0),l+i-n>v.documentElement.clientHeight&&i+O.margin<=t.top&&(l=n+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){v.querySelectorAll(e).forEach(function(e){var t,a=e.parentNode;a.classList.contains("clr-field")||((t=v.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;T&&!O.inline&&(t=T,e&&(T=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"),j&&a(),t.dispatchEvent(new Event("close",{bubbles:!0})),O.focusInput&&t.focus({preventScroll:!0}),T=null)}function u(e){var e=function(e){var t;B.fillStyle="#000",B.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(B.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=B.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),t={r:e[0],g:e[1],b:e[2],a:1});return t}(e),t=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=b.max(t,a,l),n=b.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=b.floor(60*i))<0?i+360:i,s:b.round(100*c),v:b.round(100*o),a:e.a}}(e);q(t.s,t.v),d(e,t),S.value=t.h,g.style.color="hsl("+t.h+", 100%, 50%)",G.style.left=t.h/360*100+"%",k.style.left=w.width*t.s/100+"px",k.style.top=w.height-w.height*t.v/100+"px",C.value=100*t.a,A.style.left=100*t.a+"%"}function R(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function p(e){e=void 0!==e?e:L.value,T&&(T.value=e,T.dispatchEvent(new Event("input",{bubbles:!0}))),v.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e}}))}function Y(e,t){var a,l,r,n,o,e={h:+S.value,s:e/w.width*100,v:100-t/w.height*100,a:C.value/100},i=(i=(t=e).s/100,a=t.v/100,i*=a,l=t.h/60,r=i*(1-b.abs(l%2-1)),i+=a-=i,r+=a,l=b.floor(l)%6,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:b.round(255*n),g:b.round(255*o),b:b.round(255*a),a:t.a});q(e.s,e.v),d(i,e),p()}function q(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),a=a<0?0:a>w.width?w.width:a,t=t<0?0:t>w.height?w.height:t,k.style.left=a+"px",k.style.top=t+"px",Y(a,t),e.preventDefault(),e.stopPropagation()}function d(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,A.parentNode.style.color=i,A.style.color=o,x.style.color=o,m.style.display="none",m.offsetHeight,m.style.display="",A.nextElementSibling.style.display="none",A.nextElementSibling.offsetHeight,A.nextElementSibling.style.display="","mixed"===r?r=1===H.a?"hex":"rgb":"auto"===r&&(r=M),r){case"hex":L.value=o;break;case"rgb":L.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":L.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=b.round((a-l)/b.min(l,1-l)*100));return{h:e.h,s:t||0,l:b.round(100*l),a:e.a}}(H),!O.alpha||1===n.a&&!O.forceAlpha?"hsl("+n.h+", "+n.s+"%, "+n.l+"%)":"hsla("+n.h+", "+n.s+"%, "+n.l+"%, "+n.a+")")}v.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+S.value,t=+k.style.left.replace("px",""),a=+k.style.top.replace("px","");g.style.color="hsl("+e+", 100%, 50%)",G.style.left=e/360*100+"%",Y(t,a)}function P(){var e=C.value/100;A.style.left=100*e+"%",d({a:e}),p()}function X(){y=null,(g=v.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">'+O.clearLabel+'</button><button type="button" id="clr-color-preview" class="clr-preview" aria-label="'+O.a11y.close+'"></button><span id="clr-open-label" hidden>'+O.a11y.open+'</span><span id="clr-swatch-label" hidden>'+O.a11y.swatch+"</span>",v.body.appendChild(g),m=f("clr-color-area"),k=f("clr-color-marker"),E=f("clr-clear"),x=f("clr-color-preview"),L=f("clr-color-value"),S=f("clr-hue-slider"),G=f("clr-hue-marker"),C=f("clr-alpha-slider"),A=f("clr-alpha-marker"),i(O.el),s(O.el),r(g,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),r(m,"mousedown",function(e){r(v,"mousemove",t)}),r(m,"touchstart",function(e){v.addEventListener("touchmove",t,{passive:!1})}),r(k,"mousedown",function(e){r(v,"mousemove",t)}),r(k,"touchstart",function(e){v.addEventListener("touchmove",t,{passive:!1})}),r(L,"change",function(e){T&&(u(L.value),p())}),r(E,"click",function(e){p(""),l()}),r(x,"click",function(e){p(),l()}),r(v,"click",".clr-format input",function(e){M=e.target.value,d(),p()}),r(g,"click",".clr-swatches button",function(e){u(e.target.textContent),p(),O.swatchesOnly&&l()}),r(v,"mouseup",function(e){v.removeEventListener("mousemove",t)}),r(v,"touchend",function(e){v.removeEventListener("touchmove",t)}),r(v,"mousedown",function(e){g.classList.remove("clr-keyboard-nav"),l()}),r(v,"keydown",function(e){"Escape"===e.key?l(!0):"Tab"===e.key&&g.classList.add("clr-keyboard-nav")}),r(v,"click",".clr-field button",function(e){j&&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]};-1!==Object.keys(t).indexOf(e.key)&&(!function(e,t){e=+k.style.left.replace("px","")+e,t=+k.style.top.replace("px","")+t,k.style.left=e+"px",k.style.top=t+"px",Y(e,t)}.apply(void 0,t[e.key]),e.preventDefault())}),r(m,"click",t),r(S,"input",e),r(C,"input",P)}function f(e){return v.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 U(e,t){t=void 0!==t?t:[],"loading"!==v.readyState?e.apply(void 0,t):v.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}var h,v,b,y,g,m,w,k,x,L,E,S,G,C,A,T,M,o,B,H,O,N,I,_,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};

@@ -458,14 +458,24 @@ // https://github.com/umdjs/umd/blob/master/templates/returnExports.js

if (currentEl && !settings.inline) {
var prevEl = currentEl;
// Revert the color to the original value if needed
if (revert && oldColor !== currentEl.value) {
currentEl.value = oldColor;
if (revert) {
// This will prevent the "change" event on the colorValue input to execute its handler
currentEl = null;
// Trigger an "input" event to force update the thumbnail next to the input field
currentEl.dispatchEvent(new Event('input', { bubbles: true }));
}
if (oldColor !== prevEl.value) {
prevEl.value = oldColor;
if (oldColor !== currentEl.value) {
currentEl.dispatchEvent(new Event('change', { bubbles: true }));
// Trigger an "input" event to force update the thumbnail next to the input field
prevEl.dispatchEvent(new Event('input', { bubbles: true }));
}
}
// Trigger a "change" event if needed
setTimeout(function () {// Add this to the end of the event loop
if (oldColor !== prevEl.value) {
prevEl.dispatchEvent(new Event('change', { bubbles: true }));
}
});
// Hide the picker dialog

@@ -480,8 +490,9 @@ picker.classList.remove('clr-open');

// Trigger a "close" event
currentEl.dispatchEvent(new Event('close', { bubbles: true }));
prevEl.dispatchEvent(new Event('close', { bubbles: true }));
if (settings.focusInput) {
currentEl.focus({ preventScroll: true });
prevEl.focus({ preventScroll: true });
}
// This essentially marks the picker as closed
currentEl = null;

@@ -977,4 +988,6 @@ }

addListener(colorValue, 'change', function (event) {
setColorFromStr(colorValue.value);
pickColor();
if (currentEl) {
setColorFromStr(colorValue.value);
pickColor();
}
});

@@ -981,0 +994,0 @@

@@ -7,2 +7,2 @@ !function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof module&&module.exports?module.exports=t():(e.Coloris=t(),"object"==typeof window&&e.Coloris.init())}("undefined"!=typeof self?self:void 0,function(){

*/
return h=window,b=document,v=Math,B=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",a11y:{open:"Open color picker",close:"Close color picker",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},N={},j="",D=!(I={}),void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(z=function(){var r={init:U,set:n,wrap:s,close:a,setInstance:F,removeInstance:W,updatePosition:c};function e(e){G(function(){e&&("string"==typeof e?i: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];G(r[l],t)}}(t);return e}()).coloris=z;function n(e){if("object"==typeof e)for(var t in e)switch(t){case"el":i(e.el),!1!==e.wrap&&s(e.el);break;case"parent":(y=b.querySelector(e.parent))&&(y.appendChild(m),O.parent=e.parent,y===b.body&&(y=null));break;case"themeMode":O.themeMode=e.themeMode,"auto"===e.themeMode&&h.matchMedia&&h.matchMedia("(prefers-color-scheme: dark)").matches&&(O.themeMode="dark");case"theme":e.theme&&(O.theme=e.theme),m.className="clr-picker clr-"+O.theme+" clr-"+O.themeMode,O.inline&&c();break;case"margin":e.margin*=1,O.margin=(isNaN(e.margin)?O:e).margin;break;case"wrap":e.el&&e.wrap&&s(e.el);break;case"formatToggle":O.formatToggle=!!e.formatToggle,f("clr-format").style.display=O.formatToggle?"block":"none",O.formatToggle&&(O.format="auto");break;case"swatches":Array.isArray(e.swatches)&&!function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),f("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",O.swatches=e.swatches.slice()}();break;case"swatchesOnly":O.swatchesOnly=!!e.swatchesOnly,m.setAttribute("data-minimal",O.swatchesOnly);break;case"alpha":O.alpha=!!e.alpha,m.setAttribute("data-alpha",O.alpha);break;case"inline":O.inline=!!e.inline,m.setAttribute("data-inline",O.inline),O.inline&&(a=e.defaultColor||O.defaultColor,M=Y(a),c(),u(a));break;case"clearButton":"object"==typeof e.clearButton&&(e.clearButton.label&&(O.clearLabel=e.clearButton.label,E.innerHTML=O.clearLabel),e.clearButton=e.clearButton.show),O.clearButton=!!e.clearButton,E.style.display=O.clearButton?"block":"none";break;case"clearLabel":O.clearLabel=e.clearLabel,E.innerHTML=O.clearLabel;break;case"a11y":var a,l,r=e.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&O.a11y[o]&&(O.a11y[o]=r[o],n=!0);n&&(a=f("clr-open-label"),l=f("clr-swatch-label"),a.innerHTML=O.a11y.open,l.innerHTML=O.a11y.swatch,x.setAttribute("aria-label",O.a11y.close),S.setAttribute("aria-label",O.a11y.hueSlider),A.setAttribute("aria-label",O.a11y.alphaSlider),L.setAttribute("aria-label",O.a11y.input),g.setAttribute("aria-label",O.a11y.instruction));default:O[t]=e[t]}}function F(e,t){"string"==typeof e&&"object"==typeof t&&(N[e]=t,D=!0)}function W(e){delete N[e],0===Object.keys(N).length&&(D=!1,e===j&&t())}function R(l){if(D){var e,r=["el","wrap","inline","defaultColor","a11y"];for(e in N)if("break"===function(e){var t=N[e];if(l.matches(e)){for(var a in j=e,I={},r.forEach(function(e){return delete t[e]}),t)I[a]=Array.isArray(O[a])?O[a].slice():O[a];return n(t),"break"}}(e))break}}function t(){0<Object.keys(I).length&&(n(I),j="",I={})}function i(e){r(b,"click",e,function(e){O.inline||(R(e.target),C=e.target,o=C.value,M=Y(o),m.classList.add("clr-open"),c(),u(o),(O.focusInput||O.selectInput)&&L.focus({preventScroll:!0}),O.selectInput&&L.select(),C.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=C.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 a(e){C&&!O.inline&&(e&&o!==C.value&&(C.value=o,C.dispatchEvent(new Event("input",{bubbles:!0}))),o!==C.value&&C.dispatchEvent(new Event("change",{bubbles:!0})),m.classList.remove("clr-open"),D&&t(),C.dispatchEvent(new Event("close",{bubbles:!0})),O.focusInput&&C.focus({preventScroll:!0}),C=null)}function u(e){var e=function(e){var t;B.fillStyle="#000",B.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(B.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=B.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);P(t.s,t.v),p(e,t),S.value=t.h,m.style.color="hsl("+t.h+", 100%, 50%)",$.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",A.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:L.value,C&&(C.value=e,C.dispatchEvent(new Event("input",{bubbles:!0}))),b.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e}}))}function q(e,t){var a,l,r,n,o,e={h:+S.value,s:e/w.width*100,v:100-t/w.height*100,a:A.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});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 l(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),a=a<0?0:a>w.width?w.width:a,t=t<0?0:t>w.height?w.height:t,k.style.left=a+"px",k.style.top=t+"px",q(a,t),e.preventDefault(),e.stopPropagation()}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,T.parentNode.style.color=i,T.style.color=o,x.style.color=o,g.style.display="none",g.offsetHeight,g.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":L.value=o;break;case"rgb":L.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":L.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%)",$.style.left=e/360*100+"%",q(t,a)}function X(){var e=A.value/100;T.style.left=100*e+"%",p({a:e}),d()}function U(){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">'+O.clearLabel+'</button><button type="button" id="clr-color-preview" class="clr-preview" aria-label="'+O.a11y.close+'"></button><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"),x=f("clr-color-preview"),L=f("clr-color-value"),S=f("clr-hue-slider"),$=f("clr-hue-marker"),A=f("clr-alpha-slider"),T=f("clr-alpha-marker"),i(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",l)}),r(g,"touchstart",function(e){b.addEventListener("touchmove",l,{passive:!1})}),r(k,"mousedown",function(e){r(b,"mousemove",l)}),r(k,"touchstart",function(e){b.addEventListener("touchmove",l,{passive:!1})}),r(L,"change",function(e){u(L.value),d()}),r(E,"click",function(e){d(""),a()}),r(x,"click",function(e){d(),a()}),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&&a()}),r(b,"mouseup",function(e){b.removeEventListener("mousemove",l)}),r(b,"touchend",function(e){b.removeEventListener("touchmove",l)}),r(b,"mousedown",function(e){m.classList.remove("clr-keyboard-nav"),a()}),r(b,"keydown",function(e){"Escape"===e.key?a(!0):"Tab"===e.key&&m.classList.add("clr-keyboard-nav")}),r(b,"click",".clr-field button",function(e){D&&t(),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]};-1!==Object.keys(t).indexOf(e.key)&&(!function(e,t){e=+k.style.left.replace("px","")+e,t=+k.style.top.replace("px","")+t,k.style.left=e+"px",k.style.top=t+"px",q(e,t)}.apply(void 0,t[e.key]),e.preventDefault())}),r(g,"click",l),r(S,"input",e),r(A,"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 G(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,x,L,E,S,$,A,T,C,M,o,B,H,O,N,j,I,D,z});
return h=window,b=document,v=Math,B=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",a11y:{open:"Open color picker",close:"Close color picker",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},N={},j="",D=!(I={}),void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),(z=function(){var r={init:U,set:n,wrap:s,close:l,setInstance:F,removeInstance:W,updatePosition:c};function e(e){G(function(){e&&("string"==typeof e?i: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];G(r[l],t)}}(t);return e}()).coloris=z;function n(e){if("object"==typeof e)for(var t in e)switch(t){case"el":i(e.el),!1!==e.wrap&&s(e.el);break;case"parent":(y=b.querySelector(e.parent))&&(y.appendChild(m),O.parent=e.parent,y===b.body&&(y=null));break;case"themeMode":O.themeMode=e.themeMode,"auto"===e.themeMode&&h.matchMedia&&h.matchMedia("(prefers-color-scheme: dark)").matches&&(O.themeMode="dark");case"theme":e.theme&&(O.theme=e.theme),m.className="clr-picker clr-"+O.theme+" clr-"+O.themeMode,O.inline&&c();break;case"margin":e.margin*=1,O.margin=(isNaN(e.margin)?O:e).margin;break;case"wrap":e.el&&e.wrap&&s(e.el);break;case"formatToggle":O.formatToggle=!!e.formatToggle,f("clr-format").style.display=O.formatToggle?"block":"none",O.formatToggle&&(O.format="auto");break;case"swatches":Array.isArray(e.swatches)&&!function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),f("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",O.swatches=e.swatches.slice()}();break;case"swatchesOnly":O.swatchesOnly=!!e.swatchesOnly,m.setAttribute("data-minimal",O.swatchesOnly);break;case"alpha":O.alpha=!!e.alpha,m.setAttribute("data-alpha",O.alpha);break;case"inline":O.inline=!!e.inline,m.setAttribute("data-inline",O.inline),O.inline&&(a=e.defaultColor||O.defaultColor,M=Y(a),c(),u(a));break;case"clearButton":"object"==typeof e.clearButton&&(e.clearButton.label&&(O.clearLabel=e.clearButton.label,E.innerHTML=O.clearLabel),e.clearButton=e.clearButton.show),O.clearButton=!!e.clearButton,E.style.display=O.clearButton?"block":"none";break;case"clearLabel":O.clearLabel=e.clearLabel,E.innerHTML=O.clearLabel;break;case"a11y":var a,l,r=e.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&O.a11y[o]&&(O.a11y[o]=r[o],n=!0);n&&(a=f("clr-open-label"),l=f("clr-swatch-label"),a.innerHTML=O.a11y.open,l.innerHTML=O.a11y.swatch,x.setAttribute("aria-label",O.a11y.close),S.setAttribute("aria-label",O.a11y.hueSlider),A.setAttribute("aria-label",O.a11y.alphaSlider),L.setAttribute("aria-label",O.a11y.input),g.setAttribute("aria-label",O.a11y.instruction));default:O[t]=e[t]}}function F(e,t){"string"==typeof e&&"object"==typeof t&&(N[e]=t,D=!0)}function W(e){delete N[e],0===Object.keys(N).length&&(D=!1,e===j&&a())}function R(l){if(D){var e,r=["el","wrap","inline","defaultColor","a11y"];for(e in N)if("break"===function(e){var t=N[e];if(l.matches(e)){for(var a in j=e,I={},r.forEach(function(e){return delete t[e]}),t)I[a]=Array.isArray(O[a])?O[a].slice():O[a];return n(t),"break"}}(e))break}}function a(){0<Object.keys(I).length&&(n(I),j="",I={})}function i(e){r(b,"click",e,function(e){O.inline||(R(e.target),C=e.target,o=C.value,M=Y(o),m.classList.add("clr-open"),c(),u(o),(O.focusInput||O.selectInput)&&L.focus({preventScroll:!0}),O.selectInput&&L.select(),C.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=C.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;C&&!O.inline&&(t=C,e&&(C=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}),C=null)}function u(e){var e=function(e){var t;B.fillStyle="#000",B.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(B.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=B.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);P(t.s,t.v),p(e,t),S.value=t.h,m.style.color="hsl("+t.h+", 100%, 50%)",$.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",A.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:L.value,C&&(C.value=e,C.dispatchEvent(new Event("input",{bubbles:!0}))),b.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e}}))}function q(e,t){var a,l,r,n,o,e={h:+S.value,s:e/w.width*100,v:100-t/w.height*100,a:A.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});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),a=a<0?0:a>w.width?w.width:a,t=t<0?0:t>w.height?w.height:t,k.style.left=a+"px",k.style.top=t+"px",q(a,t),e.preventDefault(),e.stopPropagation()}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,T.parentNode.style.color=i,T.style.color=o,x.style.color=o,g.style.display="none",g.offsetHeight,g.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":L.value=o;break;case"rgb":L.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":L.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%)",$.style.left=e/360*100+"%",q(t,a)}function X(){var e=A.value/100;T.style.left=100*e+"%",p({a:e}),d()}function U(){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">'+O.clearLabel+'</button><button type="button" id="clr-color-preview" class="clr-preview" aria-label="'+O.a11y.close+'"></button><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"),x=f("clr-color-preview"),L=f("clr-color-value"),S=f("clr-hue-slider"),$=f("clr-hue-marker"),A=f("clr-alpha-slider"),T=f("clr-alpha-marker"),i(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(L,"change",function(e){C&&(u(L.value),d())}),r(E,"click",function(e){d(""),l()}),r(x,"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"===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]};-1!==Object.keys(t).indexOf(e.key)&&(!function(e,t){e=+k.style.left.replace("px","")+e,t=+k.style.top.replace("px","")+t,k.style.left=e+"px",k.style.top=t+"px",q(e,t)}.apply(void 0,t[e.key]),e.preventDefault())}),r(g,"click",t),r(S,"input",e),r(A,"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 G(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,x,L,E,S,$,A,T,C,M,o,B,H,O,N,j,I,D,z});
{
"name": "@melloware/coloris",
"version": "0.16.0",
"version": "0.16.1",
"description": "A lightweight and elegant color picker.",

@@ -32,3 +32,3 @@ "author": "Momo Bassit",

"bugs": {
"url" : "https://github.com/mdbassit/Coloris/issues"
"url": "https://github.com/mdbassit/Coloris/issues"
},

@@ -63,3 +63,3 @@ "homepage": "https://coloris.js.org",

"start": "gulp",
"prepack": "gulp build && npm run test-npm",
"prepack": "gulp build",
"test-npm": "node test-npm/run-tests.js"

@@ -66,0 +66,0 @@ },

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm version](https://badge.fury.io/js/@melloware%2Fcoloris.svg)](https://badge.fury.io/js/@melloware%2Fcoloris)
![Maven](https://img.shields.io/maven-central/v/org.webjars.npm/melloware__coloris)
[![@melloware/coloris](https://snyk.io/advisor/npm-package/@melloware/coloris/badge.svg)](https://snyk.io/advisor/npm-package/@melloware/coloris)

@@ -5,0 +6,0 @@ # Coloris NPM

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc