@vallift/ngl 0.0.10 → 0.0.11

package/fesm2022/vallift-ngl.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, signal, input, output, Component, Input, ElementRef, Renderer2, EventEmitter, Output, RendererFactory2, HostListener, Directive, computed, ViewChild, Inject, Pipe, ViewContainerRef, ContentChildren, ChangeDetectionStrategy, ChangeDetectorRef, viewChild } from '@angular/core';
+import { InjectionToken, inject, Injectable, signal, input, output, Component, Input, ElementRef, Renderer2, EventEmitter, Output, RendererFactory2, HostListener, Directive, computed, ChangeDetectorRef, model, ViewChild, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, Inject, Pipe, ContentChildren, ChangeDetectionStrategy, viewChild } from '@angular/core';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
 import { retry, throwError, Subject, debounceTime, fromEvent, filter as filter$1, take, of } from 'rxjs';
@@ -10,7 +10,7 @@ import { Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 import { Overlay, OverlayConfig, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { NgClass, DOCUMENT, CommonModule, DatePipe, NgStyle } from '@angular/common';
+import { NgClass, DOCUMENT, NgStyle, CommonModule, DatePipe } from '@angular/common';
 import { SvgIconComponent } from 'angular-svg-icon';
 import { CdkPortal } from '@angular/cdk/portal';
 import { NgxMaskDirective } from 'ngx-mask';
@@ -1593,11 +1593,868 @@ class CloseButtonComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CloseButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-close-button', standalone: true, imports: [
-                        AppSvgIconComponent
-                    ], template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n  <svg class=\"w-12 h-12 text-neutral-800\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-window-close\" viewBox=\"0 0 24 24\">\n    <path\n      fill=\"currentColor\"\n      d=\"M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z\"/>\n  </svg>\n\n</p>\n" }]
+            args: [{ selector: 'app-close-button', standalone: true, imports: [], template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n  <svg class=\"w-12 h-12 text-neutral-800\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-window-close\" viewBox=\"0 0 24 24\">\n    <path\n      fill=\"currentColor\"\n      d=\"M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z\"/>\n  </svg>\n\n</p>\n" }]
         }] });
 
+class Rgba {
+    r;
+    g;
+    b;
+    a;
+    constructor(r, g, b, a) {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        this.a = a;
+    }
+    denormalize() {
+        this.r = Math.round(this.r * 255);
+        this.g = Math.round(this.g * 255);
+        this.b = Math.round(this.b * 255);
+        return this;
+    }
+    toString() {
+        this.denormalize();
+        let output = 'rgb' +
+            (this.a != 1 ? 'a(' : '(') +
+            this.r + ', ' +
+            this.g + ', ' +
+            this.b +
+            (this.a != 1 ? ', ' + this.a.toPrecision(2) + ')' : ')');
+        return output;
+    }
+}
+class Hsva {
+    h;
+    s;
+    v;
+    a;
+    onChange = new EventEmitter(true);
+    constructor(h, s, v, a) {
+        this.h = h;
+        this.s = s;
+        this.v = v;
+        this.a = a;
+    }
+    onColorChange(value) {
+        this.s = value.s / value.rgX;
+        this.v = value.v / value.rgY;
+    }
+    onHueChange(value) {
+        this.h = value.v / value.rgX;
+        // this.sliderH = this.hsva.h;
+    }
+    onValueChange(value) {
+        this.v = value.v / value.rgX;
+    }
+    onAlphaChange(value) {
+        this.a = value.v / value.rgX;
+    }
+}
+class Hsla {
+    h;
+    s;
+    l;
+    a;
+    constructor(h, s, l, a) {
+        this.h = h;
+        this.s = s;
+        this.l = l;
+        this.a = a;
+    }
+    denormalize() {
+        this.h = Math.round(this.h * 360);
+        this.s = Math.round(this.s * 100);
+        this.l = Math.round(this.l * 100);
+        return this;
+    }
+    toString() {
+        let output = 'hsl' +
+            (this.a != 1 ? 'a(' : '(') +
+            this.h + ', ' +
+            this.s + '%, ' +
+            this.l + '%' +
+            (this.a != 1 ? ', ' + this.a.toPrecision(2) + ')' : ')');
+        return output;
+    }
+}
+class Cmyk {
+    c;
+    m;
+    y;
+    k;
+    a;
+    constructor(c, m, y, k, a = 1) {
+        this.c = c;
+        this.m = m;
+        this.y = y;
+        this.k = k;
+        this.a = a;
+    }
+}
+
+var ColorFormats;
+(function (ColorFormats) {
+    ColorFormats[ColorFormats["HEX"] = 0] = "HEX";
+    ColorFormats[ColorFormats["RGBA"] = 1] = "RGBA";
+    ColorFormats[ColorFormats["HSLA"] = 2] = "HSLA";
+    ColorFormats[ColorFormats["CMYK"] = 3] = "CMYK";
+})(ColorFormats || (ColorFormats = {}));
+
+class ColorConverterService {
+    // private active: ColorPickerComponent | null = null;
+    constructor() { }
+    // public setActive(active: ColorPickerComponent | null): void {
+    //   this.active = active;
+    // }
+    toFormat(hsva, format) {
+        var output = "";
+        if (hsva) {
+            switch (format) {
+                case ColorFormats.HEX:
+                    var rgba = this.hsvaToRgba(hsva);
+                    rgba.denormalize();
+                    var output = this.rgbaToHex(rgba, true);
+                    break;
+                case ColorFormats.HSLA:
+                    var hsla = this.hsva2hsla(hsva);
+                    hsla.denormalize();
+                    var output = hsla.toString();
+                    break;
+                case ColorFormats.RGBA:
+                    var rgba = this.hsvaToRgba(hsva);
+                    var output = rgba.toString();
+                    break;
+                case ColorFormats.CMYK:
+                    var rgba = this.hsvaToRgba(hsva);
+                    var cmyk = this.rgbaToCmyk(rgba);
+                    break;
+            }
+        }
+        return output;
+    }
+    stringToFormat(color, format) {
+        var hsva = this.stringToHsva(color, true);
+        return this.toFormat(hsva, format);
+    }
+    hsva2hsla(hsva) {
+        const h = hsva.h, s = hsva.s, v = hsva.v, a = hsva.a;
+        if (v === 0) {
+            return new Hsla(h, 0, 0, a);
+        }
+        else if (s === 0 && v === 1) {
+            return new Hsla(h, 1, 1, a);
+        }
+        else {
+            const l = (v * (2 - s)) / 2;
+            return new Hsla(h, (v * s) / (1 - Math.abs(2 * l - 1)), l, a);
+        }
+    }
+    hsla2hsva(hsla) {
+        const h = Math.min(hsla.h, 1), s = Math.min(hsla.s, 1);
+        const l = Math.min(hsla.l, 1), a = Math.min(hsla.a, 1);
+        if (l === 0) {
+            return new Hsva(h, 0, 0, a);
+        }
+        else {
+            const v = l + (s * (1 - Math.abs(2 * l - 1))) / 2;
+            return new Hsva(h, (2 * (v - l)) / v, v, a);
+        }
+    }
+    hsvaToRgba(hsva) {
+        let r, g, b;
+        const h = hsva.h, s = hsva.s, v = hsva.v, a = hsva.a;
+        const i = Math.floor(h * 6);
+        const f = h * 6 - i;
+        const p = v * (1 - s);
+        const q = v * (1 - f * s);
+        const t = v * (1 - (1 - f) * s);
+        switch (i % 6) {
+            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;
+            default:
+                (r = 0), (g = 0), (b = 0);
+        }
+        return new Rgba(r, g, b, a);
+    }
+    cmykToRgb(cmyk) {
+        const r = (1 - cmyk.c) * (1 - cmyk.k);
+        const g = (1 - cmyk.m) * (1 - cmyk.k);
+        const b = (1 - cmyk.y) * (1 - cmyk.k);
+        return new Rgba(r, g, b, cmyk.a);
+    }
+    rgbaToCmyk(rgba) {
+        const k = 1 - Math.max(rgba.r, rgba.g, rgba.b);
+        if (k === 1) {
+            return new Cmyk(0, 0, 0, 1, rgba.a);
+        }
+        else {
+            const c = (1 - rgba.r - k) / (1 - k);
+            const m = (1 - rgba.g - k) / (1 - k);
+            const y = (1 - rgba.b - k) / (1 - k);
+            return new Cmyk(c, m, y, k, rgba.a);
+        }
+    }
+    rgbaToHsva(rgba) {
+        let h, s;
+        const r = Math.min(rgba.r, 1), g = Math.min(rgba.g, 1);
+        const b = Math.min(rgba.b, 1), a = Math.min(rgba.a, 1);
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        const v = max, 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;
+                default:
+                    h = 0;
+            }
+            h /= 6;
+        }
+        return new Hsva(h, s, v, a);
+    }
+    rgbaToHex(rgba, allowHex8) {
+        /* tslint:disable:no-bitwise */
+        let hex = "#" +
+            ((1 << 24) | (rgba.r << 16) | (rgba.g << 8) | rgba.b)
+                .toString(16)
+                .substr(1);
+        if (rgba.a != 1) {
+            hex += ((1 << 8) | Math.round(rgba.a * 255)).toString(16).substr(1);
+        }
+        /* tslint:enable:no-bitwise */
+        return hex;
+    }
+    normalizeCMYK(cmyk) {
+        return new Cmyk(cmyk.c / 100, cmyk.m / 100, cmyk.y / 100, cmyk.k / 100, cmyk.a);
+    }
+    denormalizeCMYK(cmyk) {
+        return new Cmyk(Math.floor(cmyk.c * 100), Math.floor(cmyk.m * 100), Math.floor(cmyk.y * 100), Math.floor(cmyk.k * 100), cmyk.a);
+    }
+    denormalizeRGBA(rgba) {
+        return new Rgba(Math.round(rgba.r * 255), Math.round(rgba.g * 255), Math.round(rgba.b * 255), rgba.a);
+    }
+    stringToHsva(colorString = "", allowHex8 = true) {
+        let hsva = null;
+        colorString = (colorString || "").toLowerCase();
+        const stringParsers = [
+            {
+                re: /(rgb)a?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*%?,\s*(\d{1,3})\s*%?(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
+                parse: function (execResult) {
+                    return new Rgba(parseInt(execResult[2], 10) / 255, parseInt(execResult[3], 10) / 255, parseInt(execResult[4], 10) / 255, isNaN(parseFloat(execResult[5])) ? 1 : parseFloat(execResult[5]));
+                },
+            },
+            {
+                re: /(hsl)a?\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
+                parse: function (execResult) {
+                    return new Hsla(parseInt(execResult[2], 10) / 360, parseInt(execResult[3], 10) / 100, parseInt(execResult[4], 10) / 100, isNaN(parseFloat(execResult[5])) ? 1 : parseFloat(execResult[5]));
+                },
+            },
+        ];
+        if (allowHex8) {
+            stringParsers.push({
+                re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})?$/,
+                parse: function (execResult) {
+                    return new Rgba(parseInt(execResult[1], 16) / 255, parseInt(execResult[2], 16) / 255, parseInt(execResult[3], 16) / 255, parseInt(execResult[4] || "FF", 16) / 255);
+                },
+            });
+        }
+        else {
+            stringParsers.push({
+                re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/,
+                parse: function (execResult) {
+                    return new Rgba(parseInt(execResult[1], 16) / 255, parseInt(execResult[2], 16) / 255, parseInt(execResult[3], 16) / 255, 1);
+                },
+            });
+        }
+        stringParsers.push({
+            re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/,
+            parse: function (execResult) {
+                return new Rgba(parseInt(execResult[1] + execResult[1], 16) / 255, parseInt(execResult[2] + execResult[2], 16) / 255, parseInt(execResult[3] + execResult[3], 16) / 255, 1);
+            },
+        });
+        for (const key in stringParsers) {
+            if (stringParsers.hasOwnProperty(key)) {
+                const parser = stringParsers[key];
+                const match = parser.re.exec(colorString), color = match && parser.parse(match);
+                if (color) {
+                    if (color instanceof Rgba) {
+                        hsva = this.rgbaToHsva(color);
+                    }
+                    else if (color instanceof Hsla) {
+                        hsva = this.hsla2hsva(color);
+                    }
+                    return hsva;
+                }
+            }
+        }
+        return hsva;
+    }
+    outputFormat(hsva) {
+        return this.hsvaToRgba(hsva).toString();
+    }
+    getFormatByString(color) {
+        if (color) {
+            color = color.toLowerCase();
+            let regexHex = /(#([\da-f]{3}(?:[\da-f]{3})?(?:[\da-f]{2})?))/;
+            let regexRGBA = /(rgba\((\d{1,3},\s?){3}(1|0?\.\d+)\)|rgb\(\d{1,3}(,\s?\d{1,3}){2}\))/;
+            let regexHSLA = /(hsla\((\d{1,3}%?,\s?){3}(1|0?\.\d+)\)|hsl\(\d{1,3}%?(,\s?\d{1,3}%?){2}\))/;
+            if (regexHex.test(color)) {
+                return "hex";
+            }
+            else if (regexRGBA.test(color)) {
+                return "rgba";
+            }
+            else if (regexHSLA.test(color)) {
+                return "hsla";
+            }
+        }
+        return "hex";
+    }
+    isValidHexColor(hex) {
+        if (!hex) {
+            return false;
+        }
+        const hexColorPattern = /^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/;
+        return hexColorPattern.test(hex);
+    }
+    addHexPrefixIfMissing(hex) {
+        if (!hex.startsWith('#')) {
+            return '#' + hex;
+        }
+        return hex;
+    }
+    removeAlpha(hex) {
+        const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
+        const rgbHex = cleanHex.length === 8 ? cleanHex.slice(0, 6) : cleanHex;
+        return `#${rgbHex.toUpperCase()}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorConverterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorConverterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorConverterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class SliderPosition {
+    h;
+    s;
+    v;
+    a;
+    constructor(h, s, v, a) {
+        this.h = h;
+        this.s = s;
+        this.v = v;
+        this.a = a;
+    }
+}
+class SliderDimension {
+    h;
+    s;
+    v;
+    a;
+    constructor(h, s, v, a) {
+        this.h = h;
+        this.s = s;
+        this.v = v;
+        this.a = a;
+    }
+}
+
+class ColorPickerSliderDirective {
+    listenerMove;
+    listenerStop;
+    rgX;
+    rgY;
+    dragEnd = new EventEmitter();
+    dragStart = new EventEmitter();
+    valueChanged = new EventEmitter();
+    elementRef = inject(ElementRef);
+    mouseDown(event) {
+        this.start(event);
+    }
+    touchStart(event) {
+        this.start(event);
+    }
+    constructor() {
+        this.listenerMove = (event) => this.move(event);
+        this.listenerStop = () => this.stop();
+    }
+    move(event) {
+        event.preventDefault();
+        this.setCursor(event);
+    }
+    start(event) {
+        this.setCursor(event);
+        event.stopPropagation();
+        document.addEventListener('mouseup', this.listenerStop);
+        document.addEventListener('touchend', this.listenerStop);
+        document.addEventListener('mousemove', this.listenerMove);
+        document.addEventListener('touchmove', this.listenerMove);
+        this.dragStart.emit();
+    }
+    stop() {
+        document.removeEventListener('mouseup', this.listenerStop);
+        document.removeEventListener('touchend', this.listenerStop);
+        document.removeEventListener('mousemove', this.listenerMove);
+        document.removeEventListener('touchmove', this.listenerMove);
+        this.dragEnd.emit();
+    }
+    getXAxis(event) {
+        const position = this.elementRef.nativeElement.getBoundingClientRect();
+        const pageX = (event.pageX !== undefined) ? event.pageX : event.touches[0].pageX;
+        return pageX - position.left - window.pageXOffset;
+    }
+    getYAxis(event) {
+        const position = this.elementRef.nativeElement.getBoundingClientRect();
+        const pageY = (event.pageY !== undefined) ? event.pageY : event.touches[0].pageY;
+        return pageY - position.top - window.pageXOffset;
+    }
+    setCursor(event) {
+        const width = this.elementRef.nativeElement.offsetWidth;
+        const height = this.elementRef.nativeElement.offsetHeight;
+        const x = Math.max(0, Math.min(this.getXAxis(event), width));
+        const y = Math.max(0, Math.min(this.getYAxis(event), height));
+        if (this.rgX !== undefined && this.rgY !== undefined) {
+            this.valueChanged.emit({ x: x, y: y, s: x / width, v: (1 - y / height), rgX: this.rgX, rgY: this.rgY });
+        }
+        else if (this.rgX === undefined && this.rgY !== undefined) {
+            this.valueChanged.emit({ x: x, y: y, v: y / height, rgY: this.rgY });
+        }
+        else if (this.rgX !== undefined && this.rgY === undefined) {
+            this.valueChanged.emit({ x: x, y: y, v: x / width, rgX: this.rgX });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerSliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: ColorPickerSliderDirective, isStandalone: true, selector: "[colorPickerSlider]", inputs: { rgX: "rgX", rgY: "rgY" }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", valueChanged: "valueChanged" }, host: { listeners: { "mousedown": "mouseDown($event)", "touchstart": "touchStart($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerSliderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[colorPickerSlider]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { rgX: [{
+                type: Input
+            }], rgY: [{
+                type: Input
+            }], dragEnd: [{
+                type: Output
+            }], dragStart: [{
+                type: Output
+            }], valueChanged: [{
+                type: Output
+            }], mouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], touchStart: [{
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }] } });
+
+class ColorPickerComponent extends BaseControlValueAccessorV3 {
+    hexColor = input('#00FF00F8');
+    enableAdditionalColor = input(false);
+    additionalColors = input([
+        // Gray shades
+        '#FFFFFF', // White
+        '#F5F5F5',
+        '#E0E0E0',
+        '#BDBDBD',
+        '#9E9E9E',
+        '#757575',
+        '#616161',
+        '#424242',
+        '#212121',
+        '#000000', // Black
+        '',
+        // Row 1 – Reds to Purples
+        '#F44336', // Red
+        '#EF5350', // Coral red
+        '#AB47BC', // Orchid
+        '#EC407A', // Pink
+        '#7E57C2', // Lavender purple
+        '#5C6BC0', // Indigo
+        // Row 2 – Teal to Blue
+        '#4DB6AC', // Teal
+        '#4FC3F7', // Sky blue
+        '#4DD0E1', // Cyan
+        '#42A5F5', // Blue
+        '#5C6BC0', // Blue-violet
+        '#1E88E5', // Strong blue
+        // Row 3 – Greens to Oranges
+        '#66BB6A', // Green
+        '#9CCC65', // Lime green
+        '#D4E157', // Light lime
+        '#FFEB3B', // Yellow
+        '#FFCA28', // Gold
+        '#FFA726', // Orange
+        '',
+        // Calm / soft colors
+        '#A8DADC', // Soft teal
+        '#F4A261', // Muted orange
+        '#E9C46A', // Soft yellow
+        '#B5EAD7', // Mint green
+        '#C7CEEA', // Soft blue
+        '#FFDAC1', // Peach
+        '#E2F0CB', // Light green
+        '#D0C9FF', // Lavender
+        '#FFB7B2', // Blush pink
+        '#F1C0E8', // Light magenta
+    ]);
+    enableAlpha = input(true);
+    controls = "default";
+    colorChanged = new EventEmitter(false);
+    onAlphaChange = new EventEmitter(false);
+    closeColorPicker = new EventEmitter();
+    color = new Hsva(0, 1, 1, 1);
+    COLOR_PICKER_HEIGHT = signal(140);
+    COLOR_PICKER_WIDTH = signal(250);
+    converterService = inject(ColorConverterService);
+    cdr = inject(ChangeDetectorRef);
+    hsva = signal(new Hsva(0, 1, 1, 1));
+    outputColor;
+    selectedColor = signal("#000000");
+    sliderDimMax = signal(new SliderDimension(0, 1, 1, 1));
+    slider = signal(new SliderPosition(0, 1, 1, 1));
+    hueSliderColor = signal(null);
+    alphaSliderColor = signal(null);
+    hueSlider;
+    alphaSlider;
+    height = computed(() => {
+        return `${this.COLOR_PICKER_HEIGHT()}px`;
+    });
+    width = computed(() => {
+        return `${this.COLOR_PICKER_WIDTH()}px`;
+    });
+    // height = signal(`${this.COLOR_PICKER_HEIGHT()}px`);
+    // width = signal(`${this.COLOR_PICKER_WIDTH()}px`);
+    isTooltip = signal(false);
+    format = ColorFormats.HEX;
+    hexColorValue = model('');
+    alphaValue = signal(1);
+    click(event) {
+        if (this.isOutside(event)) {
+            // this.emitClose('cancel');
+            this.closeColorPicker.emit();
+        }
+    }
+    isOutside(event) {
+        return event.target.classList.contains('ng-color-picker');
+    }
+    onValueReady(value) {
+        if (this.converterService.isValidHexColor(value)) {
+            this.setHexColor(this.hexColor());
+        }
+    }
+    ngOnInit() {
+        this.setHexColor(this.hexColor());
+    }
+    ngOnChanges(changes) {
+        if (changes?.hexColor?.currentValue) {
+            this.setHexColor(changes.hexColor.currentValue);
+        }
+    }
+    ngAfterViewInit() {
+        const hueWidth = this.hueSlider?.nativeElement.offsetWidth || 140;
+        const alphaWidth = this.alphaSlider?.nativeElement.offsetWidth || 140;
+        const sliderDimensionMax = new SliderDimension(hueWidth, this.COLOR_PICKER_WIDTH(), this.COLOR_PICKER_HEIGHT(), alphaWidth);
+        this.sliderDimMax.set(sliderDimensionMax);
+        this.update();
+    }
+    setHexColor(hexColor) {
+        if (!this.enableAlpha()) {
+            hexColor = this.converterService.removeAlpha(hexColor);
+        }
+        if (hexColor != null && hexColor != '') {
+            const hexToHsva = this.converterService.stringToHsva(hexColor);
+            if (hexToHsva) {
+                this.color = hexToHsva;
+                this.hexColorValue.set(hexColor);
+                let alphaPercentage = this.mapRange(this.color.a);
+                this.alphaValue.set(alphaPercentage);
+            }
+        }
+        if (this.color) {
+            this.slider.set(new SliderPosition(this.color.h, this.color.s, this.color.v, this.color.a));
+            this.update();
+        }
+        else {
+            this.slider.set(new SliderPosition(0, 0, 0, 0));
+            this.update();
+        }
+        if (this.converterService.isValidHexColor(hexColor)) {
+            this.onValueChange(hexColor);
+        }
+    }
+    mapRange(value) {
+        return Math.round(1 + value * (100 - 1));
+    }
+    onSliderChange(type, event) {
+        switch (type) {
+            case 'saturation-lightness':
+                this.hsva().onColorChange(event);
+                break;
+            case 'hue':
+                this.hsva().onHueChange(event);
+                break;
+            case 'alpha':
+                this.hsva().onAlphaChange(event);
+                this.onAlphaChange.emit(event);
+                break;
+            case 'value':
+                this.hsva().onValueChange(event);
+                break;
+        }
+        this.update();
+        this.setColor(this.outputColor);
+        this.hexColorValue.set(this.converterService.toFormat(this.hsva(), ColorFormats.HEX));
+        this.alphaValue.set(this.mapRange(this.outputColor.a));
+    }
+    setColor(color) {
+        this.color = color;
+        if (!this.isTooltip()) {
+            this.colorChanged.emit(this.converterService.toFormat(this.color, ColorFormats.HEX));
+        }
+    }
+    getBackgroundColor(color) {
+        return {
+            background: "linear-gradient(90deg, rgba(36,0,0,0) 0%, " + color + " 100%)",
+        };
+    }
+    update() {
+        this.hsva.set(this.color);
+        if (this.sliderDimMax) {
+            let rgba = this.converterService.hsvaToRgba(this.hsva()).denormalize();
+            let hue = this.converterService
+                .hsvaToRgba(new Hsva(this.hsva().h, 1, 1, 1))
+                .denormalize();
+            this.hueSliderColor.set("rgb(" + hue.r + "," + hue.g + "," + hue.b + ")");
+            this.alphaSliderColor.set("rgb(" + rgba.r + "," + rgba.g + "," + rgba.b + ")");
+            this.outputColor = this.hsva();
+            this.selectedColor.set(this.converterService.hsvaToRgba(this.hsva()).toString());
+            const sliderPosition = new SliderPosition(
+            // (this.sHue || this.hsva.h) * this.sliderDimMax.h - 8,
+            this.hsva().h * this.sliderDimMax().h - 5, this.hsva().s * this.sliderDimMax().s, (1 - this.hsva().v) * this.sliderDimMax().v, this.hsva().a * this.sliderDimMax().a - 5);
+            this.slider.set(sliderPosition);
+            this.cdr.detectChanges();
+        }
+    }
+    onHexColorChange(event) {
+        const hexCode = event.target.value.toString().trim();
+        if (this.converterService.isValidHexColor(hexCode)) {
+            this.setHexColor(this.converterService.addHexPrefixIfMissing(hexCode));
+        }
+    }
+    alphaChanged(event) {
+        const input = event.target.value.trim();
+        let value = parseInt(input, 10);
+        if (isNaN(value)) {
+            value = 0;
+        }
+        value = Math.max(0, Math.min(100, value));
+        this.alphaValue.set(value);
+    }
+    onApplyCLicked() {
+        this.colorChanged.emit(this.converterService.toFormat(this.color, ColorFormats.HEX));
+    }
+    getColorRows() {
+        const rows = [];
+        let currentRow = [];
+        for (const color of this.additionalColors()) {
+            if (color === '') {
+                if (currentRow.length) {
+                    rows.push(currentRow);
+                    currentRow = [];
+                }
+            }
+            else {
+                currentRow.push(color);
+            }
+        }
+        if (currentRow.length) {
+            rows.push(currentRow);
+        }
+        return rows;
+    }
+    onColorSelected(color) {
+        this.setHexColor(color);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ColorPickerComponent, isStandalone: true, selector: "app-color-picker", inputs: { hexColor: { classPropertyName: "hexColor", publicName: "hexColor", isSignal: true, isRequired: false, transformFunction: null }, enableAdditionalColor: { classPropertyName: "enableAdditionalColor", publicName: "enableAdditionalColor", isSignal: true, isRequired: false, transformFunction: null }, additionalColors: { classPropertyName: "additionalColors", publicName: "additionalColors", isSignal: true, isRequired: false, transformFunction: null }, enableAlpha: { classPropertyName: "enableAlpha", publicName: "enableAlpha", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: false, isRequired: false, transformFunction: null }, hexColorValue: { classPropertyName: "hexColorValue", publicName: "hexColorValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged", onAlphaChange: "onAlphaChange", closeColorPicker: "closeColorPicker", hexColorValue: "hexColorValueChange" }, host: { listeners: { "document:mousedown": "click($event)" } }, viewQueries: [{ propertyName: "hueSlider", first: true, predicate: ["hueSlider"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n  <div [style.width]=\"width()\">\n\n    <!--Saturation and Lightness-->\n    <div\n      class=\"sl\"\n      [style.height]=\"height()\"\n      [style.width]=\"width()\"\n      colorPickerSlider\n      [rgX]=\"1\"\n      [rgY]=\"1\"\n      (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n      [style.background-color]=\"hueSliderColor()\">\n\n      <!--Saturation & Lightness pointer-->\n      <div\n        class=\"sl-pointer\"\n        [style.left.px]=\"slider().s\"\n        [style.top.px]=\"slider().v\">\n      </div>\n\n    </div>\n\n    <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n      <!--Selected Color-->\n      <div class=\"flex gap-5 items-center\">\n\n        <!--        <div class=\"relative\">-->\n        <!--          <div class=\"selected-color-background\"></div>-->\n        <!--          <div-->\n        <!--            class=\"h-10 w-10 rounded-xl selected-color\"-->\n        <!--            [style.background-color]=\"selectedColor()\">-->\n        <!--          </div>-->\n        <!--        </div>-->\n\n\n        <div class=\"flex flex-col w-full gap-4\">\n          <div #hueSlider\n               class=\"hue\"\n               colorPickerSlider\n               (valueChanged)=\"onSliderChange('hue', $event)\"\n               [rgX]=\"1\">\n            <div class=\"hue-pointer\"\n                 [style.left.px]=\"slider().h\"></div>\n          </div>\n\n          @if(enableAlpha()) {\n            <div #alphaSlider\n                 class=\"alpha\"\n                 colorPickerSlider\n                 [rgX]=\"1\"\n                 (valueChanged)=\"onSliderChange('alpha', $event)\">\n              <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n              <div class=\"alpha-pointer\"\n                   [style.left.px]=\"slider().a\"></div>\n            </div>\n          }\n        </div>\n\n      </div>\n\n      <div class=\"flex items-center gap-3\">\n        <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n          <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n          <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n                 class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n        </div>\n        @if (isTooltip()) {\n          <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n               (click)=\"onApplyCLicked()\">Apply\n          </div>\n        }\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"mt-4\">\n    @for (row of getColorRows(); let $isLast = $last; track $index) {\n      <div class=\"grid grid-cols-8 gap-2 mb-1\">\n        @for (color of row; track $index) {\n          <div\n            (click)=\"onColorSelected(color)\"\n            class=\"h-6 w-6 rounded cursor-pointer border border-gray-200\"\n            [style.background-color]=\"color\">\n          </div>\n        }\n      </div>\n\n      <!-- Separator line unless it's the last row -->\n      @if (!$isLast) {\n        <div class=\"h-[1px] bg-gray-100 my-2.5 w-full\"></div>\n      }\n    }\n  </div>\n\n\n</div>\n\n\n\n", styles: [".sl{@apply rounded;direction:ltr;cursor:crosshair;position:relative;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}.sl-pointer{@apply absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white;}.hue{direction:ltr;height:14px;width:100%;border:none;border-radius:100px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f,red)}.hue-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha{direction:ltr;position:relative;width:100%;height:14px;border:none;border-radius:100px;cursor:pointer;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}.alpha-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{@apply h-10 w-10 rounded-xl;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}.selected-color{position:absolute;@apply h-10 w-10 shadow-md;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: ColorPickerSliderDirective, selector: "[colorPickerSlider]", inputs: ["rgX", "rgY"], outputs: ["dragEnd", "dragStart", "valueChanged"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-color-picker', standalone: true, imports: [
+                        ColorPickerSliderDirective,
+                        NgStyle,
+                        FormsModule,
+                        NgClass
+                    ], template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n  <div [style.width]=\"width()\">\n\n    <!--Saturation and Lightness-->\n    <div\n      class=\"sl\"\n      [style.height]=\"height()\"\n      [style.width]=\"width()\"\n      colorPickerSlider\n      [rgX]=\"1\"\n      [rgY]=\"1\"\n      (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n      [style.background-color]=\"hueSliderColor()\">\n\n      <!--Saturation & Lightness pointer-->\n      <div\n        class=\"sl-pointer\"\n        [style.left.px]=\"slider().s\"\n        [style.top.px]=\"slider().v\">\n      </div>\n\n    </div>\n\n    <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n      <!--Selected Color-->\n      <div class=\"flex gap-5 items-center\">\n\n        <!--        <div class=\"relative\">-->\n        <!--          <div class=\"selected-color-background\"></div>-->\n        <!--          <div-->\n        <!--            class=\"h-10 w-10 rounded-xl selected-color\"-->\n        <!--            [style.background-color]=\"selectedColor()\">-->\n        <!--          </div>-->\n        <!--        </div>-->\n\n\n        <div class=\"flex flex-col w-full gap-4\">\n          <div #hueSlider\n               class=\"hue\"\n               colorPickerSlider\n               (valueChanged)=\"onSliderChange('hue', $event)\"\n               [rgX]=\"1\">\n            <div class=\"hue-pointer\"\n                 [style.left.px]=\"slider().h\"></div>\n          </div>\n\n          @if(enableAlpha()) {\n            <div #alphaSlider\n                 class=\"alpha\"\n                 colorPickerSlider\n                 [rgX]=\"1\"\n                 (valueChanged)=\"onSliderChange('alpha', $event)\">\n              <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n              <div class=\"alpha-pointer\"\n                   [style.left.px]=\"slider().a\"></div>\n            </div>\n          }\n        </div>\n\n      </div>\n\n      <div class=\"flex items-center gap-3\">\n        <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n          <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n          <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n                 class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n        </div>\n        @if (isTooltip()) {\n          <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n               (click)=\"onApplyCLicked()\">Apply\n          </div>\n        }\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"mt-4\">\n    @for (row of getColorRows(); let $isLast = $last; track $index) {\n      <div class=\"grid grid-cols-8 gap-2 mb-1\">\n        @for (color of row; track $index) {\n          <div\n            (click)=\"onColorSelected(color)\"\n            class=\"h-6 w-6 rounded cursor-pointer border border-gray-200\"\n            [style.background-color]=\"color\">\n          </div>\n        }\n      </div>\n\n      <!-- Separator line unless it's the last row -->\n      @if (!$isLast) {\n        <div class=\"h-[1px] bg-gray-100 my-2.5 w-full\"></div>\n      }\n    }\n  </div>\n\n\n</div>\n\n\n\n", styles: [".sl{@apply rounded;direction:ltr;cursor:crosshair;position:relative;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}.sl-pointer{@apply absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white;}.hue{direction:ltr;height:14px;width:100%;border:none;border-radius:100px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f,red)}.hue-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha{direction:ltr;position:relative;width:100%;height:14px;border:none;border-radius:100px;cursor:pointer;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}.alpha-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{@apply h-10 w-10 rounded-xl;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}.selected-color{position:absolute;@apply h-10 w-10 shadow-md;top:0;left:0}\n"] }]
+        }], propDecorators: { controls: [{
+                type: Input
+            }], colorChanged: [{
+                type: Output
+            }], onAlphaChange: [{
+                type: Output
+            }], closeColorPicker: [{
+                type: Output
+            }], hueSlider: [{
+                type: ViewChild,
+                args: ["hueSlider", { static: false }]
+            }], alphaSlider: [{
+                type: ViewChild,
+                args: ["alphaSlider", { static: false }]
+            }], click: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
+class ColorPickerDirective {
+    colorChanged = new EventEmitter(false);
+    componentRef = null;
+    elementRef = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    componentFactoryResolver = inject(ComponentFactoryResolver);
+    appRef = inject(ApplicationRef);
+    injector = inject(Injector);
+    overlay;
+    onClick() {
+        if (this.componentRef) {
+            this.closeColorPicker();
+            return;
+        }
+        this.initializeColorPicker();
+    }
+    initializeColorPicker() {
+        if (this.componentRef === null) {
+            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ColorPickerComponent);
+            this.componentRef = componentFactory.create(this.injector);
+            this.appRef.attachView(this.componentRef.hostView);
+            const [domElement] = this.componentRef.hostView.rootNodes;
+            const elementRect = this.elementRef.nativeElement.getBoundingClientRect();
+            this.overlay = document.createElement("div");
+            this.overlay.id = "ng-color-picker";
+            this.overlay.classList.add("ng-color-picker");
+            this.overlay.style['position'] = 'fixed';
+            this.overlay.style['height'] = '100%';
+            this.overlay.style['width'] = '100%';
+            this.overlay.style['z-index'] = 2000;
+            this.overlay.style['top'] = '0';
+            this.overlay.style['left'] = '0';
+            this.componentRef.location.nativeElement.style.position = 'absolute';
+            this.componentRef.location.nativeElement.style['z-index'] = 2001;
+            this.componentRef.location.nativeElement.style.top = `${elementRect.bottom + 20}px`;
+            this.componentRef.location.nativeElement.style.left = `${elementRect.left}px`;
+            this.componentRef.instance.COLOR_PICKER_HEIGHT.set(140);
+            this.componentRef.instance.COLOR_PICKER_WIDTH.set(250);
+            this.componentRef.instance.isTooltip.set(true);
+            this.componentRef.instance.colorChanged.subscribe((colorCode) => {
+                this.colorChanged.emit(colorCode);
+                this.closeColorPicker();
+            });
+            this.componentRef.instance.closeColorPicker.subscribe(() => {
+                this.closeColorPicker();
+            });
+            document.body.appendChild(this.overlay);
+            document.body.appendChild(domElement);
+        }
+    }
+    // private initializeColorPicker() {
+    //   if(this.componentRef === null) {
+    //     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ColorPickerComponent);
+    //     this.componentRef = componentFactory.create(this.injector);
+    //
+    //     this.appRef.attachView(this.componentRef.hostView);
+    //     const [domElement] = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes;
+    //
+    //     this.setColorPickerProperties();
+    //
+    //     document.body.appendChild(domElement);
+    //
+    //   }
+    // }
+    //
+    // private setColorPickerProperties() {
+    //   if (this.componentRef !== null) {
+    //     const elementRect = this.elementRef.nativeElement.getBoundingClientRect();
+    //
+    //
+    //     this.componentRef.location.nativeElement.style.position = 'absolute';
+    //     this.componentRef.location.nativeElement.style.top = `${elementRect.bottom + 20}px`;
+    //     this.componentRef.location.nativeElement.style.left = `${elementRect.left}px`;
+    //     this.componentRef.instance.COLOR_PICKER_HEIGHT.set(140);
+    //     this.componentRef.instance.COLOR_PICKER_WIDTH.set(250);
+    //     this.componentRef.instance.isTooltip.set(true);
+    //
+    //     this.componentRef.instance.colorChanged.subscribe((colorCode: string) => {
+    //       this.colorChanged.emit(colorCode);
+    //       this.closeColorPicker();
+    //     });
+    //
+    //     this.componentRef.instance.closeColorPicker.subscribe(() => {
+    //       this.closeColorPicker();
+    //     });
+    //   }
+    // }
+    closeColorPicker() {
+        if (this.componentRef) {
+            this.appRef.detachView(this.componentRef.hostView);
+            this.componentRef.destroy();
+            this.overlay.remove();
+            this.componentRef = null;
+        }
+        // this.viewContainerRef.clear();
+        // this.componentRef = null;
+    }
+    ngOnDestroy() {
+        this.closeColorPicker();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: ColorPickerDirective, isStandalone: true, selector: "[appColorPicker]", outputs: { colorChanged: "colorChanged" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appColorPicker]',
+                    standalone: true
+                }]
+        }], propDecorators: { colorChanged: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 class OverlayContextMenuComponent {
     dialogRef = inject(DialogRef);
     actions = inject(DIALOG_DATA);
@@ -5612,5 +6469,5 @@ function provideNglConfig(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ContextMenuButtonComponent, ContextMenuIconComponent, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SharedConstants, ShimmerComponent, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipComponent, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, getDynamicTypeStructure, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase };
+export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SharedConstants, ShimmerComponent, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipComponent, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, getDynamicTypeStructure, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase };
 //# sourceMappingURL=vallift-ngl.mjs.map