@ngbase/adk 0.1.0

package/fesm2022/ngbase-adk-color-picker.mjs

@@ -0,0 +1,580 @@
+import * as i0 from '@angular/core';
+import { Directive, Component, inject, ElementRef, viewChild, output, input, afterNextRender, InjectionToken, Injector, model, effect, untracked } from '@angular/core';
+import * as i1 from '@ngbase/adk/drag';
+import { Drag } from '@ngbase/adk/drag';
+import { DialogRef } from '@ngbase/adk/portal';
+import { ngbPopoverPortal } from '@ngbase/adk/popover';
+import { provideValueAccessor } from '@ngbase/adk/utils';
+
+const MAX_RGB = 255;
+const MAX_HUE = 360;
+const MAX_PERCENTAGE = 100;
+function hexToRgb(hex) {
+    // Remove the hash at the start if it's there
+    hex = hex.replace(/^#/, '');
+    // Check for valid hex formats
+    if (!/^([0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(hex)) {
+        throw new Error('Invalid hex color format');
+    }
+    let r, g, b, a = 1;
+    if (hex.length === 3 || hex.length === 4) {
+        r = parseInt(hex[0] + hex[0], 16);
+        g = parseInt(hex[1] + hex[1], 16);
+        b = parseInt(hex[2] + hex[2], 16);
+        if (hex.length === 4) {
+            a = parseInt(hex[3] + hex[3], 16) / 255;
+        }
+    }
+    else if (hex.length === 6 || hex.length === 8) {
+        r = parseInt(hex.slice(0, 2), 16);
+        g = parseInt(hex.slice(2, 4), 16);
+        b = parseInt(hex.slice(4, 6), 16);
+        if (hex.length === 8) {
+            a = parseInt(hex.slice(6, 8), 16) / 255;
+        }
+    }
+    else {
+        throw new Error('Invalid hex color format');
+    }
+    return [r, g, b, roundTo2Decimals(a)];
+}
+function rgbaToHsb(r, g, b, a = 1) {
+    validateRgba(r, g, b, a);
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    const d = max - min;
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    if (max !== min) {
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return {
+        h: roundNum(h * 360),
+        s: roundNum(s * 100),
+        b: roundNum(v * 100),
+        a: roundTo2Decimals(a),
+    };
+}
+function hexToHsb(hex) {
+    const [r, g, b, a] = hexToRgb(hex);
+    const { h, s, b: brightness, a: alpha } = rgbaToHsb(r, g, b, a);
+    return [roundNum(h), roundNum(s), roundNum(brightness), roundTo2Decimals(alpha)];
+}
+function rgbToHsl(r, g, b) {
+    validateRgb(r, g, b);
+    r /= MAX_RGB;
+    g /= MAX_RGB;
+    b /= MAX_RGB;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    const d = max - min;
+    if (d) {
+        s = d / (1 - Math.abs(2 * l - 1));
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return {
+        h: roundNum(h * MAX_HUE),
+        s: roundNum(s * MAX_PERCENTAGE),
+        l: roundNum(l * MAX_PERCENTAGE),
+    };
+}
+function parseRgba(rgba) {
+    const matches = rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+    if (!matches) {
+        throw new Error('Invalid RGBA string format');
+    }
+    const [, r, g, b, a] = matches;
+    return [parseInt(r, 10), parseInt(g, 10), parseInt(b, 10), a ? parseFloat(a) : 1];
+}
+function parseHsba(hsb) {
+    const matches = hsb.match(/^hsba?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+    if (!matches) {
+        throw new Error('Invalid HSBA string format');
+    }
+    const [, h, s, b, a] = matches;
+    return [parseInt(h, 10), parseInt(s, 10), parseInt(b, 10), a ? parseFloat(a) : 1];
+}
+function hsbToHsl(h, s, b) {
+    validateHsb(h, s, b);
+    s /= MAX_PERCENTAGE;
+    b /= MAX_PERCENTAGE;
+    const l = b * (1 - s / 2);
+    const saturation = l === 0 || l === 1 ? 0 : (b - l) / Math.min(l, 1 - l);
+    return [roundNum(h), roundNum(saturation * MAX_PERCENTAGE), roundNum(l * MAX_PERCENTAGE)];
+}
+function hslaToHsba(h, s, l, a = 1) {
+    validateHsl(h, s, l);
+    validateAlpha(a);
+    s /= MAX_PERCENTAGE;
+    l /= MAX_PERCENTAGE;
+    const brightness = l + s * Math.min(l, 1 - l);
+    const saturation = brightness === 0 ? 0 : 2 * (1 - l / brightness);
+    return [
+        roundNum(h),
+        roundNum(saturation * MAX_PERCENTAGE),
+        roundNum(brightness * MAX_PERCENTAGE),
+        roundTo2Decimals(a),
+    ];
+}
+function hsbaToRgba(h, s, b, a = 1) {
+    validateHsb(h, s, b);
+    validateAlpha(a);
+    s /= MAX_PERCENTAGE;
+    b /= MAX_PERCENTAGE;
+    const k = (n) => (n + h / 60) % 6;
+    const f = (n) => b * (1 - s * Math.max(0, Math.min(k(n), 4 - k(n), 1)));
+    return [
+        roundNum(f(5) * MAX_RGB),
+        roundNum(f(3) * MAX_RGB),
+        roundNum(f(1) * MAX_RGB),
+        roundTo2Decimals(a),
+    ];
+}
+function rgbToHsba(r, g, b, a = 1) {
+    const { h, s, b: br, a: alpha } = rgbaToHsb(r, g, b, a);
+    return [h, s, br, alpha];
+}
+function hsbaToHex(h, s, b, a = 1) {
+    const [r, g, b_, a_] = hsbaToRgba(h, s, b, a);
+    return rgbToHex(r, g, b_, a_);
+}
+function rgbToHex(r, g, b, a = 1) {
+    validateRgb(r, g, b);
+    validateAlpha(a);
+    let rgba = [r, g, b];
+    if (a < 1) {
+        rgba.push(Math.round(a * 255));
+    }
+    return ('#' +
+        rgba
+            .map(x => Math.round(x).toString(16).padStart(2, '0'))
+            .join('')
+            .toUpperCase());
+}
+function validateRgb(r, g, b) {
+    if (r < 0 || r > MAX_RGB || g < 0 || g > MAX_RGB || b < 0 || b > MAX_RGB) {
+        throw new Error('Invalid RGB values');
+    }
+}
+function validateRgba(r, g, b, a) {
+    validateRgb(r, g, b);
+    validateAlpha(a);
+}
+function validateHsb(h, s, b) {
+    if (h < 0 || h > MAX_HUE || s < 0 || s > MAX_PERCENTAGE || b < 0 || b > MAX_PERCENTAGE) {
+        throw new Error('Invalid HSB values');
+    }
+}
+function validateHsl(h, s, l) {
+    if (h < 0 || h >= MAX_HUE || s < 0 || s > MAX_PERCENTAGE || l < 0 || l > MAX_PERCENTAGE) {
+        throw new Error('Invalid HSL values');
+    }
+}
+function validateAlpha(a) {
+    if (a < 0 || a > 1) {
+        throw new Error('Invalid alpha value');
+    }
+}
+function roundNum(num) {
+    return Math.round(num);
+}
+function roundTo2Decimals(num) {
+    return Math.round(num * 100) / 100;
+}
+
+class ColorSpectrum {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorSpectrum, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: ColorSpectrum, isStandalone: true, selector: "[ngbColorSpectrum]", host: { styleAttribute: "background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent), linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0)); background-color: var(--hue-color);" }, hostDirectives: [{ directive: i1.Drag }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorSpectrum, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbColorSpectrum]',
+                    hostDirectives: [Drag],
+                    host: {
+                        style: 'background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent), linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0)); background-color: var(--hue-color);',
+                    },
+                }]
+        }] });
+class ColorSpectrumSelector {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorSpectrumSelector, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: ColorSpectrumSelector, isStandalone: true, selector: "[ngbColorSpectrumSelector]", host: { attributes: { "type": "button" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorSpectrumSelector, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbColorSpectrumSelector]',
+                    host: {
+                        type: 'button',
+                    },
+                }]
+        }] });
+class ColorSelected {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorSelected, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: ColorSelected, isStandalone: true, selector: "[ngbColorSelected]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorSelected, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngbColorSelected]' }]
+        }] });
+class ColorHue {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorHue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: ColorHue, isStandalone: true, selector: "[ngbColorHue]", host: { styleAttribute: "inset: 0px; background: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0));" }, hostDirectives: [{ directive: i1.Drag }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorHue, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbColorHue]',
+                    hostDirectives: [Drag],
+                    host: {
+                        style: 'inset: 0px; background: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0));',
+                    },
+                }]
+        }] });
+class ColorHueThumb {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorHueThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: ColorHueThumb, isStandalone: true, selector: "[ngbColorHueThumb]", host: { attributes: { "type": "button" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorHueThumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbColorHueThumb]',
+                    host: {
+                        type: 'button',
+                    },
+                }]
+        }] });
+class ColorAlpha {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorAlpha, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: ColorAlpha, isStandalone: true, selector: "[ngbColorAlpha]", host: { styleAttribute: "\n      background-image: conic-gradient(\n        rgba(0, 0, 0, 0.06) 0 25%,\n        transparent 0 50%,\n        rgba(0, 0, 0, 0.06) 0 75%,\n        transparent 0\n      );\n      background-size: 8px 8px;\n    " }, hostDirectives: [{ directive: i1.Drag }], ngImport: i0, template: ` <div
+    style="height: 100%; inset: 0px; background: linear-gradient(to right, rgba(255, 0, 4, 0), var(--hue-color));"
+  >
+    <ng-content />
+  </div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorAlpha, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ngbColorAlpha]',
+                    hostDirectives: [Drag],
+                    template: ` <div
+    style="height: 100%; inset: 0px; background: linear-gradient(to right, rgba(255, 0, 4, 0), var(--hue-color));"
+  >
+    <ng-content />
+  </div>`,
+                    host: {
+                        style: `
+      background-image: conic-gradient(
+        rgba(0, 0, 0, 0.06) 0 25%,
+        transparent 0 50%,
+        rgba(0, 0, 0, 0.06) 0 75%,
+        transparent 0
+      );
+      background-size: 8px 8px;
+    `,
+                    },
+                }]
+        }] });
+class ColorAlphaThumb {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorAlphaThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: ColorAlphaThumb, isStandalone: true, selector: "[ngbColorAlphaThumb]", host: { attributes: { "type": "button" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorAlphaThumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbColorAlphaThumb]',
+                    host: {
+                        type: 'button',
+                    },
+                }]
+        }] });
+class NgbColorPicker {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.dialogRef = inject(DialogRef, { optional: true });
+        this.hueDiv = viewChild.required(ColorHue, { read: Drag });
+        this.hueSelector = viewChild.required(ColorHueThumb, { read: ElementRef });
+        this.spectrumDiv = viewChild.required(ColorSpectrum, {
+            read: Drag,
+        });
+        this.spectrumSelector = viewChild.required(ColorSpectrumSelector, { read: ElementRef });
+        this.selectedColor = viewChild.required(ColorSelected, { read: ElementRef });
+        this.alpha = 100; // 0-100
+        this.alphaDiv = viewChild.required(ColorAlpha, { read: Drag });
+        this.alphaSelector = viewChild.required(ColorAlphaThumb, { read: ElementRef });
+        this.valueChange = output();
+        this.format = input(this.dialogRef?.data.format || 'hex');
+        this.presetColors = input(this.dialogRef?.data.presetColors || []);
+        this.hue = 0;
+        this.saturation = 0;
+        this.brightness = 0;
+        this.localValue = '';
+        this.colorParsers = new Map([
+            ['hsb', parseHsba],
+            ['hex', hexToHsb],
+            ['rgb', (value) => rgbToHsba(...parseRgba(value))],
+            ['hsl', (value) => hslaToHsba(...parseHsba(value))],
+        ]);
+        afterNextRender(() => {
+            this.setupEventListeners();
+        });
+    }
+    calculateCoordinates(e, el) {
+        const rect = el.nativeElement.getBoundingClientRect();
+        let x = Math.round(e.clientX - rect.left);
+        let y = Math.round(e.clientY - rect.top);
+        // Constrain x and y within the bounds of the spectrum box
+        x = Math.max(0, Math.min(x, rect.width));
+        y = Math.max(0, Math.min(y, rect.height));
+        return { x, y, rect };
+    }
+    setupEventListeners() {
+        this.setupDragListener(this.hueDiv(), (x, y, w, h) => this.updateHue(x, 0, w, h));
+        this.setupDragListener(this.spectrumDiv(), this.updateSpectrum.bind(this));
+        this.setupDragListener(this.alphaDiv(), (x, y, w) => this.updateAlpha(x, 0, w));
+    }
+    setupDragListener(dragElement, updateFunction) {
+        dragElement.events.subscribe(event => {
+            if (event.type === 'start' || event.type === 'move') {
+                this.handleColorEvent(event.event, dragElement.el, updateFunction);
+                // If we want to avoid emitting the value on every move,
+                // we can add a flag to emit only when the event is 'end'
+                this.valueChange.emit(this.localValue);
+            }
+        });
+    }
+    handleColorEvent(event, element, updateFunction) {
+        const { x, y, rect } = this.calculateCoordinates(event, element);
+        updateFunction(x, y, rect.width, rect.height);
+        this.updateValue();
+    }
+    updateHue(x, y, width, height) {
+        this.hue = Math.round((x / width) * 360);
+        this.el.nativeElement.style.setProperty('--hue-color', `hsl(${this.hue}, 100%, 50%)`);
+        const hueSelector = this.hueSelector().nativeElement;
+        hueSelector.style.left = `${x}px`;
+        if (this.lastSpectrumEvent)
+            this.updateValue();
+    }
+    updateSpectrum(x, y, width, height) {
+        const { s, b } = this.calculateSaturationAndLuminous(x, y, width, height);
+        this.saturation = s;
+        this.brightness = b;
+        this.lastSpectrumEvent = { clientX: x, clientY: y };
+        const spectrumSelector = this.spectrumSelector().nativeElement;
+        spectrumSelector.style.left = `${x - spectrumSelector.offsetWidth / 2}px`;
+        spectrumSelector.style.top = `${y - spectrumSelector.offsetHeight / 2}px`;
+    }
+    updateAlpha(x, y, width) {
+        this.alpha = Math.round((x / width) * 100);
+        const alphaSelector = this.alphaSelector().nativeElement;
+        alphaSelector.style.left = `${x}px`;
+    }
+    setValue(value, emit = false) {
+        if (!value)
+            return;
+        this.parse(value);
+        this.updateValue(emit);
+        this.el.nativeElement.style.setProperty('--hue-color', this.getColor(this.hue, 100, 100, 100));
+        this.updateSelectorPositions();
+    }
+    updateSelectorPositions() {
+        this.updateSelectorPosition(this.hueDiv().el, this.hueSelector(), this.hue / 360);
+        this.updateSelectorPosition(this.alphaDiv().el, this.alphaSelector(), this.alpha / 100);
+        this.updateSpectrumSelectorPosition();
+    }
+    updateSelectorPosition(containerEl, selectorEl, ratio) {
+        selectorEl.nativeElement.style.left = ratio * containerEl.nativeElement.clientWidth + 'px';
+    }
+    updateSpectrumSelectorPosition() {
+        const spectrumRect = this.spectrumDiv().el.nativeElement.getBoundingClientRect();
+        const spectrumSelector = this.spectrumSelector().nativeElement;
+        const { x, y } = this.calculateSpectrumPosition(this.saturation, this.brightness, spectrumRect.width, spectrumRect.height);
+        spectrumSelector.style.left = `${x}px`;
+        spectrumSelector.style.top = `${y}px`;
+    }
+    // Simplified function to calculate the x and y based on the saturation and lightness
+    calculateSpectrumPosition(s, l, spectrumWidth, spectrumHeight) {
+        const handlerSize = 16;
+        const half = handlerSize / 2;
+        const x = (spectrumWidth * s) / 100 - half;
+        const y = (spectrumHeight * (100 - l)) / 100 - half;
+        return { x, y };
+    }
+    calculateSaturationAndLuminous(x, y, sw, sh) {
+        const s = Math.round((x / sw) * 100);
+        const b = Math.round(100 - (y / sh) * 100);
+        return { s, b };
+    }
+    updateValue(emit = false) {
+        this.localValue = this.toString();
+        const hsla = this.getColor(this.hue, this.saturation, this.brightness, this.alpha);
+        this.el.nativeElement.style.setProperty('--spectrum-color', hsla);
+        this.selectedColor().nativeElement.style.backgroundColor = hsla;
+        this.spectrumSelector().nativeElement.style.backgroundColor = hsla;
+        if (emit)
+            this.valueChange.emit(this.localValue);
+    }
+    getColor(h, s, b, a) {
+        const [hh, ss, l] = hsbToHsl(h, s, b);
+        return `hsla(${hh}, ${ss}%, ${l}%, ${a / 100})`;
+    }
+    parse(value) {
+        const parser = this.colorParsers.get(this.format());
+        if (parser) {
+            [this.hue, this.saturation, this.brightness, this.alpha] = parser(value);
+            this.alpha = Math.round(this.alpha * 100);
+        }
+    }
+    toString() {
+        const alpha = this.alpha / 100;
+        const formatters = {
+            hsb: () => `hsba(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${alpha})`,
+            hex: () => hsbaToHex(this.hue, this.saturation, this.brightness, alpha),
+            rgb: () => {
+                const [r, g, b, a] = hsbaToRgba(this.hue, this.saturation, this.brightness, alpha);
+                return a === 1 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a})`;
+            },
+            hsl: () => {
+                const [h, s, l] = hsbToHsl(this.hue, this.saturation, this.brightness);
+                return `hsla(${h}, ${s}%, ${l}%, ${alpha})`;
+            },
+        };
+        return formatters[this.format()]?.() || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.0", type: NgbColorPicker, isStandalone: true, selector: "ngb-color-picker-container", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { styleAttribute: "\n      --hue-color: rgb(255, 0, 0);\n      --spectrum-color: rgb(0, 0, 0);\n    " }, viewQueries: [{ propertyName: "hueDiv", first: true, predicate: ColorHue, descendants: true, read: Drag, isSignal: true }, { propertyName: "hueSelector", first: true, predicate: ColorHueThumb, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "spectrumDiv", first: true, predicate: ColorSpectrum, descendants: true, read: Drag, isSignal: true }, { propertyName: "spectrumSelector", first: true, predicate: ColorSpectrumSelector, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "selectedColor", first: true, predicate: ColorSelected, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "alphaDiv", first: true, predicate: ColorAlpha, descendants: true, read: Drag, isSignal: true }, { propertyName: "alphaSelector", first: true, predicate: ColorAlphaThumb, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbColorPicker, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ngb-color-picker-container',
+                    host: {
+                        style: `
+      --hue-color: rgb(255, 0, 0);
+      --spectrum-color: rgb(0, 0, 0);
+    `,
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+const ColorPicker = new InjectionToken('ColorPicker');
+const registerColorPicker = ({ picker, accessor }) => [
+    { provide: ColorPicker, useValue: picker },
+    provideValueAccessor(accessor),
+];
+class ColorPickerTrigger {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.colorPicker = inject(ColorPicker, { optional: true }) ?? NgbColorPicker;
+        this.popover = ngbPopoverPortal();
+        this.injector = inject(Injector);
+        this.format = input('hex');
+        this.presetColors = input();
+        this.value = model();
+    }
+    open() {
+        const { childSignal } = this.popover.open(this.colorPicker, {
+            target: this.el.nativeElement,
+            position: 'bl',
+            offset: 0,
+            data: { format: this.format(), presetColors: this.presetColors() },
+            width: '255px',
+        });
+        this.effectRef?.destroy();
+        this.effectRef = effect(() => {
+            const colorPicker = childSignal()?.instance;
+            if (colorPicker) {
+                untracked(() => {
+                    colorPicker.setValue(this.value() || '#000000');
+                    colorPicker.valueChange.subscribe(res => {
+                        this.value.set(res);
+                    });
+                });
+            }
+        }, { injector: this.injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorPickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: ColorPickerTrigger, isStandalone: true, selector: "[ngbColorPickerTrigger]", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "click": "open()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColorPickerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbColorPickerTrigger]',
+                    host: {
+                        '(click)': 'open()',
+                    },
+                }]
+        }] });
+
+class NgbColorInput {
+    constructor() {
+        this.format = input('hex');
+        this.presetColors = input();
+        this.value = model('');
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+    }
+    updateValue(value = '') {
+        this.value.set(value);
+        this.onChange(value);
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbColorInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NgbColorInput, isStandalone: true, selector: "[ngbColorInput]", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [provideValueAccessor(NgbColorInput)], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbColorInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbColorInput]',
+                    providers: [provideValueAccessor(NgbColorInput)],
+                }]
+        }] });
+
+/*
+ * Public API Surface of color-picker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorAlpha, ColorAlphaThumb, ColorHue, ColorHueThumb, ColorPickerTrigger, ColorSelected, ColorSpectrum, ColorSpectrumSelector, NgbColorInput, NgbColorPicker, registerColorPicker };
+//# sourceMappingURL=ngbase-adk-color-picker.mjs.map