toolcool-color-picker - npm Package Compare versions

Comparing version 1.0.14 to 1.0.15

dist/toolcool-color-picker.min.js

 /* 
 Tool Cool Color Picker
-Version: 1.0.14
+Version: 1.0.15
 Documentation: https://github.com/mzusin/toolcool-color-picker
@@ -50,3 +50,3 @@ Author: Miriam Zusin
            </div>
-        `,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var Et=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==null?void 0:a.activeElement)!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){var n,s;let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"Escape":{(n=this.shadowRoot)!=null&&n.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{(s=this.shadowRoot)!=null&&s.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ft(i.value);r.toString()===i.value&&M(this.cid,r/100)}connectedCallback(){if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"",this.color=c(this.getAttribute("color"));let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex();let i=$(),r=$(),n=$(),s=$(),a=$();this.shadowRoot.innerHTML=`
+        `,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var Et=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==null?void 0:a.activeElement)!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){var n,s;let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,Math.min(this.a+.01,1)),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"Escape":{(n=this.shadowRoot)!=null&&n.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{(s=this.shadowRoot)!=null&&s.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ft(i.value);r.toString()===i.value&&M(this.cid,r/100)}connectedCallback(){if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"",this.color=c(this.getAttribute("color"));let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex();let i=$(),r=$(),n=$(),s=$(),a=$();this.shadowRoot.innerHTML=`
            <style>${Et}</style>
@@ -53,0 +53,0 @@ <div class="fields">

examples/js/toolcool-color-picker.min.js

 /* 
 Tool Cool Color Picker
-Version: 1.0.14
+Version: 1.0.15
 Documentation: https://github.com/mzusin/toolcool-color-picker
@@ -50,3 +50,3 @@ Author: Miriam Zusin
            </div>
-        `,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var Et=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==null?void 0:a.activeElement)!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){var n,s;let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"Escape":{(n=this.shadowRoot)!=null&&n.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{(s=this.shadowRoot)!=null&&s.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ft(i.value);r.toString()===i.value&&M(this.cid,r/100)}connectedCallback(){if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"",this.color=c(this.getAttribute("color"));let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex();let i=$(),r=$(),n=$(),s=$(),a=$();this.shadowRoot.innerHTML=`
+        `,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var Et=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==null?void 0:a.activeElement)!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){var n,s;let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,Math.min(this.a+.01,1)),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"Escape":{(n=this.shadowRoot)!=null&&n.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{(s=this.shadowRoot)!=null&&s.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ft(i.value);r.toString()===i.value&&M(this.cid,r/100)}connectedCallback(){if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"",this.color=c(this.getAttribute("color"));let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex();let i=$(),r=$(),n=$(),s=$(),a=$();this.shadowRoot.innerHTML=`
            <style>${Et}</style>
@@ -53,0 +53,0 @@ <div class="fields">

package.json

 {
   "name": "toolcool-color-picker",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.",
@@ -10,2 +10,6 @@ "main": "./dist/toolcool-color-picker.min.js",
     "watch": "node run/watch.js",
+    "docs:build": "node run/docs-build.js",
+    "docs:watch": "node run/docs-watch.js",
+    "docs:css": "postcss ./docs/src/index.css -o ./docs/assets/styles.css",
+    "docs:css:watch": "postcss ./docs/src/index.css -o ./docs/assets/styles.css -w",
     "test": "node ./run/test.js",
@@ -31,8 +35,13 @@ "eslint": "eslint ./src/**",
     "autoprefixer": "^10.4.7",
+    "cssnano": "^6.0.0",
     "esbuild": "^0.14.49",
     "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",
+    "highlight.js": "^11.7.0",
     "open": "^8.4.0",
     "postcss": "^8.4.14",
+    "postcss-cli": "^10.1.0",
+    "postcss-import": "^15.1.0",
     "prettier": "2.7.1",
+    "tailwindcss": "^3.3.0",
     "uglify-js": "^3.16.2",
@@ -39,0 +48,0 @@ "uglifycss": "^0.0.29"

README.md

@@ -10,3 +10,3 @@ # Tool Cool Color Picker
 
-Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. [Check out the demo here.](https://mzusin.github.io/toolcool-color-picker/)
+Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.
 
@@ -16,3 +16,4 @@ ![Tool Cool Color Picker](https://github.com/mzusin/toolcool-color-picker/blob/main/examples/img/preview/preview-1.png?raw=true)
 ## Table of contents
-- [Basic usage](#basic-usage)
+- [Demo Page](https://toolcool-color-picker.mzsoft.org/)
+- [Basic Usage](#basic-usage)
 - [CDN](#cdn)
@@ -19,0 +20,0 @@ - [Node.js usage](#nodejs-usage)

src/index.ts

@@ -12,1 +12,2 @@ import ColorPicker from './app/color-picker';
 }
+

src/ui/fields/fields.ts

@@ -164,3 +164,3 @@ // @ts-ignore: esbuild custom loader
         if (type === 'a') {
-          this.a = Math.min(100, this.a + 0.01);
+          this.a = Math.max(0, Math.min(this.a + 0.01, 1));
           this.$a.value = Math.round(this.a * 100).toString();
@@ -167,0 +167,0 @@

test/toolcool-color-picker.min.js

 /* 
 Tool Cool Color Picker
-Version: 1.0.14
+Version: 1.0.15
 Documentation: https://github.com/mzusin/toolcool-color-picker
@@ -50,3 +50,3 @@ Author: Miriam Zusin
            </div>
-        `,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var Et=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==null?void 0:a.activeElement)!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){var n,s;let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.min(100,this.a+.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"Escape":{(n=this.shadowRoot)!=null&&n.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{(s=this.shadowRoot)!=null&&s.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ft(i.value);r.toString()===i.value&&M(this.cid,r/100)}connectedCallback(){if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"",this.color=c(this.getAttribute("color"));let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex();let i=$(),r=$(),n=$(),s=$(),a=$();this.shadowRoot.innerHTML=`
+        `,this.$alpha=this.shadowRoot.querySelector(".alpha"),this.$color=this.shadowRoot.querySelector(".color-bg"),this.$pointer=this.shadowRoot.querySelector(".pointer-box"),(r=this.$alpha)==null||r.addEventListener("mousedown",this.onMouseDown),(n=this.$alpha)==null||n.addEventListener("mouseup",this.onMouseUp),(s=this.$alpha)==null||s.addEventListener("touchmove",this.onChange),(a=this.$alpha)==null||a.addEventListener("touchstart",this.onChange),(d=this.$pointer)==null||d.addEventListener("keydown",this.onKeyDown),document.addEventListener(p,this.hsvChanged),document.addEventListener(f,this.hueChanged),document.addEventListener(m,this.alphaChanged)}disconnectedCallback(){var t,i,r,n,s;(t=this.$alpha)==null||t.removeEventListener("mousedown",this.onMouseDown),(i=this.$alpha)==null||i.removeEventListener("mouseup",this.onMouseUp),(r=this.$alpha)==null||r.removeEventListener("touchmove",this.onChange),(n=this.$alpha)==null||n.removeEventListener("touchstart",this.onChange),(s=this.$pointer)==null||s.removeEventListener("keydown",this.onKeyDown),document.removeEventListener(p,this.hsvChanged),document.removeEventListener(f,this.hueChanged),document.removeEventListener(m,this.alphaChanged)}attributeChangedCallback(t,i,r){let s=c(r).toHsv();this.alpha=s.a,this.hue=s.h,this.saturation=s.s,this.value=s.v,this.render()}},xt=Q;var Et=":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";var J=class extends HTMLElement{constructor(){super();h(this,"cid");h(this,"color",new l("#000"));h(this,"$hex");h(this,"$r");h(this,"$g");h(this,"$b");h(this,"$a");h(this,"hex","");h(this,"r",0);h(this,"g",0);h(this,"b",0);h(this,"a",1);this.attachShadow({mode:"open"}),this.hsvChanged=this.hsvChanged.bind(this),this.hueChanged=this.hueChanged.bind(this),this.alphaChanged=this.alphaChanged.bind(this),this.onHexChange=this.onHexChange.bind(this),this.render=this.render.bind(this),this.onRedChange=this.onRedChange.bind(this),this.onGreenChange=this.onGreenChange.bind(this),this.onBlueChange=this.onBlueChange.bind(this),this.onAlphaChange=this.onAlphaChange.bind(this),this.onRedKeyDown=this.onRedKeyDown.bind(this),this.onBlueKeyDown=this.onBlueKeyDown.bind(this),this.onGreenKeyDown=this.onGreenKeyDown.bind(this),this.onAlphaKeyDown=this.onAlphaKeyDown.bind(this)}static get observedAttributes(){return["color"]}hueChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toHsv();this.color=new l({h:Number(t.detail.h),s:i.s,v:i.v,a:i.a}),this.render()}alphaChanged(t){if(!t||!t.detail||!t.detail.cid||t.detail.cid!==this.cid)return;let i=this.color.toRgb();i.a=t.detail.a,this.color=new l(i),this.render()}hsvChanged(t){!t||!t.detail||!t.detail.cid||t.detail.cid===this.cid&&(this.color=new l({h:t.detail.h,s:t.detail.s,v:t.detail.v,a:this.color.toHsv().a}),this.render())}render(){var i,r,n,s,a;let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex(),this.$hex&&((i=this.shadowRoot)==null?void 0:i.activeElement)!==this.$hex&&(this.$hex.value=this.hex.toUpperCase()),this.$r&&((r=this.shadowRoot)==null?void 0:r.activeElement)!==this.$r&&(this.$r.value=this.r.toString()),this.$g&&((n=this.shadowRoot)==null?void 0:n.activeElement)!==this.$g&&(this.$g.value=this.g.toString()),this.$b&&((s=this.shadowRoot)==null?void 0:s.activeElement)!==this.$b&&(this.$b.value=this.b.toString()),this.$a&&((a=this.shadowRoot)==null?void 0:a.activeElement)!==this.$a&&(this.$a.value=Math.round(this.a*100).toString())}onFieldKeyDown(t,i){var n,s;let r=this.color.toRgb();switch(t.key){case"ArrowUp":{if(i==="r"){this.r=Math.min(255,r.r+1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.min(255,r.g+1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.min(255,r.b+1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,Math.min(this.a+.01,1)),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"ArrowDown":{if(i==="r"){this.r=Math.max(0,r.r-1),r.r=this.r;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$r.value=this.r.toString(),this.render()}if(i==="g"){this.g=Math.max(0,r.g-1),r.g=this.g;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$g.value=this.g.toString(),this.render()}if(i==="b"){this.b=Math.max(0,r.b-1),r.b=this.b;let a=new l(r).toHsv();b(this.cid,a.h,a.s,a.v),this.$b.value=this.b.toString(),this.render()}if(i==="a"){this.a=Math.max(0,this.a-.01),this.$a.value=Math.round(this.a*100).toString();let a=this.color.toRgb();a.a=this.a,this.color=new l(a),this.render(),M(this.cid,this.a)}break}case"Escape":{(n=this.shadowRoot)!=null&&n.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}case"Enter":{(s=this.shadowRoot)!=null&&s.activeElement&&this.shadowRoot.activeElement.blur(),this.render();break}}}onRedKeyDown(t){this.onFieldKeyDown(t,"r")}onGreenKeyDown(t){this.onFieldKeyDown(t,"g")}onBlueKeyDown(t){this.onFieldKeyDown(t,"b")}onAlphaKeyDown(t){this.onFieldKeyDown(t,"a")}onHexChange(t){let i=t.target;if(i.value.length!==6)return;let r=new l(`#${i.value}`);if(r.isValid){this.color=r;let n=this.color.toHsv();b(this.cid,n.h,n.s,n.v)}}onRedChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.r=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onGreenChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.g=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onBlueChange(t){let i=t.target,r=I(i.value);if(r.toString()===i.value){let n=this.color.toRgb();n.b=r;let s=new l(n).toHsv();b(this.cid,s.h,s.s,s.v)}}onAlphaChange(t){let i=t.target,r=ft(i.value);r.toString()===i.value&&M(this.cid,r/100)}connectedCallback(){if(!this.shadowRoot)return;this.cid=this.getAttribute("cid")||"",this.color=c(this.getAttribute("color"));let t=this.color.toRgb();this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a,this.hex=this.color.toHex();let i=$(),r=$(),n=$(),s=$(),a=$();this.shadowRoot.innerHTML=`
            <style>${Et}</style>
@@ -53,0 +53,0 @@ <div class="fields">

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1591635

increased by33.28%

Number of package files

119

increased by26.6%

Lines of code

12714

increased by2.94%

Number of lines in readme file

341

increased by0.29%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

17

increased by41.67%

No dependency changes