kempo-ui 0.0.31 → 0.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ColorPicker.js +19 -14
- package/dist/components/ThemeSwitcher.js +1 -1
- package/docs/components/color-picker.html +84 -52
- package/docs/src/components/ColorPicker.js +19 -14
- package/docs/src/components/ThemeSwitcher.js +1 -1
- package/package.json +1 -1
- package/src/components/ColorPicker.js +61 -15
- package/src/components/ThemeSwitcher.js +5 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class ColorPicker extends ShadowComponent{static properties={format:{type:String,reflect:!0,attribute:"format"},value:{type:String,reflect:!0,attribute:"value"},red:{type:Number},green:{type:Number},blue:{type:Number},alpha:{type:Number}};constructor(){super(),this.format="hex",this.red=0,this.green=0,this.blue=0,this.alpha=1}updated(t){super.updated(t),t.has("format")&&this.requestUpdate()}get value(){if(void 0===this.red||void 0===this.green||void 0===this.blue){const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(0,0,0,1):"#000000"}const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(this.red,this.green,this.blue,this.alpha||1):"#000000"}set value(t){if(t&&"string"==typeof t){for(const[a,s]of Object.entries(this.constructor.formats))if(s.detect(t)){const a=s.parse(t);if(a)return this.red=a.r,this.green=a.g,this.blue=a.b,
|
|
1
|
+
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class ColorPicker extends ShadowComponent{static formAssociated=!0;static properties={name:{type:String,reflect:!0,attribute:"name"},format:{type:String,reflect:!0,attribute:"format"},value:{type:String,reflect:!0,attribute:"value"},red:{type:Number},green:{type:Number},blue:{type:Number},alpha:{type:Number}};constructor(){super(),this.internals=this.attachInternals(),this.format="hex",this.red=0,this.green=0,this.blue=0,this.alpha=1}connectedCallback(){super.connectedCallback(),this.originalHadFormat=this.hasAttribute("format"),this.originalValue=this.getAttribute("value")}firstUpdated(t){if(super.firstUpdated(t),this.originalValue&&!this.originalHadFormat)for(const[t,a]of Object.entries(this.constructor.formats))if(a.detect(this.originalValue)){this.format=t;break}}updated(t){super.updated(t),t.has("format")&&this.requestUpdate(),(t.has("red")||t.has("green")||t.has("blue")||t.has("alpha")||t.has("format"))&&this.updateFormValue()}get value(){if(void 0===this.red||void 0===this.green||void 0===this.blue){const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(0,0,0,1):"#000000"}const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(this.red,this.green,this.blue,this.alpha||1):"#000000"}set value(t){if(t&&"string"==typeof t){for(const[a,s]of Object.entries(this.constructor.formats))if(s.detect(t)){const a=s.parse(t);if(a)return this.red=a.r,this.green=a.g,this.blue=a.b,a.hasAlpha&&(this.alpha=a.a),void this.updateFormValue()}this.red=0,this.green=0,this.blue=0,this.alpha=1,this.updateFormValue()}}updateFormValue(){const t=this.value;this.internals.setFormValue(t)}onColorInputChange(t){const a=this.constructor.formats.hex.parse(t.target.value);a&&(this.red=a.r,this.green=a.g,this.blue=a.b,this.alpha=1)}onTextInputChange(t){this.value=t.target.value}render(){return html`
|
|
2
2
|
<div id="container">
|
|
3
3
|
<select
|
|
4
4
|
id="format"
|
|
@@ -11,30 +11,35 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
|
|
|
11
11
|
value="${this.value}"
|
|
12
12
|
@change=${this.onTextInputChange}
|
|
13
13
|
/>
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
<div id="color-wrapper">
|
|
15
|
+
<input
|
|
16
|
+
id="color"
|
|
17
|
+
type="color"
|
|
18
|
+
value="${this.constructor.formats.hex.toString(this.red||0,this.green||0,this.blue||0,1)}"
|
|
19
|
+
@change=${this.onColorInputChange}
|
|
20
|
+
/>
|
|
21
|
+
</div>
|
|
20
22
|
</div>
|
|
21
23
|
`}static styles=css`
|
|
22
24
|
:host {
|
|
23
25
|
display: block;
|
|
24
26
|
}
|
|
25
27
|
#container {
|
|
26
|
-
display:
|
|
28
|
+
display: grid;
|
|
29
|
+
grid-template-columns: 7rem 1fr auto;
|
|
27
30
|
align-items: stretch;
|
|
28
31
|
}
|
|
29
32
|
#format {
|
|
30
|
-
|
|
33
|
+
flex-shrink: 0;
|
|
31
34
|
}
|
|
32
35
|
#text {
|
|
33
|
-
|
|
36
|
+
min-width: 0;
|
|
37
|
+
}
|
|
38
|
+
#color-wrapper {
|
|
39
|
+
display: contents;
|
|
34
40
|
}
|
|
35
41
|
#color {
|
|
36
|
-
|
|
37
|
-
height:
|
|
38
|
-
align-self: stretch !important;
|
|
42
|
+
aspect-ratio: 1;
|
|
43
|
+
height: 100%;
|
|
39
44
|
}
|
|
40
|
-
`;static formats={hex:{detect:t=>/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/.test(t),parse:t=>{let a,s,r
|
|
45
|
+
`;static formats={hex:{detect:t=>/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/.test(t),parse:t=>{let a,s,e,r=t.slice(1),o=r.length,h=1,n=!1;return 3===o||4===o?(a=parseInt(r[0]+r[0],16),s=parseInt(r[1]+r[1],16),e=parseInt(r[2]+r[2],16),4===o&&(h=parseInt(r[3]+r[3],16)/255,n=!0)):6!==o&&8!==o||(a=parseInt(r.slice(0,2),16),s=parseInt(r.slice(2,4),16),e=parseInt(r.slice(4,6),16),8===o&&(h=parseInt(r.slice(6,8),16)/255,n=!0)),{r:a,g:s,b:e,a:h,hasAlpha:n}},toString:(t,a,s,e)=>{let r=((t=Math.round(t))<<16|(a=Math.round(a))<<8|(s=Math.round(s))).toString(16).padStart(6,"0");if(e<1){r+=Math.round(255*e).toString(16).padStart(2,"0")}return"#"+r}},rgb:{detect:t=>/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;return{r:parseInt(a[1],10),g:parseInt(a[2],10),b:parseInt(a[3],10),a:a[4]?parseFloat(a[4]):1,hasAlpha:!!a[4]}},toString:(t,a,s,e)=>(t=Math.round(t),a=Math.round(a),s=Math.round(s),e<1?`rgba(${t}, ${a}, ${s}, ${e})`:`rgb(${t}, ${a}, ${s})`)},hsl:{detect:t=>/^hsla?\(\s*\d+(?:\.\d+)?\s*,\s*\d+(?:\.\d+)?%\s*,\s*\d+(?:\.\d+)?%\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;let s=parseFloat(a[1])/360,e=parseFloat(a[2])/100,r=parseFloat(a[3])/100,o=a[4]?parseFloat(a[4]):1;const h=!!a[4];let n,d,i;if(0===e)n=d=i=r;else{const t=(t,a,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<1/6?t+6*(a-t)*s:s<.5?a:s<2/3?t+(a-t)*(2/3-s)*6:t),a=r<.5?r*(1+e):r+e-r*e,o=2*r-a;n=t(o,a,s+1/3),d=t(o,a,s),i=t(o,a,s-1/3)}return{r:Math.round(255*n),g:Math.round(255*d),b:Math.round(255*i),a:o,hasAlpha:h}},toString:(t,a,s,e)=>{t/=255,a/=255,s/=255;const r=Math.max(t,a,s),o=Math.min(t,a,s);let h,n,d=(r+o)/2;if(r===o)h=n=0;else{const e=r-o;switch(n=d>.5?e/(2-r-o):e/(r+o),r){case t:h=(a-s)/e+(a<s?6:0);break;case a:h=(s-t)/e+2;break;case s:h=(t-a)/e+4}h/=6}return h=Math.round(360*h),n=Math.round(100*n),d=Math.round(100*d),e<1?`hsla(${h}, ${n}%, ${d}%, ${e})`:`hsl(${h}, ${n}%, ${d}%)`}},hwb:{detect:t=>/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s,e,r,o=parseFloat(a[1]),h=parseFloat(a[2])/100,n=parseFloat(a[3])/100,d=a[4]?parseFloat(a[4]):1,i=1-h-n;if(i>0){let t=o/360,a=1-Math.abs(6*t%2-1),n=h+i*(1-a),d=h+i*a;t<1/6?(s=h+i,e=d,r=h):t<2/6?(s=n,e=h+i,r=h):t<.5?(s=h,e=h+i,r=d):t<4/6?(s=h,e=n,r=h+i):t<5/6?(s=d,e=h,r=h+i):(s=h+i,e=h,r=n)}else s=e=r=h;const l=!!a[4];return{r:Math.round(255*s),g:Math.round(255*e),b:Math.round(255*r),a:d,hasAlpha:l}},toString:(t,a,s,e)=>{t/=255,a/=255,s/=255;const r=Math.max(t,a,s),o=Math.min(t,a,s),h=r-o;let n=0;if(0!==h){switch(r){case t:n=(a-s)/h%6;break;case a:n=(s-t)/h+2;break;case s:n=(t-a)/h+4}n=Math.round(60*n),n<0&&(n+=360)}const d=Math.round(100*o),i=Math.round(100*(1-r));return e<1?`hwb(${n} ${d}% ${i}% / ${e})`:`hwb(${n} ${d}% ${i}%)`}},lab:{detect:t=>/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*s+16)/116,n=h+e/500,d=h-r/200,i=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),l=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*i-1.5371385*l-.4985314*p,c=-.969266*i+1.8760108*l+.041556*p,M=.0556434*i-.2040259*l+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055,g=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055;const f=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:f}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=r>.008856?Math.pow(r,1/3):7.787*r+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,i=h>.008856?Math.pow(h,1/3):7.787*h+16/116,l=Math.round(100*(116*d-16))/100,p=Math.round(500*(n-d)*100)/100,u=Math.round(200*(d-i)*100)/100;return e<1?`lab(${l}% ${p} ${u} / ${e})`:`lab(${l}% ${p} ${u})`}},lch:{detect:t=>/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1]),e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*(s/100)+16)/116,n=h+e*Math.cos(r*Math.PI/180)/500,d=h-e*Math.sin(r*Math.PI/180)/200,i=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),l=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*i-1.5371385*l-.4985314*p,c=-.969266*i+1.8760108*l+.041556*p,M=.0556434*i-.2040259*l+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055,g=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055;const f=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:f}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=r>.008856?Math.pow(r,1/3):7.787*r+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,i=(116*d-16)/100,l=500*(n-d),p=200*(d-(h>.008856?Math.pow(h,1/3):7.787*h+16/116)),u=Math.sqrt(l*l+p*p);let c=180*Math.atan2(p,l)/Math.PI;c<0&&(c+=360);const M=Math.round(100*i*100)/100,m=Math.round(100*u)/100,$=Math.round(100*c)/100;return e<1?`lch(${M}% ${m} ${$} / ${e})`:`lch(${M}% ${m} ${$})`}},oklab:{detect:t=>/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=s+.3963377774*e+.2158037573*r,n=s-.1055613458*e-.0638541728*r,d=s-.0894841775*e-1.291485548*r,i=4.0767416621*h-3.3077115913*n+.2309699292*d,l=-1.2684380046*h+2.6097574011*n-.3413193965*d,p=-.0041960863*h-.7034186147*n+1.707614701*d,u=i<=.0031308?12.92*i:1.055*Math.pow(i,1/2.4)-.055,c=l<=.0031308?12.92*l:1.055*Math.pow(l,1/2.4)-.055,M=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055;const m=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,u))),g:Math.round(255*Math.max(0,Math.min(1,c))),b:Math.round(255*Math.max(0,Math.min(1,M))),a:o,hasAlpha:m}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(r,1/3),d=Math.pow(o,1/3),i=Math.pow(h,1/3),l=.2104542553*n+.793617785*d-.0040720468*i,p=1.9779984951*n-2.428592205*d+.4505937099*i,u=.0259040371*n+.7827717662*d-.808675766*i,c=Math.round(100*l*100)/100,M=Math.round(100*p)/100,m=Math.round(100*u)/100;return e<1?`oklab(${c}% ${M} ${m} / ${e})`:`oklab(${c}% ${M} ${m})`}},oklch:{detect:t=>/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=e*Math.cos(r*Math.PI/180),n=e*Math.sin(r*Math.PI/180),d=s+.3963377774*h+.2158037573*n,i=s-.1055613458*h-.0638541728*n,l=s-.0894841775*h-1.291485548*n,p=4.0767416621*d-3.3077115913*i+.2309699292*l,u=-1.2684380046*d+2.6097574011*i-.3413193965*l,c=-.0041960863*d-.7034186147*i+1.707614701*l,M=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055;const g=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,M))),g:Math.round(255*Math.max(0,Math.min(1,m))),b:Math.round(255*Math.max(0,Math.min(1,$))),a:o,hasAlpha:g}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(r,1/3),d=Math.pow(o,1/3),i=Math.pow(h,1/3),l=.2104542553*n+.793617785*d-.0040720468*i,p=1.9779984951*n-2.428592205*d+.4505937099*i,u=.0259040371*n+.7827717662*d-.808675766*i,c=Math.sqrt(p*p+u*u);let M=180*Math.atan2(u,p)/Math.PI;M<0&&(M+=360);const m=Math.round(100*l*100)/100,$=Math.round(100*c)/100,g=Math.round(100*M)/100;return e<1?`oklch(${m}% ${$} ${g} / ${e})`:`oklch(${m}% ${$} ${g})`}}}}window.customElements.define("k-color-picker",ColorPicker);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=ThemeSwitcher.getCurrentTheme()}handleClick=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")};handleStorageChange=
|
|
1
|
+
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=ThemeSwitcher.getCurrentTheme()}handleClick=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")};handleStorageChange=e=>{"theme"===e.key&&(this.currentTheme=e.newValue||"auto",document.documentElement.setAttribute("theme",this.currentTheme))};connectedCallback(){super.connectedCallback(),window.addEventListener("storage",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("storage",this.handleStorageChange)}static styles=css`
|
|
2
2
|
:host {
|
|
3
3
|
--padding: var(--spacer);
|
|
4
4
|
display: flex;
|
|
@@ -15,27 +15,30 @@
|
|
|
15
15
|
|
|
16
16
|
<main>
|
|
17
17
|
<h1>ColorPicker Component</h1>
|
|
18
|
-
<p>The ColorPicker component provides a comprehensive color selection interface that supports all modern CSS color
|
|
18
|
+
<p>The ColorPicker component provides a comprehensive color selection interface that supports all modern CSS color
|
|
19
|
+
formats including hex, RGB, HSL, named colors, HWB, Lab, LCH, OKLab, and OKLCH. It features bidirectional color
|
|
20
|
+
format conversion and intelligent alpha transparency handling.</p>
|
|
19
21
|
|
|
20
22
|
<k-accordion persistent-id="toc" class="b r mb">
|
|
21
23
|
<k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
|
|
22
24
|
<k-accordion-panel name="toc-panel">
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
25
|
+
<div class="m pl">
|
|
26
|
+
<h6>Examples</h6>
|
|
27
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
28
|
+
<a href="#colorFormats">Supported Color Formats</a><br />
|
|
29
|
+
<a href="#alphaHandling">Alpha Transparency</a><br />
|
|
30
|
+
<a href="#formatSelection">Format Selection</a><br />
|
|
31
|
+
<a href="#formUsage">Form Integration</a><br />
|
|
32
|
+
<a href="#javascriptUsage">JavaScript Usage</a><br />
|
|
33
|
+
|
|
34
|
+
<h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
35
|
+
<a href="#constructor">Constructor</a><br />
|
|
36
|
+
<a href="#requirements">Requirements</a><br />
|
|
37
|
+
<a href="#properties">Properties</a><br />
|
|
38
|
+
<a href="#methods">Methods</a><br />
|
|
39
|
+
<a href="#staticMembers">Static Members</a><br />
|
|
40
|
+
</div>
|
|
41
|
+
</k-accordion-panel>
|
|
39
42
|
</k-accordion>
|
|
40
43
|
|
|
41
44
|
<h2 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h2>
|
|
@@ -200,7 +203,8 @@
|
|
|
200
203
|
</div>
|
|
201
204
|
|
|
202
205
|
<h2 id="alphaHandling"><a href="#alphaHandling" class="no-link">Alpha Transparency</a></h2>
|
|
203
|
-
<p>The ColorPicker intelligently handles alpha transparency. When you set a color without alpha, it preserves the
|
|
206
|
+
<p>The ColorPicker intelligently handles alpha transparency. When you set a color without alpha, it preserves the
|
|
207
|
+
existing alpha value. Only when you explicitly provide an alpha value does it update the transparency.</p>
|
|
204
208
|
|
|
205
209
|
<div class="row -mx">
|
|
206
210
|
<div class="col m-span-12 px">
|
|
@@ -228,10 +232,10 @@
|
|
|
228
232
|
</div>
|
|
229
233
|
<script>
|
|
230
234
|
const alphaPicker = document.getElementById('alphaPicker');
|
|
231
|
-
document.getElementById('setOpaque').addEventListener('click', ()=>{
|
|
235
|
+
document.getElementById('setOpaque').addEventListener('click', () => {
|
|
232
236
|
alphaPicker.value = '#0000ff'; // Alpha preserved at 0.5
|
|
233
237
|
});
|
|
234
|
-
document.getElementById('setTransparent').addEventListener('click', ()=>{
|
|
238
|
+
document.getElementById('setTransparent').addEventListener('click', () => {
|
|
235
239
|
alphaPicker.value = 'rgba(0, 255, 0, 0.3)'; // Alpha updated to 0.3
|
|
236
240
|
});
|
|
237
241
|
</script>
|
|
@@ -240,7 +244,8 @@
|
|
|
240
244
|
</div>
|
|
241
245
|
|
|
242
246
|
<h2 id="formatSelection"><a href="#formatSelection" class="no-link">Format Selection</a></h2>
|
|
243
|
-
<p>You can specify the output format using the <code>format</code> attribute. The component will convert colors to
|
|
247
|
+
<p>You can specify the output format using the <code>format</code> attribute. The component will convert colors to
|
|
248
|
+
the specified format when displaying the value.</p>
|
|
244
249
|
|
|
245
250
|
<div class="row -mx">
|
|
246
251
|
<div class="col m-span-12 px">
|
|
@@ -257,32 +262,48 @@
|
|
|
257
262
|
</div>
|
|
258
263
|
</div>
|
|
259
264
|
|
|
265
|
+
<h2 id="formUsage"><a href="#formUsage" class="no-link">Form Integration</a></h2>
|
|
266
|
+
<p>The ColorPicker component is form-associated and works seamlessly with native HTML forms using the
|
|
267
|
+
<code>name</code> attribute. The component uses the ElementInternals API to participate in form submission,
|
|
268
|
+
validation, and reset operations.
|
|
269
|
+
</p>
|
|
270
|
+
<div class="row -mx">
|
|
271
|
+
<div class="col m-span-12 px">
|
|
272
|
+
<k-card label="HTML">
|
|
273
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"colorForm"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"bgColor"</span>></span>Background Color:<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"bgColor"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#3498db"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-color-picker</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"textColor"</span>></span>Text Color:<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"textColor"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"rgb"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#ffffff"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-color-picker</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">form</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"formOutput"</span>></span>Submit the form to see values<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'colorForm'</span>).addEventListener(<span class="hljs-string">'submit'</span>, (e) => {<br /> e.preventDefault();<br /> <span class="hljs-keyword">const</span> formData = <span class="hljs-keyword">new</span> FormData(e.target);<br /> <span class="hljs-keyword">const</span> output = <span class="hljs-built_in">Array</span>.from(formData.entries())<br /> .map(<span class="hljs-function">(<span class="hljs-params">[key, value]</span>) =></span> <span class="hljs-string">`<span class="hljs-subst">${key}</span>: <span class="hljs-subst">${value}</span>`</span>)<br /> .join(<span class="hljs-string">', '</span>);<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'formOutput'</span>).textContent = output;<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
274
|
+
</k-card>
|
|
275
|
+
</div>
|
|
276
|
+
<div class="col m-span-12 px">
|
|
277
|
+
<k-card label="Output">
|
|
278
|
+
<form id="colorForm" class="mb">
|
|
279
|
+
<label for="bgColor">Background Color:</label>
|
|
280
|
+
<k-color-picker name="bgColor" value="#3498db" class="mb"></k-color-picker>
|
|
281
|
+
|
|
282
|
+
<label for="textColor">Text Color:</label>
|
|
283
|
+
<k-color-picker name="textColor" format="rgb" value="#ffffff" class="mb"></k-color-picker>
|
|
284
|
+
|
|
285
|
+
<button type="submit">Submit</button>
|
|
286
|
+
</form>
|
|
287
|
+
<p id="formOutput">Submit the form to see values</p>
|
|
288
|
+
<script>
|
|
289
|
+
document.getElementById('colorForm').addEventListener('submit', (e) => {
|
|
290
|
+
e.preventDefault();
|
|
291
|
+
const formData = new FormData(e.target);
|
|
292
|
+
const output = Array.from(formData.entries())
|
|
293
|
+
.map(([key, value]) => `${key}: ${value}`)
|
|
294
|
+
.join(', ');
|
|
295
|
+
document.getElementById('formOutput').textContent = output;
|
|
296
|
+
});
|
|
297
|
+
</script>
|
|
298
|
+
</k-card>
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
|
|
260
302
|
<h2 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript Usage</a></h2>
|
|
261
303
|
<div class="row -mx">
|
|
262
304
|
<div class="col m-span-12 px">
|
|
263
305
|
<k-card label="HTML">
|
|
264
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"jsPicker"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-color-picker</span>></span>
|
|
265
|
-
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"setColor"</span>></span>Set Color<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
266
|
-
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"getColor"</span>></span>Get Color<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
267
|
-
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"changeFormat"</span>></span>Change Format<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
268
|
-
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"colorValue"</span>></span>Color value will appear here<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
269
|
-
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
|
270
|
-
<span class="hljs-keyword">const</span> picker = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'jsPicker'</span>);
|
|
271
|
-
<span class="hljs-keyword">const</span> valueDisplay = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'colorValue'</span>);
|
|
272
|
-
|
|
273
|
-
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'setColor'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=>{
|
|
274
|
-
picker.value = <span class="hljs-string">'oklch(70% 0.2 180)'</span>;
|
|
275
|
-
});
|
|
276
|
-
|
|
277
|
-
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'getColor'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=>{
|
|
278
|
-
valueDisplay.textContent = <span class="hljs-string">`Current color: <span class="hljs-subst">${picker.value}</span>`</span>;
|
|
279
|
-
});
|
|
280
|
-
|
|
281
|
-
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'changeFormat'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=>{
|
|
282
|
-
picker.format = <span class="hljs-string">'hex'</span>;
|
|
283
|
-
valueDisplay.textContent = <span class="hljs-string">`Switched to hex format: <span class="hljs-subst">${picker.value}</span>`</span>;
|
|
284
|
-
});
|
|
285
|
-
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
306
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"jsPicker"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-color-picker</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"setColor"</span>></span>Set Color<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"getColor"</span>></span>Get Color<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"changeFormat"</span>></span>Change Format<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"colorValue"</span>></span>Color value will appear here<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"><br /> <span class="hljs-keyword">const</span> picker = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'jsPicker'</span>);<br /> <span class="hljs-keyword">const</span> valueDisplay = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'colorValue'</span>);<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'setColor'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=>{<br /> picker.value = <span class="hljs-string">'oklch(70% 0.2 180)'</span>;<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'getColor'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=>{<br /> valueDisplay.textContent = <span class="hljs-string">`Current color: <span class="hljs-subst">${picker.value}</span>`</span>;<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'changeFormat'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=>{<br /> picker.format = <span class="hljs-string">'hex'</span>;<br /> valueDisplay.textContent = <span class="hljs-string">`Switched to hex format: <span class="hljs-subst">${picker.value}</span>`</span>;<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
286
307
|
</k-card>
|
|
287
308
|
</div>
|
|
288
309
|
<div class="col m-span-12 px">
|
|
@@ -297,16 +318,16 @@
|
|
|
297
318
|
<script>
|
|
298
319
|
const jsPicker = document.getElementById('jsPicker');
|
|
299
320
|
const valueDisplay = document.getElementById('colorValue');
|
|
300
|
-
|
|
301
|
-
document.getElementById('setColor').addEventListener('click', ()=>{
|
|
321
|
+
|
|
322
|
+
document.getElementById('setColor').addEventListener('click', () => {
|
|
302
323
|
jsPicker.value = 'oklch(70% 0.2 180)';
|
|
303
324
|
});
|
|
304
|
-
|
|
305
|
-
document.getElementById('getColor').addEventListener('click', ()=>{
|
|
325
|
+
|
|
326
|
+
document.getElementById('getColor').addEventListener('click', () => {
|
|
306
327
|
valueDisplay.textContent = `Current color: ${jsPicker.value}`;
|
|
307
328
|
});
|
|
308
|
-
|
|
309
|
-
document.getElementById('changeFormat').addEventListener('click', ()=>{
|
|
329
|
+
|
|
330
|
+
document.getElementById('changeFormat').addEventListener('click', () => {
|
|
310
331
|
jsPicker.format = 'hex';
|
|
311
332
|
valueDisplay.textContent = `Switched to hex format: ${jsPicker.value}`;
|
|
312
333
|
});
|
|
@@ -329,11 +350,20 @@
|
|
|
329
350
|
</ul>
|
|
330
351
|
|
|
331
352
|
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
353
|
+
<h5><code>name<i>: string</i></code></h5>
|
|
354
|
+
<p>The name of the form control, used for form submission. When set, the component will participate in form data
|
|
355
|
+
collection. Syncs to <code>name</code> attribute.</p>
|
|
356
|
+
|
|
332
357
|
<h5><code>format<i>: string</i></code></h5>
|
|
333
|
-
<p>The output color format. Supported values: <code>'hex'</code>, <code>'rgba'</code>, <code>'hsla'</code>,
|
|
358
|
+
<p>The output color format. Supported values: <code>'hex'</code>, <code>'rgba'</code>, <code>'hsla'</code>,
|
|
359
|
+
<code>'named'</code>, <code>'hwb'</code>, <code>'lab'</code>, <code>'lch'</code>, <code>'oklab'</code>,
|
|
360
|
+
<code>'oklch'</code>. Default is <code>'hex'</code>. Syncs to <code>format</code> attribute.
|
|
361
|
+
</p>
|
|
334
362
|
|
|
335
363
|
<h5><code>value<i>: string</i></code></h5>
|
|
336
|
-
<p>The current color value as a string in the current format. Accepts any supported color format and converts it
|
|
364
|
+
<p>The current color value as a string in the current format. Accepts any supported color format and converts it
|
|
365
|
+
internally to RGB. When setting a color without alpha, the existing alpha value is preserved. Only colors with
|
|
366
|
+
explicit alpha values will update the transparency. Syncs to <code>value</code> attribute.</p>
|
|
337
367
|
|
|
338
368
|
<h5><code>red<i>: number</i></code></h5>
|
|
339
369
|
<p>The red component of the color (0-255).</p>
|
|
@@ -356,7 +386,9 @@
|
|
|
356
386
|
<p>An object containing 147 named CSS colors mapped to their hex values.</p>
|
|
357
387
|
|
|
358
388
|
<h5><code>formats<i>: object</i></code></h5>
|
|
359
|
-
<p>An object containing format definitions for all supported color formats. Each format has <code>detect()</code>,
|
|
389
|
+
<p>An object containing format definitions for all supported color formats. Each format has <code>detect()</code>,
|
|
390
|
+
<code>parse()</code>, and <code>toString()</code> methods.
|
|
391
|
+
</p>
|
|
360
392
|
|
|
361
393
|
</main>
|
|
362
394
|
<div style="height:33vh"></div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class ColorPicker extends ShadowComponent{static properties={format:{type:String,reflect:!0,attribute:"format"},value:{type:String,reflect:!0,attribute:"value"},red:{type:Number},green:{type:Number},blue:{type:Number},alpha:{type:Number}};constructor(){super(),this.format="hex",this.red=0,this.green=0,this.blue=0,this.alpha=1}updated(t){super.updated(t),t.has("format")&&this.requestUpdate()}get value(){if(void 0===this.red||void 0===this.green||void 0===this.blue){const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(0,0,0,1):"#000000"}const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(this.red,this.green,this.blue,this.alpha||1):"#000000"}set value(t){if(t&&"string"==typeof t){for(const[a,s]of Object.entries(this.constructor.formats))if(s.detect(t)){const a=s.parse(t);if(a)return this.red=a.r,this.green=a.g,this.blue=a.b,
|
|
1
|
+
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class ColorPicker extends ShadowComponent{static formAssociated=!0;static properties={name:{type:String,reflect:!0,attribute:"name"},format:{type:String,reflect:!0,attribute:"format"},value:{type:String,reflect:!0,attribute:"value"},red:{type:Number},green:{type:Number},blue:{type:Number},alpha:{type:Number}};constructor(){super(),this.internals=this.attachInternals(),this.format="hex",this.red=0,this.green=0,this.blue=0,this.alpha=1}connectedCallback(){super.connectedCallback(),this.originalHadFormat=this.hasAttribute("format"),this.originalValue=this.getAttribute("value")}firstUpdated(t){if(super.firstUpdated(t),this.originalValue&&!this.originalHadFormat)for(const[t,a]of Object.entries(this.constructor.formats))if(a.detect(this.originalValue)){this.format=t;break}}updated(t){super.updated(t),t.has("format")&&this.requestUpdate(),(t.has("red")||t.has("green")||t.has("blue")||t.has("alpha")||t.has("format"))&&this.updateFormValue()}get value(){if(void 0===this.red||void 0===this.green||void 0===this.blue){const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(0,0,0,1):"#000000"}const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(this.red,this.green,this.blue,this.alpha||1):"#000000"}set value(t){if(t&&"string"==typeof t){for(const[a,s]of Object.entries(this.constructor.formats))if(s.detect(t)){const a=s.parse(t);if(a)return this.red=a.r,this.green=a.g,this.blue=a.b,a.hasAlpha&&(this.alpha=a.a),void this.updateFormValue()}this.red=0,this.green=0,this.blue=0,this.alpha=1,this.updateFormValue()}}updateFormValue(){const t=this.value;this.internals.setFormValue(t)}onColorInputChange(t){const a=this.constructor.formats.hex.parse(t.target.value);a&&(this.red=a.r,this.green=a.g,this.blue=a.b,this.alpha=1)}onTextInputChange(t){this.value=t.target.value}render(){return html`
|
|
2
2
|
<div id="container">
|
|
3
3
|
<select
|
|
4
4
|
id="format"
|
|
@@ -11,30 +11,35 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
|
|
|
11
11
|
value="${this.value}"
|
|
12
12
|
@change=${this.onTextInputChange}
|
|
13
13
|
/>
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
<div id="color-wrapper">
|
|
15
|
+
<input
|
|
16
|
+
id="color"
|
|
17
|
+
type="color"
|
|
18
|
+
value="${this.constructor.formats.hex.toString(this.red||0,this.green||0,this.blue||0,1)}"
|
|
19
|
+
@change=${this.onColorInputChange}
|
|
20
|
+
/>
|
|
21
|
+
</div>
|
|
20
22
|
</div>
|
|
21
23
|
`}static styles=css`
|
|
22
24
|
:host {
|
|
23
25
|
display: block;
|
|
24
26
|
}
|
|
25
27
|
#container {
|
|
26
|
-
display:
|
|
28
|
+
display: grid;
|
|
29
|
+
grid-template-columns: 7rem 1fr auto;
|
|
27
30
|
align-items: stretch;
|
|
28
31
|
}
|
|
29
32
|
#format {
|
|
30
|
-
|
|
33
|
+
flex-shrink: 0;
|
|
31
34
|
}
|
|
32
35
|
#text {
|
|
33
|
-
|
|
36
|
+
min-width: 0;
|
|
37
|
+
}
|
|
38
|
+
#color-wrapper {
|
|
39
|
+
display: contents;
|
|
34
40
|
}
|
|
35
41
|
#color {
|
|
36
|
-
|
|
37
|
-
height:
|
|
38
|
-
align-self: stretch !important;
|
|
42
|
+
aspect-ratio: 1;
|
|
43
|
+
height: 100%;
|
|
39
44
|
}
|
|
40
|
-
`;static formats={hex:{detect:t=>/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/.test(t),parse:t=>{let a,s,r
|
|
45
|
+
`;static formats={hex:{detect:t=>/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/.test(t),parse:t=>{let a,s,e,r=t.slice(1),o=r.length,h=1,n=!1;return 3===o||4===o?(a=parseInt(r[0]+r[0],16),s=parseInt(r[1]+r[1],16),e=parseInt(r[2]+r[2],16),4===o&&(h=parseInt(r[3]+r[3],16)/255,n=!0)):6!==o&&8!==o||(a=parseInt(r.slice(0,2),16),s=parseInt(r.slice(2,4),16),e=parseInt(r.slice(4,6),16),8===o&&(h=parseInt(r.slice(6,8),16)/255,n=!0)),{r:a,g:s,b:e,a:h,hasAlpha:n}},toString:(t,a,s,e)=>{let r=((t=Math.round(t))<<16|(a=Math.round(a))<<8|(s=Math.round(s))).toString(16).padStart(6,"0");if(e<1){r+=Math.round(255*e).toString(16).padStart(2,"0")}return"#"+r}},rgb:{detect:t=>/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;return{r:parseInt(a[1],10),g:parseInt(a[2],10),b:parseInt(a[3],10),a:a[4]?parseFloat(a[4]):1,hasAlpha:!!a[4]}},toString:(t,a,s,e)=>(t=Math.round(t),a=Math.round(a),s=Math.round(s),e<1?`rgba(${t}, ${a}, ${s}, ${e})`:`rgb(${t}, ${a}, ${s})`)},hsl:{detect:t=>/^hsla?\(\s*\d+(?:\.\d+)?\s*,\s*\d+(?:\.\d+)?%\s*,\s*\d+(?:\.\d+)?%\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;let s=parseFloat(a[1])/360,e=parseFloat(a[2])/100,r=parseFloat(a[3])/100,o=a[4]?parseFloat(a[4]):1;const h=!!a[4];let n,d,i;if(0===e)n=d=i=r;else{const t=(t,a,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<1/6?t+6*(a-t)*s:s<.5?a:s<2/3?t+(a-t)*(2/3-s)*6:t),a=r<.5?r*(1+e):r+e-r*e,o=2*r-a;n=t(o,a,s+1/3),d=t(o,a,s),i=t(o,a,s-1/3)}return{r:Math.round(255*n),g:Math.round(255*d),b:Math.round(255*i),a:o,hasAlpha:h}},toString:(t,a,s,e)=>{t/=255,a/=255,s/=255;const r=Math.max(t,a,s),o=Math.min(t,a,s);let h,n,d=(r+o)/2;if(r===o)h=n=0;else{const e=r-o;switch(n=d>.5?e/(2-r-o):e/(r+o),r){case t:h=(a-s)/e+(a<s?6:0);break;case a:h=(s-t)/e+2;break;case s:h=(t-a)/e+4}h/=6}return h=Math.round(360*h),n=Math.round(100*n),d=Math.round(100*d),e<1?`hsla(${h}, ${n}%, ${d}%, ${e})`:`hsl(${h}, ${n}%, ${d}%)`}},hwb:{detect:t=>/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s,e,r,o=parseFloat(a[1]),h=parseFloat(a[2])/100,n=parseFloat(a[3])/100,d=a[4]?parseFloat(a[4]):1,i=1-h-n;if(i>0){let t=o/360,a=1-Math.abs(6*t%2-1),n=h+i*(1-a),d=h+i*a;t<1/6?(s=h+i,e=d,r=h):t<2/6?(s=n,e=h+i,r=h):t<.5?(s=h,e=h+i,r=d):t<4/6?(s=h,e=n,r=h+i):t<5/6?(s=d,e=h,r=h+i):(s=h+i,e=h,r=n)}else s=e=r=h;const l=!!a[4];return{r:Math.round(255*s),g:Math.round(255*e),b:Math.round(255*r),a:d,hasAlpha:l}},toString:(t,a,s,e)=>{t/=255,a/=255,s/=255;const r=Math.max(t,a,s),o=Math.min(t,a,s),h=r-o;let n=0;if(0!==h){switch(r){case t:n=(a-s)/h%6;break;case a:n=(s-t)/h+2;break;case s:n=(t-a)/h+4}n=Math.round(60*n),n<0&&(n+=360)}const d=Math.round(100*o),i=Math.round(100*(1-r));return e<1?`hwb(${n} ${d}% ${i}% / ${e})`:`hwb(${n} ${d}% ${i}%)`}},lab:{detect:t=>/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*s+16)/116,n=h+e/500,d=h-r/200,i=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),l=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*i-1.5371385*l-.4985314*p,c=-.969266*i+1.8760108*l+.041556*p,M=.0556434*i-.2040259*l+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055,g=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055;const f=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:f}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=r>.008856?Math.pow(r,1/3):7.787*r+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,i=h>.008856?Math.pow(h,1/3):7.787*h+16/116,l=Math.round(100*(116*d-16))/100,p=Math.round(500*(n-d)*100)/100,u=Math.round(200*(d-i)*100)/100;return e<1?`lab(${l}% ${p} ${u} / ${e})`:`lab(${l}% ${p} ${u})`}},lch:{detect:t=>/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1]),e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*(s/100)+16)/116,n=h+e*Math.cos(r*Math.PI/180)/500,d=h-e*Math.sin(r*Math.PI/180)/200,i=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),l=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*i-1.5371385*l-.4985314*p,c=-.969266*i+1.8760108*l+.041556*p,M=.0556434*i-.2040259*l+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055,g=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055;const f=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:f}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=r>.008856?Math.pow(r,1/3):7.787*r+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,i=(116*d-16)/100,l=500*(n-d),p=200*(d-(h>.008856?Math.pow(h,1/3):7.787*h+16/116)),u=Math.sqrt(l*l+p*p);let c=180*Math.atan2(p,l)/Math.PI;c<0&&(c+=360);const M=Math.round(100*i*100)/100,m=Math.round(100*u)/100,$=Math.round(100*c)/100;return e<1?`lch(${M}% ${m} ${$} / ${e})`:`lch(${M}% ${m} ${$})`}},oklab:{detect:t=>/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=s+.3963377774*e+.2158037573*r,n=s-.1055613458*e-.0638541728*r,d=s-.0894841775*e-1.291485548*r,i=4.0767416621*h-3.3077115913*n+.2309699292*d,l=-1.2684380046*h+2.6097574011*n-.3413193965*d,p=-.0041960863*h-.7034186147*n+1.707614701*d,u=i<=.0031308?12.92*i:1.055*Math.pow(i,1/2.4)-.055,c=l<=.0031308?12.92*l:1.055*Math.pow(l,1/2.4)-.055,M=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055;const m=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,u))),g:Math.round(255*Math.max(0,Math.min(1,c))),b:Math.round(255*Math.max(0,Math.min(1,M))),a:o,hasAlpha:m}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(r,1/3),d=Math.pow(o,1/3),i=Math.pow(h,1/3),l=.2104542553*n+.793617785*d-.0040720468*i,p=1.9779984951*n-2.428592205*d+.4505937099*i,u=.0259040371*n+.7827717662*d-.808675766*i,c=Math.round(100*l*100)/100,M=Math.round(100*p)/100,m=Math.round(100*u)/100;return e<1?`oklab(${c}% ${M} ${m} / ${e})`:`oklab(${c}% ${M} ${m})`}},oklch:{detect:t=>/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,e=parseFloat(a[2]),r=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=e*Math.cos(r*Math.PI/180),n=e*Math.sin(r*Math.PI/180),d=s+.3963377774*h+.2158037573*n,i=s-.1055613458*h-.0638541728*n,l=s-.0894841775*h-1.291485548*n,p=4.0767416621*d-3.3077115913*i+.2309699292*l,u=-1.2684380046*d+2.6097574011*i-.3413193965*l,c=-.0041960863*d-.7034186147*i+1.707614701*l,M=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055;const g=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,M))),g:Math.round(255*Math.max(0,Math.min(1,m))),b:Math.round(255*Math.max(0,Math.min(1,$))),a:o,hasAlpha:g}},toString:(t,a,s,e)=>{a/=255,s/=255;const r=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(r,1/3),d=Math.pow(o,1/3),i=Math.pow(h,1/3),l=.2104542553*n+.793617785*d-.0040720468*i,p=1.9779984951*n-2.428592205*d+.4505937099*i,u=.0259040371*n+.7827717662*d-.808675766*i,c=Math.sqrt(p*p+u*u);let M=180*Math.atan2(u,p)/Math.PI;M<0&&(M+=360);const m=Math.round(100*l*100)/100,$=Math.round(100*c)/100,g=Math.round(100*M)/100;return e<1?`oklch(${m}% ${$} ${g} / ${e})`:`oklch(${m}% ${$} ${g})`}}}}window.customElements.define("k-color-picker",ColorPicker);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=ThemeSwitcher.getCurrentTheme()}handleClick=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")};handleStorageChange=
|
|
1
|
+
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=ThemeSwitcher.getCurrentTheme()}handleClick=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")};handleStorageChange=e=>{"theme"===e.key&&(this.currentTheme=e.newValue||"auto",document.documentElement.setAttribute("theme",this.currentTheme))};connectedCallback(){super.connectedCallback(),window.addEventListener("storage",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("storage",this.handleStorageChange)}static styles=css`
|
|
2
2
|
:host {
|
|
3
3
|
--padding: var(--spacer);
|
|
4
4
|
display: flex;
|
package/package.json
CHANGED
|
@@ -2,8 +2,15 @@ import ShadowComponent from './ShadowComponent.js';
|
|
|
2
2
|
import { html, css } from '../lit-all.min.js';
|
|
3
3
|
|
|
4
4
|
export default class ColorPicker extends ShadowComponent {
|
|
5
|
+
static formAssociated = true;
|
|
6
|
+
|
|
5
7
|
/* Properties */
|
|
6
8
|
static properties = {
|
|
9
|
+
name: {
|
|
10
|
+
type: String,
|
|
11
|
+
reflect: true,
|
|
12
|
+
attribute: 'name'
|
|
13
|
+
},
|
|
7
14
|
format: {
|
|
8
15
|
type: String,
|
|
9
16
|
reflect: true,
|
|
@@ -29,6 +36,7 @@ export default class ColorPicker extends ShadowComponent {
|
|
|
29
36
|
};
|
|
30
37
|
constructor(){
|
|
31
38
|
super();
|
|
39
|
+
this.internals = this.attachInternals();
|
|
32
40
|
this.format = "hex";
|
|
33
41
|
this.red = 0;
|
|
34
42
|
this.green = 0;
|
|
@@ -37,11 +45,37 @@ export default class ColorPicker extends ShadowComponent {
|
|
|
37
45
|
}
|
|
38
46
|
|
|
39
47
|
/* Lifecycle */
|
|
48
|
+
connectedCallback(){
|
|
49
|
+
super.connectedCallback();
|
|
50
|
+
// Capture original attributes BEFORE Lit processes them
|
|
51
|
+
this.originalHadFormat = this.hasAttribute('format');
|
|
52
|
+
this.originalValue = this.getAttribute('value');
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
firstUpdated(changedProperties){
|
|
56
|
+
super.firstUpdated(changedProperties);
|
|
57
|
+
|
|
58
|
+
// If value was set but format wasn't, auto-detect
|
|
59
|
+
if(this.originalValue && !this.originalHadFormat){
|
|
60
|
+
for(const [formatName, format] of Object.entries(this.constructor.formats)){
|
|
61
|
+
if(format.detect(this.originalValue)){
|
|
62
|
+
this.format = formatName;
|
|
63
|
+
break;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
40
69
|
updated(changedProperties){
|
|
41
70
|
super.updated(changedProperties);
|
|
42
|
-
|
|
71
|
+
|
|
72
|
+
if(changedProperties.has('format')){
|
|
43
73
|
this.requestUpdate();
|
|
44
74
|
}
|
|
75
|
+
|
|
76
|
+
if(changedProperties.has('red') || changedProperties.has('green') || changedProperties.has('blue') || changedProperties.has('alpha') || changedProperties.has('format')){
|
|
77
|
+
this.updateFormValue();
|
|
78
|
+
}
|
|
45
79
|
}
|
|
46
80
|
|
|
47
81
|
/* Members */
|
|
@@ -75,6 +109,7 @@ export default class ColorPicker extends ShadowComponent {
|
|
|
75
109
|
if (parsed.hasAlpha) {
|
|
76
110
|
this.alpha = parsed.a;
|
|
77
111
|
}
|
|
112
|
+
this.updateFormValue();
|
|
78
113
|
return;
|
|
79
114
|
}
|
|
80
115
|
}
|
|
@@ -85,6 +120,12 @@ export default class ColorPicker extends ShadowComponent {
|
|
|
85
120
|
this.green = 0;
|
|
86
121
|
this.blue = 0;
|
|
87
122
|
this.alpha = 1;
|
|
123
|
+
this.updateFormValue();
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
updateFormValue(){
|
|
127
|
+
const formValue = this.value;
|
|
128
|
+
this.internals.setFormValue(formValue);
|
|
88
129
|
}
|
|
89
130
|
|
|
90
131
|
/* Methods */
|
|
@@ -118,12 +159,14 @@ export default class ColorPicker extends ShadowComponent {
|
|
|
118
159
|
value="${this.value}"
|
|
119
160
|
@change=${this.onTextInputChange}
|
|
120
161
|
/>
|
|
121
|
-
<
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
162
|
+
<div id="color-wrapper">
|
|
163
|
+
<input
|
|
164
|
+
id="color"
|
|
165
|
+
type="color"
|
|
166
|
+
value="${this.constructor.formats.hex.toString(this.red || 0, this.green || 0, this.blue || 0, 1)}"
|
|
167
|
+
@change=${this.onColorInputChange}
|
|
168
|
+
/>
|
|
169
|
+
</div>
|
|
127
170
|
</div>
|
|
128
171
|
`;
|
|
129
172
|
}
|
|
@@ -132,19 +175,22 @@ export default class ColorPicker extends ShadowComponent {
|
|
|
132
175
|
display: block;
|
|
133
176
|
}
|
|
134
177
|
#container {
|
|
135
|
-
display:
|
|
178
|
+
display: grid;
|
|
179
|
+
grid-template-columns: 7rem 1fr auto;
|
|
136
180
|
align-items: stretch;
|
|
137
181
|
}
|
|
138
182
|
#format {
|
|
139
|
-
|
|
183
|
+
flex-shrink: 0;
|
|
140
184
|
}
|
|
141
185
|
#text {
|
|
142
|
-
|
|
186
|
+
min-width: 0;
|
|
187
|
+
}
|
|
188
|
+
#color-wrapper {
|
|
189
|
+
display: contents;
|
|
143
190
|
}
|
|
144
191
|
#color {
|
|
145
|
-
|
|
146
|
-
height:
|
|
147
|
-
align-self: stretch !important;
|
|
192
|
+
aspect-ratio: 1;
|
|
193
|
+
height: 100%;
|
|
148
194
|
}
|
|
149
195
|
`;
|
|
150
196
|
|
|
@@ -187,7 +233,7 @@ export default class ColorPicker extends ShadowComponent {
|
|
|
187
233
|
return '#' + hex;
|
|
188
234
|
}
|
|
189
235
|
},
|
|
190
|
-
|
|
236
|
+
rgb: {
|
|
191
237
|
detect: (value) => /^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(value),
|
|
192
238
|
parse: (value) => {
|
|
193
239
|
const match = value.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);
|
|
@@ -210,7 +256,7 @@ export default class ColorPicker extends ShadowComponent {
|
|
|
210
256
|
}
|
|
211
257
|
}
|
|
212
258
|
},
|
|
213
|
-
|
|
259
|
+
hsl: {
|
|
214
260
|
detect: (value) => /^hsla?\(\s*\d+(?:\.\d+)?\s*,\s*\d+(?:\.\d+)?%\s*,\s*\d+(?:\.\d+)?%\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(value),
|
|
215
261
|
parse: (value) => {
|
|
216
262
|
const match = value.match(/^hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*(?:,\s*([\d.]+))?\s*\)$/);
|
|
@@ -23,8 +23,11 @@ export default class ThemeSwitcher extends ShadowComponent {
|
|
|
23
23
|
if(current === 'dark') ThemeSwitcher.setTheme('auto');
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
handleStorageChange = () => {
|
|
27
|
-
|
|
26
|
+
handleStorageChange = (event) => {
|
|
27
|
+
if (event.key === 'theme') {
|
|
28
|
+
this.currentTheme = event.newValue || 'auto';
|
|
29
|
+
document.documentElement.setAttribute('theme', this.currentTheme);
|
|
30
|
+
}
|
|
28
31
|
}
|
|
29
32
|
|
|
30
33
|
/*
|