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

ReactiveControllers for powering common UI patterns

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