@cas-smartdesign/element-utils 1.1.0 → 1.2.1

package/dist/colorcontrastcalculator.d.ts

@@ -0,0 +1,4 @@
+export declare class ColorContrastCalculator {
+    static getContrast(color1: string, color2: string): number;
+    static shouldUseBrightForeground(base: string, brightColor: string, darkColor: string): boolean;
+}

package/dist/docs/color-contrast-calculator.js

@@ -0,0 +1 @@
+function R(e,t,r){e.prototype=t.prototype=r,r.constructor=e}function I(e,t){var r=Object.create(e.prototype);for(var n in t)r[n]=t[n];return r}function p(){}var g=.7,$=1/g,d="\\s*([+-]?\\d+)\\s*",b="\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",o="\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",z=/^#([0-9a-f]{3,8})$/,W=new RegExp(`^rgb\\(${d},${d},${d}\\)$`),A=new RegExp(`^rgb\\(${o},${o},${o}\\)$`),D=new RegExp(`^rgba\\(${d},${d},${d},${b}\\)$`),J=new RegExp(`^rgba\\(${o},${o},${o},${b}\\)$`),K=new RegExp(`^hsl\\(${b},${o},${o}\\)$`),Q=new RegExp(`^hsla\\(${b},${o},${o},${b}\\)$`),M={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,rebeccapurple:6697881,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074};R(p,H,{copy(e){return Object.assign(new this.constructor,this,e)},displayable(){return this.rgb().displayable()},hex:q,formatHex:q,formatHex8:T,formatHsl:V,formatRgb:F,toString:F});function q(){return this.rgb().formatHex()}function T(){return this.rgb().formatHex8()}function V(){return O(this).formatHsl()}function F(){return this.rgb().formatRgb()}function H(e){var t,r;return e=(e+"").trim().toLowerCase(),(t=z.exec(e))?(r=t[1].length,t=parseInt(t[1],16),r===6?C(t):r===3?new a(t>>8&15|t>>4&240,t>>4&15|t&240,(t&15)<<4|t&15,1):r===8?m(t>>24&255,t>>16&255,t>>8&255,(t&255)/255):r===4?m(t>>12&15|t>>8&240,t>>8&15|t>>4&240,t>>4&15|t&240,((t&15)<<4|t&15)/255):null):(t=W.exec(e))?new a(t[1],t[2],t[3],1):(t=A.exec(e))?new a(t[1]*255/100,t[2]*255/100,t[3]*255/100,1):(t=D.exec(e))?m(t[1],t[2],t[3],t[4]):(t=J.exec(e))?m(t[1]*255/100,t[2]*255/100,t[3]*255/100,t[4]):(t=K.exec(e))?P(t[1],t[2]/100,t[3]/100,1):(t=Q.exec(e))?P(t[1],t[2]/100,t[3]/100,t[4]):M.hasOwnProperty(e)?C(M[e]):e==="transparent"?new a(NaN,NaN,NaN,0):null}function C(e){return new a(e>>16&255,e>>8&255,e&255,1)}function m(e,t,r,n){return n<=0&&(e=t=r=NaN),new a(e,t,r,n)}function X(e){return e instanceof p||(e=H(e)),e?(e=e.rgb(),new a(e.r,e.g,e.b,e.opacity)):new a}function j(e,t,r,n){return arguments.length===1?X(e):new a(e,t,r,n??1)}function a(e,t,r,n){this.r=+e,this.g=+t,this.b=+r,this.opacity=+n}R(a,j,I(p,{brighter(e){return e=e==null?$:Math.pow($,e),new a(this.r*e,this.g*e,this.b*e,this.opacity)},darker(e){return e=e==null?g:Math.pow(g,e),new a(this.r*e,this.g*e,this.b*e,this.opacity)},rgb(){return this},clamp(){return new a(h(this.r),h(this.g),h(this.b),N(this.opacity))},displayable(){return-.5<=this.r&&this.r<255.5&&-.5<=this.g&&this.g<255.5&&-.5<=this.b&&this.b<255.5&&0<=this.opacity&&this.opacity<=1},hex:E,formatHex:E,formatHex8:Y,formatRgb:B,toString:B}));function E(){return`#${c(this.r)}${c(this.g)}${c(this.b)}`}function Y(){return`#${c(this.r)}${c(this.g)}${c(this.b)}${c((isNaN(this.opacity)?1:this.opacity)*255)}`}function B(){const e=N(this.opacity);return`${e===1?"rgb(":"rgba("}${h(this.r)}, ${h(this.g)}, ${h(this.b)}${e===1?")":`, ${e})`}`}function N(e){return isNaN(e)?1:Math.max(0,Math.min(1,e))}function h(e){return Math.max(0,Math.min(255,Math.round(e)||0))}function c(e){return e=h(e),(e<16?"0":"")+e.toString(16)}function P(e,t,r,n){return n<=0?e=t=r=NaN:r<=0||r>=1?e=t=NaN:t<=0&&(e=NaN),new i(e,t,r,n)}function O(e){if(e instanceof i)return new i(e.h,e.s,e.l,e.opacity);if(e instanceof p||(e=H(e)),!e)return new i;if(e instanceof i)return e;e=e.rgb();var t=e.r/255,r=e.g/255,n=e.b/255,f=Math.min(t,r,n),s=Math.max(t,r,n),l=NaN,x=s-f,u=(s+f)/2;return x?(t===s?l=(r-n)/x+(r<n)*6:r===s?l=(n-t)/x+2:l=(t-r)/x+4,x/=u<.5?s+f:2-s-f,l*=60):x=u>0&&u<1?0:l,new i(l,x,u,e.opacity)}function Z(e,t,r,n){return arguments.length===1?O(e):new i(e,t,r,n??1)}function i(e,t,r,n){this.h=+e,this.s=+t,this.l=+r,this.opacity=+n}R(i,Z,I(p,{brighter(e){return e=e==null?$:Math.pow($,e),new i(this.h,this.s,this.l*e,this.opacity)},darker(e){return e=e==null?g:Math.pow(g,e),new i(this.h,this.s,this.l*e,this.opacity)},rgb(){var e=this.h%360+(this.h<0)*360,t=isNaN(e)||isNaN(this.s)?0:this.s,r=this.l,n=r+(r<.5?r:1-r)*t,f=2*r-n;return new a(v(e>=240?e-240:e+120,f,n),v(e,f,n),v(e<120?e+240:e-120,f,n),this.opacity)},clamp(){return new i(S(this.h),y(this.s),y(this.l),N(this.opacity))},displayable(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&0<=this.l&&this.l<=1&&0<=this.opacity&&this.opacity<=1},formatHsl(){const e=N(this.opacity);return`${e===1?"hsl(":"hsla("}${S(this.h)}, ${y(this.s)*100}%, ${y(this.l)*100}%${e===1?")":`, ${e})`}`}}));function S(e){return e=(e||0)%360,e<0?e+360:e}function y(e){return Math.max(0,Math.min(1,e||0))}function v(e,t,r){return(e<60?t+(r-t)*e/60:e<180?r:e<240?t+(r-t)*(240-e)/60:t)*255}class k{static getContrast(t,r){const n=G(t)+.05,f=G(r)+.05;return n>f?n/f:f/n}static shouldUseBrightForeground(t,r,n){const f=k.getContrast(t,r),s=k.getContrast(t,n);return f>4.5?!0:f>s}}function G(e){const t=j(e),r=t.r/255,n=t.g/255,f=t.b/255,s=r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4),l=n<=.03928?n/12.92:Math.pow((n+.055)/1.055,2.4),x=f<=.03928?f/12.92:Math.pow((f+.055)/1.055,2.4);return .2126*s+.7152*l+.0722*x}const L="#000000",_="#FFFFFF",U=document.querySelector("#color-contrast-calculator"),ee=U.querySelector(".color-field"),w=U.querySelector(".color-button");w.addEventListener("click",()=>{const e=ee.value;e&&(w.style.backgroundColor=e,k.shouldUseBrightForeground(e,_,L)?w.style.color=_:w.style.color=L)});