@libs-ui/components-color-picker 0.1.1-1

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

@@ -0,0 +1,689 @@
+import * as i0 from '@angular/core';
+import { signal, inject, input, output, viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LibsUiComponentsInputsInputComponent } from '@libs-ui/components-inputs-input';
+import { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';
+import { LibsUiNotificationService } from '@libs-ui/services-notification';
+import { get, isNil, set, getDragEventByElement } from '@libs-ui/utils';
+import { Subject } from 'rxjs';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+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: [420, 200],
+        hueBarSize: [420, 20],
+        alphaBarSize: [420, 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;
+};
+const defaultHelper = () => {
+    return {
+        setHue: () => {
+            return;
+        },
+        grabColor: () => [],
+        findColor: () => [],
+    };
+};
+
+class LibsUiComponentsColorPickerComponent {
+    // #region PROPERTY
+    options = signal(optionsDefault());
+    focus = signal(undefined);
+    hex = signal('');
+    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);
+    onDestroy = new Subject();
+    // #region INPUT
+    customOptions = input();
+    noEmitEventColorWhenInitComponent = input(true, { transform: (value) => value ?? true });
+    // #region OUTPUT
+    outColorChange = output();
+    outColorChangeMultipleType = output();
+    /* VIEW CHILD */
+    hueEl = viewChild('hueEl');
+    huePointerEl = viewChild('huePointerEl');
+    slEl = viewChild('slEl');
+    slPointerEl = viewChild('slPointerEl');
+    alphaEl = viewChild('alphaEl');
+    alphaPointerEl = viewChild('alphaPointerEl');
+    previewEl = viewChild('previewEl');
+    constructor() {
+        effect(() => {
+            const ctx = this.alphaEl()?.nativeElement.getContext('2d');
+            if (!ctx) {
+                return;
+            }
+            ctx.clearRect(0, 0, this.options().alphaBarSize[0], this.options().alphaBarSize[1]);
+            const gradient = ctx.createLinearGradient(0, 0, this.alphaEl()?.nativeElement.width - 1, 0);
+            gradient.addColorStop(0, `hsla(${this.h()},${this.s()}%,${this.l()}%, 0)`);
+            gradient.addColorStop(1, `hsla(${this.h()},${this.s()}%,${this.l()}%, 1)`);
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, this.options().alphaBarSize[0], this.options().alphaBarSize[1]);
+        });
+    }
+    /* FUNCTIONS */
+    ngOnInit() {
+        if (this.customOptions()) {
+            this.options.update((options) => ({ ...options, ...this.customOptions() }));
+        }
+    }
+    ngAfterViewInit() {
+        this.setupHueCanvas();
+        this.setupSlCanvas();
+        this.setupSlBarHelper();
+        if (this.options().showAlpha) {
+            this.setupAlphaCanvas();
+        }
+        this.handlerColorChange(this.options().format, this.options().color, this.noEmitEventColorWhenInitComponent());
+    }
+    setupHueCanvas() {
+        const canvas = this.hueEl()?.nativeElement;
+        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%)`);
+        }
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, this.options().hueBarSize[0], this.options().hueBarSize[1]);
+        getDragEventByElement({ elementMouseDown: canvas, isStartWithMouseDownEvent: true, onDestroy: this.onDestroy }).subscribe((event) => {
+            const x = limit(event.clientX - canvas.getBoundingClientRect().left, 0, this.options().hueBarSize[0]);
+            const hue = Math.round((x * 360) / this.options().hueBarSize[0]);
+            set(this.huePointerEl()?.nativeElement.style, 'left', `${x - 7}px`);
+            this.h.set(hue);
+            this.handlerColorChange('h', hue);
+        });
+    }
+    setupSlCanvas() {
+        const canvas = this.slEl()?.nativeElement;
+        canvas.width = this.options().slBarSize[0];
+        canvas.height = this.options().slBarSize[1];
+        getDragEventByElement({ elementMouseDown: canvas, isStartWithMouseDownEvent: true, onDestroy: this.onDestroy }).subscribe((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);
+            set(this.slPointerEl()?.nativeElement.style, 'left', `${x - 7}px`);
+            set(this.slPointerEl()?.nativeElement.style, 'top', `${y - 7}px`);
+            this.handlerColorChange('rgb', c);
+        });
+    }
+    setupSlBarHelper() {
+        const canvas = this.slEl()?.nativeElement;
+        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');
+        this.slBarHelper.set({
+            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];
+            },
+        });
+    }
+    setupAlphaCanvas() {
+        const canvas = this.alphaEl()?.nativeElement;
+        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(${this.h()},${this.s()}%,${this.l()}%, 0)`);
+        gradient.addColorStop(1, `hsla(${this.h()},${this.s()}%,${this.l()}%, 1)`);
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, this.options().alphaBarSize[0], this.options().alphaBarSize[1]);
+        getDragEventByElement({ elementMouseDown: canvas, isStartWithMouseDownEvent: true, onDestroy: this.onDestroy }).subscribe((event) => {
+            const x = limit(event.clientX - canvas.getBoundingClientRect().left, 0, this.options().alphaBarSize[0]);
+            const alpha = +(x / this.options().alphaBarSize[0]).toFixed(2);
+            set(this.alphaPointerEl()?.nativeElement.style, 'left', `${x - 7}px`);
+            this.handlerColorChange('alpha', alpha);
+        });
+    }
+    handlerCopyColor(event) {
+        event.stopPropagation();
+        window.navigator.clipboard.writeText(this.hex());
+        // this.notificationService.showCompTypeTextSuccess('i18n_copy_successfully');
+    }
+    updatePointerH(h) {
+        const x = (this.options().hueBarSize[0] * h) / 360;
+        set(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) {
+            set(this.slPointerEl()?.nativeElement.style, 'left', `${x - 7}px`);
+            set(this.slPointerEl()?.nativeElement.style, 'top', `${y - 7}px`);
+        }
+    }
+    updatePointerA(a) {
+        if (!this.options().showAlpha) {
+            return;
+        }
+        const x = this.options().alphaBarSize[0] * a;
+        set(this.alphaPointerEl()?.nativeElement.style, 'left', `${x - 7}px`);
+    }
+    updateHex(r, g, b, a) {
+        if (this.options().showAlpha) {
+            this.hex.set(parseColor([r, g, b, a], 'hexcss4'));
+            return;
+        }
+        this.hex.set(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.hex) {
+            this.updateHex(this.r(), this.g(), this.b(), this.a());
+        }
+        if (config.aPoint) {
+            this.updatePointerA(this.a());
+        }
+    }
+    handlerColorChange(key, value, isCallInitComponent = false) {
+        let config = {};
+        switch (key) {
+            case 'h':
+                config = { hPoint: true, hex: true, rgb: true, hue: true };
+                break;
+            case 's':
+                config = { slPoint: true, hex: true, rgb: true };
+                break;
+            case 'l':
+                config = { slPoint: true, hex: true, rgb: true };
+                break;
+            case 'r':
+                config = { hPoint: true, slPoint: true, hex: true, hsl: true, hue: true };
+                break;
+            case 'g':
+                config = { hPoint: true, slPoint: true, hex: true, hsl: true, hue: true };
+                break;
+            case 'b':
+                config = { hPoint: true, slPoint: true, hex: true, hsl: true, hue: true };
+                break;
+            case 'rgb':
+                this.r.set(value[0]);
+                this.g.set(value[1]);
+                this.b.set(value[2]);
+                config = { hex: true, hsl: 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, hex: 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, hex: 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, hex: true, aPoint: true, rgb: true, hue: true };
+                break;
+            case 'hex': {
+                const rgba = cssColorToRgba(value) || [this.r(), this.g(), this.b(), this.a()];
+                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, 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, hex: true, aPoint: true, hsl: true, hue: true };
+                break;
+            }
+            case 'alpha':
+                this.a.set(value);
+                this.updateHex(this.r(), this.g(), this.b(), this.a());
+                break;
+        }
+        this.updateValuesAndPointer(config);
+        set(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 (!isCallInitComponent) {
+            this.outColorChange.emit(this.hex());
+            this.outColorChangeMultipleType.emit({
+                hex: this.hex(),
+                rgba: `rgba(${this.r()},${this.g()},${this.b()},${this.a()})`,
+                rgb: `rgb(${this.r()},${this.g()},${this.b()})`,
+                hsl: `hsl(${this.h()},${this.s()},${this.l()})`,
+                hsla: `hsla(${this.h()},${this.s()},${this.l()},${this.a()})`,
+            });
+        }
+    }
+    handlerFocusAndBlur(event, key) {
+        this.focus.set(event.name === 'blur' ? undefined : key);
+    }
+    handlerValueChange(event, key) {
+        this.handlerColorChange(key, event);
+    }
+    handlerValueChangeAlphaInput(event) {
+        this.handlerColorChange('alpha', (event || 0) / 100);
+        this.updatePointerA(this.a());
+    }
+    handlerResetColor() {
+        this.handlerColorChange('alpha', 0);
+        this.updatePointerA(this.a());
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsColorPickerComponent, isStandalone: true, selector: "libs_ui-components-color_picker", inputs: { customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, noEmitEventColorWhenInitComponent: { classPropertyName: "noEmitEventColorWhenInitComponent", publicName: "noEmitEventColorWhenInitComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outColorChange: "outColorChange", outColorChangeMultipleType: "outColorChangeMultipleType" }, 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>\n  <div\n    class=\"relative\"\n    [style.width.px]=\"options().slBarSize[0]\">\n    <div>\n      <canvas\n        #slEl\n        class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n      <div\n        #slPointerEl\n        class=\"libs-ui-color-picker-dot\"></div>\n    </div>\n    <div class=\"relative\">\n      <canvas\n        #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\n        #huePointerEl\n        class=\"libs-ui-color-picker-dot\"></div>\n    </div>\n    @if (options().showAlpha) {\n      <div class=\"relative\">\n        <canvas\n          #alphaEl\n          class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n        <div\n          #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\n            #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-input\n              [(value)]=\"hex\"\n              [classInclude]=\"'text-center !p-0'\"\n              (outChange)=\"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-input\n                  [(value)]=\"h\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"360\"\n                  [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'h')\"\n                  (outChange)=\"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-input\n                  [(value)]=\"s\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"100\"\n                  [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 's')\"\n                  (outChange)=\"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-input\n                  [(value)]=\"l\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"100\"\n                  [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'l')\"\n                  (outChange)=\"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-input\n                  [(value)]=\"r\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"255\"\n                  [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'r')\"\n                  (outChange)=\"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-input\n                  [(value)]=\"g\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"255\"\n                  [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'g')\"\n                  (outChange)=\"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-input\n                  [(value)]=\"b\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"255\"\n                  [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'b')\"\n                  (outChange)=\"handlerValueChange($event, 'b')\" />\n              </div>\n            </div>\n            <div class=\"text-center ml-[8px]\">\n              <span class=\"libs-ui-font-h7r text-[#6a7383]\">A</span>\n              <div class=\"w-[78px]\">\n                <libs_ui-components-inputs-valid\n                  [item]=\"{ aValue: a() * 100 }\"\n                  [fieldNameBind]=\"'aValue'\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"100\"\n                  [unitsRight]=\"[{ label: '%' }]\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  (outValueChange)=\"handlerValueChangeAlphaInput($event)\" />\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:11px 11px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:transparent;border:1px solid #ffffff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "typeInput", "modeInput", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "selectAllTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "iframeTextareaCustomStyle", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "resetAutoCompletePassword", "acceptOnlyClickIcon", "setIconRightColorSameColorDisableReadOnly", "onlyAcceptNegativeValue", "maxLengthNumberCount", "focusInput"], outputs: ["maxValueNumberChange", "minValueNumberChange", "fixedFloatChange", "acceptNegativeValueChange", "maxLengthChange", "valueChange", "maxLengthNumberCountChange", "outHeightAreaChange", "outChange", "outFocusAndBlurEvent", "outEnterEvent", "outInputEvent", "outIconLeft", "outIconRight", "outFunctionsControl", "outFilesDrop", "outFileDrop", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "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", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-color_picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsInputsInputComponent, LibsUiComponentsInputsValidComponent], template: "<div>\n  <div\n    class=\"relative\"\n    [style.width.px]=\"options().slBarSize[0]\">\n    <div>\n      <canvas\n        #slEl\n        class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n      <div\n        #slPointerEl\n        class=\"libs-ui-color-picker-dot\"></div>\n    </div>\n    <div class=\"relative\">\n      <canvas\n        #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\n        #huePointerEl\n        class=\"libs-ui-color-picker-dot\"></div>\n    </div>\n    @if (options().showAlpha) {\n      <div class=\"relative\">\n        <canvas\n          #alphaEl\n          class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n        <div\n          #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\n            #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-input\n              [(value)]=\"hex\"\n              [classInclude]=\"'text-center !p-0'\"\n              (outChange)=\"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-input\n                  [(value)]=\"h\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"360\"\n                  [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'h')\"\n                  (outChange)=\"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-input\n                  [(value)]=\"s\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"100\"\n                  [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 's')\"\n                  (outChange)=\"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-input\n                  [(value)]=\"l\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"100\"\n                  [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'l')\"\n                  (outChange)=\"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-input\n                  [(value)]=\"r\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"255\"\n                  [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'r')\"\n                  (outChange)=\"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-input\n                  [(value)]=\"g\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"255\"\n                  [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'g')\"\n                  (outChange)=\"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-input\n                  [(value)]=\"b\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"255\"\n                  [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'b')\"\n                  (outChange)=\"handlerValueChange($event, 'b')\" />\n              </div>\n            </div>\n            <div class=\"text-center ml-[8px]\">\n              <span class=\"libs-ui-font-h7r text-[#6a7383]\">A</span>\n              <div class=\"w-[78px]\">\n                <libs_ui-components-inputs-valid\n                  [item]=\"{ aValue: a() * 100 }\"\n                  [fieldNameBind]=\"'aValue'\"\n                  [dataType]=\"'int'\"\n                  [minValueNumber]=\"0\"\n                  [maxValueNumber]=\"100\"\n                  [unitsRight]=\"[{ label: '%' }]\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  (outValueChange)=\"handlerValueChangeAlphaInput($event)\" />\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:11px 11px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:transparent;border:1px solid #ffffff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsColorPickerComponent };
+//# sourceMappingURL=libs-ui-components-color-picker.mjs.map