import { ComponentPortal } from '@angular/cdk/portal';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, HostListener, Output, Input, Directive, ViewEncapsulation, Component, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';

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 {
    constructor() { }
    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: "20.0.5", ngImport: i0, type: ColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ColorPickerService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ColorPickerService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [] });

/**
 * @internal
 */
class TextDirective {
    constructor() {
        this.newValue = new EventEmitter();
    }
    inputChange(event) {
        const value = ((event?.target?.['value'] || '') + '').trim();
        if (this.rg == undefined) {
            this.newValue.emit(value);
        }
        else {
            const numeric = parseFloat(value);
            this.newValue.emit({ v: numeric, rg: this.rg });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: TextDirective, isStandalone: false, selector: "[nxtText]", inputs: { rg: "rg", text: ["nxtText", "text"] }, outputs: { newValue: "newValue" }, host: { listeners: { "input": "inputChange($event)", "change": "inputChange($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: TextDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxtText]',
                    standalone: false
                }]
        }], propDecorators: { rg: [{
                type: Input
            }], text: [{
                type: Input,
                args: ['nxtText']
            }], newValue: [{
                type: Output
            }], inputChange: [{
                type: HostListener,
                args: ['input', ['$event']]
            }, {
                type: HostListener,
                args: ['change', ['$event']]
            }] } });

/**
 * @internal
 */
class SliderDirective {
    constructor(elRef) {
        this.elRef = elRef;
        this.isMoving = false;
        this.dragEnd = new EventEmitter();
        this.dragStart = new EventEmitter();
        this.newValue = new EventEmitter();
    }
    onStart(event) {
        event.stopPropagation();
        event.preventDefault();
        this.setCursor(event);
        this.isMoving = true;
        this.dragStart.emit();
    }
    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();
        }
    }
    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));
        if (this.rgX != undefined && this.rgY != undefined) {
            this.newValue.emit({ s: x / width, v: (1 - y / height), rgX: this.rgX, rgY: this.rgY });
        }
        else if (this.rgX == undefined && this.rgY != undefined) {
            this.newValue.emit({ v: y / height, rgY: this.rgY });
        }
        else if (this.rgX != undefined && this.rgY == undefined) {
            this.newValue.emit({ v: x / width, rgX: this.rgX });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SliderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: SliderDirective, isStandalone: false, selector: "[nxtSlider]", inputs: { rgX: "rgX", rgY: "rgY", slider: ["nxtSlider", "slider"] }, 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: "20.0.5", ngImport: i0, type: SliderDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxtSlider]',
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { rgX: [{
                type: Input
            }], rgY: [{
                type: Input
            }], slider: [{
                type: Input,
                args: ['nxtSlider']
            }], dragEnd: [{
                type: Output
            }], dragStart: [{
                type: Output
            }], newValue: [{
                type: Output
            }], onStart: [{
                type: HostListener,
                args: ['mousedown', ['$event']]
            }, {
                type: HostListener,
                args: ['touchstart', ['$event']]
            }], onMove: [{
                type: HostListener,
                args: ['document:mousemove', ['$event']]
            }, {
                type: HostListener,
                args: ['document:touchmove', ['$event']]
            }], onStop: [{
                type: HostListener,
                args: ['document:mouseup', ['$event']]
            }, {
                type: HostListener,
                args: ['document:touchend', ['$event']]
            }] } });

/**
 * @internal
 */
class ColorPickerComponent {
    constructor(elRef, cdRef, service) {
        this.elRef = elRef;
        this.cdRef = cdRef;
        this.service = service;
        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;
    }
    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();
            }
        }
    }
    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) {
        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);
            }
            //@ts-ignore
            if (!this.cdRef['destroyed']) {
                this.cdRef.detectChanges();
            }
        }
    }
    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: "20.0.5", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ColorPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: ColorPickerComponent, isStandalone: false, selector: "nxt-color-picker", host: { listeners: { "document:keyup.esc": "onCancel($event)", "document:keyup.enter": "onAccept($event)", "document:mousedown": "onFocusChange($event)", "document:focusin": "onFocusChange($event)" } }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/click-events-have-key-events -->\r\n<div class=\"color-picker\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    [ngStyle]=\"{\r\n        visibility: !show ? 'hidden' : 'visible',\r\n        width: width || '',\r\n        height: height || ''\r\n    }\"\r\n    *ngIf=\"show\">\r\n    <div *ngIf=\"dialogDisplay == 'popup'\"\r\n        class=\"color-picker__arrow\"></div>\r\n    <div *ngIf=\"mode == colorModeInternal.color\"\r\n        class=\"color-picker__sv\"\r\n        nxtSlider\r\n        [rgX]=\"1\"\r\n        [rgY]=\"1\"\r\n        (newValue)=\"onColorChange($event)\"\r\n        (dragStart)=\"onDragStart('saturation-lightness')\"\r\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\r\n        [ngStyle]=\"{ \r\n            backgroundColor: hueSliderColor || ''\r\n        }\">\r\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n            [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\r\n            [ngStyle]=\"{\r\n                top: (slider?.v || 0) * 100 + '%',\r\n                left: (slider?.s || 0) * 100 + '%'\r\n            }\"></div>\r\n    </div>\r\n    <div class=\"color-picker__controls\">\r\n        <div class=\"color-picker__selected\">\r\n            <div class=\"color-picker__selected-color\">\r\n                <div [ngStyle]=\"{ \r\n                    backgroundColor: selectedColor || ''\r\n                }\"><button *ngIf=\"presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)\"\r\n                        type=\"button\"\r\n                        title=\"Add color to preset\"\r\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\r\n                        class=\"color-picker__add-selected\"\r\n                        [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\r\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                            width=\"24\"\r\n                            height=\"24\"\r\n                            viewBox=\"0 0 24 24\">\r\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n                            <path d=\"M0 0h24v24H0z\"\r\n                                fill=\"none\" />\r\n                        </svg></button></div>\r\n            </div>\r\n        </div>\r\n        <div class=\"color-picker__hav\">\r\n            <div *ngIf=\"mode == colorModeInternal.color\"\r\n                class=\"color-picker__slider color-picker__slider--hue\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onHueChange($event)\"\r\n                (dragStart)=\"onDragStart('hue')\"\r\n                (dragEnd)=\"onDragEnd('hue')\">\r\n                <div class=\"color-picker__cursor\"\r\n                    [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\r\n                    [ngStyle]=\"{\r\n                        left: (slider?.h || 0) * 100 + '%'\r\n                    }\"></div>\r\n            </div>\r\n            <div *ngIf=\"mode == colorModeInternal.grayscale\"\r\n                class=\"color-picker__slider color-picker__slider--value\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onValueChange($event)\"\r\n                (dragStart)=\"onDragStart('value')\"\r\n                (dragEnd)=\"onDragEnd('value')\">\r\n                <div class=\"color-picker__cursor\"\r\n                    [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\r\n                    [ngStyle]=\"{\r\n                        left: (1 - (slider?.v || 0)) * 100 + '%'\r\n                    }\"></div>\r\n            </div>\r\n            <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                class=\"color-picker__slider color-picker__slider--alpha\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onAlphaChange($event)\"\r\n                (dragStart)=\"onDragStart('alpha')\"\r\n                (dragEnd)=\"onDragEnd('alpha')\">\r\n                <div class=\"color-picker__slider--alpha-bg\"\r\n                    [ngStyle]=\"{\r\n                        backgroundImage: alphaSliderColor || ''\r\n                    }\">\r\n                    <div class=\"color-picker__cursor\"\r\n                        [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\r\n                        [ngStyle]=\"{\r\n                            left: (slider?.a || 0) * 100 + '%'\r\n                        }\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)\"\r\n        class=\"color-picker__inputs\">\r\n        <div class=\"color-picker__input-fields\">\r\n            <ng-container *ngIf=\"mode == colorModeInternal.grayscale; else formatSwitch\">\r\n                <div class=\"color-picker__input-field\">\r\n                    <input type=\"number\"\r\n                        pattern=\"[0-9]*\"\r\n                        min=\"0\"\r\n                        max=\"100\"\r\n                        nxtText\r\n                        [rg]=\"100\"\r\n                        [value]=\"hslaText?.l?.toFixed(0)\"\r\n                        (keyup.enter)=\"onAccept($event)\"\r\n                        (newValue)=\"onValueInput($event)\" />\r\n                    <span class=\"color-picker__input-field-label\">V</span>\r\n                </div>\r\n                <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                    class=\"color-picker__input-field\">\r\n                    <input type=\"number\"\r\n                        pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                        min=\"0\"\r\n                        max=\"1\"\r\n                        step=\"0.01\"\r\n                        nxtText\r\n                        [rg]=\"1\"\r\n                        [value]=\"formatAlpha(hslaText?.a)\"\r\n                        (keyup.enter)=\"onAccept($event)\"\r\n                        (newValue)=\"onAlphaInput($event)\" />\r\n                    <span class=\"color-picker__input-field-label\">A</span>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #formatSwitch>\r\n                <ng-container [ngSwitch]=\"format\">\r\n                    <ng-container *ngSwitchCase=\"'hsla'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"360\"\r\n                                nxtText\r\n                                [rg]=\"360\"\r\n                                [value]=\"hslaText?.h?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onHueInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">H</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"hslaText?.s?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onSaturationInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">S</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"hslaText?.l?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onLightnessInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">L</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hslaText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'rgba'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.r?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onRedInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">R</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.g?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onGreenInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">G</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.b?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onBlueInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">B</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hslaText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'cmyk'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.c?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onCyanInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">C</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.m?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onMagentaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">M</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.y?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onYellowInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">Y</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.k?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onBlackInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">K</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(cmykText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input nxtText\r\n                                [value]=\"hexText\"\r\n                                (blur)=\"onHexInput()\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onHexInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">Hex</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel == 'forced'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hexAlpha)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-template>\r\n        </div>\r\n        <div *ngIf=\"mode == colorModeInternal.color\"\r\n            class=\"color-picker__input-type\">\r\n            <span class=\"color-picker__input-type-arrow\"\r\n                (click)=\"onFormatToggle(1)\"\r\n                tabindex=\"0\"\r\n                (keydown.enter)=\"onFormatToggle(1)\"></span>\r\n            <span class=\"color-picker__input-type-arrow\"\r\n                (click)=\"onFormatToggle(-1)\"\r\n                tabindex=\"0\"\r\n                (keydown.enter)=\"onFormatToggle(-1)\"></span>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"presetColors?.length\">\r\n        <div class=\"color-picker__separator\"></div>\r\n        <div class=\"color-picker__preset\">\r\n            <div *ngIf=\"presetLabel\"\r\n                class=\"color-picker__preset-label\">\r\n                <ng-container *ngIf=\"presetLabel === true; else stringLabel\"\r\n                    i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n                <ng-template #stringLabel>{{ presetLabel }}</ng-template>\r\n            </div>\r\n            <div *ngIf=\"presetColors?.length\"\r\n                class=\"color-picker__preset-items\">\r\n                <ng-container *ngFor=\"let color of presetColors\">\r\n                    <div *ngIf=\"stringToRgba(color) as rgba\"\r\n                        class=\"color-picker__preset-item\"\r\n                        [title]=\"color\"\r\n                        (click)=\"setColorFromString(color)\"\r\n                        tabindex=\"0\"\r\n                        (keydown.enter)=\"setColorFromString(color)\">\r\n                        <div class=\"color-picker__preset-item-fill\"\r\n                            [ngStyle]=\"{ \r\n                        backgroundColor: rgba || ''\r\n                    }\"><button *ngIf=\"presetColorsEditable\"\r\n                                type=\"button\"\r\n                                title=\"Remove Color\"\r\n                                i18n-title=\"@@nxt-color-picker.button.remove-color\"\r\n                                class=\"color-picker__remove-selected\"\r\n                                (click)=\"onRemovePresetColor(color)\"\r\n                                tabindex=\"0\"\r\n                                (keydown.enter)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                    width=\"24\"\r\n                                    height=\"24\"\r\n                                    viewBox=\"0 0 24 24\">\r\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\" />\r\n                                    <path d=\"M0 0h24v24H0z\"\r\n                                        fill=\"none\" />\r\n                                </svg></button></div>\r\n                    </div>\r\n                </ng-container>\r\n                <div *ngFor=\"let i of fill(50)\"\r\n                    class=\"color-picker__preset-item\"></div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div *ngIf=\"okButton || cancelButton\"\r\n        class=\"color-picker__buttons\">\r\n        <button *ngIf=\"cancelButton\"\r\n            type=\"button\"\r\n            (click)=\"onCancel($event)\"\r\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n        <button *ngIf=\"okButton\"\r\n            type=\"button\"\r\n            (click)=\"onAccept($event)\"\r\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n    </div>\r\n</div>\r\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TextDirective, selector: "[nxtText]", inputs: ["rg", "nxtText"], outputs: ["newValue"] }, { kind: "directive", type: SliderDirective, selector: "[nxtSlider]", inputs: ["rgX", "rgY", "nxtSlider"], outputs: ["dragEnd", "dragStart", "newValue"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nxt-color-picker', encapsulation: ViewEncapsulation.Emulated, standalone: false, template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/click-events-have-key-events -->\r\n<div class=\"color-picker\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    [ngStyle]=\"{\r\n        visibility: !show ? 'hidden' : 'visible',\r\n        width: width || '',\r\n        height: height || ''\r\n    }\"\r\n    *ngIf=\"show\">\r\n    <div *ngIf=\"dialogDisplay == 'popup'\"\r\n        class=\"color-picker__arrow\"></div>\r\n    <div *ngIf=\"mode == colorModeInternal.color\"\r\n        class=\"color-picker__sv\"\r\n        nxtSlider\r\n        [rgX]=\"1\"\r\n        [rgY]=\"1\"\r\n        (newValue)=\"onColorChange($event)\"\r\n        (dragStart)=\"onDragStart('saturation-lightness')\"\r\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\r\n        [ngStyle]=\"{ \r\n            backgroundColor: hueSliderColor || ''\r\n        }\">\r\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n            [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\r\n            [ngStyle]=\"{\r\n                top: (slider?.v || 0) * 100 + '%',\r\n                left: (slider?.s || 0) * 100 + '%'\r\n            }\"></div>\r\n    </div>\r\n    <div class=\"color-picker__controls\">\r\n        <div class=\"color-picker__selected\">\r\n            <div class=\"color-picker__selected-color\">\r\n                <div [ngStyle]=\"{ \r\n                    backgroundColor: selectedColor || ''\r\n                }\"><button *ngIf=\"presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)\"\r\n                        type=\"button\"\r\n                        title=\"Add color to preset\"\r\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\r\n                        class=\"color-picker__add-selected\"\r\n                        [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\r\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                            width=\"24\"\r\n                            height=\"24\"\r\n                            viewBox=\"0 0 24 24\">\r\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n                            <path d=\"M0 0h24v24H0z\"\r\n                                fill=\"none\" />\r\n                        </svg></button></div>\r\n            </div>\r\n        </div>\r\n        <div class=\"color-picker__hav\">\r\n            <div *ngIf=\"mode == colorModeInternal.color\"\r\n                class=\"color-picker__slider color-picker__slider--hue\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onHueChange($event)\"\r\n                (dragStart)=\"onDragStart('hue')\"\r\n                (dragEnd)=\"onDragEnd('hue')\">\r\n                <div class=\"color-picker__cursor\"\r\n                    [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\r\n                    [ngStyle]=\"{\r\n                        left: (slider?.h || 0) * 100 + '%'\r\n                    }\"></div>\r\n            </div>\r\n            <div *ngIf=\"mode == colorModeInternal.grayscale\"\r\n                class=\"color-picker__slider color-picker__slider--value\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onValueChange($event)\"\r\n                (dragStart)=\"onDragStart('value')\"\r\n                (dragEnd)=\"onDragEnd('value')\">\r\n                <div class=\"color-picker__cursor\"\r\n                    [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\r\n                    [ngStyle]=\"{\r\n                        left: (1 - (slider?.v || 0)) * 100 + '%'\r\n                    }\"></div>\r\n            </div>\r\n            <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                class=\"color-picker__slider color-picker__slider--alpha\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onAlphaChange($event)\"\r\n                (dragStart)=\"onDragStart('alpha')\"\r\n                (dragEnd)=\"onDragEnd('alpha')\">\r\n                <div class=\"color-picker__slider--alpha-bg\"\r\n                    [ngStyle]=\"{\r\n                        backgroundImage: alphaSliderColor || ''\r\n                    }\">\r\n                    <div class=\"color-picker__cursor\"\r\n                        [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\r\n                        [ngStyle]=\"{\r\n                            left: (slider?.a || 0) * 100 + '%'\r\n                        }\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)\"\r\n        class=\"color-picker__inputs\">\r\n        <div class=\"color-picker__input-fields\">\r\n            <ng-container *ngIf=\"mode == colorModeInternal.grayscale; else formatSwitch\">\r\n                <div class=\"color-picker__input-field\">\r\n                    <input type=\"number\"\r\n                        pattern=\"[0-9]*\"\r\n                        min=\"0\"\r\n                        max=\"100\"\r\n                        nxtText\r\n                        [rg]=\"100\"\r\n                        [value]=\"hslaText?.l?.toFixed(0)\"\r\n                        (keyup.enter)=\"onAccept($event)\"\r\n                        (newValue)=\"onValueInput($event)\" />\r\n                    <span class=\"color-picker__input-field-label\">V</span>\r\n                </div>\r\n                <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                    class=\"color-picker__input-field\">\r\n                    <input type=\"number\"\r\n                        pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                        min=\"0\"\r\n                        max=\"1\"\r\n                        step=\"0.01\"\r\n                        nxtText\r\n                        [rg]=\"1\"\r\n                        [value]=\"formatAlpha(hslaText?.a)\"\r\n                        (keyup.enter)=\"onAccept($event)\"\r\n                        (newValue)=\"onAlphaInput($event)\" />\r\n                    <span class=\"color-picker__input-field-label\">A</span>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #formatSwitch>\r\n                <ng-container [ngSwitch]=\"format\">\r\n                    <ng-container *ngSwitchCase=\"'hsla'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"360\"\r\n                                nxtText\r\n                                [rg]=\"360\"\r\n                                [value]=\"hslaText?.h?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onHueInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">H</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"hslaText?.s?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onSaturationInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">S</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"hslaText?.l?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onLightnessInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">L</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hslaText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'rgba'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.r?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onRedInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">R</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.g?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onGreenInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">G</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.b?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onBlueInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">B</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hslaText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'cmyk'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.c?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onCyanInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">C</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.m?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onMagentaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">M</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.y?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onYellowInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">Y</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.k?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onBlackInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">K</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(cmykText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input nxtText\r\n                                [value]=\"hexText\"\r\n                                (blur)=\"onHexInput()\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onHexInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">Hex</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel == 'forced'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hexAlpha)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-template>\r\n        </div>\r\n        <div *ngIf=\"mode == colorModeInternal.color\"\r\n            class=\"color-picker__input-type\">\r\n            <span class=\"color-picker__input-type-arrow\"\r\n                (click)=\"onFormatToggle(1)\"\r\n                tabindex=\"0\"\r\n                (keydown.enter)=\"onFormatToggle(1)\"></span>\r\n            <span class=\"color-picker__input-type-arrow\"\r\n                (click)=\"onFormatToggle(-1)\"\r\n                tabindex=\"0\"\r\n                (keydown.enter)=\"onFormatToggle(-1)\"></span>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"presetColors?.length\">\r\n        <div class=\"color-picker__separator\"></div>\r\n        <div class=\"color-picker__preset\">\r\n            <div *ngIf=\"presetLabel\"\r\n                class=\"color-picker__preset-label\">\r\n                <ng-container *ngIf=\"presetLabel === true; else stringLabel\"\r\n                    i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n                <ng-template #stringLabel>{{ presetLabel }}</ng-template>\r\n            </div>\r\n            <div *ngIf=\"presetColors?.length\"\r\n                class=\"color-picker__preset-items\">\r\n                <ng-container *ngFor=\"let color of presetColors\">\r\n                    <div *ngIf=\"stringToRgba(color) as rgba\"\r\n                        class=\"color-picker__preset-item\"\r\n                        [title]=\"color\"\r\n                        (click)=\"setColorFromString(color)\"\r\n                        tabindex=\"0\"\r\n                        (keydown.enter)=\"setColorFromString(color)\">\r\n                        <div class=\"color-picker__preset-item-fill\"\r\n                            [ngStyle]=\"{ \r\n                        backgroundColor: rgba || ''\r\n                    }\"><button *ngIf=\"presetColorsEditable\"\r\n                                type=\"button\"\r\n                                title=\"Remove Color\"\r\n                                i18n-title=\"@@nxt-color-picker.button.remove-color\"\r\n                                class=\"color-picker__remove-selected\"\r\n                                (click)=\"onRemovePresetColor(color)\"\r\n                                tabindex=\"0\"\r\n                                (keydown.enter)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                    width=\"24\"\r\n                                    height=\"24\"\r\n                                    viewBox=\"0 0 24 24\">\r\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\" />\r\n                                    <path d=\"M0 0h24v24H0z\"\r\n                                        fill=\"none\" />\r\n                                </svg></button></div>\r\n                    </div>\r\n                </ng-container>\r\n                <div *ngFor=\"let i of fill(50)\"\r\n                    class=\"color-picker__preset-item\"></div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div *ngIf=\"okButton || cancelButton\"\r\n        class=\"color-picker__buttons\">\r\n        <button *ngIf=\"cancelButton\"\r\n            type=\"button\"\r\n            (click)=\"onCancel($event)\"\r\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n        <button *ngIf=\"okButton\"\r\n            type=\"button\"\r\n            (click)=\"onAccept($event)\"\r\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n    </div>\r\n</div>\r\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"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ColorPickerService }], propDecorators: { onCancel: [{
                type: HostListener,
                args: ['document:keyup.esc', ['$event']]
            }], onAccept: [{
                type: HostListener,
                args: ['document:keyup.enter', ['$event']]
            }], onFocusChange: [{
                type: HostListener,
                args: ['document:mousedown', ['$event']]
            }, {
                type: HostListener,
                args: ['document:focusin', ['$event']]
            }] } });

class ColorPickerDirective {
    get resIgnoredElements() {
        const ign = Array.isArray(this.ignoredElements) ? this.ignoredElements : [this.ignoredElements];
        return ign.filter(el => !!el);
    }
    /** @internal */
    constructor(injector, appRef, vcRef, elRef, overlay) {
        this.injector = injector;
        this.appRef = appRef;
        this.vcRef = vcRef;
        this.elRef = elRef;
        this.overlay = overlay;
        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();
            },
            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);
            }
        };
        /** Use this option to set color picker dialog width */
        this.width = '230px';
        /** Use this option to force color picker dialog height */
        this.height = 'auto';
        /** Sets the default open / close state of the color picker */
        this.toggle = false;
        /** Disables opening of the color picker dialog via toggle */
        this.disabled = false;
        /** Dialog color mode */
        this.mode = 'color';
        /** Enables CMYK input format and color change event */
        this.cmykEnabled = false;
        /** Output color format */
        this.outputFormat = OutputFormatEnum.auto;
        /** Alpha channel mode */
        this.alphaChannel = AlphaChannelEnum.enabled;
        /** Dialog position */
        this.position = DialogPositionEnum.auto;
        /** Dialog offset percentage relative to the directive element */
        this.positionOffset = 0;
        /**
         * Show label for preset colors
         *
         * If string is given, it overrides the default label.
         */
        this.presetLabel = true;
        /** Disables / hides the color input field from the dialog */
        this.disableInput = false;
        /** Dialog positioning mode */
        this.dialogDisplay = DialogDisplayEnum.popup;
        /** Save currently selected color when user clicks outside */
        this.saveClickOutside = true;
        /** Close the color picker dialog when user clicks outside */
        this.closeClickOutside = true;
        /** Show an OK / Apply button which saves the color */
        this.okButton = false;
        /** Show a Cancel / Reset button which resets the color */
        this.cancelButton = false;
        /** Show buttons to add / remove preset colors */
        this.presetColorsEditable = false;
        /**
         * Create dialog component in the root view container
         *
         * Note: The root component needs to have public viewContainerRef.
         */
        this.useRootViewContainer = false;
        /** Current color value, emit when dialog is isOpen */
        this.open = new EventEmitter(true);
        /** Current color value, emit when dialog is closed */
        this.close = new EventEmitter(true);
        /** Input name and its value, emit when user changes color through inputs */
        this.inputChange = new EventEmitter(true);
        /** Status of the dialog, emit when dialog is isOpen / closed */
        this.toggleChange = new EventEmitter(true);
        /** Slider name and current color, emit when slider dragging starts */
        this.sliderDragStart = new EventEmitter(true);
        /** Slider name and its value, emit when user changes color through slider */
        this.sliderChange = new EventEmitter(true);
        /** Slider name and current color, emit when slider dragging ends */
        this.sliderDragEnd = new EventEmitter(true);
        /** Color select canceled, emit when Cancel button is pressed */
        this.colorSelect = new EventEmitter(true);
        /** Selected color value, emit when OK button pressed or user clicks outside (if saveClickOutside is true) */
        this.colorSelectCancel = new EventEmitter(true);
        /** Changed color value, emit when color changes */
        this.nxtColorChange = new EventEmitter(false);
        /** Outputs the color as CMYK string if CMYK is enabled */
        this.cmykColorChange = new EventEmitter(true);
        /** Preset colors, emit when preset color is added / removed */
        this.presetColorsChange = new EventEmitter(true);
    }
    /** @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 = value;
            this.nxtColorChange.emit(this.nxtColor);
        }
    }
    /** @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 positions = Array.isArray(this.position)
            ? this.position
            : [this.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: "20.0.5", ngImport: i0, type: ColorPickerDirective, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: ColorPickerDirective, isStandalone: false, selector: "[nxtColor]", inputs: { nxtColor: "nxtColor", width: "width", height: "height", toggle: "toggle", disabled: "disabled", mode: "mode", cmykEnabled: "cmykEnabled", outputFormat: "outputFormat", alphaChannel: "alphaChannel", fallbackColor: "fallbackColor", position: "position", positionOffset: "positionOffset", presetLabel: "presetLabel", presetColors: "presetColors", disableInput: "disableInput", dialogDisplay: "dialogDisplay", ignoredElements: "ignoredElements", saveClickOutside: "saveClickOutside", closeClickOutside: "closeClickOutside", okButton: "okButton", cancelButton: "cancelButton", presetColorsEditable: "presetColorsEditable", maxPresetColors: "maxPresetColors", useRootViewContainer: "useRootViewContainer" }, 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: "20.0.5", ngImport: i0, type: ColorPickerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxtColor]',
                    exportAs: 'nxtColorPicker',
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i1.Overlay }], propDecorators: { nxtColor: [{
                type: Input
            }], width: [{
                type: Input
            }], height: [{
                type: Input
            }], toggle: [{
                type: Input
            }], disabled: [{
                type: Input
            }], mode: [{
                type: Input
            }], cmykEnabled: [{
                type: Input
            }], outputFormat: [{
                type: Input
            }], alphaChannel: [{
                type: Input
            }], fallbackColor: [{
                type: Input
            }], position: [{
                type: Input
            }], positionOffset: [{
                type: Input
            }], presetLabel: [{
                type: Input
            }], presetColors: [{
                type: Input
            }], disableInput: [{
                type: Input
            }], dialogDisplay: [{
                type: Input
            }], ignoredElements: [{
                type: Input
            }], saveClickOutside: [{
                type: Input
            }], closeClickOutside: [{
                type: Input
            }], okButton: [{
                type: Input
            }], cancelButton: [{
                type: Input
            }], presetColorsEditable: [{
                type: Input
            }], maxPresetColors: [{
                type: Input
            }], useRootViewContainer: [{
                type: Input
            }], open: [{
                type: Output
            }], close: [{
                type: Output
            }], inputChange: [{
                type: Output
            }], toggleChange: [{
                type: Output
            }], sliderDragStart: [{
                type: Output
            }], sliderChange: [{
                type: Output
            }], sliderDragEnd: [{
                type: Output
            }], colorSelect: [{
                type: Output
            }], colorSelectCancel: [{
                type: Output
            }], nxtColorChange: [{
                type: Output
            }], cmykColorChange: [{
                type: Output
            }], presetColorsChange: [{
                type: Output
            }], handleOpen: [{
                type: HostListener,
                args: ['focus', ['$event']]
            }, {
                type: HostListener,
                args: ['click', ['$event']]
            }], handleInput: [{
                type: HostListener,
                args: ['input', ['$event']]
            }, {
                type: HostListener,
                args: ['change', ['$event']]
            }] } });

class ColorPickerModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: ColorPickerModule, declarations: [TextDirective,
            SliderDirective,
            ColorPickerComponent,
            ColorPickerDirective], imports: [CommonModule,
            OverlayModule], exports: [ColorPickerDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ColorPickerModule, imports: [CommonModule,
            OverlayModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ColorPickerModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        TextDirective,
                        SliderDirective,
                        ColorPickerComponent,
                        ColorPickerDirective
                    ],
                    imports: [
                        CommonModule,
                        OverlayModule
                    ],
                    exports: [
                        ColorPickerDirective
                    ]
                }]
        }] });

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

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

export { AlphaChannelEnum, AlphaEnabledFormats, Cmyk, ColorFormatEnum, ColorPickerDirective, ColorPickerModule, 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