@etsoo/shared 1.1.14 → 1.1.17

package/README.md

@@ -18,6 +18,22 @@ $ yarn add @etsoo/shared
 ## storage
 Storage interface and browser storage implementation
 
+## EColor
+Etsoo implmented Color
+
+|Name|Description|
+|---:|---|
+|static getColors|Get HEX or RGB colors|
+|static getEColors|Get EColors|
+|static parse|Parse HTML color to EColor|
+|clone|Clone color with adjustments|
+|getContrastRatio|Get contrast ratio, a value between 0 and 1|
+|getDeltaValue|Get Delta value (perceptible by human eyes)|
+|getLuminance|Get luminance|
+|toHEXColor|To HEX color string|
+|toLabValue|To Lab value|
+|toRGBColor|To RGB color string|
+
 ## Keyboard
 Keyboard keys and codes
 

package/__tests__/EColor.ts

@@ -0,0 +1,25 @@
+import { EColor } from '../src/types/EColor';
+
+test('Tests for parse', () => {
+    // Arrange & act
+    const colorShort = EColor.parse('#000');
+    const color = EColor.parse('#e21821');
+    const colorRgb = EColor.parse('RGB(226, 24, 33)');
+
+    // Assert
+    expect(colorShort?.toRGBColor()).toBe('RGB(0, 0, 0)');
+    expect(color?.toRGBColor()).toBe('RGB(226, 24, 33)');
+    expect(colorRgb?.toHEXColor()).toBe('#e21821');
+});
+
+test('Tests for getColors', () => {
+    const colors = EColor.getColors(undefined, 128);
+    expect(colors.length).toBe(8);
+});
+
+test('Tests for toRGBColor', () => {
+    const color = new EColor(0, 0, 0);
+    expect(color.toRGBColor()).toBe('RGB(0, 0, 0)');
+    expect(color.toRGBColor(0.1)).toBe('RGBA(0, 0, 0, 0.1)');
+    expect(color.alpha).toBeUndefined();
+});

package/lib/cjs/index.d.ts

@@ -1,5 +1,6 @@
-export * from './types/FormData';
 export * from './types/DelayedExecutorType';
+export * from './types/EColor';
+export * from './types/FormData';
 export * from './storage/IStorage';
 export * from './storage/WindowStorage';
 export * from './DataTypes';

package/lib/cjs/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -10,8 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./types/FormData"), exports);
 __exportStar(require("./types/DelayedExecutorType"), exports);
+__exportStar(require("./types/EColor"), exports);
+__exportStar(require("./types/FormData"), exports);
 __exportStar(require("./storage/IStorage"), exports);
 __exportStar(require("./storage/WindowStorage"), exports);
 __exportStar(require("./DataTypes"), exports);

package/lib/cjs/types/EColor.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Etsoo implmented Color
+ */
+export declare class EColor {
+    readonly r: number;
+    readonly g: number;
+    readonly b: number;
+    readonly alpha?: number | undefined;
+    /**
+     * Adjust value
+     * @param value Current value
+     * @param adjust Adjust value
+     * @returns Adjusted value
+     */
+    static adjust(value: number, adjust?: number): number;
+    /**
+     * Get HEX or RGB colors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @param hex to HEX or not
+     * @returns Result
+     */
+    static getColors(init?: string, factor?: number, adjustOrder?: boolean, hex?: boolean): string[];
+    /**
+     * Get EColors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @returns Result
+     */
+    static getEColors(init?: string, factor?: number, adjustOrder?: boolean): EColor[];
+    /**
+     * HEX string to integer value
+     * @param hex HEX string
+     * @returns Integer value
+     */
+    static hexTo(hex: string): number;
+    /**
+     * Format value to 16 radix string
+     * @param num Int value
+     * @returns Result
+     */
+    static toHex(num: number): string;
+    /**
+     * Parse HTML color to EColor
+     * @param htmlColor HTML color
+     * @returns EColor
+     */
+    static parse(htmlColor?: string | null): EColor | undefined;
+    /**
+     * Constructor
+     * @param r Reg
+     * @param g Green
+     * @param b Blue
+     * @param alpha Alpha
+     */
+    constructor(r: number, g: number, b: number, alpha?: number | undefined);
+    /**
+     * Clone color with adjustments
+     * @param adjustR Adjust R value
+     * @param adjustG Adjust G value
+     * @param adjustB Adjust B value
+     * @param alpha New alpha value
+     */
+    clone(adjustR?: number, adjustG?: number, adjustB?: number, alpha?: number): EColor | undefined;
+    /**
+     * Get contrast ratio, a value between 0 and 1
+     * @param color Contrast color
+     */
+    getContrastRatio(color: EColor): number;
+    /**
+     * Get Delta value (perceptible by human eyes)
+     * <= 1, Not perceptible by human eyes
+     * 1 - 2, Perceptible through close observation
+     * 2 - 10, Perceptible at a glance
+     * 11 - 49, Colors are more similar than opposite
+     * 100+, Colors are exact opposite
+     * @param color Contrast color
+     * @returns Value
+     */
+    getDeltaValue(color: EColor): number;
+    /**
+     * Get luminance
+     * Darker one has higher luminance
+     * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
+     */
+    getLuminance(): number;
+    /**
+     * To HEX color string
+     * @returns HEX color string
+     */
+    toHEXColor(): string;
+    /**
+     * To Lab value
+     * @returns Lab value
+     */
+    toLabValue(): [number, number, number];
+    /**
+     * To RGB color string
+     * @param alpha Alpha value, false means ignore it
+     * @returns RGB color string
+     */
+    toRGBColor(alpha?: boolean | number): string;
+}

package/lib/cjs/types/EColor.js

@@ -0,0 +1,274 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EColor = void 0;
+/**
+ * Etsoo implmented Color
+ */
+class EColor {
+    /**
+     * Constructor
+     * @param r Reg
+     * @param g Green
+     * @param b Blue
+     * @param alpha Alpha
+     */
+    constructor(r, g, b, alpha) {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        this.alpha = alpha;
+    }
+    /**
+     * Adjust value
+     * @param value Current value
+     * @param adjust Adjust value
+     * @returns Adjusted value
+     */
+    static adjust(value, adjust) {
+        if (adjust == null)
+            return value;
+        value = Math.abs(value + adjust);
+        if (value > 255)
+            return value % 255;
+        return value;
+    }
+    /**
+     * Get HEX or RGB colors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @param hex to HEX or not
+     * @returns Result
+     */
+    static getColors(init = '#000', factor = 51, adjustOrder = true, hex = true) {
+        return EColor.getEColors(init, factor, adjustOrder).map((c) => hex ? c.toHEXColor() : c.toRGBColor());
+    }
+    /**
+     * Get EColors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @returns Result
+     */
+    static getEColors(init = '#000', factor = 51, adjustOrder = true) {
+        var _a;
+        // Init color
+        const initColor = (_a = EColor.parse(init)) !== null && _a !== void 0 ? _a : new EColor(0, 0, 0);
+        // Factors elements
+        // 51 = '00', '33', '66', '99', 'cc', 'ff'
+        const factors = [];
+        let f = 0;
+        while (f <= 255) {
+            factors.push(f);
+            f += factor;
+        }
+        // RGB loop
+        const colors = [initColor];
+        for (const r of factors) {
+            for (const g of factors) {
+                for (const b of factors) {
+                    colors.push(initColor.clone(r, g, b));
+                }
+            }
+        }
+        // Non-nullable colors
+        const nColors = colors.filter((color) => color != null);
+        // Adjust order
+        if (adjustOrder) {
+            const firstColor = nColors.shift();
+            if (firstColor) {
+                let color = firstColor;
+                const newColors = [color];
+                while (nColors.length > 0) {
+                    const result = nColors.reduce((p, c, index) => {
+                        const delta = color.getDeltaValue(c);
+                        if (delta != null && delta > p.delta) {
+                            p.delta = delta;
+                            p.color = c;
+                            p.index = index;
+                        }
+                        return p;
+                    }, { delta: 0, color, index: -1 });
+                    if (result.delta > 0) {
+                        color = result.color;
+                        newColors.push(color);
+                        nColors.splice(result.index, 1);
+                    }
+                }
+                return newColors;
+            }
+        }
+        return nColors;
+    }
+    /**
+     * HEX string to integer value
+     * @param hex HEX string
+     * @returns Integer value
+     */
+    static hexTo(hex) {
+        return parseInt(hex, 16);
+    }
+    /**
+     * Format value to 16 radix string
+     * @param num Int value
+     * @returns Result
+     */
+    static toHex(num) {
+        return num.toString(16).padStart(2, '0');
+    }
+    /**
+     * Parse HTML color to EColor
+     * @param htmlColor HTML color
+     * @returns EColor
+     */
+    static parse(htmlColor) {
+        // Null
+        if (htmlColor == null)
+            return undefined;
+        htmlColor = htmlColor.toUpperCase();
+        // HEX color
+        if (htmlColor.startsWith('#')) {
+            htmlColor = htmlColor.substring(1);
+            if (htmlColor.length === 3)
+                htmlColor = Array.from(htmlColor)
+                    .map((c) => c + c)
+                    .join('');
+            if (htmlColor.length === 6) {
+                return new EColor(EColor.hexTo(htmlColor.substring(0, 2)), EColor.hexTo(htmlColor.substring(2, 4)), EColor.hexTo(htmlColor.substring(4, 6)));
+            }
+            return undefined;
+        }
+        // For RGB and RGBA
+        const reg = /^RGBA?\(([0-9,\s\.]+)\)$/;
+        const result = htmlColor.match(reg);
+        if (result != null && result.length == 2) {
+            const parts = result[1].split(/\s*,\s*/);
+            if (parts.length === 3 || parts.length === 4) {
+                const alpha = parts[3];
+                return new EColor(parseInt(parts[0]), parseInt(parts[1]), parseInt(parts[2]), alpha == null ? undefined : parseFloat(alpha));
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Clone color with adjustments
+     * @param adjustR Adjust R value
+     * @param adjustG Adjust G value
+     * @param adjustB Adjust B value
+     * @param alpha New alpha value
+     */
+    clone(adjustR, adjustG, adjustB, alpha) {
+        const r = EColor.adjust(this.r, adjustR);
+        const g = EColor.adjust(this.g, adjustG);
+        const b = EColor.adjust(this.b, adjustB);
+        if (r === this.r &&
+            g === this.g &&
+            b === this.b &&
+            (alpha == null || alpha === this.alpha))
+            return undefined;
+        return new EColor(r, g, b, alpha);
+    }
+    /**
+     * Get contrast ratio, a value between 0 and 1
+     * @param color Contrast color
+     */
+    getContrastRatio(color) {
+        const lum1 = this.getLuminance();
+        const lum2 = color.getLuminance();
+        const brightest = Math.max(lum1, lum2);
+        const darkest = Math.min(lum1, lum2);
+        return (brightest + 0.05) / (darkest + 0.05);
+    }
+    /**
+     * Get Delta value (perceptible by human eyes)
+     * <= 1, Not perceptible by human eyes
+     * 1 - 2, Perceptible through close observation
+     * 2 - 10, Perceptible at a glance
+     * 11 - 49, Colors are more similar than opposite
+     * 100+, Colors are exact opposite
+     * @param color Contrast color
+     * @returns Value
+     */
+    getDeltaValue(color) {
+        const labA = this.toLabValue();
+        const labB = color.toLabValue();
+        const deltaL = labA[0] - labB[0];
+        const deltaA = labA[1] - labB[1];
+        const deltaB = labA[2] - labB[2];
+        const c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
+        const c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
+        const deltaC = c1 - c2;
+        let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
+        deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
+        const sc = 1.0 + 0.045 * c1;
+        const sh = 1.0 + 0.015 * c1;
+        const deltaLKlsl = deltaL / 1.0;
+        const deltaCkcsc = deltaC / sc;
+        const deltaHkhsh = deltaH / sh;
+        const i = deltaLKlsl * deltaLKlsl +
+            deltaCkcsc * deltaCkcsc +
+            deltaHkhsh * deltaHkhsh;
+        return i < 0 ? 0 : Math.sqrt(i);
+    }
+    /**
+     * Get luminance
+     * Darker one has higher luminance
+     * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
+     */
+    getLuminance() {
+        const a = [this.r, this.g, this.b].map((v) => {
+            v /= 255;
+            return v <= 0.03928
+                ? v / 12.92
+                : Math.pow((v + 0.055) / 1.055, 2.4);
+        });
+        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+    }
+    /**
+     * To HEX color string
+     * @returns HEX color string
+     */
+    toHEXColor() {
+        return `#${EColor.toHex(this.r)}${EColor.toHex(this.g)}${EColor.toHex(this.b)}`;
+    }
+    /**
+     * To Lab value
+     * @returns Lab value
+     */
+    toLabValue() {
+        let r = this.r / 255, g = this.g / 255, b = this.b / 255, x, y, z;
+        r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+        g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+        b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+        x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
+        y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
+        z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
+        x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
+        y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
+        z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
+        return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+    }
+    /**
+     * To RGB color string
+     * @param alpha Alpha value, false means ignore it
+     * @returns RGB color string
+     */
+    toRGBColor(alpha) {
+        // Decide
+        let includeAlpha, alphaValue = this.alpha;
+        if (typeof alpha === 'number') {
+            alphaValue = alpha;
+            includeAlpha = true;
+        }
+        else if (alpha == null) {
+            includeAlpha = this.alpha != null;
+        }
+        else {
+            includeAlpha = alpha;
+        }
+        if (includeAlpha)
+            return `RGBA(${this.r}, ${this.g}, ${this.b}, ${alphaValue !== null && alphaValue !== void 0 ? alphaValue : 1})`;
+        return `RGB(${this.r}, ${this.g}, ${this.b})`;
+    }
+}
+exports.EColor = EColor;

package/lib/mjs/index.d.ts

@@ -1,5 +1,6 @@
-export * from './types/FormData';
 export * from './types/DelayedExecutorType';
+export * from './types/EColor';
+export * from './types/FormData';
 export * from './storage/IStorage';
 export * from './storage/WindowStorage';
 export * from './DataTypes';

package/lib/mjs/index.js

@@ -1,5 +1,6 @@
-export * from './types/FormData';
 export * from './types/DelayedExecutorType';
+export * from './types/EColor';
+export * from './types/FormData';
 export * from './storage/IStorage';
 export * from './storage/WindowStorage';
 export * from './DataTypes';

package/lib/mjs/types/EColor.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Etsoo implmented Color
+ */
+export declare class EColor {
+    readonly r: number;
+    readonly g: number;
+    readonly b: number;
+    readonly alpha?: number | undefined;
+    /**
+     * Adjust value
+     * @param value Current value
+     * @param adjust Adjust value
+     * @returns Adjusted value
+     */
+    static adjust(value: number, adjust?: number): number;
+    /**
+     * Get HEX or RGB colors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @param hex to HEX or not
+     * @returns Result
+     */
+    static getColors(init?: string, factor?: number, adjustOrder?: boolean, hex?: boolean): string[];
+    /**
+     * Get EColors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @returns Result
+     */
+    static getEColors(init?: string, factor?: number, adjustOrder?: boolean): EColor[];
+    /**
+     * HEX string to integer value
+     * @param hex HEX string
+     * @returns Integer value
+     */
+    static hexTo(hex: string): number;
+    /**
+     * Format value to 16 radix string
+     * @param num Int value
+     * @returns Result
+     */
+    static toHex(num: number): string;
+    /**
+     * Parse HTML color to EColor
+     * @param htmlColor HTML color
+     * @returns EColor
+     */
+    static parse(htmlColor?: string | null): EColor | undefined;
+    /**
+     * Constructor
+     * @param r Reg
+     * @param g Green
+     * @param b Blue
+     * @param alpha Alpha
+     */
+    constructor(r: number, g: number, b: number, alpha?: number | undefined);
+    /**
+     * Clone color with adjustments
+     * @param adjustR Adjust R value
+     * @param adjustG Adjust G value
+     * @param adjustB Adjust B value
+     * @param alpha New alpha value
+     */
+    clone(adjustR?: number, adjustG?: number, adjustB?: number, alpha?: number): EColor | undefined;
+    /**
+     * Get contrast ratio, a value between 0 and 1
+     * @param color Contrast color
+     */
+    getContrastRatio(color: EColor): number;
+    /**
+     * Get Delta value (perceptible by human eyes)
+     * <= 1, Not perceptible by human eyes
+     * 1 - 2, Perceptible through close observation
+     * 2 - 10, Perceptible at a glance
+     * 11 - 49, Colors are more similar than opposite
+     * 100+, Colors are exact opposite
+     * @param color Contrast color
+     * @returns Value
+     */
+    getDeltaValue(color: EColor): number;
+    /**
+     * Get luminance
+     * Darker one has higher luminance
+     * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
+     */
+    getLuminance(): number;
+    /**
+     * To HEX color string
+     * @returns HEX color string
+     */
+    toHEXColor(): string;
+    /**
+     * To Lab value
+     * @returns Lab value
+     */
+    toLabValue(): [number, number, number];
+    /**
+     * To RGB color string
+     * @param alpha Alpha value, false means ignore it
+     * @returns RGB color string
+     */
+    toRGBColor(alpha?: boolean | number): string;
+}

package/lib/mjs/types/EColor.js

@@ -0,0 +1,270 @@
+/**
+ * Etsoo implmented Color
+ */
+export class EColor {
+    /**
+     * Constructor
+     * @param r Reg
+     * @param g Green
+     * @param b Blue
+     * @param alpha Alpha
+     */
+    constructor(r, g, b, alpha) {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        this.alpha = alpha;
+    }
+    /**
+     * Adjust value
+     * @param value Current value
+     * @param adjust Adjust value
+     * @returns Adjusted value
+     */
+    static adjust(value, adjust) {
+        if (adjust == null)
+            return value;
+        value = Math.abs(value + adjust);
+        if (value > 255)
+            return value % 255;
+        return value;
+    }
+    /**
+     * Get HEX or RGB colors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @param hex to HEX or not
+     * @returns Result
+     */
+    static getColors(init = '#000', factor = 51, adjustOrder = true, hex = true) {
+        return EColor.getEColors(init, factor, adjustOrder).map((c) => hex ? c.toHEXColor() : c.toRGBColor());
+    }
+    /**
+     * Get EColors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @returns Result
+     */
+    static getEColors(init = '#000', factor = 51, adjustOrder = true) {
+        var _a;
+        // Init color
+        const initColor = (_a = EColor.parse(init)) !== null && _a !== void 0 ? _a : new EColor(0, 0, 0);
+        // Factors elements
+        // 51 = '00', '33', '66', '99', 'cc', 'ff'
+        const factors = [];
+        let f = 0;
+        while (f <= 255) {
+            factors.push(f);
+            f += factor;
+        }
+        // RGB loop
+        const colors = [initColor];
+        for (const r of factors) {
+            for (const g of factors) {
+                for (const b of factors) {
+                    colors.push(initColor.clone(r, g, b));
+                }
+            }
+        }
+        // Non-nullable colors
+        const nColors = colors.filter((color) => color != null);
+        // Adjust order
+        if (adjustOrder) {
+            const firstColor = nColors.shift();
+            if (firstColor) {
+                let color = firstColor;
+                const newColors = [color];
+                while (nColors.length > 0) {
+                    const result = nColors.reduce((p, c, index) => {
+                        const delta = color.getDeltaValue(c);
+                        if (delta != null && delta > p.delta) {
+                            p.delta = delta;
+                            p.color = c;
+                            p.index = index;
+                        }
+                        return p;
+                    }, { delta: 0, color, index: -1 });
+                    if (result.delta > 0) {
+                        color = result.color;
+                        newColors.push(color);
+                        nColors.splice(result.index, 1);
+                    }
+                }
+                return newColors;
+            }
+        }
+        return nColors;
+    }
+    /**
+     * HEX string to integer value
+     * @param hex HEX string
+     * @returns Integer value
+     */
+    static hexTo(hex) {
+        return parseInt(hex, 16);
+    }
+    /**
+     * Format value to 16 radix string
+     * @param num Int value
+     * @returns Result
+     */
+    static toHex(num) {
+        return num.toString(16).padStart(2, '0');
+    }
+    /**
+     * Parse HTML color to EColor
+     * @param htmlColor HTML color
+     * @returns EColor
+     */
+    static parse(htmlColor) {
+        // Null
+        if (htmlColor == null)
+            return undefined;
+        htmlColor = htmlColor.toUpperCase();
+        // HEX color
+        if (htmlColor.startsWith('#')) {
+            htmlColor = htmlColor.substring(1);
+            if (htmlColor.length === 3)
+                htmlColor = Array.from(htmlColor)
+                    .map((c) => c + c)
+                    .join('');
+            if (htmlColor.length === 6) {
+                return new EColor(EColor.hexTo(htmlColor.substring(0, 2)), EColor.hexTo(htmlColor.substring(2, 4)), EColor.hexTo(htmlColor.substring(4, 6)));
+            }
+            return undefined;
+        }
+        // For RGB and RGBA
+        const reg = /^RGBA?\(([0-9,\s\.]+)\)$/;
+        const result = htmlColor.match(reg);
+        if (result != null && result.length == 2) {
+            const parts = result[1].split(/\s*,\s*/);
+            if (parts.length === 3 || parts.length === 4) {
+                const alpha = parts[3];
+                return new EColor(parseInt(parts[0]), parseInt(parts[1]), parseInt(parts[2]), alpha == null ? undefined : parseFloat(alpha));
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Clone color with adjustments
+     * @param adjustR Adjust R value
+     * @param adjustG Adjust G value
+     * @param adjustB Adjust B value
+     * @param alpha New alpha value
+     */
+    clone(adjustR, adjustG, adjustB, alpha) {
+        const r = EColor.adjust(this.r, adjustR);
+        const g = EColor.adjust(this.g, adjustG);
+        const b = EColor.adjust(this.b, adjustB);
+        if (r === this.r &&
+            g === this.g &&
+            b === this.b &&
+            (alpha == null || alpha === this.alpha))
+            return undefined;
+        return new EColor(r, g, b, alpha);
+    }
+    /**
+     * Get contrast ratio, a value between 0 and 1
+     * @param color Contrast color
+     */
+    getContrastRatio(color) {
+        const lum1 = this.getLuminance();
+        const lum2 = color.getLuminance();
+        const brightest = Math.max(lum1, lum2);
+        const darkest = Math.min(lum1, lum2);
+        return (brightest + 0.05) / (darkest + 0.05);
+    }
+    /**
+     * Get Delta value (perceptible by human eyes)
+     * <= 1, Not perceptible by human eyes
+     * 1 - 2, Perceptible through close observation
+     * 2 - 10, Perceptible at a glance
+     * 11 - 49, Colors are more similar than opposite
+     * 100+, Colors are exact opposite
+     * @param color Contrast color
+     * @returns Value
+     */
+    getDeltaValue(color) {
+        const labA = this.toLabValue();
+        const labB = color.toLabValue();
+        const deltaL = labA[0] - labB[0];
+        const deltaA = labA[1] - labB[1];
+        const deltaB = labA[2] - labB[2];
+        const c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
+        const c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
+        const deltaC = c1 - c2;
+        let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
+        deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
+        const sc = 1.0 + 0.045 * c1;
+        const sh = 1.0 + 0.015 * c1;
+        const deltaLKlsl = deltaL / 1.0;
+        const deltaCkcsc = deltaC / sc;
+        const deltaHkhsh = deltaH / sh;
+        const i = deltaLKlsl * deltaLKlsl +
+            deltaCkcsc * deltaCkcsc +
+            deltaHkhsh * deltaHkhsh;
+        return i < 0 ? 0 : Math.sqrt(i);
+    }
+    /**
+     * Get luminance
+     * Darker one has higher luminance
+     * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
+     */
+    getLuminance() {
+        const a = [this.r, this.g, this.b].map((v) => {
+            v /= 255;
+            return v <= 0.03928
+                ? v / 12.92
+                : Math.pow((v + 0.055) / 1.055, 2.4);
+        });
+        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+    }
+    /**
+     * To HEX color string
+     * @returns HEX color string
+     */
+    toHEXColor() {
+        return `#${EColor.toHex(this.r)}${EColor.toHex(this.g)}${EColor.toHex(this.b)}`;
+    }
+    /**
+     * To Lab value
+     * @returns Lab value
+     */
+    toLabValue() {
+        let r = this.r / 255, g = this.g / 255, b = this.b / 255, x, y, z;
+        r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+        g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+        b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+        x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
+        y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
+        z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
+        x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
+        y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
+        z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
+        return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+    }
+    /**
+     * To RGB color string
+     * @param alpha Alpha value, false means ignore it
+     * @returns RGB color string
+     */
+    toRGBColor(alpha) {
+        // Decide
+        let includeAlpha, alphaValue = this.alpha;
+        if (typeof alpha === 'number') {
+            alphaValue = alpha;
+            includeAlpha = true;
+        }
+        else if (alpha == null) {
+            includeAlpha = this.alpha != null;
+        }
+        else {
+            includeAlpha = alpha;
+        }
+        if (includeAlpha)
+            return `RGBA(${this.r}, ${this.g}, ${this.b}, ${alphaValue !== null && alphaValue !== void 0 ? alphaValue : 1})`;
+        return `RGB(${this.r}, ${this.g}, ${this.b})`;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/shared",
-    "version": "1.1.14",
+    "version": "1.1.17",
     "description": "TypeScript shared utilities and functions",
     "main": "lib/cjs/index.js",
     "module": "lib/mjs/index.js",
@@ -55,13 +55,13 @@
     "dependencies": {},
     "devDependencies": {
         "@types/jest": "^27.4.1",
-        "@typescript-eslint/eslint-plugin": "^5.12.1",
-        "@typescript-eslint/parser": "^5.12.1",
+        "@typescript-eslint/eslint-plugin": "^5.14.0",
+        "@typescript-eslint/parser": "^5.14.0",
         "eslint": "^8.10.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",
         "jest": "^27.5.1",
         "ts-jest": "^27.1.3",
-        "typescript": "^4.5.5"
+        "typescript": "^4.6.2"
     }
 }

package/src/index.ts

@@ -1,5 +1,6 @@
-export * from './types/FormData';
 export * from './types/DelayedExecutorType';
+export * from './types/EColor';
+export * from './types/FormData';
 
 export * from './storage/IStorage';
 export * from './storage/WindowStorage';

package/src/types/EColor.ts

@@ -0,0 +1,334 @@
+/**
+ * Etsoo implmented Color
+ */
+export class EColor {
+    /**
+     * Adjust value
+     * @param value Current value
+     * @param adjust Adjust value
+     * @returns Adjusted value
+     */
+    static adjust(value: number, adjust?: number) {
+        if (adjust == null) return value;
+        value = Math.abs(value + adjust);
+        if (value > 255) return value % 255;
+        return value;
+    }
+
+    /**
+     * Get HEX or RGB colors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @param hex to HEX or not
+     * @returns Result
+     */
+    static getColors(
+        init: string = '#000',
+        factor: number = 51,
+        adjustOrder: boolean = true,
+        hex: boolean = true
+    ) {
+        return EColor.getEColors(init, factor, adjustOrder).map((c) =>
+            hex ? c.toHEXColor() : c.toRGBColor()
+        );
+    }
+
+    /**
+     * Get EColors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @returns Result
+     */
+    static getEColors(
+        init: string = '#000',
+        factor: number = 51,
+        adjustOrder: boolean = true
+    ): EColor[] {
+        // Init color
+        const initColor = EColor.parse(init) ?? new EColor(0, 0, 0);
+
+        // Factors elements
+        // 51 = '00', '33', '66', '99', 'cc', 'ff'
+        const factors: number[] = [];
+        let f = 0;
+        while (f <= 255) {
+            factors.push(f);
+            f += factor;
+        }
+
+        // RGB loop
+        const colors: (EColor | undefined)[] = [initColor];
+        for (const r of factors) {
+            for (const g of factors) {
+                for (const b of factors) {
+                    colors.push(initColor.clone(r, g, b));
+                }
+            }
+        }
+
+        // Non-nullable colors
+        const nColors = colors.filter(
+            (color): color is EColor => color != null
+        );
+
+        // Adjust order
+        if (adjustOrder) {
+            const firstColor = nColors.shift();
+            if (firstColor) {
+                let color = firstColor;
+                const newColors: EColor[] = [color];
+
+                while (nColors.length > 0) {
+                    const result = nColors.reduce(
+                        (p, c, index) => {
+                            const delta = color.getDeltaValue(c);
+                            if (delta != null && delta > p.delta) {
+                                p.delta = delta;
+                                p.color = c;
+                                p.index = index;
+                            }
+                            return p;
+                        },
+                        { delta: 0, color, index: -1 }
+                    );
+
+                    if (result.delta > 0) {
+                        color = result.color;
+                        newColors.push(color);
+                        nColors.splice(result.index, 1);
+                    }
+                }
+
+                return newColors;
+            }
+        }
+
+        return nColors;
+    }
+
+    /**
+     * HEX string to integer value
+     * @param hex HEX string
+     * @returns Integer value
+     */
+    static hexTo(hex: string) {
+        return parseInt(hex, 16);
+    }
+
+    /**
+     * Format value to 16 radix string
+     * @param num Int value
+     * @returns Result
+     */
+    static toHex(num: number) {
+        return num.toString(16).padStart(2, '0');
+    }
+
+    /**
+     * Parse HTML color to EColor
+     * @param htmlColor HTML color
+     * @returns EColor
+     */
+    static parse(htmlColor?: string | null): EColor | undefined {
+        // Null
+        if (htmlColor == null) return undefined;
+        htmlColor = htmlColor.toUpperCase();
+
+        // HEX color
+        if (htmlColor.startsWith('#')) {
+            htmlColor = htmlColor.substring(1);
+            if (htmlColor.length === 3)
+                htmlColor = Array.from(htmlColor)
+                    .map((c) => c + c)
+                    .join('');
+
+            if (htmlColor.length === 6) {
+                return new EColor(
+                    EColor.hexTo(htmlColor.substring(0, 2)),
+                    EColor.hexTo(htmlColor.substring(2, 4)),
+                    EColor.hexTo(htmlColor.substring(4, 6))
+                );
+            }
+
+            return undefined;
+        }
+
+        // For RGB and RGBA
+        const reg = /^RGBA?\(([0-9,\s\.]+)\)$/;
+        const result = htmlColor.match(reg);
+        if (result != null && result.length == 2) {
+            const parts = result[1].split(/\s*,\s*/);
+            if (parts.length === 3 || parts.length === 4) {
+                const alpha = parts[3];
+                return new EColor(
+                    parseInt(parts[0]),
+                    parseInt(parts[1]),
+                    parseInt(parts[2]),
+                    alpha == null ? undefined : parseFloat(alpha)
+                );
+            }
+        }
+
+        return undefined;
+    }
+
+    /**
+     * Constructor
+     * @param r Reg
+     * @param g Green
+     * @param b Blue
+     * @param alpha Alpha
+     */
+    constructor(
+        public readonly r: number,
+        public readonly g: number,
+        public readonly b: number,
+        public readonly alpha?: number
+    ) {}
+
+    /**
+     * Clone color with adjustments
+     * @param adjustR Adjust R value
+     * @param adjustG Adjust G value
+     * @param adjustB Adjust B value
+     * @param alpha New alpha value
+     */
+    clone(
+        adjustR?: number,
+        adjustG?: number,
+        adjustB?: number,
+        alpha?: number
+    ) {
+        const r = EColor.adjust(this.r, adjustR);
+        const g = EColor.adjust(this.g, adjustG);
+        const b = EColor.adjust(this.b, adjustB);
+        if (
+            r === this.r &&
+            g === this.g &&
+            b === this.b &&
+            (alpha == null || alpha === this.alpha)
+        )
+            return undefined;
+        return new EColor(r, g, b, alpha);
+    }
+
+    /**
+     * Get contrast ratio, a value between 0 and 1
+     * @param color Contrast color
+     */
+    getContrastRatio(color: EColor) {
+        const lum1 = this.getLuminance();
+        const lum2 = color.getLuminance();
+        const brightest = Math.max(lum1, lum2);
+        const darkest = Math.min(lum1, lum2);
+        return (brightest + 0.05) / (darkest + 0.05);
+    }
+
+    /**
+     * Get Delta value (perceptible by human eyes)
+     * <= 1, Not perceptible by human eyes
+     * 1 - 2, Perceptible through close observation
+     * 2 - 10, Perceptible at a glance
+     * 11 - 49, Colors are more similar than opposite
+     * 100+, Colors are exact opposite
+     * @param color Contrast color
+     * @returns Value
+     */
+    getDeltaValue(color: EColor) {
+        const labA = this.toLabValue();
+        const labB = color.toLabValue();
+        const deltaL = labA[0] - labB[0];
+        const deltaA = labA[1] - labB[1];
+        const deltaB = labA[2] - labB[2];
+        const c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
+        const c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
+        const deltaC = c1 - c2;
+        let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
+        deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
+        const sc = 1.0 + 0.045 * c1;
+        const sh = 1.0 + 0.015 * c1;
+        const deltaLKlsl = deltaL / 1.0;
+        const deltaCkcsc = deltaC / sc;
+        const deltaHkhsh = deltaH / sh;
+        const i =
+            deltaLKlsl * deltaLKlsl +
+            deltaCkcsc * deltaCkcsc +
+            deltaHkhsh * deltaHkhsh;
+        return i < 0 ? 0 : Math.sqrt(i);
+    }
+
+    /**
+     * Get luminance
+     * Darker one has higher luminance
+     * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
+     */
+    getLuminance() {
+        const a = [this.r, this.g, this.b].map((v) => {
+            v /= 255;
+            return v <= 0.03928
+                ? v / 12.92
+                : Math.pow((v + 0.055) / 1.055, 2.4);
+        });
+        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+    }
+
+    /**
+     * To HEX color string
+     * @returns HEX color string
+     */
+    toHEXColor() {
+        return `#${EColor.toHex(this.r)}${EColor.toHex(this.g)}${EColor.toHex(
+            this.b
+        )}`;
+    }
+
+    /**
+     * To Lab value
+     * @returns Lab value
+     */
+    toLabValue(): [number, number, number] {
+        let r = this.r / 255,
+            g = this.g / 255,
+            b = this.b / 255,
+            x,
+            y,
+            z;
+        r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+        g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+        b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+        x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
+        y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
+        z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
+        x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
+        y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
+        z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
+        return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+    }
+
+    /**
+     * To RGB color string
+     * @param alpha Alpha value, false means ignore it
+     * @returns RGB color string
+     */
+    toRGBColor(alpha?: boolean | number) {
+        // Decide
+        let includeAlpha: boolean,
+            alphaValue: number | undefined = this.alpha;
+
+        if (typeof alpha === 'number') {
+            alphaValue = alpha;
+            includeAlpha = true;
+        } else if (alpha == null) {
+            includeAlpha = this.alpha != null;
+        } else {
+            includeAlpha = alpha;
+        }
+
+        if (includeAlpha)
+            return `RGBA(${this.r}, ${this.g}, ${this.b}, ${alphaValue ?? 1})`;
+
+        return `RGB(${this.r}, ${this.g}, ${this.b})`;
+    }
+}