@spectrum-web-components/reactive-controllers/src/ColorController.js

ReactiveControllers for powering common UI patterns

"use strict";import v from"colorjs.io";export class ColorController{constructor(s,{manageAs:r}={}){this._color=new v("hsv",[0,100,100],1);this.host=s,this.manageAs=r}get color(){return this._color}validateColorString(s){var C,w,$,O;const r={spaceId:null,coords:[0,0,0],isValid:!1,alpha:1},a=[/rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)/i,/rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/i,/^rgba\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(0|0?\.\d+|1)\s*$/i,/^rgb\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*$/i,/^rgba\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(\d*\.?\d+)\s*\)$/i,/^rgb\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*\)$/i,/rgb\(\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*\)/i,/rgba\(\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(\d*\.?\d+)\s*\)/i],o=[/hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,/hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,/^hsla\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,/^hsl\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,/^hsla\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,/^hsl\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i],t=[/hsva\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,/hsv\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,/^hsva\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,/^hsv\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,/^hsva\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,/^hsv\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i],n=[/^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})?$/,/^#([A-Fa-f0-9]{3})([A-Fa-f0-9]{1})?$/],e=(C=a.find(i=>i.test(s)))==null?void 0:C.exec(s),l=(w=o.find(i=>i.test(s)))==null?void 0:w.exec(s),b=($=t.find(i=>i.test(s)))==null?void 0:$.exec(s),_=(O=n.find(i=>i.test(s)))==null?void 0:O.exec(s);if(e){const[,i,y,u,g]=e.filter(m=>typeof m=="string"),p=g===void 0?1:Number(g),h=m=>m.includes("%")?Number(m.replace("%",""))/100:Number(m)/255,c=h(i),d=h(y),f=h(u);r.spaceId="srgb",r.coords=[c,d,f],r.alpha=p,r.isValid=c>=0&&c<=1&&d>=0&&d<=1&&f>=0&&f<=1&&p>=0&&p<=1}else if(l){const[,i,y,u,g]=l,p=[i,y,u,g===void 0?"1":g].map(m=>Number(m.replace(/[^\d.]/g,""))),[h,c,d,f]=p;r.spaceId="hsl",r.coords=[h,c,d],r.alpha=f,r.isValid=h>=0&&h<=360&&c>=0&&c<=100&&d>=0&&d<=100&&f>=0&&f<=1}else if(b){const[,i,y,u,g]=b,p=[i,y,u,g===void 0?"1":g].map(m=>Number(m.replace(/[^\d.]/g,""))),[h,c,d,f]=p;r.spaceId="hsv",r.coords=[h,c,d],r.alpha=f,r.isValid=h>=0&&h<=360&&c>=0&&c<=100&&d>=0&&d<=100&&f>=0&&f<=1}else if(_){const[,i,y]=_,u=d=>(d.length===1&&(d=d+d),parseInt(d,16)/255);let g,p,h;i.length===3?(g=u(i.substring(0,1)),p=u(i.substring(1,2)),h=u(i.substring(2,3))):(g=u(i.substring(0,2)),p=u(i.substring(2,4)),h=u(i.substring(4,6)));const c=y?u(y):1;r.spaceId="srgb",r.coords=[g,p,h],r.alpha=c,r.isValid=g>=0&&g<=1&&p>=0&&p<=1&&h>=0&&h<=1&&c>=0&&c<=1}return r}get colorOrigin(){return this._colorOrigin}set colorOrigin(s){this._colorOrigin=s}_getHexString(s,r){const{r:a,g:o,b:t}=this._color.to("srgb").srgb,n=this._color.alpha,e=Math.round(a*255).toString(16).padStart(2,"0"),l=Math.round(o*255).toString(16).padStart(2,"0"),b=Math.round(t*255).toString(16).padStart(2,"0"),_=Math.round(n*255).toString(16).padStart(2,"0");return`${s?"#":""}${e}${l}${b}${r?_:""}`}set color(s){this._colorOrigin=s;let r;if(typeof s=="string"){const t=this.validateColorString(s);if(t.isValid){const[n,e,l]=t.coords;r=new v(`${t.spaceId}`,[n,e,l],t.alpha)}else try{v.parse(s)}catch(n){try{r=new v(`#${s}`)}catch(e){return}}}else if(s instanceof v)r=s;else if(!Array.isArray(s)){const{h:t,s:n,l:e,v:l,r:b,g:_,b:C,a:w}=s;if(typeof t!="undefined"&&typeof n!="undefined"){const $=e!=null?e:l;r=new v(typeof e!="undefined"?"hsl":"hsv",[parseFloat(t),typeof n!="string"?n*100:parseFloat(n),typeof $!="string"?$*100:parseFloat($)],parseFloat(w||"1"))}else typeof b!="undefined"&&typeof _!="undefined"&&typeof C!="undefined"&&(r=new v("srgb",[parseFloat(b)/255,parseFloat(_)/255,parseFloat(C)/255],parseFloat(w||"1")))}r||(r=new v(s)),this.manageAs?this._color=r.to(this.manageAs):this._color=r,this.host.requestUpdate()}get colorValue(){if(typeof this._colorOrigin=="string"){let a="";switch(this._colorOrigin.startsWith("#")?a="hex string":this._colorOrigin.startsWith("rgb")?a="rgb":this._colorOrigin.startsWith("hsl")?a="hsl":this._colorOrigin.startsWith("hsv")?a="hsv":a="hex",a){case"hsv":{const o=this._colorOrigin[3]==="a",{h:t,s:n,v:e}=this._color.to("hsv").hsv,l=this._color.alpha;return`hsv${o?"a":""}(${Math.round(t)}, ${Math.round(n)}%, ${Math.round(e)}%${o?`, ${l}`:""})`}case"hsl":{const o=this._colorOrigin[3]==="a",{h:t,s:n,l:e}=this._color.to("hsl").hsl,l=this._color.alpha;return`hsl${o?"a":""}(${Math.round(t)}, ${Math.round(n)}%, ${Math.round(e)}%${o?`, ${l}`:""})`}case"hex string":{const o=this._colorOrigin.length===9||this._colorOrigin.length===5;return this._getHexString(!0,o)}case"hex":{const o=this._colorOrigin.length===8||this._colorOrigin.length===4;return this._getHexString(!1,o)}default:{const{r:o,g:t,b:n}=this._color.to("srgb").srgb,e=this._colorOrigin[3]==="a",l=this._color.alpha;return this._colorOrigin.search("%")>-1?`rgb${e?"a":""}(${Math.round(o*100)}%, ${Math.round(t*100)}%, ${Math.round(n*100)}%${e?`,${Math.round(l*100)}%`:""})`:`rgb${e?"a":""}(${Math.round(o*255)}, ${Math.round(t*255)}, ${Math.round(n*255)}${e?`, ${l}`:""})`}}}let s;if(this._colorOrigin)try{({spaceId:s}=new v(this._colorOrigin))}catch(a){const{h:o,s:t,l:n,v:e,r:l,g:b,b:_}=this._colorOrigin;typeof o!="undefined"&&typeof t!="undefined"&&typeof n!="undefined"?s="hsl":typeof o!="undefined"&&typeof t!="undefined"&&typeof e!="undefined"?s="hsv":typeof l!="undefined"&&typeof b!="undefined"&&typeof _!="undefined"&&(s="srgb")}else({spaceId:s}=this.color);switch(s){case"hsv":{const{h:a,s:o,v:t}=this._color.to("hsv").hsv;return{h:a,s:o/100,v:t/100,a:this._color.alpha}}case"hsl":{const{h:a,s:o,l:t}=this._color.to("hsl").hsl;return{h:a,s:o/100,l:t/100,a:this._color.alpha}}case"srgb":{const{r:a,g:o,b:t}=this._color.to("srgb").srgb;return this._colorOrigin&&typeof this._colorOrigin.r=="string"&&this._colorOrigin.r.search("%")?{r:`${Math.round(a*255)}%`,g:`${Math.round(o*255)}%`,b:`${Math.round(t*255)}%`,a:this._color.alpha}:{r:Math.round(a*255),g:Math.round(o*255),b:Math.round(t*255),a:this._color.alpha}}}return this._color}get hue(){return Number(this._color.to("hsl").hsl.h)}set hue(s){this._color.set("h",s),this.host.requestUpdate()}getColor(s){if(typeof s=="string"&&!["srgb","hsva","hsv","hsl","hsla"].includes(s))throw new Error("not a valid format");return this._color.to(s)}getHslString(){return this._color.to("hsl").toString()}savePreviousColor(){this._previousColor=this._color.clone()}restorePreviousColor(){this._color=this._previousColor}}
//# sourceMappingURL=ColorController.js.map