yet-another-color-picker - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/ColorPicker.js

@@ -1,10 +0,27 @@
-var t;const e=window,s=e.trustedTypes,i=s?s.createPolicy("lit-html",{createHTML:t=>t}):void 0,o=`lit$${(Math.random()+"").slice(9)}$`,n="?"+o,r=`<${n}>`,l=document,h=(t="")=>l.createComment(t),a=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u=Array.isArray,c=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,p=/-->/g,d=/>/g,v=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),m=/'/g,g=/"/g,f=/^(?:script|style|textarea|title)$/i,$=(t=>(e,...s)=>({_$litType$:t,strings:e,values:s}))(1),b=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),y=new WeakMap,_=l.createTreeWalker(l,129,null,!1),w=(t,e)=>{const s=t.length-1,n=[];let l,h=2===e?"<svg>":"",a=c;for(let e=0;e<s;e++){const s=t[e];let i,u,$=-1,b=0;for(;b<s.length&&(a.lastIndex=b,u=a.exec(s),null!==u);)b=a.lastIndex,a===c?"!--"===u[1]?a=p:void 0!==u[1]?a=d:void 0!==u[2]?(f.test(u[2])&&(l=RegExp("</"+u[2],"g")),a=v):void 0!==u[3]&&(a=v):a===v?">"===u[0]?(a=null!=l?l:c,$=-1):void 0===u[1]?$=-2:($=a.lastIndex-u[2].length,i=u[1],a=void 0===u[3]?v:'"'===u[3]?g:m):a===g||a===m?a=v:a===p||a===d?a=c:(a=v,l=void 0);const A=a===v&&t[e+1].startsWith("/>")?" ":"";h+=a===c?s+r:$>=0?(n.push(i),s.slice(0,$)+"$lit$"+s.slice($)+o+A):s+o+(-2===$?(n.push(void 0),e):A)}const u=h+(t[s]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==i?i.createHTML(u):u,n]};class x{constructor({strings:t,_$litType$:e},i){let r;this.parts=[];let l=0,a=0;const u=t.length-1,c=this.parts,[p,d]=w(t,e);if(this.el=x.createElement(p,i),_.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(r=_.nextNode())&&c.length<u;){if(1===r.nodeType){if(r.hasAttributes()){const t=[];for(const e of r.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(o)){const s=d[a++];if(t.push(e),void 0!==s){const t=r.getAttribute(s.toLowerCase()+"$lit$").split(o),e=/([.?@])?(.*)/.exec(s);c.push({type:1,index:l,name:e[2],strings:t,ctor:"."===e[1]?N:"?"===e[1]?P:"@"===e[1]?I:M})}else c.push({type:6,index:l})}for(const e of t)r.removeAttribute(e)}if(f.test(r.tagName)){const t=r.textContent.split(o),e=t.length-1;if(e>0){r.textContent=s?s.emptyScript:"";for(let s=0;s<e;s++)r.append(t[s],h()),_.nextNode(),c.push({type:2,index:++l});r.append(t[e],h())}}}else if(8===r.nodeType)if(r.data===n)c.push({type:2,index:l});else{let t=-1;for(;-1!==(t=r.data.indexOf(o,t+1));)c.push({type:7,index:l}),t+=o.length-1}l++}}static createElement(t,e){const s=l.createElement("template");return s.innerHTML=t,s}}function C(t,e,s=t,i){var o,n,r,l;if(e===b)return e;let h=void 0!==i?null===(o=s._$Co)||void 0===o?void 0:o[i]:s._$Cl;const u=a(e)?void 0:e._$litDirective$;return(null==h?void 0:h.constructor)!==u&&(null===(n=null==h?void 0:h._$AO)||void 0===n||n.call(h,!1),void 0===u?h=void 0:(h=new u(t),h._$AT(t,s,i)),void 0!==i?(null!==(r=(l=s)._$Co)&&void 0!==r?r:l._$Co=[])[i]=h:s._$Cl=h),void 0!==h&&(e=C(t,h._$AS(t,e.values),h,i)),e}class T{constructor(t,e){this.u=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}v(t){var e;const{el:{content:s},parts:i}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:l).importNode(s,!0);_.currentNode=o;let n=_.nextNode(),r=0,h=0,a=i[0];for(;void 0!==a;){if(r===a.index){let e;2===a.type?e=new S(n,n.nextSibling,this,t):1===a.type?e=new a.ctor(n,a.name,a.strings,this,t):6===a.type&&(e=new V(n,this,t)),this.u.push(e),a=i[++h]}r!==(null==a?void 0:a.index)&&(n=_.nextNode(),r++)}return o}p(t){let e=0;for(const s of this.u)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class S{constructor(t,e,s,i){var o;this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cm=null===(o=null==i?void 0:i.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cm}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=C(this,t,e),a(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==b&&this.g(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>u(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.k(t):this.g(t)}O(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}g(t){this._$AH!==A&&a(this._$AH)?this._$AA.nextSibling.data=t:this.T(l.createTextNode(t)),this._$AH=t}$(t){var e;const{values:s,_$litType$:i}=t,o="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=x.createElement(i.h,this.options)),i);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.p(s);else{const t=new T(o,this),e=t.v(this.options);t.p(s),this.T(e),this._$AH=t}}_$AC(t){let e=y.get(t.strings);return void 0===e&&y.set(t.strings,e=new x(t)),e}k(t){u(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const o of t)i===e.length?e.push(s=new S(this.O(h()),this.O(h()),this,this.options)):s=e[i],s._$AI(o),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cm=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class M{constructor(t,e,s,i,o){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,s,i){const o=this.strings;let n=!1;if(void 0===o)t=C(this,t,e,0),n=!a(t)||t!==this._$AH&&t!==b,n&&(this._$AH=t);else{const i=t;let r,l;for(t=o[0],r=0;r<o.length-1;r++)l=C(this,i[s+r],e,r),l===b&&(l=this._$AH[r]),n||(n=!a(l)||l!==this._$AH[r]),l===A?t=A:t!==A&&(t+=(null!=l?l:"")+o[r+1]),this._$AH[r]=l}n&&!i&&this.j(t)}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class N extends M{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===A?void 0:t}}const H=s?s.emptyScript:"";class P extends M{constructor(){super(...arguments),this.type=4}j(t){t&&t!==A?this.element.setAttribute(this.name,H):this.element.removeAttribute(this.name)}}class I extends M{constructor(t,e,s,i,o){super(t,e,s,i,o),this.type=5}_$AI(t,e=this){var s;if((t=null!==(s=C(this,t,e,0))&&void 0!==s?s:A)===b)return;const i=this._$AH,o=t===A&&i!==A||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,n=t!==A&&(i===A||o);o&&this.element.removeEventListener(this.name,this,i),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class V{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){C(this,t)}}const E=e.litHtmlPolyfillSupport;null==E||E(x,S),(null!==(t=e.litHtmlVersions)&&void 0!==t?t:e.litHtmlVersions=[]).push("2.4.0");function D(t,e,s){return Math.max(e,Math.min(t,s))}function F(t,e=2){return t.toFixed(e).replace(/\.?0+$/,"")}function k(t){if(t.endsWith("."))return NaN;return(parseFloat(t)%360+360)%360/360}function W(t){return F(360*t)}function L(t){if(!t.endsWith("%"))return NaN;const e=t.substring(0,t.length-1);if(e.endsWith("."))return NaN;const s=parseFloat(e);return Number.isNaN(s)?NaN:D(s,0,100)/100}function O(t){return F(100*t)+"%"}function R(t){if(t.endsWith("%"))return L(t);if(t.endsWith("."))return NaN;const e=parseFloat(t);return Number.isNaN(e)?NaN:D(e,0,255)/255}function U(t){return F(255*t)}function j(t){return t.endsWith("%")?L(t):D(parseFloat(t),0,1)}function B(t){return String(t)}const q={hsl:{h:{to:W,from:k},s:{to:O,from:L},l:{to:O,from:L},a:{to:B,from:j}},hwb:{h:{to:W,from:k},w:{to:O,from:L},b:{to:O,from:L},a:{to:B,from:j}},rgb:{r:{to:U,from:R},g:{to:U,from:R},b:{to:U,from:R},a:{to:B,from:j}}};function z(t){const e=t.replace(/^#/,""),s=[],i=e.length>4?2:1;for(let t=0;t<e.length;t+=i){const o=e.slice(t,t+i);s.push(o.repeat(i%2+1))}3===s.length&&s.push("ff");const o=s.map((t=>parseInt(t,16)/255));return{r:o[0],g:o[1],b:o[2],a:o[3]}}function Q(t){const e=t.l<.5?t.l*(1+t.s):t.l+t.s-t.l*t.s,s=2*t.l-e;return{r:K(s,e,t.h+1/3),g:K(s,e,t.h),b:K(s,e,t.h-1/3),a:t.a}}function K(t,e,s){return s<0?s+=1:s>1&&(s-=1),s<1/6?t+6*(e-t)*s:s<.5?e:s<2/3?t+(e-t)*(2/3-s)*6:t}function X(t){return{r:Y(5,t),g:Y(3,t),b:Y(1,t),a:t.a}}function Y(t,e){const s=(t+6*e.h)%6;return e.v-e.v*e.s*Math.max(0,Math.min(s,4-s,1))}function Z(t){return{h:t.h,s:1===t.b?0:1-t.w/(1-t.b),v:1-t.b,a:t.a}}function G(t){const e=Math.min(t.r,t.g,t.b),s=Math.max(t.r,t.g,t.b);let i;return i=s===e?0:s===t.r?(0+(t.g-t.b)/(s-e))/6:s===t.g?(2+(t.b-t.r)/(s-e))/6:(4+(t.r-t.g)/(s-e))/6,i<0&&(i+=1),{h:i,w:e,b:1-s,a:t.a}}function J(t){const e=G(t),s=e.w,i=1-e.b,o=(i+s)/2;let n;return n=0===i||1===s?0:(i-o)/Math.min(o,1-o),{h:e.h,s:n,l:o,a:t.a}}function tt(t){return"#"+Object.values(t).map((t=>{const e=255*t,s=Math.round(e).toString(16);return 1===s.length?"0"+s:s})).join("")}const et={hex:[["hsl",t=>st(t,[z,J])],["hsv",t=>st(t,[z,G,Z])],["hwb",t=>st(t,[z,G])],["rgb",z]],hsl:[["hex",t=>st(t,[Q,tt])],["hsv",function(t){const e=t.l+t.s*Math.min(t.l,1-t.l),s=0===e?0:2-2*t.l/e;return{h:t.h,s,v:e,a:t.a}}],["hwb",t=>st(t,[Q,G])],["rgb",Q]],hsv:[["hex",t=>st(t,[X,tt])],["hsl",function(t){const e=t.v-t.v*t.s/2,s=Math.min(e,1-e),i=0===s?0:(t.v-e)/s;return{h:t.h,s:i,l:e,a:t.a}}],["hwb",function(t){return{h:t.h,w:(1-t.s)*t.v,b:1-t.v,a:t.a}}],["rgb",X]],hwb:[["hex",t=>st(t,[Z,X,tt])],["hsl",t=>st(t,[Z,X,J])],["hsv",Z],["rgb",t=>st(t,[Z,X])]],rgb:[["hex",tt],["hsl",J],["hsv",t=>st(t,[G,Z])],["hwb",G]]};function st(t,e){return e.reduce(((t,e)=>e(t)),t)}function it(t){const e={};for(const s in t)e[s]=t[s];return e}const ot={hex:(t,e)=>e&&[5,9].includes(t.length)?t.substring(0,t.length-(t.length-1)/4):t,hsl:(t,e)=>`hsl(${F(360*t.h)} ${F(100*t.s)}% ${F(100*t.l)}%`+(e?")":` / ${F(t.a)})`),hwb:(t,e)=>`hwb(${F(360*t.h)} ${F(100*t.w)}% ${F(100*t.b)}%`+(e?")":` / ${F(t.a)})`),rgb:(t,e)=>`rgb(${F(255*t.r)} ${F(255*t.g)} ${F(255*t.b)}`+(e?")":` / ${F(t.a)})`)};function nt(t,e,s){return ot[e](t,s)}function rt(t){return/^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(t)}const lt={"data-alpha-channel":{type:String,default:()=>"show"},"data-color":{type:String,default:()=>"#ffffffff"},"data-default-format":{type:String,default:()=>"hsl"},"data-visible-formats":{type:Array,default:()=>["hex","hsl","hwb","rgb"]},id:{type:String,default:()=>"color-picker"}},ht=Object.entries(lt);class at extends HTMLElement{static observedAttributes=Object.keys(lt);#t=null;#e=null;#s=!1;#i={hex:"#ffffffff",hsl:{h:0,s:0,l:1,a:1},hsv:{h:0,s:0,v:1,a:1},hwb:{h:0,w:1,b:0,a:1},rgb:{r:1,g:1,b:1,a:1}};#o=!1;#n="hsl";#r=[];#l="";#h=[];constructor(){super(),window.customElements.whenDefined(this.localName).then((()=>{this.#o=!0}))}get[Symbol.toStringTag](){return"ColorPicker"}connectedCallback(){if(!this.isConnected)return;this.ownerDocument.addEventListener("mousemove",this.#a,{passive:!1}),this.ownerDocument.addEventListener("touchmove",this.#u,{passive:!1}),this.ownerDocument.addEventListener("mouseup",this.#c),this.ownerDocument.addEventListener("touchend",this.#c);const t=this.#p("data-visible-formats"),e=this.#p("data-default-format");this.#n=t.includes(e)?e:t[0];for(const t of at.observedAttributes)this.#d(t,this.#p(t))}disconnectedCallback(){this.ownerDocument.removeEventListener("mousemove",this.#a),this.ownerDocument.removeEventListener("touchmove",this.#u),this.ownerDocument.removeEventListener("mouseup",this.#c),this.ownerDocument.removeEventListener("touchend",this.#c)}attributeChangedCallback(t,e,s){e!==s&&this.#o&&this.#d(t,s)}#d(t,e){this.#h.push({name:t,value:e}),queueMicrotask((()=>{this.#v()}))}#v(){if(0!==this.#h.length){for(const{name:t,value:e}of this.#h)this.#m(t,e);this.#h=[],this.#g()}}#m(t,e){if("data-color"===t){const s=null!==e?e:this.#f(t);this.#$(s)}else if("data-alpha-channel"===t){const s=null!==e?e:this.#f(t);this.#b(s),this.#A(s)}}#$(t){const e=function(t){if(rt(t))return{format:"hex",color:t};if(!t.includes("(")){const e=document.createElement("canvas").getContext("2d");e.fillStyle=t;const s=e.fillStyle;return"#000000"===s&&"black"!==t?null:{format:"hex",color:s}}const[e,s]=t.split("("),i=e.substring(0,3),o=s.replace(/[,/)]/g," ").replace(/\s+/g," ").trim().split(" ");3===o.length&&o.push("1");const n=i.split("").concat("a"),r=Object.fromEntries(n.map(((t,e)=>[t,q[i][t].from(o[e])])));return{format:i,color:r}}(t);null!==e&&this.#y(e.format,e.color)}#y(t,e){let s=e;if("hide"===this.#p("data-alpha-channel"))if("string"!=typeof e)e.a=1,s=e;else if([5,9].includes(e.length)){const t=(e.length-1)/4;s=e.substring(0,e.length-t)+"f".repeat(t)}else[4,7].includes(e.length)&&(s=e+"f".repeat((e.length-1)/3));(function(t,e){if("string"==typeof t||"string"==typeof e)return t===e;for(const s in t)if(t[s]!==e[s])return!1;return!0})(this.#i[t],s)||(this.#_(t,s),this.#w())}#_(t,e){this.#i[t]=e;for(const[e,s]of et[t])this.#i[e]=s(this.#i[t]);this.#A(this.#p("data-alpha-channel")),this.#g()}#w(){const t=this.#x(),e=new CustomEvent("color-change",{detail:t});this.dispatchEvent(e)}#C(){this.style.setProperty("--cp-hsl-h",String(this.#i.hsl.h)),this.style.setProperty("--cp-hsl-s",String(this.#i.hsl.s)),this.style.setProperty("--cp-hsl-l",String(this.#i.hsl.l)),this.style.setProperty("--cp-hsl-a",String(this.#i.hsl.a)),null!==this.#t&&null!==this.#e&&(this.#t.style.position="relative",this.#t.style.backgroundColor="hsl(calc(var(--cp-hsl-h) * 360) 100% 50%)",this.#t.style.backgroundImage="linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)",this.#e.style.boxSizing="border-box",this.#e.style.position="absolute",this.#e.style.left=100*this.#i.hsv.s+"%",this.#e.style.bottom=100*this.#i.hsv.v+"%")}#b(t){const e=Object.keys(this.#i[this.#n]);this.#r="hex"!==this.#n&&"hide"===t?e.slice(0,3):e}#A(t){const e=this.#i.hex;this.#l="hide"===t&&[5,9].includes(e.length)?e.substring(0,e.length-(e.length-1)/4):e}#g(){if(!this.isConnected)return;this.#T();const t=function(t,e,s,i,o,n,r,l,h,a,u,c,p,d,v,m,g){const f=()=>$`
+var t;const e=window,s=e.trustedTypes,i=s?s.createPolicy("lit-html",{createHTML:t=>t}):void 0,o="$lit$",n=`lit$${(Math.random()+"").slice(9)}$`,r="?"+n,l=`<${r}>`,h=document,a=()=>h.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u=Array.isArray,p="[ \t\n\f\r]",d=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,m=/>/g,g=RegExp(`>|${p}(?:([^\\s"'>=/]+)(${p}*=${p}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),f=/'/g,$=/"/g,b=/^(?:script|style|textarea|title)$/i,A=(t=>(e,...s)=>({_$litType$:t,strings:e,values:s}))(1),_=Symbol.for("lit-noChange"),y=Symbol.for("lit-nothing"),w=new WeakMap,x=h.createTreeWalker(h,129,null,!1),C=(t,e)=>{const s=t.length-1,r=[];let h,a=2===e?"<svg>":"",c=d;for(let e=0;e<s;e++){const s=t[e];let i,u,p=-1,A=0;for(;A<s.length&&(c.lastIndex=A,u=c.exec(s),null!==u);)A=c.lastIndex,c===d?"!--"===u[1]?c=v:void 0!==u[1]?c=m:void 0!==u[2]?(b.test(u[2])&&(h=RegExp("</"+u[2],"g")),c=g):void 0!==u[3]&&(c=g):c===g?">"===u[0]?(c=null!=h?h:d,p=-1):void 0===u[1]?p=-2:(p=c.lastIndex-u[2].length,i=u[1],c=void 0===u[3]?g:'"'===u[3]?$:f):c===$||c===f?c=g:c===v||c===m?c=d:(c=g,h=void 0);const _=c===g&&t[e+1].startsWith("/>")?" ":"";a+=c===d?s+l:p>=0?(r.push(i),s.slice(0,p)+o+s.slice(p)+n+_):s+n+(-2===p?(r.push(void 0),e):_)}const u=a+(t[s]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==i?i.createHTML(u):u,r]};class S{constructor({strings:t,_$litType$:e},i){let l;this.parts=[];let h=0,c=0;const u=t.length-1,p=this.parts,[d,v]=C(t,e);if(this.el=S.createElement(d,i),x.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(l=x.nextNode())&&p.length<u;){if(1===l.nodeType){if(l.hasAttributes()){const t=[];for(const e of l.getAttributeNames())if(e.endsWith(o)||e.startsWith(n)){const s=v[c++];if(t.push(e),void 0!==s){const t=l.getAttribute(s.toLowerCase()+o).split(n),e=/([.?@])?(.*)/.exec(s);p.push({type:1,index:h,name:e[2],strings:t,ctor:"."===e[1]?P:"?"===e[1]?I:"@"===e[1]?E:H})}else p.push({type:6,index:h})}for(const e of t)l.removeAttribute(e)}if(b.test(l.tagName)){const t=l.textContent.split(n),e=t.length-1;if(e>0){l.textContent=s?s.emptyScript:"";for(let s=0;s<e;s++)l.append(t[s],a()),x.nextNode(),p.push({type:2,index:++h});l.append(t[e],a())}}}else if(8===l.nodeType)if(l.data===r)p.push({type:2,index:h});else{let t=-1;for(;-1!==(t=l.data.indexOf(n,t+1));)p.push({type:7,index:h}),t+=n.length-1}h++}}static createElement(t,e){const s=h.createElement("template");return s.innerHTML=t,s}}function T(t,e,s=t,i){var o,n,r,l;if(e===_)return e;let h=void 0!==i?null===(o=s._$Co)||void 0===o?void 0:o[i]:s._$Cl;const a=c(e)?void 0:e._$litDirective$;return(null==h?void 0:h.constructor)!==a&&(null===(n=null==h?void 0:h._$AO)||void 0===n||n.call(h,!1),void 0===a?h=void 0:(h=new a(t),h._$AT(t,s,i)),void 0!==i?(null!==(r=(l=s)._$Co)&&void 0!==r?r:l._$Co=[])[i]=h:s._$Cl=h),void 0!==h&&(e=T(t,h._$AS(t,e.values),h,i)),e}class M{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var e;const{el:{content:s},parts:i}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:h).importNode(s,!0);x.currentNode=o;let n=x.nextNode(),r=0,l=0,a=i[0];for(;void 0!==a;){if(r===a.index){let e;2===a.type?e=new N(n,n.nextSibling,this,t):1===a.type?e=new a.ctor(n,a.name,a.strings,this,t):6===a.type&&(e=new k(n,this,t)),this._$AV.push(e),a=i[++l]}r!==(null==a?void 0:a.index)&&(n=x.nextNode(),r++)}return x.currentNode=h,o}v(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class N{constructor(t,e,s,i){var o;this.type=2,this._$AH=y,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cp=null===(o=null==i?void 0:i.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===(null==t?void 0:t.nodeType)&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=T(this,t,e),c(t)?t===y||null==t||""===t?(this._$AH!==y&&this._$AR(),this._$AH=y):t!==this._$AH&&t!==_&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>u(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==y&&c(this._$AH)?this._$AA.nextSibling.data=t:this.$(h.createTextNode(t)),this._$AH=t}g(t){var e;const{values:s,_$litType$:i}=t,o="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=S.createElement(i.h,this.options)),i);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.v(s);else{const t=new M(o,this),e=t.u(this.options);t.v(s),this.$(e),this._$AH=t}}_$AC(t){let e=w.get(t.strings);return void 0===e&&w.set(t.strings,e=new S(t)),e}T(t){u(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const o of t)i===e.length?e.push(s=new N(this.k(a()),this.k(a()),this,this.options)):s=e[i],s._$AI(o),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cp=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class H{constructor(t,e,s,i,o){this.type=1,this._$AH=y,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=y}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,s,i){const o=this.strings;let n=!1;if(void 0===o)t=T(this,t,e,0),n=!c(t)||t!==this._$AH&&t!==_,n&&(this._$AH=t);else{const i=t;let r,l;for(t=o[0],r=0;r<o.length-1;r++)l=T(this,i[s+r],e,r),l===_&&(l=this._$AH[r]),n||(n=!c(l)||l!==this._$AH[r]),l===y?t=y:t!==y&&(t+=(null!=l?l:"")+o[r+1]),this._$AH[r]=l}n&&!i&&this.j(t)}j(t){t===y?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class P extends H{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===y?void 0:t}}const V=s?s.emptyScript:"";class I extends H{constructor(){super(...arguments),this.type=4}j(t){t&&t!==y?this.element.setAttribute(this.name,V):this.element.removeAttribute(this.name)}}class E extends H{constructor(t,e,s,i,o){super(t,e,s,i,o),this.type=5}_$AI(t,e=this){var s;if((t=null!==(s=T(this,t,e,0))&&void 0!==s?s:y)===_)return;const i=this._$AH,o=t===y&&i!==y||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,n=t!==y&&(i===y||o);o&&this.element.removeEventListener(this.name,this,i),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class k{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){T(this,t)}}const D=e.litHtmlPolyfillSupport;null==D||D(S,N),(null!==(t=e.litHtmlVersions)&&void 0!==t?t:e.litHtmlVersions=[]).push("2.7.4");function F(t,e,s){return Math.max(e,Math.min(t,s))}function W(t,e=2){return t.toFixed(e).replace(/\.?0+$/,"")}function L(t){if(t.endsWith("."))return NaN;return(parseFloat(t)%360+360)%360/360}function R(t){return W(360*t)}function O(t){if(!t.endsWith("%"))return NaN;const e=t.substring(0,t.length-1);if(e.endsWith("."))return NaN;const s=parseFloat(e);return Number.isNaN(s)?NaN:F(s,0,100)/100}function U(t){return W(100*t)+"%"}function j(t){if(t.endsWith("%"))return O(t);if(t.endsWith("."))return NaN;const e=parseFloat(t);return Number.isNaN(e)?NaN:F(e,0,255)/255}function B(t){return W(255*t)}function q(t){return t.endsWith("%")?O(t):F(parseFloat(t),0,1)}function z(t){return String(t)}const Q={hsl:{h:{to:R,from:L},s:{to:U,from:O},l:{to:U,from:O},a:{to:z,from:q}},hwb:{h:{to:R,from:L},w:{to:U,from:O},b:{to:U,from:O},a:{to:z,from:q}},rgb:{r:{to:B,from:j},g:{to:B,from:j},b:{to:B,from:j},a:{to:z,from:q}}};function K(t,e,s,i,o,n,r,l,h,a,c,u,p,d,v,m,g){return A`
+		${A`
+		<div
+			class="cp-color-space"
+			@mousedown="${p}"
+			@touchstart="${d}"
+		>
+			<div
+				class="cp-thumb"
+				tabIndex="0"
+				aria-label="Color space thumb"
+				@keydown="${u}"
+			></div>
+		</div>
+	`}
+		${A`
+		<div class="cp-range-input-group">
+			${A`
 		<label
-			class="${ut`range-input-label`} ${ut`range-input-label--hue`}"
+			class="cp-range-input-label cp-range-input-label--hue"
 			for="${t}-hue-slider"
 		>
-			<span class="${ut`range-input-label-text`} ${ut`range-input-label-text--hue`}">Hue</span>
+			<span class="cp-range-input-label-text cp-range-input-label-text--hue">Hue</span>
 
 			<input
-				class="${ut`range-input`} ${ut`range-input--hue`}"
+				class="cp-range-input cp-range-input--hue"
 				id="${t}-hue-slider"
@@ -17,14 +34,15 @@ type="range"
 				@keydown="${h}"
-				@input="${t=>u(t,"h")}"
+				@input="${t=>c(t,"h")}"
 			>
 		</label>
-	`,b=()=>$`
+	`}
+			${"show"===n?A`
 		<label
-			class="${ut`range-input-label`} ${ut`range-input-label--alpha`}"
+			class="cp-range-input-label cp-range-input-label--alpha"
 			for="${t}-alpha-slider"
 		>
-			<span class="${ut`range-input-label-text`} ${ut`range-input-label-text--alpha`}">Alpha</span>
+			<span class="cp-range-input-label-text cp-range-input-label-text--alpha">Alpha</span>
 
 			<input
-				class="${ut`range-input`} ${ut`range-input--alpha`}"
+				class="cp-range-input cp-range-input--alpha"
 				id="${t}-alpha-slider"
@@ -37,17 +55,15 @@ type="range"
 				@keydown="${h}"
-				@input="${t=>u(t,"a")}"
+				@input="${t=>c(t,"a")}"
 			>
 		</label>
-	`,A=()=>$`
-		<div class="${ut`range-input-group`}">
-			${f()}
-			${"show"===n?b():""}
+	`:""}
 		</div>
-	`,y=()=>$`
+	`}
+		${A`
 		<button
-			class="${ut`copy-button`}"
+			class="cp-copy-button"
 			type="button"
 			@click="${a}"
 		>
-			<span class="${ut`visually-hidden`}">Copy coloy</span>
+			<span class="cp-visually-hidden">Copy coloy</span>
 
@@ -67,11 +83,15 @@ <svg
 		</button>
-	`,_=()=>$`
+	`}
+		${A`
+		<div class="cp-color-input-wrapper">
+			<div class="cp-color-input-group">
+				${"hex"===e?A`
 		<label
-			class="${ut`hex-input-label`}"
+			class="cp-hex-input-label"
 			for="${t}-color-hex"
 		>
-			<span class="${ut`color-input-label-text`}">Hex</span>
+			<span class="cp-color-input-label-text">Hex</span>
 
 			<input
-				class="${ut`color-input`}"
+				class="cp-color-input"
 				id="${t}-color-hex"
@@ -83,12 +103,12 @@ type="text"
 		</label>
-	`,w=()=>s.map((s=>$`
+	`:s.map((s=>A`
 		<label
-			class="${ut`color-input-label`}"
+			class="cp-color-input-label"
 			id="${t}-color-${e}-${s}-label"
 			for="${t}-color-${e}-${s}"
 		>
-			<span class="${ut`color-input-label-text`}">${s.toUpperCase()}</span>
+			<span class="cp-color-input-label-text">${s.toUpperCase()}</span>
 
 			<input
-				class="${ut`color-input`}"
+				class="cp-color-input"
 				id="${t}-color-${e}-${s}"
@@ -100,12 +120,14 @@ type="text"
 		</label>
-	`)),x=()=>$`
+	`))}
+			</div>
+			${r.length>1?A`
 		<button
-			class="${ut`switch-format-button`}"
+			class="cp-switch-format-button"
 			type="button"
 			@click="${v}"
 		>
-			<span class="${ut`visually-hidden`}">Switch format</span>
+			<span class="cp-visually-hidden">Switch format</span>
 
 			<svg
-				class="${ut`icon`}"
+				class="cp-icon"
 				aria-hidden="true"
@@ -122,27 +144,5 @@ xmlns="http://www.w3.org/2000/svg"
 		</button>
-	`,C=()=>$`
-		<div class="${ut`color-input-wrapper`}">
-			<div class="${ut`color-input-group`}">
-				${"hex"===e?_():w()}
-			</div>
-			${r.length>1?x():""}
+	`:""}
 		</div>
-	`;return $`
-		${$`
-		<div
-			class="${ut`color-space`}"
-			@mousedown="${p}"
-			@touchstart="${d}"
-		>
-			<div
-				class="${ut`thumb`}"
-				tabIndex="0"
-				aria-label="Color space thumb"
-				@keydown="${c}"
-			></div>
-		</div>
 	`}
-		${A()}
-		${y()}
-		${C()}
-	`}(this.id,this.#n,this.#r,this.#i,this.#l,this.#p("data-alpha-channel"),this.#p("data-visible-formats"),this.#S,this.#M,this.#N,this.#H,this.#P,this.#I,this.#V,this.#E,this.#D,this.#F);this.classList.add(ut`color-picker`),((t,e,s)=>{var i,o;const n=null!==(i=null==s?void 0:s.renderBefore)&&void 0!==i?i:e;let r=n._$litPart$;if(void 0===r){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=r=new S(e.insertBefore(h(),t),t,void 0,null!=s?s:{})}r._$AI(t)})(t,this),this.#t=this.querySelector("."+ut`color-space`),this.#e=this.querySelector("."+ut`thumb`),this.#C()}#T(){for(const[t,e]of ht){const s=this.hasAttribute(t);if(e.isRequired&&!s)throw this.#k(`Prop “${t}” is required but wasn't provided.`);e.isRequired||s||this.setAttribute(t,e.default?.())}}#I=t=>{this.#s=!0,this.#a(t)};#a=t=>{1===t.buttons&&!1!==this.#s&&this.#t instanceof HTMLElement&&this.#W(this.#t,t.clientX,t.clientY)};#V=t=>{this.#s=!0,this.#u(t)};#u=t=>{if(!1===this.#s||!(this.#t instanceof HTMLElement))return;t.preventDefault();const e=t.touches[0];this.#W(this.#t,e.clientX,e.clientY)};#W(t,e,s){const i=function(t,e,s){const i=t.getBoundingClientRect(),o=e-i.left,n=s-i.top;return{x:0===i.width?0:D(o/i.width,0,1),y:0===i.height?0:D(1-n/i.height,0,1)}}(t,e,s),o=it(this.#i.hsv);o.s=i.x,o.v=i.y,this.#y("hsv",o)}#c=()=>{this.#s=!1};#P=t=>{if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(t.key))return;t.preventDefault();const e=["ArrowLeft","ArrowDown"].includes(t.key)?-1:1,s=["ArrowLeft","ArrowRight"].includes(t.key)?"s":"v",i=t.shiftKey?10:1,o=this.#i.hsv[s]+e*i*.01,n=it(this.#i.hsv);n[s]=D(o,0,1),this.#y("hsv",n)};#M=t=>{if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(t.key)||!t.shiftKey)return;const e=t.currentTarget,s=parseFloat(e.step),i=["ArrowLeft","ArrowDown"].includes(t.key)?-1:1,o=D(parseFloat(e.value)+i*s*10,parseInt(e.min),parseInt(e.max));e.value=String(o-i*s)};#H=(t,e)=>{const s=t.currentTarget,i=it(this.#i.hsv);i[e]=parseInt(s.value)/parseInt(s.max),this.#y("hsv",i)};#F=t=>{const e=t.target;rt(e.value)&&this.#y("hex",e.value)};#D=(t,e)=>{const s=t.target,i=it(this.#i[this.#n]),o=q[this.#n][e].from(s.value);Number.isNaN(o)||void 0===o||(i[e]=o,this.#y(this.#n,i))};#x(){const t="hide"===this.#p("data-alpha-channel"),e=nt(this.#i[this.#n],this.#n,t);return{colors:this.#i,cssColor:e}}#N=()=>{const t=this.#i[this.#n],e="hide"===this.#p("data-alpha-channel"),s=nt(t,this.#n,e);return window.navigator.clipboard.writeText(s)};#E=()=>{const t=this.#p("data-visible-formats"),e=(t.findIndex((t=>t===this.#n))+1)%t.length;this.#n=t[e],this.#b(this.#p("data-alpha-channel")),this.#g()};#S=t=>{const e=this.#n;return q[e][t].to(this.#i[e][t])};#p(t){const e=this.getAttribute(t)??this.#f(t);return lt[t].type===Array?Array.isArray(e)?e:e.split(",").map((t=>t.trim())):e}#f(t){return lt[t].default?.()}#k(t){return new Error(`<${this.localName}>: ${t}`)}}function ut(t,...e){return"cp-"+t.map(((t,s)=>t+(s<e.length?e[s]:""))).join("")}export{at as ColorPicker};
+	`}function X(t){const e=t.replace(/^#/,""),s=[],i=e.length>4?2:1;for(let t=0;t<e.length;t+=i){const o=e.slice(t,t+i);s.push(o.repeat(i%2+1))}3===s.length&&s.push("ff");const o=s.map((t=>parseInt(t,16)/255));return{r:o[0],g:o[1],b:o[2],a:o[3]}}function Y(t){const e=t.l<.5?t.l*(1+t.s):t.l+t.s-t.l*t.s,s=2*t.l-e;return{r:Z(s,e,t.h+1/3),g:Z(s,e,t.h),b:Z(s,e,t.h-1/3),a:t.a}}function Z(t,e,s){return s<0?s+=1:s>1&&(s-=1),s<1/6?t+6*(e-t)*s:s<.5?e:s<2/3?t+(e-t)*(2/3-s)*6:t}function G(t){return{r:J(5,t),g:J(3,t),b:J(1,t),a:t.a}}function J(t,e){const s=(t+6*e.h)%6;return e.v-e.v*e.s*Math.max(0,Math.min(s,4-s,1))}function tt(t){return{h:t.h,s:1===t.b?0:1-t.w/(1-t.b),v:1-t.b,a:t.a}}function et(t){const e=Math.min(t.r,t.g,t.b),s=Math.max(t.r,t.g,t.b);let i;return i=s===e?0:s===t.r?(0+(t.g-t.b)/(s-e))/6:s===t.g?(2+(t.b-t.r)/(s-e))/6:(4+(t.r-t.g)/(s-e))/6,i<0&&(i+=1),{h:i,w:e,b:1-s,a:t.a}}function st(t){const e=et(t),s=e.w,i=1-e.b,o=(i+s)/2;let n;return n=0===i||1===s?0:(i-o)/Math.min(o,1-o),{h:e.h,s:n,l:o,a:t.a}}function it(t){return"#"+Object.values(t).map((t=>{const e=255*t,s=Math.round(e).toString(16);return 1===s.length?"0"+s:s})).join("")}const ot={hex:[["hsl",t=>nt(t,[X,st])],["hsv",t=>nt(t,[X,et,tt])],["hwb",t=>nt(t,[X,et])],["rgb",X]],hsl:[["hex",t=>nt(t,[Y,it])],["hsv",function(t){const e=t.l+t.s*Math.min(t.l,1-t.l),s=0===e?0:2-2*t.l/e;return{h:t.h,s,v:e,a:t.a}}],["hwb",t=>nt(t,[Y,et])],["rgb",Y]],hsv:[["hex",t=>nt(t,[G,it])],["hsl",function(t){const e=t.v-t.v*t.s/2,s=Math.min(e,1-e),i=0===s?0:(t.v-e)/s;return{h:t.h,s:i,l:e,a:t.a}}],["hwb",function(t){return{h:t.h,w:(1-t.s)*t.v,b:1-t.v,a:t.a}}],["rgb",G]],hwb:[["hex",t=>nt(t,[tt,G,it])],["hsl",t=>nt(t,[tt,G,st])],["hsv",tt],["rgb",t=>nt(t,[tt,G])]],rgb:[["hex",it],["hsl",st],["hsv",t=>nt(t,[et,tt])],["hwb",et]]};function nt(t,e){return e.reduce(((t,e)=>e(t)),t)}function rt(t){const e={};for(const s in t)e[s]=t[s];return e}const lt={hex:(t,e)=>e&&[5,9].includes(t.length)?t.substring(0,t.length-(t.length-1)/4):t,hsl:(t,e)=>`hsl(${W(360*t.h)} ${W(100*t.s)}% ${W(100*t.l)}%`+(e?")":` / ${W(t.a)})`),hwb:(t,e)=>`hwb(${W(360*t.h)} ${W(100*t.w)}% ${W(100*t.b)}%`+(e?")":` / ${W(t.a)})`),rgb:(t,e)=>`rgb(${W(255*t.r)} ${W(255*t.g)} ${W(255*t.b)}`+(e?")":` / ${W(t.a)})`)};function ht(t,e,s){return lt[e](t,s)}function at(t){return/^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(t)}const ct={"data-alpha-channel":{type:String,default:()=>"show"},"data-color":{type:String,default:()=>"#ffffffff"},"data-default-format":{type:String,default:()=>"hsl"},"data-visible-formats":{type:Array,default:()=>["hex","hsl","hwb","rgb"]},id:{type:String,default:()=>"color-picker"}},ut=Object.entries(ct);class pt extends HTMLElement{static observedAttributes=Object.keys(ct);#t=null;#e=null;#s=!1;#i={hex:"#ffffffff",hsl:{h:0,s:0,l:1,a:1},hsv:{h:0,s:0,v:1,a:1},hwb:{h:0,w:1,b:0,a:1},rgb:{r:1,g:1,b:1,a:1}};#o=!1;#n="hsl";#r=[];#l="";#h=[];constructor(){super(),window.customElements.whenDefined(this.localName).then((()=>{this.#o=!0}))}get[Symbol.toStringTag](){return"ColorPicker"}connectedCallback(){if(!this.isConnected)return;this.ownerDocument.addEventListener("mousemove",this.#a,{passive:!1}),this.ownerDocument.addEventListener("touchmove",this.#c,{passive:!1}),this.ownerDocument.addEventListener("mouseup",this.#u),this.ownerDocument.addEventListener("touchend",this.#u);const t=this.#p("data-visible-formats"),e=this.#p("data-default-format");this.#n=t.includes(e)?e:t[0];for(const t of pt.observedAttributes)this.#d(t,this.#p(t))}disconnectedCallback(){this.ownerDocument.removeEventListener("mousemove",this.#a),this.ownerDocument.removeEventListener("touchmove",this.#c),this.ownerDocument.removeEventListener("mouseup",this.#u),this.ownerDocument.removeEventListener("touchend",this.#u)}attributeChangedCallback(t,e,s){e!==s&&this.#o&&this.#d(t,s)}#d(t,e){this.#h.push({name:t,value:e}),queueMicrotask((()=>{this.#v()}))}#v(){if(0!==this.#h.length){for(const{name:t,value:e}of this.#h)this.#m(t,e);this.#h=[],this.#g()}}#m(t,e){if("data-color"===t){const s=null!==e?e:this.#f(t);this.#$(s)}else if("data-alpha-channel"===t){const s=null!==e?e:this.#f(t);this.#b(s),this.#A(s)}}#$(t){const e=function(t){if(at(t))return{format:"hex",color:t};if(!t.includes("(")){const e=document.createElement("canvas").getContext("2d");e.fillStyle=t;const s=e.fillStyle;return"#000000"===s&&"black"!==t?null:{format:"hex",color:s}}const[e,s]=t.split("("),i=e.substring(0,3),o=s.replace(/[,/)]/g," ").replace(/\s+/g," ").trim().split(" ");3===o.length&&o.push("1");const n=i.split("").concat("a"),r=Object.fromEntries(n.map(((t,e)=>[t,Q[i][t].from(o[e])])));return{format:i,color:r}}(t);null!==e&&this.#_(e.format,e.color)}#_(t,e){let s=e;if("hide"===this.#p("data-alpha-channel"))if("string"!=typeof e)e.a=1,s=e;else if([5,9].includes(e.length)){const t=(e.length-1)/4;s=e.substring(0,e.length-t)+"f".repeat(t)}else[4,7].includes(e.length)&&(s=e+"f".repeat((e.length-1)/3));(function(t,e){if("string"==typeof t||"string"==typeof e)return t===e;for(const s in t)if(t[s]!==e[s])return!1;return!0})(this.#i[t],s)||(this.#y(t,s),this.#w())}#y(t,e){this.#i[t]=e;for(const[e,s]of ot[t])this.#i[e]=s(this.#i[t]);this.#A(this.#p("data-alpha-channel")),this.#g()}#w(){const t=this.#x(),e=new CustomEvent("color-change",{detail:t});this.dispatchEvent(e)}#C(){this.style.setProperty("--cp-hsl-h",String(this.#i.hsl.h)),this.style.setProperty("--cp-hsl-s",String(this.#i.hsl.s)),this.style.setProperty("--cp-hsl-l",String(this.#i.hsl.l)),this.style.setProperty("--cp-hsl-a",String(this.#i.hsl.a)),null!==this.#t&&null!==this.#e&&(this.#t.style.position="relative",this.#t.style.backgroundColor="hsl(calc(var(--cp-hsl-h) * 360) 100% 50%)",this.#t.style.backgroundImage="linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)",this.#e.style.boxSizing="border-box",this.#e.style.position="absolute",this.#e.style.left=100*this.#i.hsv.s+"%",this.#e.style.bottom=100*this.#i.hsv.v+"%")}#b(t){const e=Object.keys(this.#i[this.#n]);this.#r="hex"!==this.#n&&"hide"===t?e.slice(0,3):e}#A(t){const e=this.#i.hex;this.#l="hide"===t&&[5,9].includes(e.length)?e.substring(0,e.length-(e.length-1)/4):e}#g(){if(!this.isConnected)return;this.#S();const t=K(this.id,this.#n,this.#r,this.#i,this.#l,this.#p("data-alpha-channel"),this.#p("data-visible-formats"),this.#T,this.#M,this.#N,this.#H,this.#P,this.#V,this.#I,this.#E,this.#k,this.#D);this.classList.add("cp-color-picker"),((t,e,s)=>{var i,o;const n=null!==(i=null==s?void 0:s.renderBefore)&&void 0!==i?i:e;let r=n._$litPart$;if(void 0===r){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=r=new N(e.insertBefore(a(),t),t,void 0,null!=s?s:{})}r._$AI(t)})(t,this),this.#t=this.querySelector(".cp-color-space"),this.#e=this.querySelector(".cp-thumb"),this.#C()}#S(){for(const[t,e]of ut){const s=this.hasAttribute(t);if(e.isRequired&&!s)throw this.#F(`Prop “${t}” is required but wasn't provided.`);e.isRequired||s||this.setAttribute(t,e.default?.())}}#V=t=>{this.#s=!0,this.#a(t)};#a=t=>{1===t.buttons&&!1!==this.#s&&this.#t instanceof HTMLElement&&this.#W(this.#t,t.clientX,t.clientY)};#I=t=>{this.#s=!0,this.#c(t)};#c=t=>{if(!1===this.#s||!(this.#t instanceof HTMLElement))return;t.preventDefault();const e=t.touches[0];this.#W(this.#t,e.clientX,e.clientY)};#W(t,e,s){const i=function(t,e,s){const i=t.getBoundingClientRect(),o=e-i.left,n=s-i.top;return{x:0===i.width?0:F(o/i.width,0,1),y:0===i.height?0:F(1-n/i.height,0,1)}}(t,e,s),o=rt(this.#i.hsv);o.s=i.x,o.v=i.y,this.#_("hsv",o)}#u=()=>{this.#s=!1};#P=t=>{if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(t.key))return;t.preventDefault();const e=["ArrowLeft","ArrowDown"].includes(t.key)?-1:1,s=["ArrowLeft","ArrowRight"].includes(t.key)?"s":"v",i=t.shiftKey?10:1,o=this.#i.hsv[s]+e*i*.01,n=rt(this.#i.hsv);n[s]=F(o,0,1),this.#_("hsv",n)};#M=t=>{if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(t.key)||!t.shiftKey)return;const e=t.currentTarget,s=parseFloat(e.step),i=["ArrowLeft","ArrowDown"].includes(t.key)?-1:1,o=F(parseFloat(e.value)+i*s*10,parseInt(e.min),parseInt(e.max));e.value=String(o-i*s)};#H=(t,e)=>{const s=t.currentTarget,i=rt(this.#i.hsv);i[e]=parseInt(s.value)/parseInt(s.max),this.#_("hsv",i)};#D=t=>{const e=t.target;at(e.value)&&this.#_("hex",e.value)};#k=(t,e)=>{const s=t.target,i=rt(this.#i[this.#n]),o=Q[this.#n][e].from(s.value);Number.isNaN(o)||void 0===o||(i[e]=o,this.#_(this.#n,i))};#x(){const t="hide"===this.#p("data-alpha-channel"),e=ht(this.#i[this.#n],this.#n,t);return{colors:this.#i,cssColor:e}}#N=()=>{const t=this.#i[this.#n],e="hide"===this.#p("data-alpha-channel"),s=ht(t,this.#n,e);return window.navigator.clipboard.writeText(s)};#E=()=>{const t=this.#p("data-visible-formats"),e=(t.findIndex((t=>t===this.#n))+1)%t.length;this.#n=t[e],this.#b(this.#p("data-alpha-channel")),this.#g()};#T=t=>{const e=this.#n;return Q[e][t].to(this.#i[e][t])};#p(t){const e=this.getAttribute(t)??this.#f(t);return ct[t].type===Array?Array.isArray(e)?e:e.split(",").map((t=>t.trim())):e}#f(t){return ct[t].default?.()}#F(t){return new Error(`<${this.localName}>: ${t}`)}}export{pt as ColorPicker};

LICENSE.txt

@@ -1,2 +0,2 @@
-Copyright 2022 Philipp Rudloff
+Copyright 2023 Philipp Rudloff
 
@@ -3,0 +3,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

package.json

 {
 	"name": "yet-another-color-picker",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"license": "MIT",
@@ -10,3 +10,3 @@ "description": "Color picker web component",
 	},
-	"homepage": "https://github.com/kleinfreund/yet-another-color-picker",
+	"homepage": "https://yet-another-color-picker.netlify.app",
 	"repository": {
@@ -27,4 +27,8 @@ "type": "git",
 	"exports": {
-		".": "./dist/ColorPicker.js",
-		"./dist/ColorPicker.css": "./dist/ColorPicker.css"
+		".": {
+			"types": "./types/index.d.ts",
+			"default": "./dist/ColorPicker.js"
+		},
+		"./dist/ColorPicker.css": "./dist/ColorPicker.css",
+		"./types/index.d.ts": "./types/index.d.ts"
 	},
@@ -54,31 +58,30 @@ "main": "./dist/ColorPicker.js",
 	"dependencies": {
-		"lit-html": "^2.4.0"
+		"lit-html": "^2.7.4"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^17.2.0",
-		"@commitlint/config-conventional": "^17.2.0",
-		"@rollup/plugin-node-resolve": "^15.0.1",
-		"@rollup/plugin-terser": "^0.1.0",
-		"@semantic-release/changelog": "^6.0.1",
+		"@commitlint/cli": "^17.6.3",
+		"@commitlint/config-conventional": "^17.6.3",
+		"@rollup/plugin-node-resolve": "^15.0.2",
+		"@rollup/plugin-terser": "^0.4.3",
+		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/commit-analyzer": "^9.0.2",
 		"@semantic-release/git": "^10.0.1",
-		"@semantic-release/github": "^8.0.6",
-		"@semantic-release/npm": "^9.0.1",
-		"@semantic-release/release-notes-generator": "^10.0.3",
-		"@vitest/coverage-c8": "^0.25.2",
-		"c8": "^7.12.0",
-		"canvas": "^2.10.2",
-		"clean-css-cli": "^5.6.1",
-		"eslint": "^8.28.0",
+		"@semantic-release/github": "^8.0.7",
+		"@semantic-release/npm": "^10.0.3",
+		"@semantic-release/release-notes-generator": "^11.0.1",
+		"@vitest/coverage-c8": "^0.31.1",
+		"canvas": "^2.11.2",
+		"clean-css-cli": "^5.6.2",
+		"eslint": "^8.40.0",
 		"eslint-config-standard": "^17.0.0",
-		"husky": "^8.0.2",
-		"jsdom": "^20.0.3",
-		"postcss": "^8.4.19",
-		"rimraf": "^3.0.2",
-		"rollup": "^3.3.0",
-		"semantic-release": "^19.0.5",
+		"husky": "^8.0.3",
+		"jsdom": "^22.0.0",
+		"postcss": "^8.4.23",
+		"rimraf": "^5.0.1",
+		"rollup": "^3.22.0",
+		"semantic-release": "^21.0.2",
 		"standard": "^17.0.0",
-		"vite": "^3.2.4",
-		"vitest": "^0.25.2"
+		"vite": "^4.3.8",
+		"vitest": "^0.31.1"
 	}
 }

README.md

@@ -1,2 +0,2 @@
-# color-picker
+# yet-another-color-picker
 
@@ -17,7 +17,9 @@ [![Tests passing](https://github.com/kleinfreund/yet-another-color-picker/workflows/main/badge.svg)](https://github.com/kleinfreund/yet-another-color-picker/actions)
 	- [contributing guidelines](https://github.com/kleinfreund/yet-another-color-picker/blob/main/CONTRIBUTING.md)
+- as a Vue 3 component: [vue-accessible-color-picker](https://www.npmjs.com/package/vue-accessible-color-picker)
 
 ## Contents
 
-- [Installation](#installation)
-- [Usage](#usage)
+- [Installation & usage](#installation-&-usage)
+	- [As npm package](#as-npm-package)
+	- [As plain JS and CSS files](#as-plain-js-and-css-files)
 - [Documentation](#documentation)
@@ -35,25 +37,64 @@ - [Props](#props)
 - [Design](#design)
+- [To do](#to-do)
 
-## Installation
+## Installation & usage
 
-```sh
-npm install yet-another-color-picker
-```
+### As npm package
 
-## Usage
+1. Install the package.
 
-Import the `ColorPicker` custom element class and define it.
+	```sh
+	npm install yet-another-color-picker
+	```
 
-HTML:
-```html
-<color-picker />
-```
+2. Import the `ColorPicker` custom element class and define it.
 
-JavaScript:
-```js
-import { ColorPicker } from 'yet-another-color-picker'
+	HTML:
+	```html
+	<color-picker></color-picker>
+	```
 
-window.customElements.define('color-picker', ColorPicker)
-```
+	JavaScript:
+	```js
+	import { ColorPicker } from 'yet-another-color-picker'
 
+	window.customElements.define('color-picker', ColorPicker)
+	```
+
+3. Make sure to also load the color picker styles.
+
+	HTML:
+	```html
+	<link rel="stylesheet" href="./node_modules/yet-another-color-picker/dist/ColorPicker.css">
+	```
+
+### As plain JS and CSS files
+
+1. Download the files.
+
+	```sh
+	curl --remote-name-all 'https://cdn.jsdelivr.net/npm/yet-another-color-picker@latest/dist/ColorPicker.{js,css}'
+	```
+
+2. Import the `ColorPicker` custom element class and define it.
+
+	HTML:
+	```html
+	<color-picker></color-picker>
+	```
+
+	JavaScript:
+	```js
+	import { ColorPicker } from './ColorPicker.js'
+
+	window.customElements.define('color-picker', ColorPicker)
+	```
+
+3. Make sure to also load the color picker styles.
+
+	HTML:
+	```html
+	<link rel="stylesheet" href="./ColorPicker.css">
+	```
+
 ## Documentation
@@ -220,1 +261,7 @@
 	Cycles through the available color formats (currently HEX, HSL, HWB, and RGB).
+
+## To do
+
+- Document browser usage via import maps (https://caniuse.com/import-maps).
+- Consider providing a version that adds `ColorPicker` to `window` so the package can be used via CDNs such as unpkg and jsDelivr.
+- Re-consider how state is recomputed internally.

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39602

increased by2.94%

Dev dependency count

24

decreased by-4%

Number of lines in readme file

265

increased by21.56%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedlit-html@^2.7.4