@bornova/colorpicker 1.0.0 → 1.0.1

package/dist/browser/colorpicker.js

@@ -1,4 +1,4 @@
-/* @bornova/colorpicker v1.0.0 */
+/* @bornova/colorpicker v1.0.1 */
 var ColorPicker = function() {
     "use strict";
     const settings = {
@@ -37,7 +37,15 @@ var ColorPicker = function() {
             instruction: "Saturation and brightness selector. Use up, down, left and right arrow keys to select."
         }
     };
-    const ctx = document.createElement("canvas").getContext("2d");
+    let ctx;
+    function getCtx() {
+        if (!ctx && typeof document !== "undefined") {
+            try {
+                ctx = document.createElement("canvas").getContext("2d");
+            } catch {}
+        }
+        return ctx;
+    }
     function HSVAtoRGBA(hsva) {
         const saturation = hsva.s / 100;
         const value = hsva.v / 100;
@@ -102,25 +110,70 @@ var ColorPicker = function() {
     }
     function strToRGBA(str) {
         const regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
+        const canvasCtx = getCtx();
         let match, rgba;
-        ctx.fillStyle = "#000";
-        ctx.fillStyle = str;
-        match = regex.exec(ctx.fillStyle);
-        if (match) {
-            rgba = {
-                r: Number(match[3]),
-                g: Number(match[4]),
-                b: Number(match[5]),
-                a: Number(match[6])
-            };
+        if (canvasCtx) {
+            canvasCtx.fillStyle = "#000";
+            canvasCtx.fillStyle = str;
+            match = regex.exec(canvasCtx.fillStyle);
+            if (match) {
+                rgba = {
+                    r: Number(match[3]),
+                    g: Number(match[4]),
+                    b: Number(match[5]),
+                    a: match[6] === "" ? 1 : Number(match[6])
+                };
+            } else {
+                match = canvasCtx.fillStyle.replace("#", "").match(/.{2}/g).map(h => parseInt(h, 16));
+                rgba = {
+                    r: match[0],
+                    g: match[1],
+                    b: match[2],
+                    a: match[3] !== undefined ? Number((match[3] / 255).toFixed(2)) : 1
+                };
+            }
         } else {
-            match = ctx.fillStyle.replace("#", "").match(/.{2}/g).map(h => parseInt(h, 16));
-            rgba = {
-                r: match[0],
-                g: match[1],
-                b: match[2],
-                a: 1
-            };
+            match = regex.exec(str);
+            if (match) {
+                rgba = {
+                    r: Number(match[3]),
+                    g: Number(match[4]),
+                    b: Number(match[5]),
+                    a: match[6] === "" ? 1 : Number(match[6])
+                };
+            } else {
+                const hex = str.replace("#", "");
+                if (hex.length === 3 || hex.length === 4) {
+                    const r = parseInt(hex[0] + hex[0], 16);
+                    const g = parseInt(hex[1] + hex[1], 16);
+                    const b = parseInt(hex[2] + hex[2], 16);
+                    const a = hex.length === 4 ? Number((parseInt(hex[3] + hex[3], 16) / 255).toFixed(2)) : 1;
+                    rgba = {
+                        r: r,
+                        g: g,
+                        b: b,
+                        a: a
+                    };
+                } else if (hex.length === 6 || hex.length === 8) {
+                    const r = parseInt(hex.slice(0, 2), 16);
+                    const g = parseInt(hex.slice(2, 4), 16);
+                    const b = parseInt(hex.slice(4, 6), 16);
+                    const a = hex.length === 8 ? Number((parseInt(hex.slice(6, 8), 16) / 255).toFixed(2)) : 1;
+                    rgba = {
+                        r: r,
+                        g: g,
+                        b: b,
+                        a: a
+                    };
+                } else {
+                    rgba = {
+                        r: 0,
+                        g: 0,
+                        b: 0,
+                        a: 1
+                    };
+                }
+            }
         }
         return rgba;
     }
@@ -130,7 +183,7 @@ var ColorPicker = function() {
         const B = rgba.b.toString(16).padStart(2, "0");
         let A = "";
         if (settings.alpha && (rgba.a < 1 || settings.forceAlpha)) {
-            A = (rgba.a * 255 | 0).toString(16).padStart(2, "0");
+            A = Math.round(rgba.a * 255).toString(16).padStart(2, "0");
         }
         return "#" + R + G + B + A;
     }
@@ -379,11 +432,17 @@ var ColorPicker = function() {
                 if (element.matches(selector)) {
                     currentInstanceId = selector;
                     defaultInstance = {};
-                    unsupportedOptions.forEach(option => delete options[option]);
-                    for (const option of Object.keys(options)) {
+                    const clonedOptions = {
+                        ...options
+                    };
+                    unsupportedOptions.forEach(option => delete clonedOptions[option]);
+                    for (const option of Object.keys(clonedOptions)) {
                         defaultInstance[option] = Array.isArray(settings[option]) ? [ ...settings[option] ] : settings[option];
+                        if (option === "clearButton") {
+                            defaultInstance["clearLabel"] = settings.clearLabel;
+                        }
                     }
-                    configure(options);
+                    configure(clonedOptions);
                     break;
                 }
             }
@@ -423,13 +482,22 @@ var ColorPicker = function() {
             colorValue.focus({
                 preventScroll: true
             });
-            colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd);
+            let selectionStart = 0;
+            let selectionEnd = 0;
+            try {
+                selectionStart = currentEl.selectionStart;
+                selectionEnd = currentEl.selectionEnd;
+            } catch {}
+            colorValue.setSelectionRange(selectionStart, selectionEnd);
         }
         if (settings.selectInput) {
             colorValue.select();
         }
         if (keyboardNav || settings.swatchesOnly) {
-            getFocusableElements().shift().focus();
+            const firstFocusable = getFocusableElements().shift();
+            if (firstFocusable) {
+                firstFocusable.focus();
+            }
         }
         currentEl.dispatchEvent(new Event("open", {
             bubbles: false
@@ -536,6 +604,14 @@ var ColorPicker = function() {
                         bubbles: true
                     }));
                 }
+            } else {
+                const value = colorValue.value;
+                if (value === "") {
+                    pickColor("");
+                } else {
+                    setColorFromStr(value);
+                    pickColor(colorValue.value);
+                }
             }
             setTimeout(() => {
                 if (oldColor !== prevEl.value) {
@@ -784,13 +860,17 @@ var ColorPicker = function() {
             }
             if (key === "Tab" && target.matches(".clr-picker *")) {
                 const focusables = getFocusableElements();
-                const firstFocusable = focusables.shift();
-                const lastFocusable = focusables.pop();
-                if (shiftKey && target === firstFocusable) {
-                    lastFocusable.focus();
-                    event.preventDefault();
-                } else if (!shiftKey && target === lastFocusable) {
-                    firstFocusable.focus();
+                if (focusables.length > 1) {
+                    const firstFocusable = focusables[0];
+                    const lastFocusable = focusables[focusables.length - 1];
+                    if (shiftKey && target === firstFocusable) {
+                        lastFocusable.focus();
+                        event.preventDefault();
+                    } else if (!shiftKey && target === lastFocusable) {
+                        firstFocusable.focus();
+                        event.preventDefault();
+                    }
+                } else if (focusables.length === 1) {
                     event.preventDefault();
                 }
             }

package/dist/browser/colorpicker.min.js

@@ -1,3 +1,3 @@
-/* @bornova/colorpicker v1.0.0 */
-var ColorPicker=function(){"use strict";const e={el:"[data-colorpicker]",parent:"body",theme:"default",themeMode:"light",rtl:!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:()=>{},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."}},t=document.createElement("canvas").getContext("2d");function a(e){return document.getElementById(e)}function l(e,t,a,l){"string"==typeof a?e.addEventListener(t,e=>{e.target.matches(a)&&l.call(e.target,e)}):e.addEventListener(t,a)}function n(e,t=[]){"loading"!==document.readyState?e(...t):document.addEventListener("DOMContentLoaded",()=>{e(...t)})}const r={r:0,g:0,b:0,h:0,s:0,v:0,a:1};let o,c,s,i,u,d,p,h,f,m,b,y,g,v,w,k,L={};const E={};let x="",M={},$=!1;const A={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};function S(t){if("object"==typeof t)for(const l of Object.keys(t))switch(l){case"el":N(t.el),!1!==t.wrap&&j(t.el);break;case"parent":o=t.parent instanceof HTMLElement?t.parent:document.querySelector(t.parent),o&&(o.appendChild(c),e.parent=t.parent,o===document.body&&(o=void 0));break;case"themeMode":e.themeMode=t.themeMode,"auto"===t.themeMode&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(e.themeMode="dark");case"theme":t.theme&&(e.theme=t.theme),c.className=`clr-picker clr-${e.theme} clr-${e.themeMode}`,e.inline&&O();break;case"rtl":e.rtl=!!t.rtl;for(const t of document.getElementsByClassName("clr-field"))t.classList.toggle("clr-rtl",e.rtl);break;case"margin":{const a=Number(t.margin);e.margin=isNaN(a)?e.margin:a;break}case"wrap":t.el&&t.wrap&&j(t.el);break;case"formatToggle":e.formatToggle=!!t.formatToggle,a("clr-format").style.display=e.formatToggle?"block":"none",e.formatToggle&&(e.format="auto");break;case"swatches":if(Array.isArray(t.swatches)){const l=a("clr-swatches");if(l.textContent="",t.swatches.length){const e=document.createElement("div");t.swatches.forEach((t,a)=>{const l=document.createElement("button");l.setAttribute("type","button"),l.setAttribute("id",`clr-swatch-${a}`),l.setAttribute("aria-labelledby",`clr-swatch-label clr-swatch-${a}`),l.style.color=t,l.textContent=t,e.appendChild(l)}),l.appendChild(e)}e.swatches=[...t.swatches]}break;case"swatchesOnly":e.swatchesOnly=!!t.swatchesOnly,c.setAttribute("data-minimal",e.swatchesOnly);break;case"alpha":e.alpha=!!t.alpha,c.setAttribute("data-alpha",e.alpha);break;case"inline":if(e.inline=!!t.inline,c.setAttribute("data-inline",e.inline),e.inline){const a=t.defaultColor||e.defaultColor;v=W(a),O(),R(a)}break;case"clearButton":{"object"==typeof t.clearButton&&t.clearButton.label&&(e.clearLabel=t.clearButton.label,p.innerHTML=e.clearLabel);const a="object"==typeof t.clearButton?t.clearButton.show:t.clearButton;e.clearButton=!!a,p.style.display=e.clearButton?"block":"none";break}case"clearLabel":e.clearLabel=t.clearLabel,p.innerHTML=e.clearLabel;break;case"closeButton":e.closeButton=!!t.closeButton,e.closeButton?c.insertBefore(h,u):u.appendChild(h);break;case"closeLabel":e.closeLabel=t.closeLabel,h.innerHTML=e.closeLabel;break;case"a11y":{const l=t.a11y;let n=!1;if("object"==typeof l)for(const t of Object.keys(l))l[t]&&e.a11y[t]&&(e.a11y[t]=l[t],n=!0);if(n){const t=a("clr-open-label"),l=a("clr-swatch-label");t.innerHTML=e.a11y.open,l.innerHTML=e.a11y.swatch,h.setAttribute("aria-label",e.a11y.close),p.setAttribute("aria-label",e.a11y.clear),f.setAttribute("aria-label",e.a11y.hueSlider),b.setAttribute("aria-label",e.a11y.alphaSlider),d.setAttribute("aria-label",e.a11y.input),s.setAttribute("aria-label",e.a11y.instruction)}break}default:e[l]=t[l]}}function C(e,t){"string"==typeof e&&"object"==typeof t&&(E[e]=t,$=!0)}function T(e){delete E[e],0===Object.keys(E).length&&($=!1,e===x&&B())}function B(){Object.keys(M).length>0&&(S(M),x="",M={})}function N(e){const t=e instanceof HTMLElement?[e]:e;Array.isArray(t)?t.forEach(e=>{l(e,"click",H),l(e,"input",I)}):(l(document,"click",t,H),l(document,"input",t,I))}function H(t){e.inline||(!function(t){if($){const a=["el","wrap","rtl","inline","defaultColor","a11y"];for(const l of Object.keys(E)){const n=E[l];if(t.matches(l)){x=l,M={},a.forEach(e=>delete n[e]);for(const t of Object.keys(n))M[t]=Array.isArray(e[t])?[...e[t]]:e[t];S(n);break}}}}(t.target),g=t.target,w=g.value,v=W(w),c.classList.add("clr-open"),O(),R(w),(e.focusInput||e.selectInput)&&(d.focus({preventScroll:!0}),d.setSelectionRange(g.selectionStart,g.selectionEnd)),e.selectInput&&d.select(),(k||e.swatchesOnly)&&J().shift().focus(),g.dispatchEvent(new Event("open",{bubbles:!1})))}function O(){const t=o,a=window.scrollY,l=c.offsetWidth,n=c.offsetHeight,r={left:!1,top:!1};let i,u,d,p={x:0,y:0};if(t&&(i=window.getComputedStyle(t),u=parseFloat(i.marginTop),d=parseFloat(i.borderTopWidth),p=t.getBoundingClientRect(),p.y+=d+a),!e.inline){const o=g.getBoundingClientRect();let s=o.x,i=a+o.y+o.height+e.margin;t?(s-=p.x,i-=p.y,s+l>t.clientWidth&&(s+=o.width-l,r.left=!0),i+n>t.clientHeight-u&&n+e.margin<=o.top-(p.y-a)&&(i-=o.height+n+2*e.margin,r.top=!0),i+=t.scrollTop):(s+l>document.documentElement.clientWidth&&(s+=o.width-l,r.left=!0),i+n-a>document.documentElement.clientHeight&&n+e.margin<=o.top&&(i=a+o.y-n-e.margin,r.top=!0)),c.classList.toggle("clr-left",r.left),c.classList.toggle("clr-top",r.top),c.style.left=`${s}px`,c.style.top=`${i}px`,p.x+=c.offsetLeft,p.y+=c.offsetTop}L={width:s.offsetWidth,height:s.offsetHeight,x:s.offsetLeft+p.x,y:s.offsetTop+p.y}}function j(e){(e instanceof HTMLElement?[e]:Array.isArray(e)?e:[...document.querySelectorAll(e)]).forEach(D)}function D(t){const a=t.parentNode;if(!a.classList.contains("clr-field")){const l=document.createElement("div");let n="clr-field";(e.rtl||t.classList.contains("clr-rtl"))&&(n+=" clr-rtl"),l.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',a.insertBefore(l,t),l.className=n,l.style.color=t.value,l.appendChild(t)}}function I(e){const t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)}function F(t){if(g&&!e.inline){const a=g;t&&(g=void 0,w!==a.value&&(a.value=w,a.dispatchEvent(new Event("input",{bubbles:!0})))),setTimeout(()=>{w!==a.value&&a.dispatchEvent(new Event("change",{bubbles:!0}))}),c.classList.remove("clr-open"),$&&B(),a.dispatchEvent(new Event("close",{bubbles:!1})),e.focusInput&&a.focus({preventScroll:!0}),g=void 0}}function R(e){const a=function(e){let a,l;return t.fillStyle="#000",t.fillStyle=e,a=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(t.fillStyle),a?l={r:Number(a[3]),g:Number(a[4]),b:Number(a[5]),a:Number(a[6])}:(a=t.fillStyle.replace("#","").match(/.{2}/g).map(e=>parseInt(e,16)),l={r:a[0],g:a[1],b:a[2],a:1}),l}(e),l=function(e){const t=e.r/255,a=e.g/255,l=e.b/255,n=Math.max(t,a,l),r=n-Math.min(t,a,l),o=n;let c=0,s=0;return r&&(s=r/n,c=n===t?(a-l)/r:n===a?2+(l-t)/r:4+(t-a)/r),c=Math.floor(60*c),{h:c<0?c+360:c,s:Math.round(100*s),v:Math.round(100*o),a:e.a}}(a);U(l.s,l.v),G(a,l),f.value=l.h,c.style.color=`hsl(${l.h}, 100%, 50%)`,m.style.left=l.h/360*100+"%",i.style.left=L.width*l.s/100+"px",i.style.top=L.height-L.height*l.v/100+"px",b.value=100*l.a,y.style.left=100*l.a+"%"}function W(e){const t=e.slice(0,3).toLowerCase();return"rgb"===t||"hsl"===t?t:"hex"}function q(t){t=t??d.value,g&&(g.value=t,g.dispatchEvent(new Event("input",{bubbles:!0}))),e.onChange&&e.onChange.call(window,t,g),document.dispatchEvent(new CustomEvent("colorpicker:pick",{detail:{color:t,currentEl:g}}))}function P(e,t){const a={h:Number(f.value),s:e/L.width*100,v:100-t/L.height*100,a:b.value/100},l=function(e){const t=e.s/100,a=e.v/100;let l=t*a,n=e.h/60,r=l*(1-Math.abs(n%2-1)),o=a-l;l+=o,r+=o;const c=Math.floor(n)%6,s=[l,r,o,o,r,l][c],i=[r,l,l,r,o,o][c],u=[o,o,r,l,l,r][c];return{r:Math.round(255*s),g:Math.round(255*i),b:Math.round(255*u),a:e.a}}(a);U(a.s,a.v),G(l,a),q()}function U(t,a){i.setAttribute("aria-label",e.a11y.marker.replace("{s}",Number(t.toFixed(1))).replace("{v}",Number(a.toFixed(1))))}function Y(e){const t=e.changedTouches?.[0];let a=(t?.pageX??e.pageX)-L.x,l=(t?.pageY??e.pageY)-L.y;o&&(l+=o.scrollTop),X(a,l),e.preventDefault(),e.stopPropagation()}function X(e,t){e=Math.max(0,Math.min(e,L.width)),t=Math.max(0,Math.min(t,L.height)),i.style.left=`${e}px`,i.style.top=`${t}px`,P(e,t),i.focus()}function G(t={},a={}){let l=e.format;Object.assign(r,t,a);const n=function(t){const a=t.r.toString(16).padStart(2,"0"),l=t.g.toString(16).padStart(2,"0"),n=t.b.toString(16).padStart(2,"0");let r="";return e.alpha&&(t.a<1||e.forceAlpha)&&(r=(255*t.a|0).toString(16).padStart(2,"0")),"#"+a+l+n+r}(r),o=n.substring(0,7);switch(i.style.color=o,y.parentNode.style.color=o,y.style.color=n,u.style.color=n,s.style.display="none",s.offsetHeight,s.style.display="",y.nextElementSibling.style.display="none",y.nextElementSibling.offsetHeight,y.nextElementSibling.style.display="","mixed"===l?l=1===r.a?"hex":"rgb":"auto"===l&&(l=v),l){case"hex":d.value=n;break;case"rgb":d.value=function(t){return!e.alpha||1===t.a&&!e.forceAlpha?`rgb(${t.r}, ${t.g}, ${t.b})`:`rgba(${t.r}, ${t.g}, ${t.b}, ${t.a})`}(r);break;case"hsl":d.value=(c=function(e){const t=e.v/100,a=t*(1-e.s/100/2);let l;return a>0&&a<1&&(l=Math.round((t-a)/Math.min(a,1-a)*100)),{h:e.h,s:l||0,l:Math.round(100*a),a:e.a}}(r),!e.alpha||1===c.a&&!e.forceAlpha?`hsl(${c.h}, ${c.s}%, ${c.l}%)`:`hsla(${c.h}, ${c.s}%, ${c.l}%, ${c.a})`)}var c;document.querySelector(`.clr-format [value="${l}"]`).checked=!0}function K(){const e=Number(f.value),t=parseFloat(i.style.left),a=parseFloat(i.style.top);c.style.color=`hsl(${e}, 100%, 50%)`,m.style.left=e/360*100+"%",P(t,a)}function z(){const e=b.value/100;y.style.left=100*e+"%",G({a:e}),q()}function J(){return[...c.querySelectorAll("input, button")].filter(e=>!!e.offsetWidth)}function Q(e){n(()=>{e&&("string"==typeof e?N(e):S(e))})}return Q.set=(...e)=>n(S,e),Q.wrap=(...e)=>n(j,e),Q.close=(...e)=>n(F,e),Q.setInstance=(...e)=>n(C,e),Q.removeInstance=(...e)=>n(T,e),Q.updatePosition=(...e)=>n(O,e),Q.ready=n,n(function(){o=void 0,c=document.createElement("div"),c.setAttribute("id","clr-picker"),c.className="clr-picker",c.innerHTML=`\n    <input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${e.a11y.input}">\n    <div id="clr-color-area" class="clr-gradient" role="application" aria-label="${e.a11y.instruction}">\n      <div id="clr-color-marker" class="clr-marker" tabindex="0"></div>\n    </div>\n    <div class="clr-hue">\n      <input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${e.a11y.hueSlider}">\n      <div id="clr-hue-marker"></div>\n    </div>\n    <div class="clr-alpha">\n      <input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${e.a11y.alphaSlider}">\n      <div id="clr-alpha-marker"></div>\n      <span></span>\n    </div>\n    <div id="clr-format" class="clr-format">\n      <fieldset class="clr-segmented">\n        <legend>${e.a11y.format}</legend>\n        <input id="clr-f1" type="radio" name="clr-format" value="hex">\n        <label for="clr-f1">Hex</label>\n        <input id="clr-f2" type="radio" name="clr-format" value="rgb">\n        <label for="clr-f2">RGB</label>\n        <input id="clr-f3" type="radio" name="clr-format" value="hsl">\n        <label for="clr-f3">HSL</label>\n        <span></span>\n      </fieldset>\n    </div>\n    <div id="clr-swatches" class="clr-swatches"></div>\n    <button type="button" id="clr-clear" class="clr-clear" aria-label="${e.a11y.clear}">${e.clearLabel}</button>\n    <div id="clr-color-preview" class="clr-preview">\n      <button type="button" id="clr-close" class="clr-close" aria-label="${e.a11y.close}">${e.closeLabel}</button>\n    </div>\n    <span id="clr-open-label" hidden>${e.a11y.open}</span>\n    <span id="clr-swatch-label" hidden>${e.a11y.swatch}</span>\n  `,document.body.appendChild(c),s=a("clr-color-area"),i=a("clr-color-marker"),p=a("clr-clear"),h=a("clr-close"),u=a("clr-color-preview"),d=a("clr-color-value"),f=a("clr-hue-slider"),m=a("clr-hue-marker"),b=a("clr-alpha-slider"),y=a("clr-alpha-marker"),N(e.el),j(e.el),l(c,"mousedown",e=>{c.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),l(s,"mousedown",()=>{l(document,"mousemove",Y)}),l(s,"contextmenu",e=>{e.preventDefault()}),l(s,"touchstart",()=>{document.addEventListener("touchmove",Y,{passive:!1})}),l(i,"mousedown",()=>{l(document,"mousemove",Y)}),l(i,"touchstart",()=>{document.addEventListener("touchmove",Y,{passive:!1})}),l(d,"change",()=>{const t=d.value;if(g||e.inline){q(""===t?t:R(t))}}),l(p,"click",()=>{q(""),F()}),l(h,"click",()=>{q(),F()}),l(a("clr-format"),"click",".clr-format input",e=>{v=e.target.value,G(),q()}),l(c,"click",".clr-swatches button",t=>{R(t.target.textContent),q(),e.swatchesOnly&&F()}),l(document,"mouseup",()=>{document.removeEventListener("mousemove",Y)}),l(document,"touchend",()=>{document.removeEventListener("touchmove",Y)}),l(document,"mousedown",()=>{k=!1,c.classList.remove("clr-keyboard-nav"),F()}),l(document,"keydown",e=>{const t=e.key,a=e.target,l=e.shiftKey;if("Escape"!==t)if("Enter"!==t||"BUTTON"===a.tagName){if(["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t)&&(k=!0,c.classList.add("clr-keyboard-nav")),"Tab"===t&&a.matches(".clr-picker *")){const t=J(),n=t.shift(),r=t.pop();l&&a===n?(r.focus(),e.preventDefault()):l||a!==r||(n.focus(),e.preventDefault())}}else F();else F(!0)}),l(document,"click",".clr-field button",e=>{$&&B(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),l(i,"keydown",e=>{e.key in A&&(!function(e,t){X(parseFloat(i.style.left)+e,parseFloat(i.style.top)+t)}(...A[e.key]),e.preventDefault())}),l(s,"click",Y),l(f,"input",K),l(b,"input",z)}),Q}();
+/* @bornova/colorpicker v1.0.1 */
+var ColorPicker=function(){"use strict";const e={el:"[data-colorpicker]",parent:"body",theme:"default",themeMode:"light",rtl:!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:()=>{},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."}};let t;function l(e){const l=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,a=function(){if(!t&&"undefined"!=typeof document)try{t=document.createElement("canvas").getContext("2d")}catch{}return t}();let n,r;if(a)a.fillStyle="#000",a.fillStyle=e,n=l.exec(a.fillStyle),n?r={r:Number(n[3]),g:Number(n[4]),b:Number(n[5]),a:""===n[6]?1:Number(n[6])}:(n=a.fillStyle.replace("#","").match(/.{2}/g).map(e=>parseInt(e,16)),r={r:n[0],g:n[1],b:n[2],a:void 0!==n[3]?Number((n[3]/255).toFixed(2)):1});else if(n=l.exec(e),n)r={r:Number(n[3]),g:Number(n[4]),b:Number(n[5]),a:""===n[6]?1:Number(n[6])};else{const t=e.replace("#","");if(3===t.length||4===t.length){r={r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?Number((parseInt(t[3]+t[3],16)/255).toFixed(2)):1}}else if(6===t.length||8===t.length){r={r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16),a:8===t.length?Number((parseInt(t.slice(6,8),16)/255).toFixed(2)):1}}else r={r:0,g:0,b:0,a:1}}return r}function a(e){return document.getElementById(e)}function n(e,t,l,a){"string"==typeof l?e.addEventListener(t,e=>{e.target.matches(l)&&a.call(e.target,e)}):e.addEventListener(t,l)}function r(e,t=[]){"loading"!==document.readyState?e(...t):document.addEventListener("DOMContentLoaded",()=>{e(...t)})}const o={r:0,g:0,b:0,h:0,s:0,v:0,a:1};let c,s,i,u,d,p,h,f,b,m,y,g,v,w,k,L,E={};const x={};let M="",$={},A=!1;const S={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};function C(t){if("object"==typeof t)for(const l of Object.keys(t))switch(l){case"el":H(t.el),!1!==t.wrap&&D(t.el);break;case"parent":c=t.parent instanceof HTMLElement?t.parent:document.querySelector(t.parent),c&&(c.appendChild(s),e.parent=t.parent,c===document.body&&(c=void 0));break;case"themeMode":e.themeMode=t.themeMode,"auto"===t.themeMode&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(e.themeMode="dark");case"theme":t.theme&&(e.theme=t.theme),s.className=`clr-picker clr-${e.theme} clr-${e.themeMode}`,e.inline&&O();break;case"rtl":e.rtl=!!t.rtl;for(const t of document.getElementsByClassName("clr-field"))t.classList.toggle("clr-rtl",e.rtl);break;case"margin":{const l=Number(t.margin);e.margin=isNaN(l)?e.margin:l;break}case"wrap":t.el&&t.wrap&&D(t.el);break;case"formatToggle":e.formatToggle=!!t.formatToggle,a("clr-format").style.display=e.formatToggle?"block":"none",e.formatToggle&&(e.format="auto");break;case"swatches":if(Array.isArray(t.swatches)){const l=a("clr-swatches");if(l.textContent="",t.swatches.length){const e=document.createElement("div");t.swatches.forEach((t,l)=>{const a=document.createElement("button");a.setAttribute("type","button"),a.setAttribute("id",`clr-swatch-${l}`),a.setAttribute("aria-labelledby",`clr-swatch-label clr-swatch-${l}`),a.style.color=t,a.textContent=t,e.appendChild(a)}),l.appendChild(e)}e.swatches=[...t.swatches]}break;case"swatchesOnly":e.swatchesOnly=!!t.swatchesOnly,s.setAttribute("data-minimal",e.swatchesOnly);break;case"alpha":e.alpha=!!t.alpha,s.setAttribute("data-alpha",e.alpha);break;case"inline":if(e.inline=!!t.inline,s.setAttribute("data-inline",e.inline),e.inline){const l=t.defaultColor||e.defaultColor;w=q(l),O(),W(l)}break;case"clearButton":{"object"==typeof t.clearButton&&t.clearButton.label&&(e.clearLabel=t.clearButton.label,h.innerHTML=e.clearLabel);const l="object"==typeof t.clearButton?t.clearButton.show:t.clearButton;e.clearButton=!!l,h.style.display=e.clearButton?"block":"none";break}case"clearLabel":e.clearLabel=t.clearLabel,h.innerHTML=e.clearLabel;break;case"closeButton":e.closeButton=!!t.closeButton,e.closeButton?s.insertBefore(f,d):d.appendChild(f);break;case"closeLabel":e.closeLabel=t.closeLabel,f.innerHTML=e.closeLabel;break;case"a11y":{const l=t.a11y;let n=!1;if("object"==typeof l)for(const t of Object.keys(l))l[t]&&e.a11y[t]&&(e.a11y[t]=l[t],n=!0);if(n){const t=a("clr-open-label"),l=a("clr-swatch-label");t.innerHTML=e.a11y.open,l.innerHTML=e.a11y.swatch,f.setAttribute("aria-label",e.a11y.close),h.setAttribute("aria-label",e.a11y.clear),b.setAttribute("aria-label",e.a11y.hueSlider),y.setAttribute("aria-label",e.a11y.alphaSlider),p.setAttribute("aria-label",e.a11y.input),i.setAttribute("aria-label",e.a11y.instruction)}break}default:e[l]=t[l]}}function T(e,t){"string"==typeof e&&"object"==typeof t&&(x[e]=t,A=!0)}function N(e){delete x[e],0===Object.keys(x).length&&(A=!1,e===M&&B())}function B(){Object.keys($).length>0&&(C($),M="",$={})}function H(e){const t=e instanceof HTMLElement?[e]:e;Array.isArray(t)?t.forEach(e=>{n(e,"click",I),n(e,"input",F)}):(n(document,"click",t,I),n(document,"input",t,F))}function I(t){if(!e.inline){if(function(t){if(A){const l=["el","wrap","rtl","inline","defaultColor","a11y"];for(const a of Object.keys(x)){const n=x[a];if(t.matches(a)){M=a,$={};const t={...n};l.forEach(e=>delete t[e]);for(const l of Object.keys(t))$[l]=Array.isArray(e[l])?[...e[l]]:e[l],"clearButton"===l&&($.clearLabel=e.clearLabel);C(t);break}}}}(t.target),v=t.target,k=v.value,w=q(k),s.classList.add("clr-open"),O(),W(k),e.focusInput||e.selectInput){p.focus({preventScroll:!0});let e=0,t=0;try{e=v.selectionStart,t=v.selectionEnd}catch{}p.setSelectionRange(e,t)}if(e.selectInput&&p.select(),L||e.swatchesOnly){const e=Q().shift();e&&e.focus()}v.dispatchEvent(new Event("open",{bubbles:!1}))}}function O(){const t=c,l=window.scrollY,a=s.offsetWidth,n=s.offsetHeight,r={left:!1,top:!1};let o,u,d,p={x:0,y:0};if(t&&(o=window.getComputedStyle(t),u=parseFloat(o.marginTop),d=parseFloat(o.borderTopWidth),p=t.getBoundingClientRect(),p.y+=d+l),!e.inline){const o=v.getBoundingClientRect();let c=o.x,i=l+o.y+o.height+e.margin;t?(c-=p.x,i-=p.y,c+a>t.clientWidth&&(c+=o.width-a,r.left=!0),i+n>t.clientHeight-u&&n+e.margin<=o.top-(p.y-l)&&(i-=o.height+n+2*e.margin,r.top=!0),i+=t.scrollTop):(c+a>document.documentElement.clientWidth&&(c+=o.width-a,r.left=!0),i+n-l>document.documentElement.clientHeight&&n+e.margin<=o.top&&(i=l+o.y-n-e.margin,r.top=!0)),s.classList.toggle("clr-left",r.left),s.classList.toggle("clr-top",r.top),s.style.left=`${c}px`,s.style.top=`${i}px`,p.x+=s.offsetLeft,p.y+=s.offsetTop}E={width:i.offsetWidth,height:i.offsetHeight,x:i.offsetLeft+p.x,y:i.offsetTop+p.y}}function D(e){(e instanceof HTMLElement?[e]:Array.isArray(e)?e:[...document.querySelectorAll(e)]).forEach(j)}function j(t){const l=t.parentNode;if(!l.classList.contains("clr-field")){const a=document.createElement("div");let n="clr-field";(e.rtl||t.classList.contains("clr-rtl"))&&(n+=" clr-rtl"),a.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(a,t),a.className=n,a.style.color=t.value,a.appendChild(t)}}function F(e){const t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)}function R(t){if(v&&!e.inline){const l=v;if(t)v=void 0,k!==l.value&&(l.value=k,l.dispatchEvent(new Event("input",{bubbles:!0})));else{const e=p.value;""===e?P(""):(W(e),P(p.value))}setTimeout(()=>{k!==l.value&&l.dispatchEvent(new Event("change",{bubbles:!0}))}),s.classList.remove("clr-open"),A&&B(),l.dispatchEvent(new Event("close",{bubbles:!1})),e.focusInput&&l.focus({preventScroll:!0}),v=void 0}}function W(e){const t=l(e),a=function(e){const t=e.r/255,l=e.g/255,a=e.b/255,n=Math.max(t,l,a),r=n-Math.min(t,l,a),o=n;let c=0,s=0;return r&&(s=r/n,c=n===t?(l-a)/r:n===l?2+(a-t)/r:4+(t-l)/r),c=Math.floor(60*c),{h:c<0?c+360:c,s:Math.round(100*s),v:Math.round(100*o),a:e.a}}(t);Y(a.s,a.v),K(t,a),b.value=a.h,s.style.color=`hsl(${a.h}, 100%, 50%)`,m.style.left=a.h/360*100+"%",u.style.left=E.width*a.s/100+"px",u.style.top=E.height-E.height*a.v/100+"px",y.value=100*a.a,g.style.left=100*a.a+"%"}function q(e){const t=e.slice(0,3).toLowerCase();return"rgb"===t||"hsl"===t?t:"hex"}function P(t){t=t??p.value,v&&(v.value=t,v.dispatchEvent(new Event("input",{bubbles:!0}))),e.onChange&&e.onChange.call(window,t,v),document.dispatchEvent(new CustomEvent("colorpicker:pick",{detail:{color:t,currentEl:v}}))}function U(e,t){const l={h:Number(b.value),s:e/E.width*100,v:100-t/E.height*100,a:y.value/100},a=function(e){const t=e.s/100,l=e.v/100;let a=t*l,n=e.h/60,r=a*(1-Math.abs(n%2-1)),o=l-a;a+=o,r+=o;const c=Math.floor(n)%6,s=[a,r,o,o,r,a][c],i=[r,a,a,r,o,o][c],u=[o,o,r,a,a,r][c];return{r:Math.round(255*s),g:Math.round(255*i),b:Math.round(255*u),a:e.a}}(l);Y(l.s,l.v),K(a,l),P()}function Y(t,l){u.setAttribute("aria-label",e.a11y.marker.replace("{s}",Number(t.toFixed(1))).replace("{v}",Number(l.toFixed(1))))}function X(e){const t=e.changedTouches?.[0];let l=(t?.pageX??e.pageX)-E.x,a=(t?.pageY??e.pageY)-E.y;c&&(a+=c.scrollTop),G(l,a),e.preventDefault(),e.stopPropagation()}function G(e,t){e=Math.max(0,Math.min(e,E.width)),t=Math.max(0,Math.min(t,E.height)),u.style.left=`${e}px`,u.style.top=`${t}px`,U(e,t),u.focus()}function K(t={},l={}){let a=e.format;Object.assign(o,t,l);const n=function(t){const l=t.r.toString(16).padStart(2,"0"),a=t.g.toString(16).padStart(2,"0"),n=t.b.toString(16).padStart(2,"0");let r="";return e.alpha&&(t.a<1||e.forceAlpha)&&(r=Math.round(255*t.a).toString(16).padStart(2,"0")),"#"+l+a+n+r}(o),r=n.substring(0,7);switch(u.style.color=r,g.parentNode.style.color=r,g.style.color=n,d.style.color=n,i.style.display="none",i.offsetHeight,i.style.display="",g.nextElementSibling.style.display="none",g.nextElementSibling.offsetHeight,g.nextElementSibling.style.display="","mixed"===a?a=1===o.a?"hex":"rgb":"auto"===a&&(a=w),a){case"hex":p.value=n;break;case"rgb":p.value=function(t){return!e.alpha||1===t.a&&!e.forceAlpha?`rgb(${t.r}, ${t.g}, ${t.b})`:`rgba(${t.r}, ${t.g}, ${t.b}, ${t.a})`}(o);break;case"hsl":p.value=(c=function(e){const t=e.v/100,l=t*(1-e.s/100/2);let a;return l>0&&l<1&&(a=Math.round((t-l)/Math.min(l,1-l)*100)),{h:e.h,s:a||0,l:Math.round(100*l),a:e.a}}(o),!e.alpha||1===c.a&&!e.forceAlpha?`hsl(${c.h}, ${c.s}%, ${c.l}%)`:`hsla(${c.h}, ${c.s}%, ${c.l}%, ${c.a})`)}var c;document.querySelector(`.clr-format [value="${a}"]`).checked=!0}function z(){const e=Number(b.value),t=parseFloat(u.style.left),l=parseFloat(u.style.top);s.style.color=`hsl(${e}, 100%, 50%)`,m.style.left=e/360*100+"%",U(t,l)}function J(){const e=y.value/100;g.style.left=100*e+"%",K({a:e}),P()}function Q(){return[...s.querySelectorAll("input, button")].filter(e=>!!e.offsetWidth)}function V(e){r(()=>{e&&("string"==typeof e?H(e):C(e))})}return V.set=(...e)=>r(C,e),V.wrap=(...e)=>r(D,e),V.close=(...e)=>r(R,e),V.setInstance=(...e)=>r(T,e),V.removeInstance=(...e)=>r(N,e),V.updatePosition=(...e)=>r(O,e),V.ready=r,r(function(){c=void 0,s=document.createElement("div"),s.setAttribute("id","clr-picker"),s.className="clr-picker",s.innerHTML=`\n    <input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="${e.a11y.input}">\n    <div id="clr-color-area" class="clr-gradient" role="application" aria-label="${e.a11y.instruction}">\n      <div id="clr-color-marker" class="clr-marker" tabindex="0"></div>\n    </div>\n    <div class="clr-hue">\n      <input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${e.a11y.hueSlider}">\n      <div id="clr-hue-marker"></div>\n    </div>\n    <div class="clr-alpha">\n      <input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${e.a11y.alphaSlider}">\n      <div id="clr-alpha-marker"></div>\n      <span></span>\n    </div>\n    <div id="clr-format" class="clr-format">\n      <fieldset class="clr-segmented">\n        <legend>${e.a11y.format}</legend>\n        <input id="clr-f1" type="radio" name="clr-format" value="hex">\n        <label for="clr-f1">Hex</label>\n        <input id="clr-f2" type="radio" name="clr-format" value="rgb">\n        <label for="clr-f2">RGB</label>\n        <input id="clr-f3" type="radio" name="clr-format" value="hsl">\n        <label for="clr-f3">HSL</label>\n        <span></span>\n      </fieldset>\n    </div>\n    <div id="clr-swatches" class="clr-swatches"></div>\n    <button type="button" id="clr-clear" class="clr-clear" aria-label="${e.a11y.clear}">${e.clearLabel}</button>\n    <div id="clr-color-preview" class="clr-preview">\n      <button type="button" id="clr-close" class="clr-close" aria-label="${e.a11y.close}">${e.closeLabel}</button>\n    </div>\n    <span id="clr-open-label" hidden>${e.a11y.open}</span>\n    <span id="clr-swatch-label" hidden>${e.a11y.swatch}</span>\n  `,document.body.appendChild(s),i=a("clr-color-area"),u=a("clr-color-marker"),h=a("clr-clear"),f=a("clr-close"),d=a("clr-color-preview"),p=a("clr-color-value"),b=a("clr-hue-slider"),m=a("clr-hue-marker"),y=a("clr-alpha-slider"),g=a("clr-alpha-marker"),H(e.el),D(e.el),n(s,"mousedown",e=>{s.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),n(i,"mousedown",()=>{n(document,"mousemove",X)}),n(i,"contextmenu",e=>{e.preventDefault()}),n(i,"touchstart",()=>{document.addEventListener("touchmove",X,{passive:!1})}),n(u,"mousedown",()=>{n(document,"mousemove",X)}),n(u,"touchstart",()=>{document.addEventListener("touchmove",X,{passive:!1})}),n(p,"change",()=>{const t=p.value;if(v||e.inline){P(""===t?t:W(t))}}),n(h,"click",()=>{P(""),R()}),n(f,"click",()=>{P(),R()}),n(a("clr-format"),"click",".clr-format input",e=>{w=e.target.value,K(),P()}),n(s,"click",".clr-swatches button",t=>{W(t.target.textContent),P(),e.swatchesOnly&&R()}),n(document,"mouseup",()=>{document.removeEventListener("mousemove",X)}),n(document,"touchend",()=>{document.removeEventListener("touchmove",X)}),n(document,"mousedown",()=>{L=!1,s.classList.remove("clr-keyboard-nav"),R()}),n(document,"keydown",e=>{const t=e.key,l=e.target,a=e.shiftKey;if("Escape"!==t)if("Enter"!==t||"BUTTON"===l.tagName){if(["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t)&&(L=!0,s.classList.add("clr-keyboard-nav")),"Tab"===t&&l.matches(".clr-picker *")){const t=Q();if(t.length>1){const n=t[0],r=t[t.length-1];a&&l===n?(r.focus(),e.preventDefault()):a||l!==r||(n.focus(),e.preventDefault())}else 1===t.length&&e.preventDefault()}}else R();else R(!0)}),n(document,"click",".clr-field button",e=>{A&&B(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),n(u,"keydown",e=>{e.key in S&&(!function(e,t){G(parseFloat(u.style.left)+e,parseFloat(u.style.top)+t)}(...S[e.key]),e.preventDefault())}),n(i,"click",X),n(b,"input",z),n(y,"input",J)}),V}();
 //# sourceMappingURL=colorpicker.min.js.map