ngx-kit 1.0.0

package/fesm2022/ngx-input-color-picker.mjs

@@ -0,0 +1,1348 @@
+import * as i0 from '@angular/core';
+import { Pipe, EventEmitter, Output, Input, Component, inject, forwardRef, ChangeDetectionStrategy, ElementRef, HostListener, Directive } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$2 from 'ngx-input/shared';
+import { SliderComponent, SaturationComponent, BrowserService } from 'ngx-input/shared';
+
+var ColorFormats;
+(function (ColorFormats) {
+    ColorFormats[ColorFormats["HEX"] = 0] = "HEX";
+    ColorFormats[ColorFormats["RGBA"] = 1] = "RGBA";
+    ColorFormats[ColorFormats["HSLA"] = 2] = "HSLA";
+    ColorFormats[ColorFormats["HSVA"] = 3] = "HSVA";
+    ColorFormats[ColorFormats["CMYK"] = 4] = "CMYK";
+})(ColorFormats || (ColorFormats = {}));
+
+function hexToRgb(hex) {
+    let h = hex.replace(/^#/, '');
+    if (h.length === 3)
+        h = h
+            .split('')
+            .map((x) => x + x)
+            .join('');
+    if (h.length === 6)
+        h += 'ff';
+    if (h.length === 8) {
+        const r = parseInt(h.slice(0, 2), 16);
+        const g = parseInt(h.slice(2, 4), 16);
+        const b = parseInt(h.slice(4, 6), 16);
+        const a = parseInt(h.slice(6, 8), 16) / 255;
+        return { r, g, b, a: a };
+    }
+    throw new Error('Invalid hex color');
+}
+function parseRgbString(str) {
+    const m = str.match(/rgba?\(([^)]+)\)/);
+    if (!m)
+        throw new Error('Invalid rgb string');
+    const parts = m[1].split(',').map((x) => +x.trim());
+    return {
+        r: parts[0],
+        g: parts[1],
+        b: parts[2],
+        a: parts[3] !== undefined ? parts[3] : 1,
+    };
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function parseHslString(str) {
+    const m = str.match(/hsla?\(([^)]+)\)/i);
+    if (!m)
+        throw new Error('Invalid hsl/hsla string');
+    const parts = m[1].split(',').map((x) => x.trim());
+    const h = clamp(parseFloat(parts[0]), 0, 360);
+    const s = clamp(parseFloat(parts[1]), 0, 100);
+    const l = clamp(parseFloat(parts[2]), 0, 100);
+    const a = parts[3] !== undefined ? clamp(parseFloat(parts[3]), 0, 1) : 1;
+    return { h, s, l, a };
+}
+function parseHsvString(str) {
+    const m = str.match(/hsva?\(([^)]+)\)/i);
+    if (!m)
+        throw new Error('Invalid hsv(a) string');
+    const parts = m[1].split(',').map((x) => x.trim());
+    const h = clamp(parseFloat(parts[0]), 0, 360);
+    const s = clamp(parseFloat(parts[1]), 0, 100);
+    const v = clamp(parseFloat(parts[2]), 0, 100);
+    const a = parts[3] !== undefined ? clamp(parseFloat(parts[3]), 0, 1) : 1;
+    return { h, s, v, a };
+}
+function parseCmykString(str) {
+    const m = str.match(/cmyk\(([^)]+)\)/i);
+    if (!m)
+        throw new Error('Invalid cmyk string');
+    const parts = m[1].split(',').map((x) => x.trim());
+    return {
+        c: clamp(parseFloat(parts[0]), 0, 100),
+        m: clamp(parseFloat(parts[1]), 0, 100),
+        y: clamp(parseFloat(parts[2]), 0, 100),
+        k: clamp(parseFloat(parts[3]), 0, 100),
+    };
+}
+/**
+ * Take input from [0, n] and return it as [0, 1]
+ * @hidden
+ */
+function bound01(n, max) {
+    if (isOnePointZero(n)) {
+        n = '100%';
+    }
+    const isPercent = isPercentage(n);
+    n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
+    // Automatically convert percentage into number
+    if (isPercent) {
+        n = parseInt(String(n * max), 10) / 100;
+    }
+    // Handle floating point rounding errors
+    if (Math.abs(n - max) < 0.000001) {
+        return 1;
+    }
+    // Convert into [0, 1] range if it isn't already
+    if (max === 360) {
+        // If n is a hue given in degrees,
+        // wrap around out-of-range values into [0, 360] range
+        // then convert into [0, 1].
+        n = (n < 0 ? (n % max) + max : n % max) / parseFloat(String(max));
+    }
+    else {
+        // If n not a hue given in degrees
+        // Convert into [0, 1] range if it isn't already.
+        n = (n % max) / parseFloat(String(max));
+    }
+    return n;
+}
+/**
+ * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
+ * <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
+ * @hidden
+ */
+function isOnePointZero(n) {
+    return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
+}
+/**
+ * Check to see if string passed in is a percentage
+ * @hidden
+ */
+function isPercentage(n) {
+    return typeof n === 'string' && n.indexOf('%') !== -1;
+}
+/**
+ * Replace a decimal with it's percentage value
+ * @hidden
+ */
+function convertToPercentage(n) {
+    if (Number(n) <= 1) {
+        return `${Number(n) * 100}%`;
+    }
+    return n;
+}
+/**
+ * Force a hex value to have 2 characters
+ * @hidden
+ */
+function pad2(c) {
+    return c.length === 1 ? '0' + c : String(c);
+}
+// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
+// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
+/**
+ * Handle bounds / percentage checking to conform to CSS color spec
+ * <http://www.w3.org/TR/css3-color/>
+ * *Assumes:* r, g, b in [0, 255] or [0, 1]
+ * *Returns:* { r, g, b } in [0, 255]
+ */
+function rgbToRgb(r, g, b) {
+    return {
+        r: bound01(r, 255) * 255,
+        g: bound01(g, 255) * 255,
+        b: bound01(b, 255) * 255,
+    };
+}
+/**
+ * Converts an RGB color value to HSL.
+ * *Assumes:* r, g, and b are contained in [0, 255]
+ * *Returns:* { h: 0-360, s: 0-100, l: 0-100 }
+ */
+function rgbToHsl(r, g, b) {
+    r = r / 255;
+    g = g / 255;
+    b = b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max === min) {
+        s = 0;
+        h = 0;
+    }
+    else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    h = (h * 360) % 360;
+    if (h < 0)
+        h += 360;
+    return {
+        h: max === min ? 0 : h,
+        s: l === 0 || l === 1 ? 0 : s * 100,
+        l: l * 100,
+    };
+}
+/**
+ * Converts an HSL color value to RGB.
+ * *Assumes:* h in [0, 360], s and l in [0, 100]
+ * *Returns:* { r, g, b } in [0, 255]
+ */
+function hslToRgba(h, s, l, a = 1) {
+    h = +h;
+    s = +s;
+    l = +l;
+    h = ((h % 360) + 360) % 360;
+    s = Math.max(0, Math.min(100, s));
+    l = Math.max(0, Math.min(100, l));
+    h = h / 360;
+    s = s / 100;
+    l = l / 100;
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l; // achromatic
+    }
+    else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0)
+                t += 1;
+            if (t > 1)
+                t -= 1;
+            if (t < 1 / 6)
+                return p + (q - p) * 6 * t;
+            if (t < 1 / 2)
+                return q;
+            if (t < 2 / 3)
+                return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return {
+        r: Math.round(r * 255),
+        g: Math.round(g * 255),
+        b: Math.round(b * 255),
+        a: Math.max(0, Math.min(1, a)),
+    };
+}
+/**
+ * Converts an RGB color value to HSV
+ * *Assumes:* r, g, and b are contained in [0, 255]
+ * *Returns:* { h: 0-360, s: 0-100, v: 0-100 }
+ */
+function rgbToHsv(r, g, b) {
+    r = r / 255;
+    g = g / 255;
+    b = b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const v = max;
+    const d = max - min;
+    s = max === 0 ? 0 : d / max;
+    if (max === min) {
+        h = 0;
+    }
+    else {
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    h = (h * 360) % 360;
+    if (h < 0)
+        h += 360;
+    return {
+        h: max === min ? 0 : h,
+        s: max === 0 ? 0 : s * 100,
+        v: v * 100,
+    };
+}
+/**
+ * Converts an HSV color value to RGB.
+ * *Assumes:* h in [0, 360], s and v in [0, 100]
+ * *Returns:* { r, g, b } in [0, 255]
+ */
+function hsvToRgb(h, s, v) {
+    h = +h;
+    s = +s;
+    v = +v;
+    h = ((h % 360) + 360) % 360;
+    s = Math.max(0, Math.min(100, s));
+    v = Math.max(0, Math.min(100, v));
+    s = s / 100;
+    v = v / 100;
+    let r = 0, g = 0, b = 0;
+    const hi = Math.floor(h / 60) % 6;
+    const f = h / 60 - Math.floor(h / 60);
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    switch (hi) {
+        case 0:
+            r = v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = v;
+            break;
+        case 5:
+            r = v;
+            g = p;
+            b = q;
+            break;
+    }
+    return {
+        r: Math.max(0, Math.min(255, Math.round(r * 255))),
+        g: Math.max(0, Math.min(255, Math.round(g * 255))),
+        b: Math.max(0, Math.min(255, Math.round(b * 255))),
+    };
+}
+/**
+ * Converts an RGB/RGBA color to hex
+ */
+function rgbaToHex(r, g, b, a = 1, allowAlpha = true, allow3Char = false) {
+    const toHex = (n) => n.toString(16).padStart(2, '0');
+    const rHex = toHex(Math.round(r));
+    const gHex = toHex(Math.round(g));
+    const bHex = toHex(Math.round(b));
+    const aHex = toHex(Math.round(a * 255));
+    // Try compressing to #rgb or #rgba if allowed and all characters are duplicated
+    if (allow3Char && (!allowAlpha || aHex === 'ff')) {
+        const canShorten = rHex[0] === rHex[1] && gHex[0] === gHex[1] && bHex[0] === bHex[1] && (!allowAlpha || aHex[0] === aHex[1]);
+        if (canShorten) {
+            return '#' + rHex[0] + gHex[0] + bHex[0] + (allowAlpha && aHex !== 'ff' ? aHex[0] : '');
+        }
+    }
+    return '#' + rHex + gHex + bHex + (allowAlpha && aHex !== 'ff' ? aHex : '');
+}
+/**
+ * Converts an RGBA color to an ARGB Hex8 string
+ * Rarely used, but required for "toFilter()"
+ *
+ * *Assumes:* r, g, b are contained in the set [0, 255] and a in [0, 1]
+ * *Returns:* a 8 character argb hex
+ */
+function rgbaToArgbHex(r, g, b, a) {
+    const hex = [
+        pad2(convertDecimalToHex(a)),
+        pad2(Math.round(r).toString(16)),
+        pad2(Math.round(g).toString(16)),
+        pad2(Math.round(b).toString(16)),
+    ];
+    return hex.join('');
+}
+/**
+ * Converts CMYK to RBG
+ * Assumes c, m, y, k are in the set [0, 100]
+ */
+function cmykToRgb(c, m, y, k) {
+    const cConv = c / 100;
+    const mConv = m / 100;
+    const yConv = y / 100;
+    const kConv = k / 100;
+    const r = 255 * (1 - cConv) * (1 - kConv);
+    const g = 255 * (1 - mConv) * (1 - kConv);
+    const b = 255 * (1 - yConv) * (1 - kConv);
+    return { r, g, b };
+}
+function rgbToCmyk(r, g, b) {
+    let c = 1 - r / 255;
+    let m = 1 - g / 255;
+    let y = 1 - b / 255;
+    let k = Math.min(c, m, y);
+    if (k === 1) {
+        c = 0;
+        m = 0;
+        y = 0;
+    }
+    else {
+        c = ((c - k) / (1 - k)) * 100;
+        m = ((m - k) / (1 - k)) * 100;
+        y = ((y - k) / (1 - k)) * 100;
+    }
+    k *= 100;
+    return {
+        c: Math.round(c),
+        m: Math.round(m),
+        y: Math.round(y),
+        k: Math.round(k),
+    };
+}
+/** Converts a decimal to a hex value */
+function convertDecimalToHex(d) {
+    return Math.round(parseFloat(d) * 255).toString(16);
+}
+/** Converts a hex value to a decimal */
+function convertHexToDecimal(h) {
+    return parseIntFromHex(h) / 255;
+}
+/** Parse a base-16 hex value into a base-10 integer */
+function parseIntFromHex(val) {
+    return parseInt(val, 16);
+}
+function numberInputToObject(color) {
+    return {
+        r: color >> 16,
+        g: (color & 0xff00) >> 8,
+        b: color & 0xff,
+    };
+}
+function rgbToHslaString(r, g, b, a = 1) {
+    const { h, s, l } = rgbToHsl(r, g, b);
+    return `hsla(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%, ${+a.toFixed(2)})`;
+}
+function rgbToHsvString(r, g, b, a = 1) {
+    const { h, s, v } = rgbToHsv(r, g, b);
+    return `hsva(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(v)}%, ${+a.toFixed(2)})`;
+}
+function rgbToCmykString(r, g, b) {
+    const { c, m, y, k } = rgbToCmyk(r, g, b);
+    return `cmyk(${Math.round(c)}%, ${Math.round(m)}%, ${Math.round(y)}%, ${Math.round(k)}%)`;
+}
+
+// List of all CSS color names and their hex values (W3C + extended)
+const colorNames = {
+    aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4', azure: '#f0ffff',
+    beige: '#f5f5dc', bisque: '#ffe4c4', black: '#000000', blanchedalmond: '#ffebcd', blue: '#0000ff',
+    blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887', cadetblue: '#5f9ea0', chartreuse: '#7fff00',
+    chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed', cornsilk: '#fff8dc', crimson: '#dc143c',
+    cyan: '#00ffff', darkblue: '#00008b', darkcyan: '#008b8b', darkgoldenrod: '#b8860b', darkgray: '#a9a9a9',
+    darkgreen: '#006400', darkgrey: '#a9a9a9', darkkhaki: '#bdb76b', darkmagenta: '#8b008b', darkolivegreen: '#556b2f',
+    darkorange: '#ff8c00', darkorchid: '#9932cc', darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f',
+    darkslateblue: '#483d8b', darkslategray: '#2f4f4f', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1',
+    darkviolet: '#9400d3', deeppink: '#ff1493', deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969',
+    dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22', fuchsia: '#ff00ff',
+    gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700', goldenrod: '#daa520', gray: '#808080',
+    green: '#008000', greenyellow: '#adff2f', grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4',
+    indianred: '#cd5c5c', indigo: '#4b0082', ivory: '#fffff0', khaki: '#f0e68c', lavender: '#e6e6fa',
+    lavenderblush: '#fff0f5', lawngreen: '#7cfc00', lemonchiffon: '#fffacd', lightblue: '#add8e6', lightcoral: '#f08080',
+    lightcyan: '#e0ffff', lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3', lightgreen: '#90ee90', lightgrey: '#d3d3d3',
+    lightpink: '#ffb6c1', lightsalmon: '#ffa07a', lightseagreen: '#20b2aa', lightskyblue: '#87cefa', lightslategray: '#778899',
+    lightslategrey: '#778899', lightsteelblue: '#b0c4de', lightyellow: '#ffffe0', lime: '#00ff00', limegreen: '#32cd32',
+    linen: '#faf0e6', magenta: '#ff00ff', maroon: '#800000', mediumaquamarine: '#66cdaa', mediumblue: '#0000cd',
+    mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371', mediumslateblue: '#7b68ee',
+    mediumspringgreen: '#00fa9a', mediumturquoise: '#48d1cc', mediumvioletred: '#c71585', midnightblue: '#191970',
+    mintcream: '#f5fffa', mistyrose: '#ffe4e1', moccasin: '#ffe4b5', navajowhite: '#ffdead', navy: '#000080',
+    oldlace: '#fdf5e6', olive: '#808000', olivedrab: '#6b8e23', orange: '#ffa500', orangered: '#ff4500',
+    orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee', palevioletred: '#db7093',
+    papayawhip: '#ffefd5', peachpuff: '#ffdab9', peru: '#cd853f', pink: '#ffc0cb', plum: '#dda0dd', powderblue: '#b0e0e6',
+    purple: '#800080', rebeccapurple: '#663399', red: '#ff0000', rosybrown: '#bc8f8f', royalblue: '#4169e1',
+    saddlebrown: '#8b4513', salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57', seashell: '#fff5ee',
+    sienna: '#a0522d', silver: '#c0c0c0', skyblue: '#87ceeb', slateblue: '#6a5acd', slategray: '#708090',
+    slategrey: '#708090', snow: '#fffafa', springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c',
+    teal: '#008080', thistle: '#d8bfd8', tomato: '#ff6347', turquoise: '#40e0d0', violet: '#ee82ee', wheat: '#f5deb3',
+    white: '#ffffff', whitesmoke: '#f5f5f5', yellow: '#ffff00', yellowgreen: '#9acd32'
+};
+
+class NgxColor {
+    _rgb = { r: 0, g: 0, b: 0, a: 1 };
+    _name = '';
+    constructor(input) {
+        if (!input)
+            return;
+        if (input instanceof NgxColor) {
+            this._rgb = { ...input._rgb };
+            this._name = input._name;
+            return;
+        }
+        if (typeof input === 'object') {
+            if ('r' in input && 'g' in input && 'b' in input) {
+                this._rgb = { r: +input.r, g: +input.g, b: +input.b, a: input.a !== undefined ? +input.a : 1 };
+                return;
+            }
+            if ('h' in input && 's' in input && 'l' in input) {
+                this._rgb = NgxColor.hslaToRgba(input);
+                return;
+            }
+            if ('h' in input && 's' in input && 'v' in input) {
+                this._rgb = NgxColor.hsvaToRgba(input);
+                return;
+            }
+            if ('c' in input && 'm' in input && 'y' in input && 'k' in input) {
+                this._rgb = NgxColor.cmykToRgba(input);
+                return;
+            }
+        }
+        if (typeof input === 'string') {
+            const name = input.trim().toLowerCase();
+            if (colorNames[name]) {
+                this._rgb = hexToRgb(colorNames[name]);
+                this._name = name;
+                return;
+            }
+            else if (/^#?[0-9a-f]{3,8}$/i.test(name)) {
+                this._rgb = hexToRgb(name);
+                return;
+            }
+            if (name.includes('rgb')) {
+                this._rgb = parseRgbString(name);
+                return;
+            }
+            if (name.includes('hsl')) {
+                this._rgb = NgxColor.hslaToRgba(parseHslString(name));
+                return;
+            }
+            if (name.includes('hsv')) {
+                this._rgb = NgxColor.hsvaToRgba(parseHsvString(name));
+                return;
+            }
+            if (name.includes('cmyk')) {
+                this._rgb = NgxColor.cmykToRgba(parseCmykString(name));
+                return;
+            }
+            throw new Error('Unknown color string: ' + input);
+        }
+    }
+    get isValid() {
+        return (typeof this._rgb.r === 'number' &&
+            typeof this._rgb.g === 'number' &&
+            typeof this._rgb.b === 'number' &&
+            !isNaN(this._rgb.r) &&
+            !isNaN(this._rgb.g) &&
+            !isNaN(this._rgb.b));
+    }
+    async name() {
+        if (this._name)
+            return this._name;
+        const hex = this.toHexString();
+        for (const [n, h] of Object.entries(colorNames)) {
+            if (h.toLowerCase() === hex.toLowerCase())
+                return n;
+        }
+        return '';
+    }
+    toRgb() {
+        return this._rgb;
+    }
+    toRgbString() {
+        const { r, g, b, a } = this.toRgb();
+        return a === 1
+            ? `rgb(${Math.round(r)},${Math.round(g)},${Math.round(b)})`
+            : `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${+a.toFixed(3)})`;
+    }
+    toHexString(allowAlpha = true) {
+        const { r, g, b, a } = this.toRgb();
+        return rgbaToHex(r, g, b, a, allowAlpha && a < 1);
+    }
+    toHsl() {
+        return NgxColor.rgbToHsla(this.toRgb());
+    }
+    toHsv() {
+        return NgxColor.rgbToHsva(this.toRgb());
+    }
+    toCmyk() {
+        return NgxColor.rgbToCmyk(this.toRgb());
+    }
+    static cmykToRgba(cmyk) {
+        const { c, m, y, k } = cmyk;
+        return { ...cmykToRgb(c, m, y, k), a: cmyk.a !== undefined ? +cmyk.a : 1 };
+    }
+    static rgbToCmyk(rgba) {
+        const { r, g, b } = rgba;
+        return rgbToCmyk(r, g, b);
+    }
+    static rgbToHsla(rgba) {
+        const { r, g, b, a } = rgba;
+        return { ...rgbToHsl(r, g, b), a };
+    }
+    static rgbToHsva(rgba) {
+        const { r, g, b, a } = rgba;
+        return { ...rgbToHsv(r, g, b), a };
+    }
+    static hsvaToRgba(hsva) {
+        const { h, s, v, a } = hsva;
+        return { ...hsvToRgb(h, s, v), a: a !== undefined ? a : 1 };
+    }
+    static hslaToRgba(hsla) {
+        const { h, s, l, a } = hsla;
+        return { ...hslToRgba(h, s, l), a: a !== undefined ? a : 1 };
+    }
+    equals(other) {
+        if (!other)
+            return false;
+        return this.toHexString().toLowerCase() === other.toHexString().toLowerCase();
+    }
+    isDark() {
+        const { r, g, b, a } = this.toRgb();
+        return a < 0.5 ? false : 0.299 * r + 0.587 * g + 0.114 * b < 128;
+    }
+    isLight() {
+        return !this.isDark();
+    }
+    async getOutputResult(outputType) {
+        const { r, g, b, a } = this._rgb;
+        switch (outputType) {
+            case 'CMYK':
+                return rgbToCmykString(r, g, b);
+            case 'HSL':
+                return rgbToHslaString(r, g, b, a);
+            case 'HSV':
+                return rgbToHsvString(r, g, b, a);
+            case 'RGB':
+                return a < 1 ? `rgba(${r}, ${g}, ${b}, ${+a.toFixed(2)})` : `rgb(${r}, ${g}, ${b})`;
+            case 'HEX':
+                return this.toHexString(true);
+            default:
+                let name = await this.name();
+                return name ?? this.toHexString(true);
+        }
+    }
+    removeAlphaChannel() {
+        this._rgb.a = 1;
+    }
+}
+
+var ColorInspector;
+(function (ColorInspector) {
+    ColorInspector[ColorInspector["Picker"] = 0] = "Picker";
+    ColorInspector[ColorInspector["RGB"] = 1] = "RGB";
+    ColorInspector[ColorInspector["HSL"] = 2] = "HSL";
+    ColorInspector[ColorInspector["CMYK"] = 3] = "CMYK";
+})(ColorInspector || (ColorInspector = {}));
+
+class EnumToArrayPipe {
+    /**
+     *  when data enum like:
+     * A=1,
+     * B=2,
+     * C=3
+     */
+    transform(data) {
+        // The list should be sorted due to the existence of negative ENUMs
+        const keys = Object.keys(data).sort();
+        // return key of enum => men,women,...
+        // return keys.slice(keys.length / 2);
+        // return value of enum => 0,1,2,3
+        return keys.slice(0, keys.length / 2);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EnumToArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.4", ngImport: i0, type: EnumToArrayPipe, isStandalone: true, name: "enumToArray" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EnumToArrayPipe, decorators: [{
+            type: Pipe,
+            args: [{ standalone: true, name: 'enumToArray' }]
+        }] });
+class EnumToArrayStringValuePipe {
+    /**
+     *  when data enum like:
+     * A='A',
+     * B='B',
+     * C='C'
+     */
+    transform(data, sort = true) {
+        let keys = Object.keys(data);
+        if (sort)
+            keys = keys.sort();
+        return keys;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EnumToArrayStringValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.4", ngImport: i0, type: EnumToArrayStringValuePipe, isStandalone: true, name: "enumToArrayStringValue" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EnumToArrayStringValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ standalone: true, name: 'enumToArrayStringValue' }]
+        }] });
+
+class PickerComponent {
+    hue = 300;
+    baseColor = 'rgb(0,0,0)';
+    alphaBgColor = '#000';
+    board = { x: 1, y: 0 };
+    alpha = 1;
+    inputColor;
+    simpleMode = false;
+    set color(c) {
+        if (c.equals(this.inputColor))
+            return;
+        this.inputColor = c;
+        const shva = c.toHsv();
+        this.hue = shva.h;
+        this.board = { x: shva.s, y: 100 - shva.v };
+        this.alpha = shva.a ?? 1;
+        const pureColor = new NgxColor({ h: this.hue, s: 100, v: 100, a: 1 });
+        this.baseColor = pureColor.toHexString(false);
+        this.alphaBgColor = this.inputColor.toHexString(false);
+    }
+    useAlphaChannel = true;
+    colorChange = new EventEmitter();
+    constructor() { }
+    ngOnInit() { }
+    generateColor() {
+        try {
+            const hsva = { h: this.hue, s: this.board.x, v: 100 - this.board.y, a: this.alpha };
+            const color = new NgxColor(hsva);
+            const pureColor = new NgxColor({ h: this.hue, s: 100, v: 100, a: 1 });
+            this.baseColor = pureColor.toHexString(false);
+            this.alphaBgColor = color.toHexString(false);
+            if (color.equals(this.inputColor) == false) {
+                this.inputColor = color;
+                this.colorChange.emit(color);
+            }
+        }
+        catch (error) {
+            this.colorChange.emit(undefined);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: PickerComponent, isStandalone: true, selector: "app-picker", inputs: { simpleMode: "simpleMode", color: "color", useAlphaChannel: "useAlphaChannel" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<saturation\r\n  [height]=\"simpleMode ? 150 : 160\"\r\n  [(ngModel)]=\"board\"\r\n  name=\"board\"\r\n  [min]=\"{ x: 0, y: 0 }\"\r\n  [max]=\"{ x: 100, y: 100 }\"\r\n  [step]=\"1\"\r\n  [color]=\"baseColor\"\r\n  (change)=\"generateColor()\"></saturation>\r\n<slider\r\n  [(ngModel)]=\"hue\"\r\n  name=\"hue\"\r\n  [min]=\"0\"\r\n  [max]=\"360\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\"></slider>\r\n@if (useAlphaChannel) {\r\n  <slider\r\n    [(ngModel)]=\"alpha\"\r\n    name=\"alpha\"\r\n    [min]=\"0\"\r\n    [max]=\"1\"\r\n    [step]=\"0.1\"\r\n    (change)=\"generateColor()\"\r\n    [isBgTransparent]=\"true\"\r\n    [background]=\"'linear-gradient(to right,transparent,' + alphaBgColor + ')'\"></slider>\r\n}\r\n", styles: [".color-sliders{display:flex;gap:5px}.color-sliders .sliders{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }, { kind: "component", type: SaturationComponent, selector: "saturation", inputs: ["width", "height", "color", "step", "min", "max"], outputs: ["change"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-picker', imports: [FormsModule, SliderComponent, SaturationComponent], template: "<saturation\r\n  [height]=\"simpleMode ? 150 : 160\"\r\n  [(ngModel)]=\"board\"\r\n  name=\"board\"\r\n  [min]=\"{ x: 0, y: 0 }\"\r\n  [max]=\"{ x: 100, y: 100 }\"\r\n  [step]=\"1\"\r\n  [color]=\"baseColor\"\r\n  (change)=\"generateColor()\"></saturation>\r\n<slider\r\n  [(ngModel)]=\"hue\"\r\n  name=\"hue\"\r\n  [min]=\"0\"\r\n  [max]=\"360\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\"></slider>\r\n@if (useAlphaChannel) {\r\n  <slider\r\n    [(ngModel)]=\"alpha\"\r\n    name=\"alpha\"\r\n    [min]=\"0\"\r\n    [max]=\"1\"\r\n    [step]=\"0.1\"\r\n    (change)=\"generateColor()\"\r\n    [isBgTransparent]=\"true\"\r\n    [background]=\"'linear-gradient(to right,transparent,' + alphaBgColor + ')'\"></slider>\r\n}\r\n", styles: [".color-sliders{display:flex;gap:5px}.color-sliders .sliders{flex:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { simpleMode: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], useAlphaChannel: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
+            }] } });
+
+class CmykComponent {
+    cyanSliderBackground = '';
+    magentaSliderBackground = '';
+    yellowSliderBackground = '';
+    keySliderBackground = '';
+    cyan = 0;
+    magenta = 0;
+    yellow = 0;
+    key = 0;
+    inputColor;
+    set color(c) {
+        if (c.equals(this.inputColor))
+            return;
+        this.inputColor = c;
+        const cmyk = c.toCmyk();
+        this.cyan = cmyk.c;
+        this.magenta = cmyk.m;
+        this.yellow = cmyk.y;
+        this.key = cmyk.k;
+        this.updateSliderBackgrounds(cmyk);
+    }
+    colorChange = new EventEmitter();
+    constructor() { }
+    ngOnInit() { }
+    generateColor() {
+        try {
+            const cmyk = { c: this.cyan, m: this.magenta, y: this.yellow, k: this.key };
+            const color = new NgxColor(cmyk);
+            this.updateSliderBackgrounds(cmyk);
+            if (color.equals(this.inputColor) == false) {
+                this.inputColor = color;
+                this.colorChange.emit(color);
+            }
+        }
+        catch (error) {
+            this.colorChange.emit(undefined);
+        }
+    }
+    updateSliderBackgrounds(cmyk) {
+        this.cyanSliderBackground = this.getChannelGradient('c', cmyk);
+        this.magentaSliderBackground = this.getChannelGradient('m', cmyk);
+        this.yellowSliderBackground = this.getChannelGradient('y', cmyk);
+        this.keySliderBackground = this.getChannelGradient('k', cmyk);
+    }
+    getChannelGradient(channel, cmyk) {
+        let baseColor = this.cloneColor(cmyk);
+        baseColor[channel] = channel == 'k' ? 1 : 0;
+        let startColor = NgxColor.cmykToRgba(baseColor);
+        let s = `rgb(${startColor.r}, ${startColor.g}, ${startColor.b})`;
+        baseColor[channel] = 100;
+        let endColor = NgxColor.cmykToRgba(baseColor);
+        let e = `rgb(${endColor.r}, ${endColor.g}, ${endColor.b})`;
+        return `linear-gradient(to right,  ${s},${e})`;
+    }
+    isCmykEqual(a, b) {
+        if (!a || !b)
+            return false;
+        return a.c === b.c && a.m === b.m && a.y === b.y && a.k === b.k;
+    }
+    cloneColor(cmyk) {
+        return JSON.parse(JSON.stringify(cmyk));
+        // return Object.assign({}, cmyk);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CmykComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: CmykComponent, isStandalone: true, selector: "app-cmyk", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<slider\r\n  [(ngModel)]=\"cyan\"\r\n  name=\"cyan\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"cyanSliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Cyan</span>\r\n    <input type=\"number\" [(ngModel)]=\"cyan\" name=\"inputCyan\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"magenta\"\r\n  name=\"magenta\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"magentaSliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Magenta</span>\r\n    <input type=\"number\" [(ngModel)]=\"magenta\" name=\"inputMagenta\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"yellow\"\r\n  name=\"yellow\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"yellowSliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Yellow</span>\r\n    <input type=\"number\" [(ngModel)]=\"yellow\" name=\"inputYellow\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"key\"\r\n  name=\"key\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"keySliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Key</span>\r\n    <input type=\"number\" [(ngModel)]=\"key\" name=\"inputKey\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:40px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CmykComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-cmyk', imports: [CommonModule, FormsModule, SliderComponent], template: "<slider\r\n  [(ngModel)]=\"cyan\"\r\n  name=\"cyan\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"cyanSliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Cyan</span>\r\n    <input type=\"number\" [(ngModel)]=\"cyan\" name=\"inputCyan\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"magenta\"\r\n  name=\"magenta\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"magentaSliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Magenta</span>\r\n    <input type=\"number\" [(ngModel)]=\"magenta\" name=\"inputMagenta\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"yellow\"\r\n  name=\"yellow\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"yellowSliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Yellow</span>\r\n    <input type=\"number\" [(ngModel)]=\"yellow\" name=\"inputYellow\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"key\"\r\n  name=\"key\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"keySliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Key</span>\r\n    <input type=\"number\" [(ngModel)]=\"key\" name=\"inputKey\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:40px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
+            }] } });
+
+class HslComponent {
+    hue = 0;
+    saturation = 0;
+    luminance = 0;
+    alpha = 1;
+    baseColor = 'rgb(0,0,0)';
+    inputColor;
+    set color(c) {
+        if (c.equals(this.inputColor))
+            return;
+        this.inputColor = c;
+        const hsla = c.toHsl();
+        this.hue = hsla.h;
+        this.saturation = hsla.s;
+        this.luminance = hsla.l;
+        this.alpha = hsla.a ?? 1;
+        this.baseColor = c.toHexString(false);
+    }
+    useAlphaChannel = true;
+    colorChange = new EventEmitter();
+    constructor() { }
+    ngOnInit() { }
+    generateColor() {
+        try {
+            const hsla = { h: this.hue, s: this.saturation, l: this.luminance, a: this.alpha };
+            const color = new NgxColor(hsla);
+            this.baseColor = color.toHexString(false);
+            if (color.equals(this.inputColor) == false) {
+                this.inputColor = color;
+                this.colorChange.emit(color);
+            }
+        }
+        catch (error) {
+            this.colorChange.emit(undefined);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HslComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: HslComponent, isStandalone: true, selector: "app-hsl", inputs: { color: "color", useAlphaChannel: "useAlphaChannel" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<slider\r\n  [(ngModel)]=\"hue\"\r\n  name=\"hue\"\r\n  [min]=\"0\"\r\n  [max]=\"360\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\">\r\n  <div class=\"slider-title\">\r\n    <span>Hue</span>\r\n    <input type=\"number\" [(ngModel)]=\"hue\" name=\"inputHue\" min=\"0\" max=\"360\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"saturation\"\r\n  name=\"saturation\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"'linear-gradient(to right,#808080,' + baseColor + ')'\">\r\n  <div class=\"slider-title\">\r\n    <span>Saturation</span>\r\n    <input type=\"number\" [(ngModel)]=\"saturation\" name=\"inputSaturation\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"luminance\"\r\n  name=\"luminance\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"'linear-gradient(to right,black,' + baseColor + ',white)'\">\r\n  <div class=\"slider-title\">\r\n    <span>Luminance</span>\r\n    <input type=\"number\" [(ngModel)]=\"luminance\" name=\"inputLuminance\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n@if (useAlphaChannel) {\r\n  <slider\r\n    [(ngModel)]=\"alpha\"\r\n    name=\"alpha\"\r\n    [min]=\"0\"\r\n    [max]=\"1\"\r\n    [step]=\"0.1\"\r\n    (change)=\"generateColor()\"\r\n    [isBgTransparent]=\"true\"\r\n    [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\r\n    <div class=\"slider-title\">\r\n      <span>Alpha</span>\r\n      <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\r\n    </div>\r\n  </slider>\r\n}\r\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:48px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HslComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-hsl', imports: [FormsModule, SliderComponent], template: "<slider\r\n  [(ngModel)]=\"hue\"\r\n  name=\"hue\"\r\n  [min]=\"0\"\r\n  [max]=\"360\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\">\r\n  <div class=\"slider-title\">\r\n    <span>Hue</span>\r\n    <input type=\"number\" [(ngModel)]=\"hue\" name=\"inputHue\" min=\"0\" max=\"360\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"saturation\"\r\n  name=\"saturation\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"'linear-gradient(to right,#808080,' + baseColor + ')'\">\r\n  <div class=\"slider-title\">\r\n    <span>Saturation</span>\r\n    <input type=\"number\" [(ngModel)]=\"saturation\" name=\"inputSaturation\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"luminance\"\r\n  name=\"luminance\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"'linear-gradient(to right,black,' + baseColor + ',white)'\">\r\n  <div class=\"slider-title\">\r\n    <span>Luminance</span>\r\n    <input type=\"number\" [(ngModel)]=\"luminance\" name=\"inputLuminance\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n@if (useAlphaChannel) {\r\n  <slider\r\n    [(ngModel)]=\"alpha\"\r\n    name=\"alpha\"\r\n    [min]=\"0\"\r\n    [max]=\"1\"\r\n    [step]=\"0.1\"\r\n    (change)=\"generateColor()\"\r\n    [isBgTransparent]=\"true\"\r\n    [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\r\n    <div class=\"slider-title\">\r\n      <span>Alpha</span>\r\n      <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\r\n    </div>\r\n  </slider>\r\n}\r\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:48px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{
+                type: Input
+            }], useAlphaChannel: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
+            }] } });
+
+class RgbComponent {
+    redSliderBackground = '';
+    greenSliderBackground = '';
+    blueSliderBackground = '';
+    baseColor = 'rgb(0,0,0)';
+    red = 0;
+    green = 0;
+    blue = 0;
+    alpha = 1;
+    inputColor;
+    set color(c) {
+        if (c.equals(this.inputColor))
+            return;
+        this.inputColor = c;
+        const rgba = c.toRgb();
+        this.red = rgba.r;
+        this.green = rgba.g;
+        this.blue = rgba.b;
+        this.alpha = rgba.a ?? 1;
+        this.updateRgbSliderColor(rgba);
+    }
+    useAlphaChannel = true;
+    colorChange = new EventEmitter();
+    constructor() { }
+    ngOnInit() { }
+    generateColor() {
+        try {
+            const rgba = { r: this.red, g: this.green, b: this.blue, a: this.alpha };
+            const color = new NgxColor(rgba);
+            this.updateRgbSliderColor(rgba);
+            if (color.equals(this.inputColor) == false) {
+                this.inputColor = color;
+                this.colorChange.emit(color);
+            }
+        }
+        catch (error) {
+            this.colorChange.emit(undefined);
+        }
+    }
+    updateRgbSliderColor(rgba) {
+        const { r, g, b } = rgba;
+        this.redSliderBackground = `linear-gradient(to right, rgb(0, ${g}, ${b}), rgb(255, ${g}, ${b}))`;
+        this.greenSliderBackground = `linear-gradient(to right, rgb(${r}, 0, ${b}), rgb(${r}, 255, ${b}))`;
+        this.blueSliderBackground = `linear-gradient(to right, rgb(${r}, ${g}, 0), rgb(${r}, ${g}, 255))`;
+        this.baseColor = `rgb(${r}, ${g}, ${b})`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RgbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RgbComponent, isStandalone: true, selector: "app-rgb", inputs: { color: "color", useAlphaChannel: "useAlphaChannel" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<slider\r\n  [(ngModel)]=\"red\"\r\n  name=\"red\"\r\n  [min]=\"0\"\r\n  [max]=\"255\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"redSliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Red</span>\r\n    <input type=\"number\" [(ngModel)]=\"red\" name=\"inputRed\" min=\"0\" max=\"255\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"green\"\r\n  name=\"green\"\r\n  [min]=\"0\"\r\n  [max]=\"255\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"greenSliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Green</span>\r\n    <input type=\"number\" [(ngModel)]=\"green\" name=\"inputGreen\" min=\"0\" max=\"255\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"blue\"\r\n  name=\"blue\"\r\n  [min]=\"0\"\r\n  [max]=\"255\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"blueSliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Blue</span>\r\n    <input type=\"number\" [(ngModel)]=\"blue\" name=\"inputBlue\" min=\"0\" max=\"255\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n@if (useAlphaChannel) {\r\n  <slider\r\n    [(ngModel)]=\"alpha\"\r\n    name=\"alpha\"\r\n    [min]=\"0\"\r\n    [max]=\"1\"\r\n    [step]=\"0.1\"\r\n    (change)=\"generateColor()\"\r\n    [isBgTransparent]=\"true\"\r\n    [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\r\n    <div class=\"slider-title\">\r\n      <span>Alpha</span>\r\n      <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\r\n    </div>\r\n  </slider>\r\n}\r\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:40px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RgbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-rgb', imports: [FormsModule, SliderComponent], template: "<slider\r\n  [(ngModel)]=\"red\"\r\n  name=\"red\"\r\n  [min]=\"0\"\r\n  [max]=\"255\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"redSliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Red</span>\r\n    <input type=\"number\" [(ngModel)]=\"red\" name=\"inputRed\" min=\"0\" max=\"255\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"green\"\r\n  name=\"green\"\r\n  [min]=\"0\"\r\n  [max]=\"255\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"greenSliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Green</span>\r\n    <input type=\"number\" [(ngModel)]=\"green\" name=\"inputGreen\" min=\"0\" max=\"255\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"blue\"\r\n  name=\"blue\"\r\n  [min]=\"0\"\r\n  [max]=\"255\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"blueSliderBackground\">\r\n  <div class=\"slider-title\">\r\n    <span>Blue</span>\r\n    <input type=\"number\" [(ngModel)]=\"blue\" name=\"inputBlue\" min=\"0\" max=\"255\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n@if (useAlphaChannel) {\r\n  <slider\r\n    [(ngModel)]=\"alpha\"\r\n    name=\"alpha\"\r\n    [min]=\"0\"\r\n    [max]=\"1\"\r\n    [step]=\"0.1\"\r\n    (change)=\"generateColor()\"\r\n    [isBgTransparent]=\"true\"\r\n    [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\r\n    <div class=\"slider-title\">\r\n      <span>Alpha</span>\r\n      <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\r\n    </div>\r\n  </slider>\r\n}\r\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:40px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{
+                type: Input
+            }], useAlphaChannel: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
+            }] } });
+
+class NgxInputColorComponent {
+    cd;
+    browserService = inject(BrowserService);
+    theme = this.browserService.prefersDarkMode ? 'dark' : 'light';
+    set setTheme(val) {
+        if (!val || val == 'auto') {
+            this.theme = this.browserService.prefersDarkMode ? 'dark' : 'light';
+        }
+        else {
+            this.theme = val;
+        }
+    }
+    /** Minifi UI  */
+    simpleMode = false;
+    outputType = 'HEX';
+    /**
+     * default inspectors
+     * - ColorInspector.Picker
+     * - ColorInspector.RGB
+     * - ColorInspector.HSL
+     *
+     * @alias defaultInspector
+     */
+    defaultInspector = ColorInspector.Picker;
+    useAlphaChannel = true;
+    set setUseAlphaChannel(val) {
+        this.useAlphaChannel = val == true;
+        if (!this.useAlphaChannel) {
+            this.color.removeAlphaChannel();
+            this.emitChange();
+        }
+    }
+    /** Emitted when the color value changes */
+    change = new EventEmitter();
+    /** @ignore */
+    format = ColorFormats.HSVA;
+    /** @ignore */
+    isDarkColor = true;
+    /** @ignore */
+    rgbaColor = 'rgba(0, 0, 0, 1)';
+    /** @ignore */
+    hexColor = '#000000';
+    outputColor = '';
+    /** @ignore */
+    name = 'black';
+    /** @ignore */
+    isSupportedEyeDrop;
+    /** @ignore */
+    color = new NgxColor();
+    /** @ignore */
+    isDisabled = false;
+    /**@ignore */
+    _onChange = (value) => { };
+    /**@ignore */
+    _onTouched = () => { };
+    /**@ignore */
+    _onValidateChange = () => { };
+    constructor(cd) {
+        this.cd = cd;
+        this.isSupportedEyeDrop = 'EyeDropper' in window;
+    }
+    /** @ignore */
+    ngOnInit() { }
+    /** @ignore */
+    ngOnDestroy() { }
+    get ColorFormats() {
+        return ColorFormats;
+    }
+    get ColorInspector() {
+        return ColorInspector;
+    }
+    /** @ignore */
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    /** @ignore */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /** @ignore */
+    setDisabledState(disabled) {
+        this.isDisabled = disabled;
+    }
+    /** @ignore */
+    registerOnValidatorChange(fn) {
+        this._onValidateChange = fn;
+    }
+    /** @ignore */
+    validate(control) {
+        if (this.color && this.color.isValid === false) {
+            return { invalid: true };
+        }
+        return null;
+    }
+    /** @ignore */
+    writeValue(value) {
+        try {
+            const c = value ? new NgxColor(value) : new NgxColor('#000');
+            this.initColor(c);
+            this._onValidateChange();
+        }
+        catch (e) {
+            const c = new NgxColor('#000'); // مقدار پیش‌فرض
+            this.initColor(c);
+        }
+    }
+    /** @ignore */
+    openEyeDrop() {
+        if (this.isSupportedEyeDrop) {
+            let t = new EyeDropper().open();
+            t.then(async (result) => {
+                this.hexColor = result.sRGBHex;
+                this.initColor(new NgxColor(this.hexColor));
+                this.cd.detectChanges();
+            });
+        }
+    }
+    /**
+     *  call from directive
+    /* @ignore
+     */
+    async initColor(c) {
+        if (!c)
+            return;
+        this.color = c;
+        this.rgbaColor = this.color.toRgbString();
+        this.hexColor = this.color.toHexString();
+        this.outputColor = await this.color.getOutputResult(this.outputType);
+        this.isDarkColor = this.color.isDark();
+        this.name = await this.color.name();
+        this.emitChange();
+    }
+    /** @ignore */
+    stopPropagation(ev) {
+        ev.stopPropagation();
+    }
+    /** @ignore */
+    async emitChange() {
+        this.outputColor = await this.color.getOutputResult(this.outputType);
+        this._onChange(this.outputColor);
+        this.change.emit(this.outputColor);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxInputColorComponent, isStandalone: true, selector: "ngx-input-color", inputs: { setTheme: ["theme", "setTheme"], simpleMode: "simpleMode", outputType: "outputType", defaultInspector: "defaultInspector", setUseAlphaChannel: ["useAlphaChannel", "setUseAlphaChannel"] }, outputs: { change: "change" }, host: { properties: { "class.dark": "theme==\"dark\"" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxInputColorComponent), multi: true },
+            {
+                provide: NG_VALIDATORS,
+                multi: true,
+                useExisting: NgxInputColorComponent,
+            },
+        ], ngImport: i0, template: "<div class=\"ngx-input-color-picker\" (click)=\"stopPropagation($event)\" [class.simple-mode]=\"simpleMode\">\r\n  @if (!simpleMode) {\r\n    <div\r\n      class=\"ngx-color-preview\"\r\n      [ngStyle]=\"{ '--ngx-selected-color': rgbaColor }\"\r\n      [class.is-dark-color]=\"isDarkColor\">\r\n      <div class=\"rgbacode\">{{ outputColor | uppercase }}</div>\r\n      @if (outputType !== 'HEX') {\r\n        <div class=\"hexacode\">{{ hexColor | uppercase }}</div>\r\n      }\r\n      <div class=\"colorname\">{{ name }}</div>\r\n      <div class=\"color\"></div>\r\n    </div>\r\n  }\r\n  <div class=\"ngx-c-inner\">\r\n    <div class=\"top-actions\">\r\n      <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\r\n        @for (inspector of ColorInspector | enumToArray; track inspector) {\r\n          <option [value]=\"inspector\">\r\n            {{ ColorInspector[+inspector] }}\r\n          </option>\r\n        }\r\n      </select>\r\n      @if (isSupportedEyeDrop) {\r\n        <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n            <defs>\r\n              <style>\r\n                .fa-secondary {\r\n                  opacity: 0.4;\r\n                }\r\n              </style>\r\n            </defs>\r\n            <path\r\n              class=\"fa-primary\"\r\n              d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\r\n            <path\r\n              class=\"fa-secondary\"\r\n              d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @switch (+defaultInspector) {\r\n      @case (ColorInspector.Picker) {\r\n        <app-picker\r\n          [color]=\"color\"\r\n          (colorChange)=\"initColor($event)\"\r\n          [simpleMode]=\"simpleMode\"\r\n          [useAlphaChannel]=\"useAlphaChannel\"></app-picker>\r\n      }\r\n      @case (ColorInspector.HSL) {\r\n        <app-hsl [color]=\"color\" (colorChange)=\"initColor($event)\" [useAlphaChannel]=\"useAlphaChannel\"></app-hsl>\r\n      }\r\n      @case (ColorInspector.RGB) {\r\n        <app-rgb [color]=\"color\" (colorChange)=\"initColor($event)\" [useAlphaChannel]=\"useAlphaChannel\"></app-rgb>\r\n      }\r\n      @case (ColorInspector.CMYK) {\r\n        <app-cmyk [color]=\"color\" (colorChange)=\"initColor($event)\"></app-cmyk>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff}.ngx-input-color-picker{width:270px;max-width:100%;border:1px #bfbfbf solid;border-radius:15px;overflow:hidden;box-shadow:0 0 20px #0000004f;direction:ltr;font-family:arial,tahoma}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.ngx-color-preview{min-height:100px;padding:10px 36px;line-height:1.6;font-size:14px;font-family:arial,tahoma;font-weight:700;position:relative;color:#353535;background-color:#fff}.ngx-color-preview.is-dark-color{color:#fff}.ngx-color-preview:after,.ngx-color-preview:before{content:\" \";position:absolute;inset:0}.ngx-color-preview:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.ngx-color-preview:after{background:var(--ngx-selected-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text)}.top-actions select:focus{cursor:pointer;background:#e5f0ff;color:#06f}.top-actions select option{padding:10px 20px;background:var(--ngx-color-bg);color:var(--ngx-color-text);transition:all .3s}.top-actions select option:hover{background:#f0f0f048}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PickerComponent, selector: "app-picker", inputs: ["simpleMode", "color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "component", type: CmykComponent, selector: "app-cmyk", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: HslComponent, selector: "app-hsl", inputs: ["color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "component", type: RgbComponent, selector: "app-rgb", inputs: ["color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: EnumToArrayPipe, name: "enumToArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'ngx-input-color', providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxInputColorComponent), multi: true },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: NgxInputColorComponent,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.dark]': 'theme=="dark"',
+                    }, imports: [CommonModule, FormsModule, EnumToArrayPipe, PickerComponent, CmykComponent, HslComponent, RgbComponent], template: "<div class=\"ngx-input-color-picker\" (click)=\"stopPropagation($event)\" [class.simple-mode]=\"simpleMode\">\r\n  @if (!simpleMode) {\r\n    <div\r\n      class=\"ngx-color-preview\"\r\n      [ngStyle]=\"{ '--ngx-selected-color': rgbaColor }\"\r\n      [class.is-dark-color]=\"isDarkColor\">\r\n      <div class=\"rgbacode\">{{ outputColor | uppercase }}</div>\r\n      @if (outputType !== 'HEX') {\r\n        <div class=\"hexacode\">{{ hexColor | uppercase }}</div>\r\n      }\r\n      <div class=\"colorname\">{{ name }}</div>\r\n      <div class=\"color\"></div>\r\n    </div>\r\n  }\r\n  <div class=\"ngx-c-inner\">\r\n    <div class=\"top-actions\">\r\n      <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\r\n        @for (inspector of ColorInspector | enumToArray; track inspector) {\r\n          <option [value]=\"inspector\">\r\n            {{ ColorInspector[+inspector] }}\r\n          </option>\r\n        }\r\n      </select>\r\n      @if (isSupportedEyeDrop) {\r\n        <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n            <defs>\r\n              <style>\r\n                .fa-secondary {\r\n                  opacity: 0.4;\r\n                }\r\n              </style>\r\n            </defs>\r\n            <path\r\n              class=\"fa-primary\"\r\n              d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\r\n            <path\r\n              class=\"fa-secondary\"\r\n              d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @switch (+defaultInspector) {\r\n      @case (ColorInspector.Picker) {\r\n        <app-picker\r\n          [color]=\"color\"\r\n          (colorChange)=\"initColor($event)\"\r\n          [simpleMode]=\"simpleMode\"\r\n          [useAlphaChannel]=\"useAlphaChannel\"></app-picker>\r\n      }\r\n      @case (ColorInspector.HSL) {\r\n        <app-hsl [color]=\"color\" (colorChange)=\"initColor($event)\" [useAlphaChannel]=\"useAlphaChannel\"></app-hsl>\r\n      }\r\n      @case (ColorInspector.RGB) {\r\n        <app-rgb [color]=\"color\" (colorChange)=\"initColor($event)\" [useAlphaChannel]=\"useAlphaChannel\"></app-rgb>\r\n      }\r\n      @case (ColorInspector.CMYK) {\r\n        <app-cmyk [color]=\"color\" (colorChange)=\"initColor($event)\"></app-cmyk>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff}.ngx-input-color-picker{width:270px;max-width:100%;border:1px #bfbfbf solid;border-radius:15px;overflow:hidden;box-shadow:0 0 20px #0000004f;direction:ltr;font-family:arial,tahoma}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.ngx-color-preview{min-height:100px;padding:10px 36px;line-height:1.6;font-size:14px;font-family:arial,tahoma;font-weight:700;position:relative;color:#353535;background-color:#fff}.ngx-color-preview.is-dark-color{color:#fff}.ngx-color-preview:after,.ngx-color-preview:before{content:\" \";position:absolute;inset:0}.ngx-color-preview:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.ngx-color-preview:after{background:var(--ngx-selected-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text)}.top-actions select:focus{cursor:pointer;background:#e5f0ff;color:#06f}.top-actions select option{padding:10px 20px;background:var(--ngx-color-bg);color:var(--ngx-color-text);transition:all .3s}.top-actions select option:hover{background:#f0f0f048}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { setTheme: [{
+                type: Input,
+                args: ['theme']
+            }], simpleMode: [{
+                type: Input
+            }], outputType: [{
+                type: Input
+            }], defaultInspector: [{
+                type: Input
+            }], setUseAlphaChannel: [{
+                type: Input,
+                args: ['useAlphaChannel']
+            }], change: [{
+                type: Output
+            }] } });
+
+class NgxInputColor {
+    el;
+    renderer;
+    viewContainerRef;
+    dialogService;
+    setInputBackgroundColor = true;
+    defaultInspector = ColorInspector.Picker;
+    simpleMode = false;
+    outputType = 'HEX';
+    theme = 'auto';
+    useAlphaChannel = true;
+    set setUseAlphaChannel(val) {
+        this.useAlphaChannel = val == true;
+        if (!this.useAlphaChannel && this.color) {
+            this.color.removeAlphaChannel();
+            this.color.getOutputResult(this.outputType).then((c) => {
+                this.emitChange(c);
+            });
+        }
+    }
+    boundInputHandler = (e) => {
+        this.writeValue(e.target.value);
+    };
+    _targetInput;
+    set ngxInputColor(el) {
+        this.isHostInput = false;
+        if (el instanceof ElementRef) {
+            this._targetInput = el.nativeElement;
+        }
+        else if (el instanceof HTMLInputElement) {
+            this.isHostInput = true;
+            this._targetInput = el;
+        }
+        else {
+            this._targetInput = undefined;
+        }
+        if (this._targetInput) {
+            this._targetInput.removeEventListener('input', this.boundInputHandler);
+            this._targetInput.addEventListener('input', this.boundInputHandler);
+        }
+    }
+    change = new EventEmitter();
+    color;
+    pickerRef;
+    isHostInput = false;
+    inValid = false;
+    _onChange = (value) => { };
+    _onTouched = () => { };
+    _onValidateChange = () => { };
+    constructor(el, renderer, viewContainerRef, dialogService) {
+        this.el = el;
+        this.renderer = renderer;
+        this.viewContainerRef = viewContainerRef;
+        this.dialogService = dialogService;
+    }
+    ngAfterViewInit() {
+        if (this._targetInput && this._targetInput.tagName.toLowerCase() === 'input') {
+            this.writeValue(this._targetInput.value);
+        }
+    }
+    ngOnDestroy() {
+        this.destroyColorPicker();
+    }
+    onClick(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        this.toggleColorPicker();
+    }
+    writeValue(value) {
+        try {
+            this.color = value ? new NgxColor(value) : undefined;
+            const colorStr = this.color?.toHexString() ?? '';
+            // اگر دایرکتیو روی input باشه (ControlValueAccessor)
+            if (this.isHostInput) {
+                const input = this.el.nativeElement;
+                input.value = colorStr;
+            }
+            // اگر input خارجی مشخص شده
+            if (this._targetInput instanceof HTMLInputElement) {
+                this._targetInput.value = colorStr;
+            }
+            if (this.setInputBackgroundColor) {
+                this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', colorStr);
+            }
+            this.inValid = false;
+            this._onValidateChange();
+        }
+        catch (e) {
+            this.color = new NgxColor('#000'); // مقدار پیش‌فرض
+            this.inValid = true;
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        if (disabled) {
+            this.renderer.setProperty(this.el.nativeElement, 'disabled', disabled);
+        }
+        else {
+            this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
+        }
+    }
+    registerOnValidatorChange(fn) {
+        this._onValidateChange = fn;
+    }
+    validate(control) {
+        if ((this.color && this.color.isValid === false) || this.inValid === true) {
+            return { invalid: true };
+        }
+        return null;
+    }
+    toggleColorPicker() {
+        if (this.pickerRef) {
+            this.destroyColorPicker();
+            return;
+        }
+        this.pickerRef = this.dialogService.open({
+            anchor: this.el.nativeElement,
+            component: NgxInputColorComponent,
+            viewContainerRef: this.viewContainerRef,
+            alignment: 'start',
+            placement: 'auto',
+            configure: (instance, ref) => {
+                instance.defaultInspector = this.defaultInspector;
+                instance.simpleMode = this.simpleMode;
+                instance.outputType = this.outputType;
+                instance.setTheme = this.theme;
+                instance.setUseAlphaChannel = this.useAlphaChannel;
+                if (this.color?.isValid)
+                    instance.writeValue(this.color);
+                instance.change.subscribe((c) => {
+                    this.color = new NgxColor(c);
+                    this.emitChange(c);
+                });
+                // instance.closed.subscribe(() => ref.close());
+            },
+            onClosed: () => {
+                this.pickerRef = undefined;
+            },
+        });
+    }
+    destroyColorPicker() {
+        this.pickerRef?.close();
+        this.pickerRef = undefined;
+    }
+    async emitChange(c) {
+        if (this.setInputBackgroundColor) {
+            this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', c);
+        }
+        // اگر روی input باشیم، مقدار رو در input قرار بده
+        if (this.isHostInput) {
+            const input = this.el.nativeElement;
+            input.value = c;
+        }
+        // اگر targetInput وجود داره، در اونم مقدار ست کن
+        if (this._targetInput instanceof HTMLInputElement) {
+            this._targetInput.value = c;
+            const event = new Event('input', { bubbles: true });
+            this._targetInput.dispatchEvent(event);
+        }
+        this._onChange(c);
+        this.change.emit(c);
+        this._onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColor, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i1$2.DialogService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxInputColor, isStandalone: true, selector: "[ngxInputColor]", inputs: { setInputBackgroundColor: "setInputBackgroundColor", defaultInspector: "defaultInspector", simpleMode: "simpleMode", outputType: "outputType", theme: "theme", setUseAlphaChannel: ["useAlphaChannel", "setUseAlphaChannel"], ngxInputColor: "ngxInputColor" }, outputs: { change: "change" }, host: { listeners: { "click": "onClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NgxInputColor),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => NgxInputColor),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxInputColor]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgxInputColor),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => NgxInputColor),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i1$2.DialogService }], propDecorators: { setInputBackgroundColor: [{
+                type: Input
+            }], defaultInspector: [{
+                type: Input
+            }], simpleMode: [{
+                type: Input
+            }], outputType: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], setUseAlphaChannel: [{
+                type: Input,
+                args: ['useAlphaChannel']
+            }], ngxInputColor: [{
+                type: Input,
+                args: ['ngxInputColor']
+            }], change: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorInspector, EnumToArrayPipe, EnumToArrayStringValuePipe, NgxInputColor, NgxInputColorComponent };
+//# sourceMappingURL=ngx-input-color-picker.mjs.map