@libs-ui/components-color-picker 0.2.10

package/fesm2022/libs-ui-components-color-picker.mjs

@@ -0,0 +1,589 @@
+import * as i0 from '@angular/core';
+import { signal, inject, input, output, viewChild, Component, ChangeDetectionStrategy } from '@angular/core';
+import { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';
+import { LibsUiNotificationService } from '@libs-ui/services-notification';
+import { get, isNil, set } from '@libs-ui/utils';
+
+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', 'darkgrey': '#A9A9A9', 'darkgreen': '#006400', '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', 'grey': '#808080', 'green': '#008000', 'greenyellow': '#ADFF2F', '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', 'lightgrey': '#D3D3D3', 'lightgreen': '#90EE90', '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' };
+const optionsDefault = () => {
+    return {
+        showHsl: false,
+        showRgb: true,
+        showHex: true,
+        showAlpha: false,
+        color: '#ff0000',
+        format: 'color',
+        slBarSize: [316, 200],
+        hueBarSize: [316, 20],
+        alphaBarSize: [316, 20]
+    };
+};
+const limit = (value, min, max) => {
+    value = +value;
+    return isNaN(value) ? min : (value < min ? min : (value > max ? max : value));
+};
+const hslToRgb = (h, s, l) => {
+    let r, g, b;
+    [h, s, l] = [limit(h, 0, 360) / 360, limit(s, 0, 100) / 100, limit(l, 0, 100) / 100];
+    if (s == 0) {
+        r = g = b = l; // achromatic
+        return [r * 255, g * 255, b * 255].map(Math.round);
+    }
+    const hueToRgb = (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 = hueToRgb(p, q, h + (1 / 3));
+    g = hueToRgb(p, q, h);
+    b = hueToRgb(p, q, h - (1 / 3));
+    return [r * 255, g * 255, b * 255].map(Math.round);
+};
+const cssColorToRgba = (color) => {
+    if (color) {
+        const colorByName = get(ColorNames, color.toLowerCase());
+        const [, , , r, g, b, a, , rr, gg, bb, aa] = /^\s*#?((([0-9A-F])([0-9A-F])([0-9A-F])([0-9A-F])?)|(([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})?))\s*$/i.exec(colorByName || color) || [];
+        if (!isNil(r)) {
+            return [
+                parseInt(r + r, 16),
+                parseInt(g + g, 16),
+                parseInt(b + b, 16),
+                a ? +((parseInt(a + a, 16)) / 255).toFixed(2) : 1
+            ];
+        }
+        if (!isNil(rr)) {
+            return [
+                parseInt(rr, 16),
+                parseInt(gg, 16),
+                parseInt(bb, 16),
+                aa ? +((parseInt(aa, 16)) / 255).toFixed(2) : 1
+            ];
+        }
+    }
+    return undefined;
+};
+const parseColorToRgba = (color) => {
+    if (Array.isArray(color)) {
+        return [
+            limit(color[0], 0, 255),
+            limit(color[1], 0, 255),
+            limit(color[2], 0, 255),
+            limit(color[3] ?? 1, 0, 1)
+        ];
+    }
+    const parsed = cssColorToRgba(color) || cssRgbaToRgba(color);
+    if (parsed && parsed.length === 3) {
+        parsed.push(1);
+    }
+    return parsed;
+};
+const cssRgbaToRgba = (rgba) => {
+    if (rgba) {
+        const [m, r, g, b, , a] = /^rgba?\((\d+)\s*[\s,]\s*(\d+)\s*[\s,]\s*(\d+)(\s*[\s,]\s*(\d*(.\d+)?))?\)/i.exec(rgba) || [];
+        return m ? [limit(r, 0, 255), limit(g, 0, 255), limit(b, 0, 255), limit(a ?? 1, 0, 1)] : undefined;
+    }
+    return undefined;
+};
+const cssHslaToHsla = (hsla) => {
+    if (hsla) {
+        const [m, h, s, l, , a] = /^hsla?\((\d+)\s*[\s,]\s*(\d+)\s*[\s,]\s*(\d+)(\s*[\s,]\s*(\d*(.\d+)?))?\)/i.exec(hsla) || [];
+        return m ? [limit(h, 0, 255), limit(s, 0, 255), limit(l, 0, 255), limit(a ?? 1, 0, 1)] : undefined;
+    }
+    return undefined;
+};
+const parseColorToHsla = (color) => {
+    if (Array.isArray(color)) {
+        return [
+            limit(color[0], 0, 360),
+            limit(color[1], 0, 100),
+            limit(color[2], 0, 100),
+            limit(color[3] ?? 1, 0, 1)
+        ];
+    }
+    const parsed = cssHslaToHsla(color);
+    if (parsed && parsed.length === 3) {
+        parsed.push(1);
+    }
+    return parsed;
+};
+const rgbToHsl = (r, g, b) => {
+    [r, g, b] = [limit(r, 0, 255) / 255, limit(g, 0, 255) / 255, limit(b, 0, 255) / 255];
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h, s = (max + min) / 2;
+    const l = (max + min) / 2;
+    if (max == min) {
+        h = s = 0; // achromatic
+        return [h * 360, s * 100, l * 100].map(Math.round);
+    }
+    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 = (h || 0) / 6;
+    return [h * 360, s * 100, l * 100].map(Math.round);
+};
+const rgbToHex = (r, g, b) => {
+    [r, g, b] = [limit(r, 0, 255), limit(g, 0, 255), limit(b, 0, 255)];
+    return "#" + ("000000" + ((r << 16) | (g << 8) | b).toString(16)).slice(-6);
+};
+const rgbToInt = (r, g, b) => {
+    return (r << 16) | (g << 8) | b;
+};
+const rgbToHsv = (r, g, b) => {
+    [r, g, b] = [limit(r, 0, 255) / 255, limit(g, 0, 255) / 255, limit(b, 0, 255) / 255];
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h, s = max;
+    const v = max;
+    const d = max - min;
+    s = max === 0 ? 0 : d / max;
+    if (max == min) {
+        h = 0;
+        return [h, s, v];
+    }
+    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 = (h || 0) / 6;
+    return [h, s, v];
+};
+const formatColor = (data, format) => {
+    switch (format) {
+        case 'rgb':
+        default:
+            return data.slice(0, 3);
+        case 'rgbcss':
+            return `rgb(${data[0]}, ${data[1]}, ${data[2]})`;
+        case 'rgbcss4':
+            return `rgb(${data[0]}, ${data[1]}, ${data[2]}, ${data[3]})`;
+        case 'rgba':
+            return data;
+        case 'rgbacss':
+            return `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3]})`;
+        case 'hsl':
+            return rgbToHsl(data[0], data[1], data[2]);
+        case 'hslcss':
+            data = rgbToHsl(data[0], data[1], data[2]);
+            return `hsl(${data[0]}, ${data[1]}, ${data[2]})`;
+        case 'hslcss4': {
+            const hh = rgbToHsl(data[0], data[1], data[2]);
+            return `hsl(${hh[0]}, ${hh[1]}, ${hh[2]}, ${data[3]})`;
+        }
+        case 'hsla':
+            return [...rgbToHsl(data[0], data[1], data[2]), data[3]];
+        case 'hslacss': {
+            const ha = rgbToHsl(data[0], data[1], data[2]);
+            return `hsla(${ha[0]}, ${ha[1]}, ${ha[2]}, ${data[3]})`;
+        }
+        case 'hex':
+            return rgbToHex(data[0], data[1], data[2]);
+        case 'hexcss4':
+            return rgbToHex(data[0], data[1], data[2]) + ('00' + parseInt((data[3] * 255).toString()).toString(16)).slice(-2);
+        case 'int':
+            return rgbToInt(data[0], data[1], data[2]);
+    }
+};
+const parseColor = (color, format) => {
+    if (!isNil(color)) {
+        let data = [];
+        data = parseColorToRgba(color) || (parseColorToHsla(color) && [...hslToRgb(data[0], data[1], data[2]), data[3]]);
+        if (data) {
+            if (typeof format === 'object') {
+                return ['rgb', 'rgbcss', 'rgbcss4', 'rgba', 'rgbacss', 'hsl', 'hslcss', 'hslcss4', 'hsla', 'hslacss', 'hex', 'hexcss4', 'int'].reduce((m, f) => {
+                    set(m, f, formatColor(data, f));
+                    return m;
+                }, format);
+            }
+            return formatColor(data, format);
+        }
+    }
+    return undefined;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const canvasHelper = (canvas) => {
+    const ctx = canvas.getContext('2d');
+    const width = +canvas.width;
+    const height = +canvas.height;
+    const whiteBlackGradient = ctx.createLinearGradient(1, 1, 1, height - 1);
+    whiteBlackGradient.addColorStop(0, 'white');
+    whiteBlackGradient.addColorStop(1, 'black');
+    return {
+        setHue: (hue) => {
+            const colorGradient = ctx.createLinearGradient(1, 0, width - 1, 0);
+            colorGradient.addColorStop(0, `hsla(${hue}, 100%, 50%, 0)`);
+            colorGradient.addColorStop(1, `hsla(${hue}, 100%, 50%, 1)`);
+            ctx.fillStyle = whiteBlackGradient;
+            ctx.fillRect(0, 0, width, height);
+            ctx.fillStyle = colorGradient;
+            ctx.globalCompositeOperation = 'multiply';
+            ctx.fillRect(0, 0, width, height);
+            ctx.globalCompositeOperation = 'source-over';
+        },
+        grabColor: (x, y) => ctx.getImageData(x, y, 1, 1).data,
+        findColor: (r, g, b) => {
+            const [, s, v] = rgbToHsv(r, g, b);
+            const x = s * width;
+            const y = height - (v * height);
+            return [x, y];
+        }
+    };
+};
+const defaultHelper = () => {
+    return {
+        setHue: () => { return; },
+        grabColor: () => [],
+        findColor: () => []
+    };
+};
+
+class LibsUiComponentsColorPickerComponent {
+    /* PROPERTY */
+    hDisplay = signal({ value: 0 });
+    sDisplay = signal({ value: 0 });
+    lDisplay = signal({ value: 0 });
+    rDisplay = signal({ value: 0 });
+    gDisplay = signal({ value: 0 });
+    bDisplay = signal({ value: 0 });
+    hexDisplay = signal({ value: '' });
+    options = signal(optionsDefault());
+    focus = signal(undefined);
+    s = signal(0);
+    h = signal(0);
+    l = signal(0);
+    r = signal(0);
+    g = signal(0);
+    b = signal(0);
+    a = signal(1);
+    slBarHelper = signal(defaultHelper());
+    notificationService = inject(LibsUiNotificationService);
+    /* INPUT */
+    customOptions = input();
+    /* OUTPUT */
+    outColorChange = output();
+    /* VIEW CHILD */
+    hueEl = viewChild.required('hueEl');
+    huePointerEl = viewChild.required('huePointerEl');
+    slEl = viewChild.required('slEl');
+    slPointerEl = viewChild.required('slPointerEl');
+    alphaEl = viewChild.required('alphaEl');
+    alphaPointerEl = viewChild.required('alphaPointerEl');
+    previewEl = viewChild.required('previewEl');
+    /* FUNCTIONS */
+    ngOnInit() {
+        if (this.customOptions()) {
+            this.options.update(options => ({ ...options, ...this.customOptions() }));
+        }
+    }
+    ngAfterViewInit() {
+        this.setupHueCanvas(this.hueEl().nativeElement);
+        this.setupSlCanvas(this.slEl().nativeElement);
+        this.slBarHelper.set(canvasHelper(this.slEl().nativeElement));
+        if (this.options().showAlpha) {
+            this.setupAlphaCanvas(this.alphaEl().nativeElement);
+        }
+        this.handlerColorChange(this.options().format, this.options().color);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setupHueCanvas(canvas) {
+        canvas.width = this.options().hueBarSize[0];
+        canvas.height = this.options().hueBarSize[1];
+        const ctx = canvas.getContext('2d');
+        const gradient = ctx.createLinearGradient(0, 0, this.options().hueBarSize[0], 0);
+        const step = 1 / 360;
+        for (let ii = 0; ii <= 1; ii += step) {
+            gradient.addColorStop(ii, `hsl(${360 * ii}, 100%, 50%)`);
+        }
+        console.log(gradient);
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, this.options().hueBarSize[0], this.options().hueBarSize[1]);
+        const onMouseMove = (event) => {
+            const x = limit(event.clientX - canvas.getBoundingClientRect().left, 0, this.options().hueBarSize[0]);
+            const hue = Math.round(x * 360 / this.options().hueBarSize[0]);
+            this.huePointerEl().nativeElement.style.left = `${x - 7}px`;
+            this.handlerColorChange('h', hue);
+        };
+        const onMouseUp = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        canvas.addEventListener('mousedown', (event) => {
+            onMouseMove(event);
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setupSlCanvas(canvas) {
+        canvas.width = this.options().slBarSize[0];
+        canvas.height = this.options().slBarSize[1];
+        const onMouseMove = (event) => {
+            const x = limit(event.clientX - canvas.getBoundingClientRect().left, 0, this.options().slBarSize[0] - 1);
+            const y = limit(event.clientY - canvas.getBoundingClientRect().top, 0, this.options().slBarSize[1] - 1);
+            const c = this.slBarHelper().grabColor(x, y);
+            this.slPointerEl().nativeElement.style.left = `${x - 7}px`;
+            this.slPointerEl().nativeElement.style.top = `${y - 7}px`;
+            this.handlerColorChange('rgb', c);
+        };
+        const onMouseUp = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        canvas.addEventListener('mousedown', (event) => {
+            onMouseMove(event);
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setupAlphaCanvas(canvas) {
+        canvas.width = this.options().alphaBarSize[0];
+        canvas.height = this.options().alphaBarSize[1];
+        const ctx = canvas.getContext('2d');
+        const gradient = ctx.createLinearGradient(0, 0, canvas.width - 1, 0);
+        gradient.addColorStop(0, `hsla(0, 0%, 50%, 0)`);
+        gradient.addColorStop(1, `hsla(0, 0%, 50%, 1)`);
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, this.options().alphaBarSize[0], this.options().alphaBarSize[1]);
+        const onMouseMove = (event) => {
+            const x = limit(event.clientX - canvas.getBoundingClientRect().left, 0, this.options().alphaBarSize[0]);
+            const alpha = +(x / this.options().alphaBarSize[0]).toFixed(2);
+            this.alphaPointerEl().nativeElement.style.left = `${x - 7}px`;
+            this.handlerColorChange('alpha', alpha);
+        };
+        const onMouseUp = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        canvas.addEventListener('mousedown', (event) => {
+            onMouseMove(event);
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        });
+    }
+    handlerCopyColor(event) {
+        event.stopPropagation();
+        window.navigator.clipboard.writeText(this.hexDisplay().value);
+        this.notificationService.showCompTypeTextSuccess('i18n_copy_successfully');
+    }
+    updatePointerH(h) {
+        const x = this.options().hueBarSize[0] * h / 360;
+        this.huePointerEl().nativeElement.style.left = `${x - 7}px`;
+    }
+    updatePointerSl(h, s, l) {
+        const [r, g, b] = hslToRgb(h, s, l);
+        const [x, y] = this.slBarHelper().findColor(r, g, b);
+        if (x >= 0) {
+            this.slPointerEl().nativeElement.style.left = `${x - 7}px`;
+            this.slPointerEl().nativeElement.style.top = `${y - 7}px`;
+        }
+    }
+    updatePointerA(a) {
+        if (!this.options().showAlpha) {
+            return;
+        }
+        const x = this.options().alphaBarSize[0] * a;
+        this.alphaPointerEl().nativeElement.style.left = `${x - 7}px`;
+    }
+    updateHslDisplay(h, s, l) {
+        if (!this.options().showHsl) {
+            return;
+        }
+        this.hDisplay.set({ value: h });
+        this.sDisplay.set({ value: s });
+        this.lDisplay.set({ value: l });
+    }
+    updateRgbDisplay(r, g, b) {
+        if (!this.options().showRgb) {
+            return;
+        }
+        ;
+        this.rDisplay.set({ value: r });
+        this.gDisplay.set({ value: g });
+        this.bDisplay.set({ value: b });
+    }
+    updateRgbHexDisplay(r, g, b, a) {
+        if (!this.options().showHex) {
+            return;
+        }
+        ;
+        if (this.options().showAlpha) {
+            this.hexDisplay.set({ value: parseColor([r, g, b, a], 'hexcss4') });
+            return;
+        }
+        this.hexDisplay.set({ value: rgbToHex(r, g, b) });
+    }
+    updateRgb() {
+        const rgb = hslToRgb(this.h(), this.s(), this.l());
+        this.r.set(rgb[0]);
+        this.g.set(rgb[1]);
+        this.b.set(rgb[2]);
+    }
+    updateHsl() {
+        const hsl = rgbToHsl(this.r(), this.g(), this.b());
+        this.h.set(hsl[0]);
+        this.s.set(hsl[1]);
+        this.l.set(hsl[2]);
+    }
+    updateValuesAndPointer(config) {
+        if (config.rgb) {
+            this.updateRgb();
+        }
+        if (config.hsl) {
+            this.updateHsl();
+        }
+        if (config.hue) {
+            this.slBarHelper().setHue(this.h());
+        }
+        if (config.hPoint) {
+            this.updatePointerH(this.h());
+        }
+        if (config.slPoint) {
+            this.updatePointerSl(this.h(), this.s(), this.l());
+        }
+        if (config.hslDisplay) {
+            this.updateHslDisplay(this.h(), this.s(), this.l());
+        }
+        if (config.rgbDisplay) {
+            this.updateRgbDisplay(this.r(), this.g(), this.b());
+        }
+        if (config.hexDisplay) {
+            this.updateRgbHexDisplay(this.r(), this.g(), this.b(), this.a());
+        }
+        if (config.aPoint) {
+            this.updatePointerA(this.a());
+        }
+    }
+    handlerColorChange(key, value, silent = false) {
+        let config = {};
+        switch (key) {
+            case 'h': {
+                this.h.set(value);
+                config = { hPoint: true, hslDisplay: true, hexDisplay: true, rgbDisplay: true, rgb: true, hue: true };
+                break;
+            }
+            case 's':
+                this.s.set(value);
+                config = { slPoint: true, hslDisplay: true, hexDisplay: true, rgbDisplay: true, rgb: true };
+                break;
+            case 'l':
+                this.l.set(value);
+                config = { slPoint: true, hslDisplay: true, hexDisplay: true, rgbDisplay: true, rgb: true };
+                break;
+            case 'r':
+                this.r.set(value);
+                config = { hPoint: true, slPoint: true, hslDisplay: true, hexDisplay: true, rgbDisplay: true, hsl: true, hue: true };
+                break;
+            case 'g':
+                this.g.set(value);
+                config = { hPoint: true, slPoint: true, hslDisplay: true, hexDisplay: true, rgbDisplay: true, hsl: true, hue: true };
+                break;
+            case 'b':
+                this.b.set(value);
+                config = { hPoint: true, slPoint: true, hslDisplay: true, hexDisplay: true, rgbDisplay: true, hsl: true, hue: true };
+                break;
+            case 'rgb':
+                this.r.set(value[0]);
+                this.g.set(value[1]);
+                this.b.set(value[2]);
+                config = { hPoint: true, slPoint: true, hslDisplay: true, hexDisplay: true, rgbDisplay: true, aPoint: true, hsl: true, hue: true };
+                break;
+            case 'rgba':
+                this.r.set(value[0]);
+                this.g.set(value[1]);
+                this.b.set(value[2]);
+                this.a.set(value[3]);
+                config = { hPoint: true, slPoint: true, hslDisplay: true, hexDisplay: true, rgbDisplay: true, aPoint: true, hsl: true, hue: true };
+                break;
+            case 'hsl':
+                this.h.set(value[0]);
+                this.s.set(value[1]);
+                this.l.set(value[2]);
+                config = { hPoint: true, slPoint: true, hslDisplay: true, hexDisplay: true, rgbDisplay: true, aPoint: true, rgb: true, hue: true };
+                break;
+            case 'hsla':
+                this.h.set(value[0]);
+                this.s.set(value[1]);
+                this.l.set(value[2]);
+                this.a.set(value[3]);
+                config = { hPoint: true, slPoint: true, hslDisplay: true, hexDisplay: true, rgbDisplay: true, aPoint: true, rgb: true, hue: true };
+                break;
+            case 'hex': {
+                const rgba = cssColorToRgba(value) || [this.r(), this.g(), this.b(), this.a()];
+                this.hexDisplay.set({ value: value });
+                this.r.set(rgba[0]);
+                this.g.set(rgba[1]);
+                this.b.set(rgba[2]);
+                this.a.set(rgba[3]);
+                config = { hPoint: true, slPoint: true, hslDisplay: true, rgbDisplay: true, aPoint: true, hsl: true, hue: true };
+                break;
+            }
+            case 'color': {
+                const rgba = (parseColor(value, 'rgba') || [0, 0, 0, 1]);
+                this.r.set(rgba[0]);
+                this.g.set(rgba[1]);
+                this.b.set(rgba[2]);
+                this.a.set(rgba[3]);
+                config = { hPoint: true, slPoint: true, hslDisplay: true, hexDisplay: true, rgbDisplay: true, aPoint: true, hsl: true, hue: true };
+                break;
+            }
+            case 'alpha':
+                this.a.set(value);
+                this.updateRgbHexDisplay(this.r(), this.g(), this.b(), this.a());
+                break;
+        }
+        this.updateValuesAndPointer(config);
+        this.previewEl().nativeElement.style.backgroundColor = this.a() === 1 ? `rgb(${this.r()},${this.g()},${this.b()})` : `rgba(${this.r()},${this.g()},${this.b()},${this.a()})`;
+        if (!silent) {
+            this.outColorChange.emit(this.hexDisplay().value);
+        }
+    }
+    handlerFocusAndBlur(event, key) {
+        this.focus.set(event.name === 'blur' ? undefined : key);
+    }
+    handlerValueChange(event, key) {
+        this.handlerColorChange(key, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsColorPickerComponent, isStandalone: true, selector: "libs_ui-components-color_picker", inputs: { customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outColorChange: "outColorChange" }, viewQueries: [{ propertyName: "hueEl", first: true, predicate: ["hueEl"], descendants: true, isSignal: true }, { propertyName: "huePointerEl", first: true, predicate: ["huePointerEl"], descendants: true, isSignal: true }, { propertyName: "slEl", first: true, predicate: ["slEl"], descendants: true, isSignal: true }, { propertyName: "slPointerEl", first: true, predicate: ["slPointerEl"], descendants: true, isSignal: true }, { propertyName: "alphaEl", first: true, predicate: ["alphaEl"], descendants: true, isSignal: true }, { propertyName: "alphaPointerEl", first: true, predicate: ["alphaPointerEl"], descendants: true, isSignal: true }, { propertyName: "previewEl", first: true, predicate: ["previewEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative\"\n  [style.width.px]=\"options().slBarSize[0]\">\n  <div class=\"cursor-pointer\">\n    <canvas #slEl\n      class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n    <div #slPointerEl\n      class=\"libs-ui-color-picker-dot\"></div>\n  </div>\n  <div class=\"relative\">\n    <canvas #hueEl\n      class=\"libs-ui-color-picker-background-transparent\"\n      [class.rounded-bl-[4px]]=\"!options().showAlpha\"\n      [class.rounded-br-[4px]]=\"!options().showAlpha\"></canvas>\n    <div #huePointerEl\n      class=\"libs-ui-color-picker-dot\"></div>\n  </div>\n  @if (options().showAlpha) {\n    <div class=\"relative\">\n      <canvas #alphaEl\n        class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n      <div #alphaPointerEl\n        class=\"libs-ui-color-picker-dot\"></div>\n    </div>\n  }\n  <div class=\"flex items-end\">\n    <div class=\"text-center mr-[16px]\">\n      <div class=\"libs-ui-color-picker-background-transparent rounded-[4px]\">\n        <div #previewEl\n          class=\"w-[32px] h-[32px] rounded-[4px] cursor-pointer\"\n          (click)=\"handlerCopyColor($event)\"></div>\n      </div>\n    </div>\n    @if (options().showHex) {\n      <div class=\"text-center mr-[12px]\">\n        <span class=\"libs-ui-font-h7r text-[#6a7383]\">HEX</span>\n        <div class=\"w-[88px]\">\n          <libs_ui-components-inputs-valid [item]=\"hexDisplay()\"\n            [fieldNameBind]=\"'value'\"\n            [classIncludeInput]=\"'text-center !p-0'\"\n            (outValueChange)=\"handlerValueChange($event, 'hex')\" />\n        </div>\n      </div>\n    }\n    <div>\n      @if (options().showHsl) {\n        <div class=\"flex\">\n          <div class=\"text-center\">\n            <span class=\"libs-ui-font-h7r text-[#6a7383]\">H</span>\n            <div class=\"w-[56px]\">\n              <libs_ui-components-inputs-valid [item]=\"hDisplay()\"\n                [fieldNameBind]=\"'value'\"\n                [dataType]=\"'int'\"\n                [minValueNumber]=\"0\"\n                [maxValueNumber]=\"360\"\n                [classIncludeInput]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n                (outFocusAndBlur)=\"handlerFocusAndBlur($event, 'h')\"\n                (outValueChange)=\"handlerValueChange($event, 'h')\" />\n            </div>\n          </div>\n          <div class=\"text-center\">\n            <span class=\"libs-ui-font-h7r text-[#6a7383]\">S</span>\n            <div class=\"w-[56px]\">\n              <libs_ui-components-inputs-valid [item]=\"sDisplay()\"\n                [fieldNameBind]=\"'value'\"\n                [dataType]=\"'int'\"\n                [minValueNumber]=\"0\"\n                [maxValueNumber]=\"100\"\n                [classIncludeInput]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n                (outFocusAndBlur)=\"handlerFocusAndBlur($event, 's')\"\n                (outValueChange)=\"handlerValueChange($event, 's')\" />\n            </div>\n          </div>\n          <div class=\"text-center\">\n            <span class=\"libs-ui-font-h7r text-[#6a7383]\">L</span>\n            <div class=\"w-[56px]\">\n              <libs_ui-components-inputs-valid [item]=\"lDisplay()\"\n                [fieldNameBind]=\"'value'\"\n                [dataType]=\"'int'\"\n                [minValueNumber]=\"0\"\n                [maxValueNumber]=\"100\"\n                [classIncludeInput]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n                (outFocusAndBlur)=\"handlerFocusAndBlur($event, 'l')\"\n                (outValueChange)=\"handlerValueChange($event, 'l')\" />\n            </div>\n          </div>\n        </div>\n      }\n      @if (options().showRgb) {\n        <div class=\"flex\">\n          <div class=\"text-center\">\n            <span class=\"libs-ui-font-h7r text-[#6a7383]\">R</span>\n            <div class=\"w-[56px]\">\n              <libs_ui-components-inputs-valid [item]=\"rDisplay()\"\n                [fieldNameBind]=\"'value'\"\n                [dataType]=\"'int'\"\n                [minValueNumber]=\"0\"\n                [maxValueNumber]=\"255\"\n                [classIncludeInput]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n                (outFocusAndBlur)=\"handlerFocusAndBlur($event, 'r')\"\n                (outValueChange)=\"handlerValueChange($event, 'r')\" />\n            </div>\n          </div>\n          <div class=\"text-center\">\n            <span class=\"libs-ui-font-h7r text-[#6a7383]\">G</span>\n            <div class=\"w-[56px]\">\n              <libs_ui-components-inputs-valid [item]=\"gDisplay()\"\n                [fieldNameBind]=\"'value'\"\n                [dataType]=\"'int'\"\n                [minValueNumber]=\"0\"\n                [maxValueNumber]=\"255\"\n                [classIncludeInput]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n                (outFocusAndBlur)=\"handlerFocusAndBlur($event, 'g')\"\n                (outValueChange)=\"handlerValueChange($event, 'g')\" />\n            </div>\n          </div>\n          <div class=\"text-center\">\n            <span class=\"libs-ui-font-h7r text-[#6a7383]\">B</span>\n            <div class=\"w-[56px]\">\n              <libs_ui-components-inputs-valid [item]=\"bDisplay()\"\n                [fieldNameBind]=\"'value'\"\n                [dataType]=\"'int'\"\n                [minValueNumber]=\"0\"\n                [maxValueNumber]=\"255\"\n                [classIncludeInput]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n                (outFocusAndBlur)=\"handlerFocusAndBlur($event, 'b')\"\n                (outValueChange)=\"handlerValueChange($event, 'b')\" />\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:linear-gradient(-45deg,#cdcdcd 25%,transparent 25%),linear-gradient(45deg,#cdcdcd 25%,transparent 25%),linear-gradient(-45deg,transparent 75%,#cdcdcd 75%),linear-gradient(45deg,transparent 75%,#cdcdcd 75%);background-size:11px 11px;background-position:0 0,0 -5.5px,-5.5px 5.5px,5.5px 0px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:#fff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "hiddenContent", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outToggleEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-color_picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        LibsUiComponentsInputsValidComponent
+                    ], template: "<div class=\"relative\"\n  [style.width.px]=\"options().slBarSize[0]\">\n  <div class=\"cursor-pointer\">\n    <canvas #slEl\n      class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n    <div #slPointerEl\n      class=\"libs-ui-color-picker-dot\"></div>\n  </div>\n  <div class=\"relative\">\n    <canvas #hueEl\n      class=\"libs-ui-color-picker-background-transparent\"\n      [class.rounded-bl-[4px]]=\"!options().showAlpha\"\n      [class.rounded-br-[4px]]=\"!options().showAlpha\"></canvas>\n    <div #huePointerEl\n      class=\"libs-ui-color-picker-dot\"></div>\n  </div>\n  @if (options().showAlpha) {\n    <div class=\"relative\">\n      <canvas #alphaEl\n        class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n      <div #alphaPointerEl\n        class=\"libs-ui-color-picker-dot\"></div>\n    </div>\n  }\n  <div class=\"flex items-end\">\n    <div class=\"text-center mr-[16px]\">\n      <div class=\"libs-ui-color-picker-background-transparent rounded-[4px]\">\n        <div #previewEl\n          class=\"w-[32px] h-[32px] rounded-[4px] cursor-pointer\"\n          (click)=\"handlerCopyColor($event)\"></div>\n      </div>\n    </div>\n    @if (options().showHex) {\n      <div class=\"text-center mr-[12px]\">\n        <span class=\"libs-ui-font-h7r text-[#6a7383]\">HEX</span>\n        <div class=\"w-[88px]\">\n          <libs_ui-components-inputs-valid [item]=\"hexDisplay()\"\n            [fieldNameBind]=\"'value'\"\n            [classIncludeInput]=\"'text-center !p-0'\"\n            (outValueChange)=\"handlerValueChange($event, 'hex')\" />\n        </div>\n      </div>\n    }\n    <div>\n      @if (options().showHsl) {\n        <div class=\"flex\">\n          <div class=\"text-center\">\n            <span class=\"libs-ui-font-h7r text-[#6a7383]\">H</span>\n            <div class=\"w-[56px]\">\n              <libs_ui-components-inputs-valid [item]=\"hDisplay()\"\n                [fieldNameBind]=\"'value'\"\n                [dataType]=\"'int'\"\n                [minValueNumber]=\"0\"\n                [maxValueNumber]=\"360\"\n                [classIncludeInput]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n                (outFocusAndBlur)=\"handlerFocusAndBlur($event, 'h')\"\n                (outValueChange)=\"handlerValueChange($event, 'h')\" />\n            </div>\n          </div>\n          <div class=\"text-center\">\n            <span class=\"libs-ui-font-h7r text-[#6a7383]\">S</span>\n            <div class=\"w-[56px]\">\n              <libs_ui-components-inputs-valid [item]=\"sDisplay()\"\n                [fieldNameBind]=\"'value'\"\n                [dataType]=\"'int'\"\n                [minValueNumber]=\"0\"\n                [maxValueNumber]=\"100\"\n                [classIncludeInput]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n                (outFocusAndBlur)=\"handlerFocusAndBlur($event, 's')\"\n                (outValueChange)=\"handlerValueChange($event, 's')\" />\n            </div>\n          </div>\n          <div class=\"text-center\">\n            <span class=\"libs-ui-font-h7r text-[#6a7383]\">L</span>\n            <div class=\"w-[56px]\">\n              <libs_ui-components-inputs-valid [item]=\"lDisplay()\"\n                [fieldNameBind]=\"'value'\"\n                [dataType]=\"'int'\"\n                [minValueNumber]=\"0\"\n                [maxValueNumber]=\"100\"\n                [classIncludeInput]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n                (outFocusAndBlur)=\"handlerFocusAndBlur($event, 'l')\"\n                (outValueChange)=\"handlerValueChange($event, 'l')\" />\n            </div>\n          </div>\n        </div>\n      }\n      @if (options().showRgb) {\n        <div class=\"flex\">\n          <div class=\"text-center\">\n            <span class=\"libs-ui-font-h7r text-[#6a7383]\">R</span>\n            <div class=\"w-[56px]\">\n              <libs_ui-components-inputs-valid [item]=\"rDisplay()\"\n                [fieldNameBind]=\"'value'\"\n                [dataType]=\"'int'\"\n                [minValueNumber]=\"0\"\n                [maxValueNumber]=\"255\"\n                [classIncludeInput]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n                (outFocusAndBlur)=\"handlerFocusAndBlur($event, 'r')\"\n                (outValueChange)=\"handlerValueChange($event, 'r')\" />\n            </div>\n          </div>\n          <div class=\"text-center\">\n            <span class=\"libs-ui-font-h7r text-[#6a7383]\">G</span>\n            <div class=\"w-[56px]\">\n              <libs_ui-components-inputs-valid [item]=\"gDisplay()\"\n                [fieldNameBind]=\"'value'\"\n                [dataType]=\"'int'\"\n                [minValueNumber]=\"0\"\n                [maxValueNumber]=\"255\"\n                [classIncludeInput]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n                (outFocusAndBlur)=\"handlerFocusAndBlur($event, 'g')\"\n                (outValueChange)=\"handlerValueChange($event, 'g')\" />\n            </div>\n          </div>\n          <div class=\"text-center\">\n            <span class=\"libs-ui-font-h7r text-[#6a7383]\">B</span>\n            <div class=\"w-[56px]\">\n              <libs_ui-components-inputs-valid [item]=\"bDisplay()\"\n                [fieldNameBind]=\"'value'\"\n                [dataType]=\"'int'\"\n                [minValueNumber]=\"0\"\n                [maxValueNumber]=\"255\"\n                [classIncludeInput]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n                (outFocusAndBlur)=\"handlerFocusAndBlur($event, 'b')\"\n                (outValueChange)=\"handlerValueChange($event, 'b')\" />\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:linear-gradient(-45deg,#cdcdcd 25%,transparent 25%),linear-gradient(45deg,#cdcdcd 25%,transparent 25%),linear-gradient(-45deg,transparent 75%,#cdcdcd 75%),linear-gradient(45deg,transparent 75%,#cdcdcd 75%);background-size:11px 11px;background-position:0 0,0 -5.5px,-5.5px 5.5px,5.5px 0px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:#fff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsColorPickerComponent };
+//# sourceMappingURL=libs-ui-components-color-picker.mjs.map