import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import * as i0 from '@angular/core';
import { Injectable, input, output, inject, ElementRef, Directive, ViewEncapsulation, Component, linkedSignal, Injector, ApplicationRef, ViewContainerRef } from '@angular/core';

class Cmyk {
    constructor(c, m, y, k, a, 
    /** Wheter values are normalized to [0..1] */
    normalized = true) {
        this.c = c;
        this.m = m;
        this.y = y;
        this.k = k;
        this.a = a;
        this.normalized = normalized;
    }
}
class Hsla {
    constructor(h, s, l, a, 
    /** Wheter values are normalized to [0..1] */
    normalized = true) {
        this.h = h;
        this.s = s;
        this.l = l;
        this.a = a;
        this.normalized = normalized;
    }
}
class Hsva {
    constructor(h, s, v, a, 
    /** Wheter values are normalized to [0..1] */
    normalized = true) {
        this.h = h;
        this.s = s;
        this.v = v;
        this.a = a;
        this.normalized = normalized;
    }
}
class Rgba {
    constructor(r, g, b, a, 
    /** Wheter values are normalized to [0..1] */
    normalized = true) {
        this.r = r;
        this.g = g;
        this.b = b;
        this.a = a;
        this.normalized = normalized;
    }
}

var ColorFormatEnum;
(function (ColorFormatEnum) {
    ColorFormatEnum["hex"] = "hex";
    ColorFormatEnum["rgba"] = "rgba";
    ColorFormatEnum["hsla"] = "hsla";
    ColorFormatEnum["cmyk"] = "cmyk";
})(ColorFormatEnum || (ColorFormatEnum = {}));
const AlphaEnabledFormats = new Set([ColorFormatEnum.hsla, ColorFormatEnum.rgba, ColorFormatEnum.cmyk]);
var OutputFormatEnum;
(function (OutputFormatEnum) {
    OutputFormatEnum["auto"] = "auto";
    OutputFormatEnum["hex"] = "hex";
    OutputFormatEnum["rgba"] = "rgba";
    OutputFormatEnum["hsla"] = "hsla";
})(OutputFormatEnum || (OutputFormatEnum = {}));
var AlphaChannelEnum;
(function (AlphaChannelEnum) {
    AlphaChannelEnum["enabled"] = "enabled";
    AlphaChannelEnum["disabled"] = "disabled";
    AlphaChannelEnum["always"] = "always";
    AlphaChannelEnum["forced"] = "forced";
})(AlphaChannelEnum || (AlphaChannelEnum = {}));
var DialogPositionEnum;
(function (DialogPositionEnum) {
    DialogPositionEnum["auto"] = "auto";
    DialogPositionEnum["top"] = "top";
    DialogPositionEnum["left"] = "left";
    DialogPositionEnum["right"] = "right";
    DialogPositionEnum["bottom"] = "bottom";
})(DialogPositionEnum || (DialogPositionEnum = {}));
var DialogDisplayEnum;
(function (DialogDisplayEnum) {
    DialogDisplayEnum["popup"] = "popup";
    DialogDisplayEnum["inline"] = "inline";
})(DialogDisplayEnum || (DialogDisplayEnum = {}));

function clamp(val, min, max) {
    return Math.min(max, Math.max(val, min));
}
function hsvaToHsla(hsva) {
    hsva = normalizeHSVA(hsva);
    const h = hsva.h;
    const s = hsva.s;
    const v = hsva.v;
    const a = hsva.a;
    if (v == 0) {
        return new Hsla(h, 0, 0, a, true);
    }
    else if (s == 0 && v == 1) {
        return new Hsla(h, 1, 1, a, true);
    }
    else {
        const l = v * (2 - s) / 2;
        return new Hsla(h, v * s / (1 - Math.abs(2 * l - 1)), l, a, true);
    }
}
function hslaToHsva(hsla) {
    hsla = normalizeHSLA(hsla);
    const h = Math.min(hsla.h, 1);
    const s = Math.min(hsla.s, 1);
    const l = Math.min(hsla.l, 1);
    const a = Math.min(hsla.a, 1);
    if (l == 0) {
        return new Hsva(h, 0, 0, a, true);
    }
    else {
        const v = l + s * (1 - Math.abs(2 * l - 1)) / 2;
        return new Hsva(h, 2 * (v - l) / v, v, a, true);
    }
}
function hsvaToRgba(hsva) {
    hsva = normalizeHSVA(hsva);
    let r;
    let g;
    let b;
    const h = hsva.h;
    const s = hsva.s;
    const v = hsva.v;
    const 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, true);
}
function rgbaToCmyk(rgba) {
    rgba = normalizeRGBA(rgba);
    const k = 1 - Math.max(rgba.r, rgba.g, rgba.b);
    if (k == 1) {
        return new Cmyk(0, 0, 0, 1, rgba.a, true);
    }
    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, true);
    }
}
function rgbaToHsva(rgba) {
    rgba = normalizeRGBA(rgba);
    let h;
    const r = Math.min(rgba.r, 1);
    const g = Math.min(rgba.g, 1);
    const b = Math.min(rgba.b, 1);
    const a = Math.min(rgba.a, 1);
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    const v = max;
    const d = max - min;
    const 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, true);
}
function rgbaToHex(rgba, allowHex8) {
    rgba = denormalizeRGBA(rgba);
    /* tslint:disable:no-bitwise */
    let hex = '#' + ((1 << 24) | (Math.round(rgba.r) << 16) | (Math.round(rgba.g) << 8) | Math.round(rgba.b)).toString(16).substring(1);
    if (allowHex8) {
        hex += ((1 << 8) | clamp(Math.round(rgba.a * 255), 0, 255)).toString(16).substring(1);
    }
    /* tslint:enable:no-bitwise */
    return hex;
}
function cmykToRgb(cmyk) {
    cmyk = normalizeCMYK(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, true);
}
function normalizeCMYK(cmyk) {
    if (cmyk.normalized)
        return cmyk;
    return new Cmyk(clamp(cmyk.c / 100, 0, 1), clamp(cmyk.m / 100, 0, 1), clamp(cmyk.y / 100, 0, 1), clamp(cmyk.k / 100, 0, 1), clamp(cmyk.a, 0, 1), true);
}
function denormalizeCMYK(cmyk) {
    if (!cmyk.normalized)
        return cmyk;
    return new Cmyk(clamp(cmyk.c * 100, 0, 100), clamp(cmyk.m * 100, 0, 100), clamp(cmyk.y * 100, 0, 100), clamp(cmyk.k * 100, 0, 100), clamp(cmyk.a, 0, 1), false);
}
function normalizeRGBA(rgba) {
    if (rgba.normalized)
        return rgba;
    return new Rgba(clamp(rgba.r / 255, 0, 1), clamp(rgba.g / 255, 0, 1), clamp(rgba.b / 255, 0, 1), clamp(rgba.a, 0, 1), true);
}
function denormalizeRGBA(rgba) {
    if (!rgba.normalized)
        return rgba;
    return new Rgba(clamp(rgba.r * 255, 0, 255), clamp(rgba.g * 255, 0, 255), clamp(rgba.b * 255, 0, 255), clamp(rgba.a, 0, 1), false);
}
function normalizeHSVA(hsva) {
    if (hsva.normalized)
        return hsva;
    return new Hsva(clamp(hsva.h / 360, 0, 1), clamp(hsva.s / 100, 0, 1), clamp(hsva.v / 100, 0, 1), clamp(hsva.a, 0, 1), true);
}
function denormalizeHSVA(hsva) {
    if (!hsva.normalized)
        return hsva;
    return new Hsva(clamp(hsva.h * 360, 0, 360), clamp(hsva.s * 100, 0, 100), clamp(hsva.v * 100, 0, 100), clamp(hsva.a, 0, 1), false);
}
function normalizeHSLA(hsla) {
    if (hsla.normalized)
        return hsla;
    return new Hsla(clamp(hsla.h / 360, 0, 1), clamp(hsla.s / 100, 0, 1), clamp(hsla.l / 100, 0, 1), clamp(hsla.a, 0, 1), true);
}
function denormalizeHSLA(hsla) {
    if (!hsla.normalized)
        return hsla;
    return new Hsla(clamp(hsla.h * 360, 0, 360), clamp(hsla.s * 100, 0, 100), clamp(hsla.l * 100, 0, 100), clamp(hsla.a, 0, 1), false);
}
function stringToHsva(colorString = '', allowHex8 = false) {
    let hsva;
    colorString = (colorString || '').toLowerCase();
    const stringParsers = [
        {
            re: /(cmyk)a?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*%?,\s*(\d{1,3})\s*%?,\s*(\d{1,3})\s*%?(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
            parse: (execResult) => new Cmyk(parseFloat(execResult[2]) / 100, parseFloat(execResult[3]) / 100, parseFloat(execResult[4]) / 100, parseFloat(execResult[5]) / 100, isNaN(parseFloat(execResult[6])) ? 1 : parseFloat(execResult[6]), true)
        },
        {
            re: /(rgb)a?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*%?,\s*(\d{1,3})\s*%?(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
            parse: (execResult) => new Rgba(parseFloat(execResult[2]) / 255, parseFloat(execResult[3]) / 255, parseFloat(execResult[4]) / 255, isNaN(parseFloat(execResult[5])) ? 1 : parseFloat(execResult[5]), true)
        }, {
            re: /(hsl)a?\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
            parse: (execResult) => new Hsla(parseFloat(execResult[2]) / 360, parseFloat(execResult[3]) / 100, parseFloat(execResult[4]) / 100, isNaN(parseFloat(execResult[5])) ? 1 : parseFloat(execResult[5]), true)
        }
    ];
    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: (execResult) => new Rgba(parseInt(execResult[1], 16) / 255, parseInt(execResult[2], 16) / 255, parseInt(execResult[3], 16) / 255, parseInt(execResult[4] || 'FF', 16) / 255, true)
        });
    }
    else {
        stringParsers.push({
            re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/,
            parse: (execResult) => new Rgba(parseInt(execResult[1], 16) / 255, parseInt(execResult[2], 16) / 255, parseInt(execResult[3], 16) / 255, 1, true)
        });
    }
    stringParsers.push({
        re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/,
        parse: (execResult) => new Rgba(parseInt(execResult[1] + execResult[1], 16) / 255, parseInt(execResult[2] + execResult[2], 16) / 255, parseInt(execResult[3] + execResult[3], 16) / 255, 1, true)
    });
    for (const key in stringParsers) {
        if (stringParsers.hasOwnProperty(key)) {
            const parser = stringParsers[key];
            const match = parser.re.exec(colorString);
            const color = match && parser.parse(match);
            if (color) {
                if (color instanceof Rgba) {
                    hsva = rgbaToHsva(color);
                }
                else if (color instanceof Hsla) {
                    hsva = hslaToHsva(color);
                }
                else if (color instanceof Cmyk) {
                    hsva = rgbaToHsva(cmykToRgb(color));
                }
                else {
                    hsva = color;
                }
                return hsva;
            }
        }
    }
    return hsva;
}
function stringToCmyk(colorString = '', allowHex8 = false) {
    let cmyk;
    colorString = (colorString || '').toLowerCase();
    const stringParsers = [
        {
            re: /(cmyk)a?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*%?,\s*(\d{1,3})\s*%?,\s*(\d{1,3})\s*%?(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
            parse: (execResult) => new Cmyk(parseFloat(execResult[2]) / 100, parseFloat(execResult[3]) / 100, parseFloat(execResult[4]) / 100, parseFloat(execResult[5]) / 100, isNaN(parseFloat(execResult[6])) ? 1 : parseFloat(execResult[6]), true)
        },
        {
            re: /(rgb)a?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*%?,\s*(\d{1,3})\s*%?(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
            parse: (execResult) => new Rgba(parseFloat(execResult[2]) / 255, parseFloat(execResult[3]) / 255, parseFloat(execResult[4]) / 255, isNaN(parseFloat(execResult[5])) ? 1 : parseFloat(execResult[5]), true)
        }, {
            re: /(hsl)a?\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
            parse: (execResult) => new Hsla(parseFloat(execResult[2]) / 360, parseFloat(execResult[3]) / 100, parseFloat(execResult[4]) / 100, isNaN(parseFloat(execResult[5])) ? 1 : parseFloat(execResult[5]), true)
        }
    ];
    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: (execResult) => new Rgba(parseInt(execResult[1], 16) / 255, parseInt(execResult[2], 16) / 255, parseInt(execResult[3], 16) / 255, parseInt(execResult[4] || 'FF', 16) / 255, true)
        });
    }
    else {
        stringParsers.push({
            re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/,
            parse: (execResult) => new Rgba(parseInt(execResult[1], 16) / 255, parseInt(execResult[2], 16) / 255, parseInt(execResult[3], 16) / 255, 1, true)
        });
    }
    stringParsers.push({
        re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/,
        parse: (execResult) => new Rgba(parseInt(execResult[1] + execResult[1], 16) / 255, parseInt(execResult[2] + execResult[2], 16) / 255, parseInt(execResult[3] + execResult[3], 16) / 255, 1, true)
    });
    for (const key in stringParsers) {
        if (stringParsers.hasOwnProperty(key)) {
            const parser = stringParsers[key];
            const match = parser.re.exec(colorString);
            const color = match && parser.parse(match);
            if (color) {
                if (color instanceof Rgba) {
                    cmyk = rgbaToCmyk(color);
                }
                else if (color instanceof Hsva) {
                    cmyk = rgbaToCmyk(hsvaToRgba(color));
                }
                else if (color instanceof Hsla) {
                    cmyk = rgbaToCmyk(hsvaToRgba(hslaToHsva(color)));
                }
                else {
                    cmyk = color;
                }
                return cmyk;
            }
        }
    }
    return cmyk;
}
function formatOutput(hsva, outputFormat, alphaChannel) {
    if (outputFormat == OutputFormatEnum.auto) {
        outputFormat = hsva.a < 1 ? OutputFormatEnum.rgba : OutputFormatEnum.hex;
    }
    switch (outputFormat) {
        case OutputFormatEnum.hsla:
            const hsla = denormalizeHSLA(hsvaToHsla(hsva));
            if (hsva.a < 1 || alphaChannel == AlphaChannelEnum.always) {
                return 'hsla(' + hsla.h.toFixed(0) + ',' + hsla.s.toFixed(0) + '%,' + hsla.l.toFixed(0) + '%,' + hsla.a.toFixed(2) + ')';
            }
            else {
                return 'hsl(' + hsla.h.toFixed(0) + ',' + hsla.s.toFixed(0) + '%,' + hsla.l.toFixed(0) + '%)';
            }
        case OutputFormatEnum.rgba:
            const rgba = denormalizeRGBA(hsvaToRgba(hsva));
            if (hsva.a < 1 || alphaChannel == AlphaChannelEnum.always) {
                return 'rgba(' + rgba.r.toFixed(0) + ',' + rgba.g.toFixed(0) + ',' + rgba.b.toFixed(0) + ',' + rgba.a.toFixed(2) + ')';
            }
            else {
                return 'rgb(' + rgba.r.toFixed(0) + ',' + rgba.g.toFixed(0) + ',' + rgba.b.toFixed(0) + ')';
            }
        default:
            const allowHex8 = (alphaChannel == AlphaChannelEnum.always || alphaChannel == AlphaChannelEnum.forced);
            return rgbaToHex(denormalizeRGBA(hsvaToRgba(hsva)), allowHex8);
    }
}
function formatCmyk(cmyk, alphaChannel) {
    cmyk = denormalizeCMYK(cmyk);
    if (cmyk.a < 1 || alphaChannel == AlphaChannelEnum.always) {
        return 'cmyka(' + cmyk.c.toFixed(0) + ',' + cmyk.m.toFixed(0) + ',' + cmyk.y.toFixed(0) + ',' + cmyk.k.toFixed(0) + ',' + cmyk.a.toFixed(2) + ')';
    }
    else {
        return 'cmyk(' + cmyk.c.toFixed(0) + ',' + cmyk.m.toFixed(0) + ',' + cmyk.y.toFixed(0) + ',' + cmyk.k.toFixed(0) + ')';
    }
}
function calculateContrast(foreground, background) {
    foreground = normalizeRGBA(foreground);
    background = normalizeRGBA(background);
    if (Math.round(foreground.a * 100) < 100) {
        foreground = compositeColors(foreground, background);
    }
    const luminance1 = calculateLuminance(foreground) + 0.05;
    const luminance2 = calculateLuminance(background) + 0.05;
    return Math.max(luminance1, luminance2) / Math.min(luminance1, luminance2);
}
function compositeColors(foreground, background) {
    foreground = normalizeRGBA(foreground);
    background = normalizeRGBA(background);
    const a = compositeAlpha(foreground.a, background.a);
    const r = compositeComponent(foreground.r, foreground.a, background.r, background.a, a);
    const g = compositeComponent(foreground.g, foreground.a, background.g, background.a, a);
    const b = compositeComponent(foreground.b, foreground.a, background.b, background.a, a);
    return new Rgba(r, g, b, a, true);
}
function compositeAlpha(foregroundAlpha, backgroundAlpha) {
    return 1 - (1 - backgroundAlpha) * (1 - foregroundAlpha);
}
function compositeComponent(fgC, fgA, bgC, bgA, a) {
    if (a == 0) {
        return 0;
    }
    return ((fgC * fgA) + (bgC * bgA * (1 - fgA))) / a;
}
function calculateLuminance(color) {
    color = normalizeRGBA(color);
    let red = color.r;
    red = red < 0.03928 ? red / 12.92 : Math.pow((red + 0.055) / 1.055, 2.4);
    let green = color.g;
    green = green < 0.03928 ? green / 12.92 : Math.pow((green + 0.055) / 1.055, 2.4);
    let blue = color.b;
    blue = blue < 0.03928 ? blue / 12.92 : Math.pow((blue + 0.055) / 1.055, 2.4);
    return (0.2126 * red) + (0.7152 * green) + (0.0722 * blue);
}
function calculateMinimumAlpha(foreground, background, minContrastRatio) {
    foreground = normalizeRGBA(foreground);
    background = normalizeRGBA(background);
    if (Math.round(background.a * 100) < 100) {
        return -1;
    }
    let testForeground = new Rgba(foreground.r, foreground.g, foreground.b, 1);
    let testRatio = calculateContrast(testForeground, background);
    if (testRatio < minContrastRatio) {
        return -1;
    }
    let numIterations = 0;
    let minAlpha = 0;
    let maxAlpha = 1;
    while (numIterations <= 10 && (maxAlpha - minAlpha) > 0.01) {
        const testAlpha = (minAlpha + maxAlpha) / 2;
        testForeground = new Rgba(foreground.r, foreground.g, foreground.b, testAlpha);
        testRatio = calculateContrast(testForeground, background);
        if (testRatio < minContrastRatio) {
            minAlpha = testAlpha;
        }
        else {
            maxAlpha = testAlpha;
        }
        numIterations++;
    }
    return maxAlpha;
}

/**
 * @internal
 */
const light = new Rgba(218, 218, 218, 1, false);
/**
 * @internal
 */
const dark = new Rgba(34, 34, 34, 1, false);
/**
 * @internal
 */
function opaqueSliderLight(background) {
    const cWhite = calculateContrast(light, new Rgba(background.r, background.g, background.b, 1, background.normalized));
    const cBlack = calculateContrast(dark, new Rgba(background.r, background.g, background.b, 1, background.normalized));
    return cWhite > cBlack;
}
/**
 * @internal
 */
function transparentSliderLight(background) {
    const bg = compositeColors(background, light);
    const cWhite = calculateContrast(light, new Rgba(bg.r, bg.g, bg.b, 1, bg.normalized));
    const cBlack = calculateContrast(dark, new Rgba(bg.r, bg.g, bg.b, 1, bg.normalized));
    return cWhite > cBlack;
}

/**
 * @internal
 */
class SliderPosition {
    constructor(h, s, v, a) {
        this.h = h;
        this.s = s;
        this.v = v;
        this.a = a;
    }
}
/**
 * @internal
 */
class SliderDimension {
    constructor(h, s, v, a) {
        this.h = h;
        this.s = s;
        this.v = v;
        this.a = a;
    }
}
/**
 * @internal
 */
var ColorModeInternal;
(function (ColorModeInternal) {
    ColorModeInternal[ColorModeInternal["color"] = 0] = "color";
    ColorModeInternal[ColorModeInternal["grayscale"] = 1] = "grayscale";
    ColorModeInternal[ColorModeInternal["presets"] = 2] = "presets";
})(ColorModeInternal || (ColorModeInternal = {}));
/**
 * @internal
 */
function parseColorMode(mode) {
    switch (mode.toString().toUpperCase()) {
        case '1':
        case 'C':
        case 'COLOR':
            return ColorModeInternal.color;
        case '2':
        case 'G':
        case 'GRAYSCALE':
            return ColorModeInternal.grayscale;
        case '3':
        case 'P':
        case 'PRESETS':
            return ColorModeInternal.presets;
        default:
            return ColorModeInternal.color;
    }
}
/**
 * @internal
 */
function sizeToString(val) {
    const strVal = ((val || 'auto') + '').trim().toLowerCase();
    if (strVal.match(/^\d+[a-z%]+$/) || strVal == 'auto') {
        return strVal;
    }
    const num = parseInt(strVal, 10);
    if (!Number.isNaN(num)) {
        return `${num}px`;
    }
    return 'auto';
}
/**
 * @internal
 */
function composedPath(event) {
    if (event.composedPath) {
        return event.composedPath();
    }
    const _evt = event;
    if (_evt.path) {
        return _evt.path;
    }
    let t = _evt.target;
    _evt.path = [];
    while (t.parentNode !== null) {
        _evt.path.push(t);
        t = t.parentNode;
    }
    _evt.path.push(document, window);
    return _evt.path;
}

/**
 * @internal
 */
class ColorPickerService {
    setActive(active) {
        if (active && active.dialogDisplay == DialogDisplayEnum.popup) {
            if (this.active && this.active != active) {
                this.active.closeDialog();
            }
            this.active = active;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }] });

/**
 * @internal
 */
class SliderDirective {
    constructor() {
        this.isMoving = false;
        this.rgX = input(/* @ts-ignore */
        ...(ngDevMode ? [undefined, { debugName: "rgX" }] : /* istanbul ignore next */ []));
        this.rgY = input(/* @ts-ignore */
        ...(ngDevMode ? [undefined, { debugName: "rgY" }] : /* istanbul ignore next */ []));
        this.slider = input(undefined, { ...(ngDevMode ? { debugName: "slider" } : /* istanbul ignore next */ {}), alias: 'nxtSlider' });
        this.dragEnd = output();
        this.dragStart = output();
        this.newValue = output();
        this.elRef = inject(ElementRef);
    }
    onStart(event) {
        event.stopPropagation();
        event.preventDefault();
        this.setCursor(event);
        this.isMoving = true;
        this.dragStart.emit(undefined);
    }
    onMove(event) {
        if (this.isMoving) {
            event.stopPropagation();
            event.preventDefault();
            this.setCursor(event);
        }
    }
    onStop(event) {
        if (this.isMoving) {
            event.stopPropagation();
            event.preventDefault();
            this.isMoving = false;
            this.dragEnd.emit(undefined);
        }
    }
    getX(event) {
        const position = this.elRef.nativeElement.getBoundingClientRect();
        const pageX = 'pageX' in event ? event.pageX : event.touches[0].pageX;
        return pageX - position.left - window.scrollX;
    }
    getY(event) {
        const position = this.elRef.nativeElement.getBoundingClientRect();
        const pageY = 'pageX' in event ? event.pageY : event.touches[0].pageY;
        return pageY - position.top - window.scrollY;
    }
    setCursor(event) {
        const width = this.elRef.nativeElement.offsetWidth;
        const height = this.elRef.nativeElement.offsetHeight;
        const x = Math.max(0, Math.min(this.getX(event), width));
        const y = Math.max(0, Math.min(this.getY(event), height));
        const rgX = this.rgX();
        const rgY = this.rgY();
        if (rgX != undefined && rgY != undefined) {
            this.newValue.emit({ s: x / width, v: (1 - y / height), rgX, rgY });
        }
        else if (rgX == undefined && rgY != undefined) {
            this.newValue.emit({ v: y / height, rgY });
        }
        else if (rgX != undefined && rgY == undefined) {
            this.newValue.emit({ v: x / width, rgX });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SliderDirective, isStandalone: true, selector: "[nxtSlider]", inputs: { rgX: { classPropertyName: "rgX", publicName: "rgX", isSignal: true, isRequired: false, transformFunction: null }, rgY: { classPropertyName: "rgY", publicName: "rgY", isSignal: true, isRequired: false, transformFunction: null }, slider: { classPropertyName: "slider", publicName: "nxtSlider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", newValue: "newValue" }, host: { listeners: { "mousedown": "onStart($event)", "touchstart": "onStart($event)", "document:mousemove": "onMove($event)", "document:touchmove": "onMove($event)", "document:mouseup": "onStop($event)", "document:touchend": "onStop($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxtSlider]',
                    host: {
                        '(mousedown)': 'onStart($event)',
                        '(touchstart)': 'onStart($event)',
                        '(document:mousemove)': 'onMove($event)',
                        '(document:touchmove)': 'onMove($event)',
                        '(document:mouseup)': 'onStop($event)',
                        '(document:touchend)': 'onStop($event)'
                    }
                }]
        }], propDecorators: { rgX: [{ type: i0.Input, args: [{ isSignal: true, alias: "rgX", required: false }] }], rgY: [{ type: i0.Input, args: [{ isSignal: true, alias: "rgY", required: false }] }], slider: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxtSlider", required: false }] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], newValue: [{ type: i0.Output, args: ["newValue"] }] } });

/**
 * @internal
 */
class TextDirective {
    constructor() {
        this.rg = input(/* @ts-ignore */
        ...(ngDevMode ? [undefined, { debugName: "rg" }] : /* istanbul ignore next */ []));
        this.text = input(undefined, { ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'nxtText' });
        this.newValue = output();
    }
    inputChange(event) {
        const value = ((event?.target?.['value'] || '') + '').trim();
        const rg = this.rg();
        if (rg == undefined) {
            this.newValue.emit(value);
        }
        else {
            const numeric = parseFloat(value);
            this.newValue.emit({ v: numeric, rg });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TextDirective, isStandalone: true, selector: "[nxtText]", inputs: { rg: { classPropertyName: "rg", publicName: "rg", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "nxtText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { newValue: "newValue" }, host: { listeners: { "input": "inputChange($event)", "change": "inputChange($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxtText]',
                    host: {
                        '(input)': 'inputChange($event)',
                        '(change)': 'inputChange($event)'
                    }
                }]
        }], propDecorators: { rg: [{ type: i0.Input, args: [{ isSignal: true, alias: "rg", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxtText", required: false }] }], newValue: [{ type: i0.Output, args: ["newValue"] }] } });

/**
 * @internal
 */
class ColorPickerComponent {
    constructor() {
        this.colorModeInternal = ColorModeInternal;
        this.cmykColor = '';
        this.outputColor = '';
        this.initialColor = '';
        this.dialogInputFields = [
            ColorFormatEnum.hex,
            ColorFormatEnum.rgba,
            ColorFormatEnum.hsla,
            ColorFormatEnum.cmyk
        ];
        this.show = false;
        this.format = ColorFormatEnum.hex;
        this.selectedColor = '';
        this.svSliderLight = false;
        this.hueSliderLight = false;
        this.valueSliderLight = false;
        this.alphaSliderLight = false;
        this.mode = ColorModeInternal.color;
        this.cmykEnabled = false;
        this.alphaChannel = AlphaChannelEnum.enabled;
        this.outputFormat = OutputFormatEnum.auto;
        this.disableInput = false;
        this.saveClickOutside = false;
        this.closeClickOutside = false;
        this.okButton = false;
        this.cancelButton = false;
        this.presetLabel = false;
        this.presetColorsEditable = false;
        this.elRef = inject(ElementRef);
        this.service = inject(ColorPickerService);
    }
    onCancel(event) {
        event.stopPropagation();
        event.preventDefault();
        if (this.initialColor) {
            this.setColorFromString(this.initialColor, true);
        }
        if (this.callbacks) {
            this.callbacks.colorSelectCanceled();
        }
        if (this.show && this.dialogDisplay == DialogDisplayEnum.popup) {
            this.closeColorPicker();
        }
    }
    onAccept(event) {
        event.stopPropagation();
        event.preventDefault();
        if (this.show && this.dialogDisplay == DialogDisplayEnum.popup) {
            if (this.outputColor && this.callbacks) {
                this.callbacks.colorSelected(this.outputColor);
            }
            if (this.dialogDisplay == DialogDisplayEnum.popup) {
                this.closeColorPicker();
            }
        }
    }
    onClick(event) {
        event.stopPropagation();
    }
    onFocusChange(event) {
        const path = new Set(composedPath(event));
        const intersect = this.ignoredElements?.find(el => path.has(el));
        if (!intersect) {
            if (this.show && this.dialogDisplay == DialogDisplayEnum.popup) {
                if (this.saveClickOutside) {
                    if (this.outputColor && this.callbacks) {
                        this.callbacks.colorSelected(this.outputColor);
                    }
                }
                else {
                    this.setColorFromString(this.initialColor, false);
                    if (this.callbacks) {
                        if (this.cmykEnabled) {
                            this.callbacks.cmykChanged(this.cmykColor);
                        }
                        this.callbacks.colorChanged(this.initialColor);
                    }
                }
                if (this.closeClickOutside) {
                    this.closeColorPicker();
                }
            }
            else if (this.saveClickOutside && this.outputColor && this.callbacks) {
                this.callbacks.colorSelected(this.outputColor);
            }
        }
    }
    ngOnInit() {
        this.slider = new SliderPosition(0, 0, 0, 0);
        if (this.cmykEnabled) {
            this.format = ColorFormatEnum.cmyk;
        }
        else if (this.outputFormat == OutputFormatEnum.rgba) {
            this.format = ColorFormatEnum.rgba;
        }
        else if (this.outputFormat == OutputFormatEnum.hsla) {
            this.format = ColorFormatEnum.hsla;
        }
        else {
            this.format = ColorFormatEnum.hex;
        }
        this.openDialog(this.initialColor, false);
    }
    ngOnDestroy() {
        this.closeDialog();
    }
    ngAfterViewChecked() { }
    openDialog(color, emit = true) {
        this.service.setActive(this);
        this.setInitialColor(color);
        this.setColorFromString(color, emit);
        this.openColorPicker();
    }
    closeDialog() {
        this.closeColorPicker();
    }
    setupDialog(config) {
        this.setInitialColor(config.color);
        this.mode = parseColorMode(config.mode());
        this.callbacks = config.callbacks;
        this.disableInput = config.disableInput();
        this.cmykEnabled = config.cmykEnabled();
        this.alphaChannel = config.alphaChannel();
        this.outputFormat = config.outputFormat();
        this.dialogDisplay = config.dialogDisplay();
        this.ignoredElements = [
            ...config.ignoredElements() ?? [],
            this.elRef && this.elRef.nativeElement,
            config.elementRef && config.elementRef.nativeElement
        ].filter(e => !!e);
        this.saveClickOutside = config.saveClickOutside();
        this.closeClickOutside = config.closeClickOutside();
        this.width = sizeToString(config.width());
        this.height = sizeToString(config.height());
        this.okButton = config.okButton();
        this.cancelButton = config.cancelButton();
        this.fallbackColor = config.fallbackColor() || '#fff';
        this.setPresetConfig(config.presetLabel(), config.presetColors());
        this.maxPresetColors = config.maxPresetColors();
        this.presetColorsEditable = config.presetColorsEditable();
        if (config.outputFormat() == OutputFormatEnum.hex &&
            config.alphaChannel() != AlphaChannelEnum.always && config.alphaChannel() != AlphaChannelEnum.forced) {
            this.alphaChannel = AlphaChannelEnum.disabled;
        }
    }
    setInitialColor(color) {
        this.initialColor = color;
        this.setColorFromString(this.initialColor, false, true);
    }
    setPresetConfig(presetLabel, presetColors) {
        this.presetLabel = presetLabel;
        this.presetColors = presetColors;
    }
    setColorFromString(value, emit = true, update = true) {
        let hsva = stringToHsva(value, true);
        let cmyk = stringToCmyk(value, true);
        if ((!hsva && !this.hsva) && (!cmyk && !this.cmyk)) {
            hsva = stringToHsva(this.fallbackColor, true);
            cmyk = stringToCmyk(this.fallbackColor, true);
        }
        if (hsva || cmyk) {
            if (this.alphaChannel == AlphaChannelEnum.disabled) {
                if (hsva)
                    hsva.a = 1;
                if (cmyk)
                    cmyk.a = 1;
            }
            this.hsva = hsva;
            this.cmyk = cmyk;
            this.sliderH = this.hsva?.h;
            this.updateColorPicker(emit, update, (cmyk && this.cmykEnabled));
        }
    }
    stringToRgba(value) {
        const hsva = stringToHsva(value, true);
        if (hsva)
            return formatOutput(hsva, OutputFormatEnum.rgba, AlphaChannelEnum.enabled);
        return undefined;
    }
    onDragEnd(slider) {
        if (this.callbacks) {
            this.callbacks.sliderDragEnd({ slider, color: this.outputColor });
        }
    }
    onDragStart(slider) {
        if (this.callbacks) {
            this.callbacks.sliderDragStart({ slider, color: this.outputColor });
        }
    }
    onFormatToggle(change) {
        const availableFormats = this.dialogInputFields.length - (this.cmykEnabled ? 0 : 1);
        const nextFormat = (((this.dialogInputFields.indexOf(this.format) + change) %
            availableFormats) + availableFormats) % availableFormats;
        this.format = this.dialogInputFields[nextFormat];
    }
    onColorChange(value) {
        if ('rgX' in value && 'rgY' in value) {
            if (this.hsva) {
                this.hsva.s = value.s / value.rgX;
                this.hsva.v = value.v / value.rgY;
            }
            this.updateColorPicker();
            if (this.callbacks) {
                this.callbacks.sliderChanged({
                    slider: 'lightness',
                    value: this.hsva?.v,
                    color: this.outputColor
                });
            }
            if (this.callbacks) {
                this.callbacks.sliderChanged({
                    slider: 'saturation',
                    value: this.hsva?.s,
                    color: this.outputColor
                });
            }
        }
    }
    onHueChange(value) {
        if ('v' in value && 'rgX' in value) {
            if (this.hsva)
                this.hsva.h = value.v / value.rgX;
            this.sliderH = this.hsva?.h;
            this.updateColorPicker();
            if (this.callbacks) {
                this.callbacks.sliderChanged({
                    slider: 'hue',
                    value: this.hsva?.h,
                    color: this.outputColor
                });
            }
        }
    }
    onValueChange(value) {
        if ('v' in value && 'rgX' in value) {
            if (this.hsva)
                this.hsva.v = value.v / value.rgX;
            this.updateColorPicker();
            if (this.callbacks) {
                this.callbacks.sliderChanged({
                    slider: 'value',
                    value: this.hsva?.v,
                    color: this.outputColor
                });
            }
        }
    }
    onAlphaChange(value) {
        if ('v' in value && 'rgX' in value) {
            if (this.hsva)
                this.hsva.a = value.v / value.rgX;
            this.updateColorPicker();
            if (this.callbacks) {
                this.callbacks.sliderChanged({
                    slider: 'alpha',
                    value: this.hsva?.a,
                    color: this.outputColor
                });
            }
        }
    }
    onHexInput(value) {
        if (typeof value == 'string') {
            if (value && value[0] != '#') {
                value = '#' + value;
            }
            const validHex = /^#([a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})$/gi;
            const valid = validHex.test(value);
            if (valid) {
                // Short hex
                if (value.length == 4) {
                    value = '#' + value.substring(1)
                        .split('')
                        .map(c => c + c)
                        .join('');
                }
                // Hex without alpha
                if (value.length == 7 && this.alphaChannel == AlphaChannelEnum.forced) {
                    value += ((this.hsva?.a || 0) * 255).toString(16);
                }
                this.setColorFromString(value, true, false);
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'hex',
                    valid,
                    value,
                    color: this.outputColor
                });
            }
        }
        else {
            this.updateColorPicker();
        }
    }
    onRedInput(value) {
        if (typeof value != 'string') {
            const rgba = this.hsva ? hsvaToRgba(this.hsva) : new Rgba(0, 0, 0, 0, true);
            const valid = !isNaN(value.v) && value.v >= 0 && value.v <= value.rg;
            if (valid) {
                rgba.r = value.v / value.rg;
                this.hsva = rgbaToHsva(rgba);
                this.sliderH = this.hsva.h;
                this.updateColorPicker();
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'red',
                    valid,
                    value: rgba.r,
                    color: this.outputColor
                });
            }
        }
    }
    onBlueInput(value) {
        if (typeof value != 'string') {
            const rgba = this.hsva ? hsvaToRgba(this.hsva) : new Rgba(0, 0, 0, 0, true);
            const valid = !isNaN(value.v) && value.v >= 0 && value.v <= value.rg;
            if (valid) {
                rgba.b = value.v / value.rg;
                this.hsva = rgbaToHsva(rgba);
                this.sliderH = this.hsva.h;
                this.updateColorPicker();
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'blue',
                    valid,
                    value: rgba.b,
                    color: this.outputColor
                });
            }
        }
    }
    onGreenInput(value) {
        if (typeof value != 'string') {
            const rgba = this.hsva ? hsvaToRgba(this.hsva) : new Rgba(0, 0, 0, 0, true);
            const valid = !isNaN(value.v) && value.v >= 0 && value.v <= value.rg;
            if (valid) {
                rgba.g = value.v / value.rg;
                this.hsva = rgbaToHsva(rgba);
                this.sliderH = this.hsva.h;
                this.updateColorPicker();
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'green',
                    valid,
                    value: rgba.g,
                    color: this.outputColor
                });
            }
        }
    }
    onHueInput(value) {
        if (typeof value != 'string') {
            const valid = !isNaN(value.v) && value.v >= 0 && value.v <= value.rg;
            this.hsva = this.hsva || new Hsva(0, 0, 0, 0, true);
            if (valid) {
                this.hsva.h = value.v / value.rg;
                this.sliderH = this.hsva.h;
                this.updateColorPicker();
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'hue',
                    valid,
                    value: this.hsva.h,
                    color: this.outputColor
                });
            }
        }
    }
    onValueInput(value) {
        if (typeof value != 'string') {
            const valid = !isNaN(value.v) && value.v >= 0 && value.v <= value.rg;
            this.hsva = this.hsva || new Hsva(0, 0, 0, 0, true);
            if (valid) {
                this.hsva.v = value.v / value.rg;
                this.updateColorPicker();
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'value',
                    valid,
                    value: this.hsva.v,
                    color: this.outputColor
                });
            }
        }
    }
    onAlphaInput(value) {
        if (typeof value != 'string') {
            const valid = !isNaN(value.v) && value.v >= 0 && value.v <= value.rg;
            this.hsva = this.hsva || new Hsva(0, 0, 0, 0, true);
            if (valid) {
                this.hsva.a = value.v / value.rg;
                this.updateColorPicker();
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'alpha',
                    valid,
                    value: this.hsva.a,
                    color: this.outputColor
                });
            }
        }
    }
    onLightnessInput(value) {
        if (typeof value != 'string') {
            const hsla = this.hsva ? hsvaToHsla(this.hsva) : new Hsla(0, 0, 0, 0, true);
            const valid = !isNaN(value.v) && value.v >= 0 && value.v <= value.rg;
            if (valid) {
                hsla.l = value.v / value.rg;
                this.hsva = hslaToHsva(hsla);
                this.sliderH = this.hsva.h;
                this.updateColorPicker();
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'lightness',
                    valid,
                    value: hsla.l,
                    color: this.outputColor
                });
            }
        }
    }
    onSaturationInput(value) {
        if (typeof value != 'string') {
            const hsla = this.hsva ? hsvaToHsla(this.hsva) : new Hsla(0, 0, 0, 0, true);
            const valid = !isNaN(value.v) && value.v >= 0 && value.v <= value.rg;
            if (valid) {
                hsla.s = value.v / value.rg;
                this.hsva = hslaToHsva(hsla);
                this.sliderH = this.hsva.h;
                this.updateColorPicker();
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'saturation',
                    valid,
                    value: hsla.s,
                    color: this.outputColor
                });
            }
        }
    }
    onCyanInput(value) {
        if (typeof value != 'string') {
            const valid = !isNaN(value.v) && value.v >= 0 && value.v <= value.rg;
            this.cmyk = this.cmyk || new Cmyk(0, 0, 0, 0, 0, true);
            if (valid) {
                this.cmyk.c = value.v / value.rg;
                this.updateColorPicker(true, true, true);
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'cyan',
                    valid: true,
                    value: this.cmyk.c,
                    color: this.outputColor
                });
            }
        }
    }
    onMagentaInput(value) {
        if (typeof value != 'string') {
            const valid = !isNaN(value.v) && value.v >= 0 && value.v <= value.rg;
            this.cmyk = this.cmyk || new Cmyk(0, 0, 0, 0, 0, true);
            if (valid) {
                this.cmyk.m = value.v / value.rg;
                this.updateColorPicker(true, true, true);
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'magenta',
                    valid: true,
                    value: this.cmyk.m,
                    color: this.outputColor
                });
            }
        }
    }
    onYellowInput(value) {
        if (typeof value != 'string') {
            const valid = !isNaN(value.v) && value.v >= 0 && value.v <= value.rg;
            this.cmyk = this.cmyk || new Cmyk(0, 0, 0, 0, 0, true);
            if (valid) {
                this.cmyk.y = value.v / value.rg;
                this.updateColorPicker(true, true, true);
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'yellow',
                    valid: true,
                    value: this.cmyk.y,
                    color: this.outputColor
                });
            }
        }
    }
    onBlackInput(value) {
        if (typeof value != 'string') {
            const valid = !isNaN(value.v) && value.v >= 0 && value.v <= value.rg;
            this.cmyk = this.cmyk || new Cmyk(0, 0, 0, 0, 0, true);
            if (valid) {
                this.cmyk.k = value.v / value.rg;
                this.updateColorPicker(true, true, true);
            }
            if (this.callbacks) {
                this.callbacks.inputChanged({
                    input: 'black',
                    valid: true,
                    value: this.cmyk.k,
                    color: this.outputColor
                });
            }
        }
    }
    onAddPresetColor(value) {
        if (!this.presetColors?.filter((color) => (color == value)).length) {
            this.presetColors = this.presetColors?.concat(value);
            if (this.callbacks) {
                this.callbacks.presetColorsChanged(this.presetColors);
            }
        }
    }
    onRemovePresetColor(value, evt) {
        evt.stopPropagation();
        evt.preventDefault();
        this.presetColors = this.presetColors?.filter((color) => (color != value));
        if (this.callbacks) {
            this.callbacks.presetColorsChanged(this.presetColors);
        }
    }
    // Private helper functions for the color picker dialog status
    openColorPicker() {
        if (!this.show) {
            this.show = true;
            if (this.callbacks) {
                this.callbacks.stateChanged(true);
            }
        }
    }
    closeColorPicker() {
        if (this.show) {
            this.show = false;
            if (this.callbacks) {
                this.callbacks.stateChanged(false);
            }
        }
    }
    updateColorPicker(emit = true, update = true, cmykInput = false) {
        this.hsva = this.hsva || new Hsva(0, 0, 0, 0, true);
        this.cmyk = this.cmyk || new Cmyk(0, 0, 0, 0, 0, true);
        if (this.mode == ColorModeInternal.grayscale) {
            this.hsva.s = 0;
        }
        const lastOutput = this.outputColor;
        const hsla = hsvaToHsla(this.hsva);
        if (this.cmykEnabled) {
            if (!cmykInput) {
                this.cmyk = rgbaToCmyk(hsvaToRgba(this.hsva));
            }
            else {
                this.hsva = rgbaToHsva(cmykToRgb(this.cmyk));
            }
            this.sliderH = this.hsva.h;
        }
        const hue = new Hsva(this.sliderH || this.hsva.h, 1, 1, 1, true);
        const rgba = hsvaToRgba(this.hsva);
        if (update) {
            this.hslaText = denormalizeHSLA(hsla);
            this.rgbaText = denormalizeRGBA(rgba);
            if (this.cmykEnabled) {
                this.cmykText = denormalizeCMYK(this.cmyk);
            }
            const allowHex8 = this.alphaChannel === AlphaChannelEnum.always;
            this.hexText = rgbaToHex(rgba, allowHex8);
            this.hexAlpha = this.rgbaText.a;
        }
        if (this.outputFormat == OutputFormatEnum.auto && this.hsva.a < 1 && !AlphaEnabledFormats.has(this.format)) {
            this.format = this.hsva.a < 1 ? ColorFormatEnum.rgba : ColorFormatEnum.hex;
        }
        const hsvaTransparent = new Hsva(this.hsva.h, this.hsva.s, this.hsva.v, 0, this.hsva.normalized);
        const hsvaFull = new Hsva(this.hsva.h, this.hsva.s, this.hsva.v, 1, this.hsva.normalized);
        this.hueSliderColor = formatOutput(hue, 'auto', 'disabled');
        this.alphaSliderColor = 'linear-gradient(to right, ' + formatOutput(hsvaTransparent, 'auto', 'forced') + ' 0%, ' + formatOutput(hsvaFull, 'auto', 'disabled') + ' 100%)';
        this.svSliderLight = opaqueSliderLight(rgba);
        this.hueSliderLight = opaqueSliderLight(hsvaToRgba(hue));
        this.valueSliderLight = opaqueSliderLight(rgba);
        this.alphaSliderLight = transparentSliderLight(rgba);
        this.outputColor = formatOutput(this.hsva, this.outputFormat, this.alphaChannel);
        this.selectedColor = formatOutput(this.hsva, OutputFormatEnum.rgba);
        if (this.format !== ColorFormatEnum.cmyk) {
            this.cmykColor = '';
        }
        else {
            this.cmykColor = formatCmyk(this.cmyk, this.alphaChannel);
        }
        this.slider = new SliderPosition((this.sliderH || this.hsva.h), this.hsva.s, (1 - this.hsva.v), this.hsva.a);
        if (emit && lastOutput != this.outputColor && this.callbacks) {
            if (this.cmykEnabled) {
                this.callbacks.cmykChanged(this.cmykColor);
            }
            this.callbacks.colorChanged(this.outputColor);
        }
    }
    fill(n) {
        return new Array(n).fill(1);
    }
    formatAlpha(a) {
        return a?.toFixed(2).replace(/\.?0+$/, '');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorPickerComponent, isStandalone: true, selector: "nxt-color-picker", host: { listeners: { "document:keyup.esc": "onCancel($event)", "document:keyup.enter": "onAccept($event)", "document:mousedown": "onFocusChange($event)", "document:focusin": "onFocusChange($event)", "click": "onClick($event)" } }, ngImport: i0, template: "@if (show) {\n<div class=\"color-picker\"\n    [style]=\"{\n        visibility: !show ? 'hidden' : 'visible',\n        width: width || '',\n        height: height || ''\n    }\">\n    @if (dialogDisplay == 'popup') {\n    <div class=\"color-picker__arrow\"></div>\n    }\n    @if (mode == colorModeInternal.color) {\n    <div class=\"color-picker__sv\"\n        nxtSlider\n        [rgX]=\"1\"\n        [rgY]=\"1\"\n        (newValue)=\"onColorChange($event)\"\n        (dragStart)=\"onDragStart('saturation-lightness')\"\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\n        [style.backgroundColor]=\"hueSliderColor || ''\">\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\n            [class.color-picker__cursor--light]=\"svSliderLight\"\n            [style]=\"{\n                top: (slider?.v || 0) * 100 + '%',\n                left: (slider?.s || 0) * 100 + '%'\n            }\"></div>\n    </div>\n    }\n    <div class=\"color-picker__controls\">\n        <div class=\"color-picker__selected\">\n            <div class=\"color-picker__selected-color\">\n                <div [style.backgroundColor]=\"selectedColor || ''\">@if (presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)) {\n                    <button type=\"button\"\n                        title=\"Add color to preset\"\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\n                        class=\"color-picker__add-selected\"\n                        [class.color-picker__add-selected--light]=\"alphaSliderLight\"\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\">\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n                            <path d=\"M0 0h24v24H0z\"\n                                fill=\"none\" />\n                        </svg></button>\n                    }\n                </div>\n            </div>\n        </div>\n        <div class=\"color-picker__hav\">\n            @if (mode == colorModeInternal.color) {\n            <div class=\"color-picker__slider color-picker__slider--hue\"\n                nxtSlider\n                [rgX]=\"1\"\n                (newValue)=\"onHueChange($event)\"\n                (dragStart)=\"onDragStart('hue')\"\n                (dragEnd)=\"onDragEnd('hue')\">\n                <div class=\"color-picker__cursor\"\n                    [class.color-picker__cursor--light]=\"hueSliderLight\"\n                    [style.left]=\"(slider?.h || 0) * 100 + '%'\"></div>\n            </div>\n            }\n            @if (mode == colorModeInternal.grayscale) {\n            <div class=\"color-picker__slider color-picker__slider--value\"\n                nxtSlider\n                [rgX]=\"1\"\n                (newValue)=\"onValueChange($event)\"\n                (dragStart)=\"onDragStart('value')\"\n                (dragEnd)=\"onDragEnd('value')\">\n                <div class=\"color-picker__cursor\"\n                    [class.color-picker__cursor--light]=\"valueSliderLight\"\n                    [style.left]=\"(1 - (slider?.v || 0)) * 100 + '%'\"></div>\n            </div>\n            }\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__slider color-picker__slider--alpha\"\n                nxtSlider\n                [rgX]=\"1\"\n                (newValue)=\"onAlphaChange($event)\"\n                (dragStart)=\"onDragStart('alpha')\"\n                (dragEnd)=\"onDragEnd('alpha')\">\n                <div class=\"color-picker__slider--alpha-bg\"\n                    [style.backgroundImage]=\"alphaSliderColor || ''\">\n                    <div class=\"color-picker__cursor\"\n                        [class.color-picker__cursor--light]=\"alphaSliderLight\"\n                        [style.left]=\"(slider?.a || 0) * 100 + '%'\"></div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n    @if (!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)) {\n    <div class=\"color-picker__inputs\">\n        <div class=\"color-picker__input-fields\">\n            @if (mode == colorModeInternal.grayscale) {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"hslaText?.l?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onValueInput($event)\" />\n                <span class=\"color-picker__input-field-label\">V</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hslaText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            } @else {\n            @switch (format) {\n            @case ('hsla') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"360\"\n                    nxtText\n                    [rg]=\"360\"\n                    [value]=\"hslaText?.h?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onHueInput($event)\" />\n                <span class=\"color-picker__input-field-label\">H</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"hslaText?.s?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onSaturationInput($event)\" />\n                <span class=\"color-picker__input-field-label\">S</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"hslaText?.l?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onLightnessInput($event)\" />\n                <span class=\"color-picker__input-field-label\">L</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hslaText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            @case ('rgba') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"255\"\n                    nxtText\n                    [rg]=\"255\"\n                    [value]=\"rgbaText?.r?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onRedInput($event)\" />\n                <span class=\"color-picker__input-field-label\">R</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"255\"\n                    nxtText\n                    [rg]=\"255\"\n                    [value]=\"rgbaText?.g?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onGreenInput($event)\" />\n                <span class=\"color-picker__input-field-label\">G</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"255\"\n                    nxtText\n                    [rg]=\"255\"\n                    [value]=\"rgbaText?.b?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onBlueInput($event)\" />\n                <span class=\"color-picker__input-field-label\">B</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hslaText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            @case ('cmyk') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.c?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onCyanInput($event)\" />\n                <span class=\"color-picker__input-field-label\">C</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.m?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onMagentaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">M</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.y?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onYellowInput($event)\" />\n                <span class=\"color-picker__input-field-label\">Y</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.k?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onBlackInput($event)\" />\n                <span class=\"color-picker__input-field-label\">K</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(cmykText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            @default {\n            <div class=\"color-picker__input-field\">\n                <input nxtText\n                    [value]=\"hexText\"\n                    (blur)=\"onHexInput()\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onHexInput($event)\" />\n                <span class=\"color-picker__input-field-label\">Hex</span>\n            </div>\n            @if (alphaChannel == 'forced') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hexAlpha)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            }\n            }\n        </div>\n        @if (mode == colorModeInternal.color) {\n        <div class=\"color-picker__input-type\">\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(1)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"onFormatToggle(1)\"></span>\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(-1)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"onFormatToggle(-1)\"></span>\n        </div>\n        }\n    </div>\n    }\n    @if (presetColors?.length) {\n    <div class=\"color-picker__separator\"></div>\n    <div class=\"color-picker__preset\">\n        @if (presetLabel) {\n        <div class=\"color-picker__preset-label\">\n            @if (presetLabel === true) {\n            <ng-container i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\n            } @else {\n            {{ presetLabel }}\n            }\n        </div>\n        }\n        <div class=\"color-picker__preset-items\">\n            @for (color of presetColors; track color) {\n            @if (stringToRgba(color); as rgba) {\n            <div class=\"color-picker__preset-item\"\n                [title]=\"color\"\n                (click)=\"setColorFromString(color)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"setColorFromString(color)\">\n                <div class=\"color-picker__preset-item-fill\"\n                    [style.backgroundColor]=\"rgba || ''\">@if (presetColorsEditable) {\n                    <button type=\"button\"\n                        title=\"Remove Color\"\n                        i18n-title=\"@@nxt-color-picker.button.remove-color\"\n                        class=\"color-picker__remove-selected\"\n                        (click)=\"onRemovePresetColor(color, $event)\"\n                        tabindex=\"0\"\n                        (keydown.enter)=\"onRemovePresetColor(color, $event)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\">\n                            <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                            <path d=\"M0 0h24v24H0z\"\n                                fill=\"none\" />\n                        </svg></button>\n                    }\n                </div>\n            </div>\n            }\n            }\n            @for (i of fill(50); track $index) {\n            <div class=\"color-picker__preset-item\"></div>\n            }\n        </div>\n    </div>\n    }\n    @if (okButton || cancelButton) {\n    <div class=\"color-picker__buttons\">\n        @if (cancelButton) {\n        <button type=\"button\"\n            (click)=\"onCancel($event)\"\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\n        }\n        @if (okButton) {\n        <button type=\"button\"\n            (click)=\"onAccept($event)\"\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\n        }\n    </div>\n    }\n</div>\n}\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,#0000,#000),linear-gradient(to right,#fff,#fff0);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,#000,#fff)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"], dependencies: [{ kind: "directive", type: SliderDirective, selector: "[nxtSlider]", inputs: ["rgX", "rgY", "nxtSlider"], outputs: ["dragEnd", "dragStart", "newValue"] }, { kind: "directive", type: TextDirective, selector: "[nxtText]", inputs: ["rg", "nxtText"], outputs: ["newValue"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nxt-color-picker', encapsulation: ViewEncapsulation.Emulated, imports: [
                        SliderDirective,
                        TextDirective
                    ], host: {
                        '(document:keyup.esc)': 'onCancel($event)',
                        '(document:keyup.enter)': 'onAccept($event)',
                        '(document:mousedown)': 'onFocusChange($event)',
                        '(document:focusin)': 'onFocusChange($event)',
                        '(click)': 'onClick($event)'
                    }, template: "@if (show) {\n<div class=\"color-picker\"\n    [style]=\"{\n        visibility: !show ? 'hidden' : 'visible',\n        width: width || '',\n        height: height || ''\n    }\">\n    @if (dialogDisplay == 'popup') {\n    <div class=\"color-picker__arrow\"></div>\n    }\n    @if (mode == colorModeInternal.color) {\n    <div class=\"color-picker__sv\"\n        nxtSlider\n        [rgX]=\"1\"\n        [rgY]=\"1\"\n        (newValue)=\"onColorChange($event)\"\n        (dragStart)=\"onDragStart('saturation-lightness')\"\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\n        [style.backgroundColor]=\"hueSliderColor || ''\">\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\n            [class.color-picker__cursor--light]=\"svSliderLight\"\n            [style]=\"{\n                top: (slider?.v || 0) * 100 + '%',\n                left: (slider?.s || 0) * 100 + '%'\n            }\"></div>\n    </div>\n    }\n    <div class=\"color-picker__controls\">\n        <div class=\"color-picker__selected\">\n            <div class=\"color-picker__selected-color\">\n                <div [style.backgroundColor]=\"selectedColor || ''\">@if (presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)) {\n                    <button type=\"button\"\n                        title=\"Add color to preset\"\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\n                        class=\"color-picker__add-selected\"\n                        [class.color-picker__add-selected--light]=\"alphaSliderLight\"\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\">\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n                            <path d=\"M0 0h24v24H0z\"\n                                fill=\"none\" />\n                        </svg></button>\n                    }\n                </div>\n            </div>\n        </div>\n        <div class=\"color-picker__hav\">\n            @if (mode == colorModeInternal.color) {\n            <div class=\"color-picker__slider color-picker__slider--hue\"\n                nxtSlider\n                [rgX]=\"1\"\n                (newValue)=\"onHueChange($event)\"\n                (dragStart)=\"onDragStart('hue')\"\n                (dragEnd)=\"onDragEnd('hue')\">\n                <div class=\"color-picker__cursor\"\n                    [class.color-picker__cursor--light]=\"hueSliderLight\"\n                    [style.left]=\"(slider?.h || 0) * 100 + '%'\"></div>\n            </div>\n            }\n            @if (mode == colorModeInternal.grayscale) {\n            <div class=\"color-picker__slider color-picker__slider--value\"\n                nxtSlider\n                [rgX]=\"1\"\n                (newValue)=\"onValueChange($event)\"\n                (dragStart)=\"onDragStart('value')\"\n                (dragEnd)=\"onDragEnd('value')\">\n                <div class=\"color-picker__cursor\"\n                    [class.color-picker__cursor--light]=\"valueSliderLight\"\n                    [style.left]=\"(1 - (slider?.v || 0)) * 100 + '%'\"></div>\n            </div>\n            }\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__slider color-picker__slider--alpha\"\n                nxtSlider\n                [rgX]=\"1\"\n                (newValue)=\"onAlphaChange($event)\"\n                (dragStart)=\"onDragStart('alpha')\"\n                (dragEnd)=\"onDragEnd('alpha')\">\n                <div class=\"color-picker__slider--alpha-bg\"\n                    [style.backgroundImage]=\"alphaSliderColor || ''\">\n                    <div class=\"color-picker__cursor\"\n                        [class.color-picker__cursor--light]=\"alphaSliderLight\"\n                        [style.left]=\"(slider?.a || 0) * 100 + '%'\"></div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n    @if (!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)) {\n    <div class=\"color-picker__inputs\">\n        <div class=\"color-picker__input-fields\">\n            @if (mode == colorModeInternal.grayscale) {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"hslaText?.l?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onValueInput($event)\" />\n                <span class=\"color-picker__input-field-label\">V</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hslaText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            } @else {\n            @switch (format) {\n            @case ('hsla') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"360\"\n                    nxtText\n                    [rg]=\"360\"\n                    [value]=\"hslaText?.h?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onHueInput($event)\" />\n                <span class=\"color-picker__input-field-label\">H</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"hslaText?.s?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onSaturationInput($event)\" />\n                <span class=\"color-picker__input-field-label\">S</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"hslaText?.l?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onLightnessInput($event)\" />\n                <span class=\"color-picker__input-field-label\">L</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hslaText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            @case ('rgba') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"255\"\n                    nxtText\n                    [rg]=\"255\"\n                    [value]=\"rgbaText?.r?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onRedInput($event)\" />\n                <span class=\"color-picker__input-field-label\">R</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"255\"\n                    nxtText\n                    [rg]=\"255\"\n                    [value]=\"rgbaText?.g?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onGreenInput($event)\" />\n                <span class=\"color-picker__input-field-label\">G</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"255\"\n                    nxtText\n                    [rg]=\"255\"\n                    [value]=\"rgbaText?.b?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onBlueInput($event)\" />\n                <span class=\"color-picker__input-field-label\">B</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hslaText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            @case ('cmyk') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.c?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onCyanInput($event)\" />\n                <span class=\"color-picker__input-field-label\">C</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.m?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onMagentaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">M</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.y?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onYellowInput($event)\" />\n                <span class=\"color-picker__input-field-label\">Y</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.k?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onBlackInput($event)\" />\n                <span class=\"color-picker__input-field-label\">K</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(cmykText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            @default {\n            <div class=\"color-picker__input-field\">\n                <input nxtText\n                    [value]=\"hexText\"\n                    (blur)=\"onHexInput()\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onHexInput($event)\" />\n                <span class=\"color-picker__input-field-label\">Hex</span>\n            </div>\n            @if (alphaChannel == 'forced') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hexAlpha)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            }\n            }\n        </div>\n        @if (mode == colorModeInternal.color) {\n        <div class=\"color-picker__input-type\">\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(1)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"onFormatToggle(1)\"></span>\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(-1)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"onFormatToggle(-1)\"></span>\n        </div>\n        }\n    </div>\n    }\n    @if (presetColors?.length) {\n    <div class=\"color-picker__separator\"></div>\n    <div class=\"color-picker__preset\">\n        @if (presetLabel) {\n        <div class=\"color-picker__preset-label\">\n            @if (presetLabel === true) {\n            <ng-container i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\n            } @else {\n            {{ presetLabel }}\n            }\n        </div>\n        }\n        <div class=\"color-picker__preset-items\">\n            @for (color of presetColors; track color) {\n            @if (stringToRgba(color); as rgba) {\n            <div class=\"color-picker__preset-item\"\n                [title]=\"color\"\n                (click)=\"setColorFromString(color)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"setColorFromString(color)\">\n                <div class=\"color-picker__preset-item-fill\"\n                    [style.backgroundColor]=\"rgba || ''\">@if (presetColorsEditable) {\n                    <button type=\"button\"\n                        title=\"Remove Color\"\n                        i18n-title=\"@@nxt-color-picker.button.remove-color\"\n                        class=\"color-picker__remove-selected\"\n                        (click)=\"onRemovePresetColor(color, $event)\"\n                        tabindex=\"0\"\n                        (keydown.enter)=\"onRemovePresetColor(color, $event)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\">\n                            <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                            <path d=\"M0 0h24v24H0z\"\n                                fill=\"none\" />\n                        </svg></button>\n                    }\n                </div>\n            </div>\n            }\n            }\n            @for (i of fill(50); track $index) {\n            <div class=\"color-picker__preset-item\"></div>\n            }\n        </div>\n    </div>\n    }\n    @if (okButton || cancelButton) {\n    <div class=\"color-picker__buttons\">\n        @if (cancelButton) {\n        <button type=\"button\"\n            (click)=\"onCancel($event)\"\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\n        }\n        @if (okButton) {\n        <button type=\"button\"\n            (click)=\"onAccept($event)\"\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\n        }\n    </div>\n    }\n</div>\n}\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,#0000,#000),linear-gradient(to right,#fff,#fff0);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,#000,#fff)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"] }]
        }] });

class ColorPickerDirective {
    constructor() {
        this.dialogCreated = false;
        this.ignoreChanges = false;
        this._callbacks = {
            stateChanged: (state) => {
                this.toggleChange.emit(state);
                if (state) {
                    this.open.emit(this.nxtColor());
                }
                else {
                    this.close.emit(this.nxtColor());
                }
            },
            cmykChanged: (value, ignore = true) => {
                this.ignoreChanges = ignore;
                this.cmykColorChange.emit(value);
            },
            colorChanged: (value, ignore = true) => {
                this.ignoreChanges = ignore;
                this.nxtColorChange.emit(value);
            },
            colorSelectCanceled: () => {
                this.colorSelectCancel.emit(undefined);
            },
            colorSelected: (value) => {
                this.colorSelect.emit(value);
            },
            inputChanged: (event) => {
                this.inputChange.emit(event);
            },
            sliderDragStart: (event) => {
                this.sliderDragStart.emit(event);
            },
            sliderChanged: (event) => {
                this.sliderChange.emit(event);
            },
            sliderDragEnd: (event) => {
                this.sliderDragEnd.emit(event);
            },
            presetColorsChanged: (value) => {
                this.presetColorsChange.emit(value);
            }
        };
        /** The color to show in the color picker dialog */
        this._nxtColor = input(undefined, { ...(ngDevMode ? { debugName: "_nxtColor" } : /* istanbul ignore next */ {}), alias: 'nxtColor' });
        this.nxtColor = linkedSignal({ ...(ngDevMode ? { debugName: "nxtColor" } : /* istanbul ignore next */ {}), source: () => this._nxtColor(),
            computation: v => v });
        /** Use this option to set color picker dialog width */
        this.width = input('230px', /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
        /** Use this option to force color picker dialog height */
        this.height = input('auto', /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
        /** Sets the default open / close state of the color picker */
        this.toggle = input(false, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
        /** Disables opening of the color picker dialog via toggle */
        this.disabled = input(false, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
        /** Dialog color mode */
        this.mode = input('color', /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
        /** Enables CMYK input format and color change event */
        this.cmykEnabled = input(false, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "cmykEnabled" }] : /* istanbul ignore next */ []));
        /** Output color format */
        this.outputFormat = input(OutputFormatEnum.auto, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "outputFormat" }] : /* istanbul ignore next */ []));
        /** Alpha channel mode */
        this.alphaChannel = input(AlphaChannelEnum.enabled, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "alphaChannel" }] : /* istanbul ignore next */ []));
        /** Used when the color is not well-formed or is undefined */
        this.fallbackColor = input(/* @ts-ignore */
        ...(ngDevMode ? [undefined, { debugName: "fallbackColor" }] : /* istanbul ignore next */ []));
        /** Dialog position */
        this.position = input(DialogPositionEnum.auto, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
        /** Dialog offset percentage relative to the directive element */
        this.positionOffset = input(0, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "positionOffset" }] : /* istanbul ignore next */ []));
        /**
         * Show label for preset colors
         *
         * If string is given, it overrides the default label.
         */
        this.presetLabel = input(true, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "presetLabel" }] : /* istanbul ignore next */ []));
        /** Array of preset colors to show in the color picker dialog */
        this.presetColors = input(/* @ts-ignore */
        ...(ngDevMode ? [undefined, { debugName: "presetColors" }] : /* istanbul ignore next */ []));
        /** Disables / hides the color input field from the dialog */
        this.disableInput = input(false, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "disableInput" }] : /* istanbul ignore next */ []));
        /** Dialog positioning mode */
        this.dialogDisplay = input(DialogDisplayEnum.popup, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "dialogDisplay" }] : /* istanbul ignore next */ []));
        /** Array of HTML elements that will be ignored when clicked */
        this.ignoredElements = input(/* @ts-ignore */
        ...(ngDevMode ? [undefined, { debugName: "ignoredElements" }] : /* istanbul ignore next */ []));
        /** Save currently selected color when user clicks outside */
        this.saveClickOutside = input(true, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "saveClickOutside" }] : /* istanbul ignore next */ []));
        /** Close the color picker dialog when user clicks outside */
        this.closeClickOutside = input(true, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "closeClickOutside" }] : /* istanbul ignore next */ []));
        /** Show an OK / Apply button which saves the color */
        this.okButton = input(false, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "okButton" }] : /* istanbul ignore next */ []));
        /** Show a Cancel / Reset button which resets the color */
        this.cancelButton = input(false, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "cancelButton" }] : /* istanbul ignore next */ []));
        /** Show buttons to add / remove preset colors */
        this.presetColorsEditable = input(false, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "presetColorsEditable" }] : /* istanbul ignore next */ []));
        /** Use this option to set the max colors allowed in presets */
        this.maxPresetColors = input(/* @ts-ignore */
        ...(ngDevMode ? [undefined, { debugName: "maxPresetColors" }] : /* istanbul ignore next */ []));
        /**
         * Create dialog component in the root view container
         *
         * Note: The root component needs to have public viewContainerRef.
         */
        this.useRootViewContainer = input(false, /* @ts-ignore */
        ...(ngDevMode ? [{ debugName: "useRootViewContainer" }] : /* istanbul ignore next */ []));
        /** Current color value, emit when dialog is isOpen */
        this.open = output();
        /** Current color value, emit when dialog is closed */
        this.close = output();
        /** Input name and its value, emit when user changes color through inputs */
        this.inputChange = output();
        /** Status of the dialog, emit when dialog is isOpen / closed */
        this.toggleChange = output();
        /** Slider name and current color, emit when slider dragging starts */
        this.sliderDragStart = output();
        /** Slider name and its value, emit when user changes color through slider */
        this.sliderChange = output();
        /** Slider name and current color, emit when slider dragging ends */
        this.sliderDragEnd = output();
        /** Color select canceled, emit when Cancel button is pressed */
        this.colorSelect = output();
        /** Selected color value, emit when OK button pressed or user clicks outside (if saveClickOutside is true) */
        this.colorSelectCancel = output();
        /** Changed color value, emit when color changes */
        this.nxtColorChange = output();
        /** Outputs the color as CMYK string if CMYK is enabled */
        this.cmykColorChange = output();
        /** Preset colors, emit when preset color is added / removed */
        this.presetColorsChange = output();
        this.injector = inject(Injector);
        this.appRef = inject(ApplicationRef);
        this.vcRef = inject(ViewContainerRef);
        this.elRef = inject(ElementRef);
        this.overlay = inject(Overlay);
    }
    get resIgnoredElements() {
        const ignoredElements = this.ignoredElements();
        const ign = Array.isArray(ignoredElements) ? ignoredElements : [ignoredElements];
        return ign.filter(el => !!el);
    }
    /** @internal */
    handleOpen(event) {
        const path = new Set(composedPath(event));
        const ignored = this.resIgnoredElements.find(el => path.has(el));
        if (!this.disabled() && !ignored) {
            this.openDialog();
        }
    }
    /** @internal */
    handleInput(event) {
        const value = ((event?.target?.['value'] || '') + '').trim();
        if (this.dialog) {
            this.dialog.setColorFromString(value, true);
        }
        else {
            this.nxtColor.set(value);
            this.nxtColorChange.emit(value);
        }
    }
    /** @internal */
    ngOnDestroy() {
        this.dispose();
    }
    /** @internal */
    ngOnChanges(changes) {
        if (changes['toggle'] && !this.disabled()) {
            if (changes['toggle'].currentValue) {
                this.openDialog();
            }
            else {
                this.closeDialog();
            }
        }
        if (changes['_nxtColor']) {
            if (this.dialog && !this.ignoreChanges) {
                if (this.dialogDisplay() == DialogDisplayEnum.inline) {
                    this.dialog.setInitialColor(changes['_nxtColor'].currentValue);
                }
                this.dialog.setColorFromString(changes['_nxtColor'].currentValue, false);
                if (this.useRootViewContainer() && this.dialogDisplay() != DialogDisplayEnum.inline) {
                    this.cmpRef?.changeDetectorRef.detectChanges();
                }
            }
            this.ignoreChanges = false;
        }
        if ((changes['presetLabel'] || changes['presetColors']) && this.dialog) {
            this.dialog.setPresetConfig(this.presetLabel(), this.presetColors());
        }
        if (changes['dialogDisplay']) {
            this.dispose();
            this.create();
        }
        if ((changes['position'] || changes['positionOffset']) && this.dialogDisplay() == DialogDisplayEnum.popup) {
            if (this.overlayRef) {
                this.overlayRef.updatePositionStrategy(this.overlay.position()
                    .flexibleConnectedTo(this.elRef)
                    .withPositions(this.getPositions(this.positionOffset())));
            }
        }
    }
    openDialog() {
        if (!this.dialogCreated) {
            this.create();
        }
        else if (this.dialog) {
            if (this.overlayRef && !this.overlayRef.hasAttached()) {
                this.cmpRef = this.overlayRef.attach(new ComponentPortal(ColorPickerComponent, null, this.injector));
                this.dialog = this.cmpRef.instance;
                this.setupDialog();
            }
            this.dialog.openDialog(this.nxtColor());
        }
    }
    closeDialog() {
        if (this.dialog && this.dialogDisplay() == DialogDisplayEnum.popup) {
            this.dialog.closeDialog();
        }
    }
    /**
     * Get text color mode to ensure good contrast with selected color
     *
     * @param bg    Solid background color; this is used when selected color has transparency
     * @param fg    Foreground color, defaults to current picker value
     * @returns
     */
    textColorMode(bg = new Rgba(1, 1, 1, 1, true), fg = this.dialog?.rgbaText) {
        if (typeof bg == 'string')
            bg = hsvaToRgba(stringToHsva(bg) ?? new Hsva(1, 1, 1, 1, true));
        const color = compositeColors(fg || bg, new Rgba(bg.r, bg.g, bg.b, 1, bg.normalized));
        const useLightColor = opaqueSliderLight(color);
        return useLightColor ? 'light' : 'dark';
    }
    dispose() {
        if (this.cmpRef)
            this.cmpRef.destroy();
        if (this.overlayRef)
            this.overlayRef.dispose();
        this.cmpRef = undefined;
        this.overlayRef = undefined;
        this.dialogCreated = false;
    }
    create() {
        let vcRef = this.vcRef;
        this.dialogCreated = true;
        if (this.useRootViewContainer() && this.dialogDisplay() != DialogDisplayEnum.inline) {
            const classOfRootComponent = this.appRef.componentTypes[0];
            const appInstance = this.injector.get(classOfRootComponent);
            vcRef = appInstance.vcRef || appInstance.viewContainerRef || this.vcRef;
            if (vcRef == this.vcRef) {
                console.warn('You are using useRootViewContainer, but the root component is not exposing viewContainerRef! Please expose it by adding \'vcRef: ViewContainerRef\' to the constructor.');
            }
        }
        if (this.dialogDisplay() != DialogDisplayEnum.inline) {
            const pos = this.overlay.position()
                .flexibleConnectedTo(this.elRef)
                .withFlexibleDimensions(false)
                .withPush(false)
                .withPositions(this.getPositions(this.positionOffset()));
            this.overlayRef = this.overlay.create({ positionStrategy: pos, scrollStrategy: this.overlay.scrollStrategies.reposition({ autoClose: true }) });
            this.cmpRef = this.overlayRef.attach(new ComponentPortal(ColorPickerComponent, null, this.injector));
        }
        else {
            this.cmpRef = vcRef.createComponent(ColorPickerComponent, { injector: this.injector, index: 0 });
        }
        this.dialog = this.cmpRef.instance;
        this.setupDialog();
        if (this.vcRef != vcRef) {
            this.cmpRef.changeDetectorRef.detectChanges();
        }
    }
    setupDialog() {
        this.dialog?.setupDialog({ ...this, callbacks: this._callbacks, elementRef: this.elRef, color: this.nxtColor() });
    }
    getPositions(offset = 0) {
        const pos = [];
        const position = this.position();
        const positions = Array.isArray(position)
            ? position
            : [position || DialogPositionEnum.auto];
        const bb = this.elRef.nativeElement.getBoundingClientRect();
        const positionCfg = {
            [DialogPositionEnum.right]: {
                originX: 'end',
                originY: 'top',
                overlayX: 'start',
                overlayY: 'top',
                panelClass: 'color-picker__arrow--right',
                offsetX: bb.width * offset
            },
            [DialogPositionEnum.left]: {
                originX: 'start',
                originY: 'top',
                overlayX: 'end',
                overlayY: 'top',
                panelClass: 'color-picker__arrow--left',
                offsetX: -bb.width * offset
            },
            [DialogPositionEnum.top]: {
                originX: 'start',
                originY: 'top',
                overlayX: 'start',
                overlayY: 'bottom',
                panelClass: 'color-picker__arrow--top',
                offsetY: -bb.height * offset
            },
            [DialogPositionEnum.bottom]: {
                originX: 'start',
                originY: 'bottom',
                overlayX: 'start',
                overlayY: 'top',
                panelClass: 'color-picker__arrow--bottom',
                offsetY: bb.height * offset
            }
        };
        const usedPositions = new Set();
        positions.forEach(p => {
            // Add positions in order as specified
            if (!usedPositions.has(p) && p in positionCfg) {
                usedPositions.add(p);
                pos.push(positionCfg[p]);
            }
        });
        if (positions.find(p => p == DialogPositionEnum.auto)) {
            // If using auto positioning, append the remaining positioning strategies
            [
                DialogPositionEnum.right,
                DialogPositionEnum.top,
                DialogPositionEnum.bottom,
                DialogPositionEnum.left
            ].forEach(p => {
                if (!usedPositions.has(p) && p in positionCfg) {
                    usedPositions.add(p);
                    pos.push(positionCfg[p]);
                }
            });
        }
        return pos;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ColorPickerDirective, isStandalone: true, selector: "[nxtColor]", inputs: { _nxtColor: { classPropertyName: "_nxtColor", publicName: "nxtColor", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, cmykEnabled: { classPropertyName: "cmykEnabled", publicName: "cmykEnabled", isSignal: true, isRequired: false, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: false, transformFunction: null }, alphaChannel: { classPropertyName: "alphaChannel", publicName: "alphaChannel", isSignal: true, isRequired: false, transformFunction: null }, fallbackColor: { classPropertyName: "fallbackColor", publicName: "fallbackColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, positionOffset: { classPropertyName: "positionOffset", publicName: "positionOffset", isSignal: true, isRequired: false, transformFunction: null }, presetLabel: { classPropertyName: "presetLabel", publicName: "presetLabel", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, disableInput: { classPropertyName: "disableInput", publicName: "disableInput", isSignal: true, isRequired: false, transformFunction: null }, dialogDisplay: { classPropertyName: "dialogDisplay", publicName: "dialogDisplay", isSignal: true, isRequired: false, transformFunction: null }, ignoredElements: { classPropertyName: "ignoredElements", publicName: "ignoredElements", isSignal: true, isRequired: false, transformFunction: null }, saveClickOutside: { classPropertyName: "saveClickOutside", publicName: "saveClickOutside", isSignal: true, isRequired: false, transformFunction: null }, closeClickOutside: { classPropertyName: "closeClickOutside", publicName: "closeClickOutside", isSignal: true, isRequired: false, transformFunction: null }, okButton: { classPropertyName: "okButton", publicName: "okButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, presetColorsEditable: { classPropertyName: "presetColorsEditable", publicName: "presetColorsEditable", isSignal: true, isRequired: false, transformFunction: null }, maxPresetColors: { classPropertyName: "maxPresetColors", publicName: "maxPresetColors", isSignal: true, isRequired: false, transformFunction: null }, useRootViewContainer: { classPropertyName: "useRootViewContainer", publicName: "useRootViewContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "open", close: "close", inputChange: "inputChange", toggleChange: "toggleChange", sliderDragStart: "sliderDragStart", sliderChange: "sliderChange", sliderDragEnd: "sliderDragEnd", colorSelect: "colorSelect", colorSelectCancel: "colorSelectCancel", nxtColorChange: "nxtColorChange", cmykColorChange: "cmykColorChange", presetColorsChange: "presetColorsChange" }, host: { listeners: { "focus": "handleOpen($event)", "click": "handleOpen($event)", "input": "handleInput($event)", "change": "handleInput($event)" } }, exportAs: ["nxtColorPicker"], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxtColor]',
                    exportAs: 'nxtColorPicker',
                    host: {
                        '(focus)': 'handleOpen($event)',
                        '(click)': 'handleOpen($event)',
                        '(input)': 'handleInput($event)',
                        '(change)': 'handleInput($event)'
                    }
                }]
        }], propDecorators: { _nxtColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxtColor", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], cmykEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "cmykEnabled", required: false }] }], outputFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputFormat", required: false }] }], alphaChannel: [{ type: i0.Input, args: [{ isSignal: true, alias: "alphaChannel", required: false }] }], fallbackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackColor", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], positionOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionOffset", required: false }] }], presetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetLabel", required: false }] }], presetColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetColors", required: false }] }], disableInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInput", required: false }] }], dialogDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogDisplay", required: false }] }], ignoredElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoredElements", required: false }] }], saveClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveClickOutside", required: false }] }], closeClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeClickOutside", required: false }] }], okButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "okButton", required: false }] }], cancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButton", required: false }] }], presetColorsEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetColorsEditable", required: false }] }], maxPresetColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPresetColors", required: false }] }], useRootViewContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "useRootViewContainer", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], close: [{ type: i0.Output, args: ["close"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], toggleChange: [{ type: i0.Output, args: ["toggleChange"] }], sliderDragStart: [{ type: i0.Output, args: ["sliderDragStart"] }], sliderChange: [{ type: i0.Output, args: ["sliderChange"] }], sliderDragEnd: [{ type: i0.Output, args: ["sliderDragEnd"] }], colorSelect: [{ type: i0.Output, args: ["colorSelect"] }], colorSelectCancel: [{ type: i0.Output, args: ["colorSelectCancel"] }], nxtColorChange: [{ type: i0.Output, args: ["nxtColorChange"] }], cmykColorChange: [{ type: i0.Output, args: ["cmykColorChange"] }], presetColorsChange: [{ type: i0.Output, args: ["presetColorsChange"] }] } });

/*
 * Public API Surface of nxt-color-picker
 */

/**
 * Generated bundle index. Do not edit.
 */

export { AlphaChannelEnum, AlphaEnabledFormats, Cmyk, ColorFormatEnum, ColorPickerDirective, DialogDisplayEnum, DialogPositionEnum, Hsla, Hsva, OutputFormatEnum, Rgba, calculateContrast, calculateLuminance, calculateMinimumAlpha, cmykToRgb, compositeAlpha, compositeColors, compositeComponent, denormalizeCMYK, denormalizeHSLA, denormalizeHSVA, denormalizeRGBA, formatCmyk, formatOutput, hslaToHsva, hsvaToHsla, hsvaToRgba, normalizeCMYK, normalizeHSLA, normalizeHSVA, normalizeRGBA, rgbaToCmyk, rgbaToHex, rgbaToHsva, stringToCmyk, stringToHsva };
//# sourceMappingURL=nxt-color-picker.mjs.map