nxt-color-picker 21.0.2 → 22.0.0

package/fesm2022/nxt-color-picker.mjs

@@ -1,7 +1,7 @@
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { Injectable, input, output, inject, ElementRef, Directive, ViewEncapsulation, Component, linkedSignal, Injector, ApplicationRef, ViewContainerRef, NgModule } from '@angular/core';
+import { Injectable, input, output, inject, ElementRef, Directive, ViewEncapsulation, Component, linkedSignal, Injector, ApplicationRef, ViewContainerRef } from '@angular/core';
 
 class Cmyk {
     constructor(c, m, y, k, a, 
@@ -613,10 +613,10 @@ class ColorPickerService {
             this.active = active;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -629,9 +629,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 class SliderDirective {
     constructor() {
         this.isMoving = false;
-        this.rgX = input(...(ngDevMode ? [undefined, { debugName: "rgX" }] : []));
-        this.rgY = input(...(ngDevMode ? [undefined, { debugName: "rgY" }] : []));
-        this.slider = input(undefined, { ...(ngDevMode ? { debugName: "slider" } : {}), alias: 'nxtSlider' });
+        this.rgX = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "rgX" }] : /* istanbul ignore next */ []));
+        this.rgY = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "rgY" }] : /* istanbul ignore next */ []));
+        this.slider = input(undefined, { ...(ngDevMode ? { debugName: "slider" } : /* istanbul ignore next */ {}), alias: 'nxtSlider' });
         this.dragEnd = output();
         this.dragStart = output();
         this.newValue = output();
@@ -686,10 +688,10 @@ class SliderDirective {
             this.newValue.emit({ v: x / width, rgX });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: SliderDirective, isStandalone: true, selector: "[nxtSlider]", inputs: { rgX: { classPropertyName: "rgX", publicName: "rgX", isSignal: true, isRequired: false, transformFunction: null }, rgY: { classPropertyName: "rgY", publicName: "rgY", isSignal: true, isRequired: false, transformFunction: null }, slider: { classPropertyName: "slider", publicName: "nxtSlider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", newValue: "newValue" }, host: { listeners: { "mousedown": "onStart($event)", "touchstart": "onStart($event)", "document:mousemove": "onMove($event)", "document:touchmove": "onMove($event)", "document:mouseup": "onStop($event)", "document:touchend": "onStop($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SliderDirective, isStandalone: true, selector: "[nxtSlider]", inputs: { rgX: { classPropertyName: "rgX", publicName: "rgX", isSignal: true, isRequired: false, transformFunction: null }, rgY: { classPropertyName: "rgY", publicName: "rgY", isSignal: true, isRequired: false, transformFunction: null }, slider: { classPropertyName: "slider", publicName: "nxtSlider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", newValue: "newValue" }, host: { listeners: { "mousedown": "onStart($event)", "touchstart": "onStart($event)", "document:mousemove": "onMove($event)", "document:touchmove": "onMove($event)", "document:mouseup": "onStop($event)", "document:touchend": "onStop($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SliderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nxtSlider]',
@@ -709,8 +711,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  */
 class TextDirective {
     constructor() {
-        this.rg = input(...(ngDevMode ? [undefined, { debugName: "rg" }] : []));
-        this.text = input(undefined, { ...(ngDevMode ? { debugName: "text" } : {}), alias: 'nxtText' });
+        this.rg = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "rg" }] : /* istanbul ignore next */ []));
+        this.text = input(undefined, { ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'nxtText' });
         this.newValue = output();
     }
     inputChange(event) {
@@ -724,10 +727,10 @@ class TextDirective {
             this.newValue.emit({ v: numeric, rg });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: TextDirective, isStandalone: true, selector: "[nxtText]", inputs: { rg: { classPropertyName: "rg", publicName: "rg", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "nxtText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { newValue: "newValue" }, host: { listeners: { "input": "inputChange($event)", "change": "inputChange($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TextDirective, isStandalone: true, selector: "[nxtText]", inputs: { rg: { classPropertyName: "rg", publicName: "rg", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "nxtText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { newValue: "newValue" }, host: { listeners: { "input": "inputChange($event)", "change": "inputChange($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nxtText]',
@@ -1273,7 +1276,9 @@ class ColorPickerComponent {
             }
         }
     }
-    onRemovePresetColor(value) {
+    onRemovePresetColor(value, evt) {
+        evt.stopPropagation();
+        evt.preventDefault();
         this.presetColors = this.presetColors?.filter((color) => (color != value));
         if (this.callbacks) {
             this.callbacks.presetColorsChanged(this.presetColors);
@@ -1358,10 +1363,10 @@ class ColorPickerComponent {
     formatAlpha(a) {
         return a?.toFixed(2).replace(/\.?0+$/, '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ColorPickerComponent, isStandalone: true, selector: "nxt-color-picker", host: { listeners: { "document:keyup.esc": "onCancel($event)", "document:keyup.enter": "onAccept($event)", "document:mousedown": "onFocusChange($event)", "document:focusin": "onFocusChange($event)", "click": "onClick($event)" } }, ngImport: i0, template: "@if (show) {\r\n<div class=\"color-picker\"\r\n    [style]=\"{\r\n        visibility: !show ? 'hidden' : 'visible',\r\n        width: width || '',\r\n        height: height || ''\r\n    }\">\r\n    @if (dialogDisplay == 'popup') {\r\n    <div class=\"color-picker__arrow\"></div>\r\n    }\r\n    @if (mode == colorModeInternal.color) {\r\n    <div 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        [style.backgroundColor]=\"hueSliderColor || ''\">\r\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n            [class.color-picker__cursor--light]=\"svSliderLight\"\r\n            [style]=\"{\r\n                top: (slider?.v || 0) * 100 + '%',\r\n                left: (slider?.s || 0) * 100 + '%'\r\n            }\"></div>\r\n    </div>\r\n    }\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 [style.backgroundColor]=\"selectedColor || ''\">@if (presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)) {\r\n                    <button 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                        [class.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>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"color-picker__hav\">\r\n            @if (mode == colorModeInternal.color) {\r\n            <div 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                    [class.color-picker__cursor--light]=\"hueSliderLight\"\r\n                    [style.left]=\"(slider?.h || 0) * 100 + '%'\"></div>\r\n            </div>\r\n            }\r\n            @if (mode == colorModeInternal.grayscale) {\r\n            <div 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                    [class.color-picker__cursor--light]=\"valueSliderLight\"\r\n                    [style.left]=\"(1 - (slider?.v || 0)) * 100 + '%'\"></div>\r\n            </div>\r\n            }\r\n            @if (alphaChannel != 'disabled') {\r\n            <div 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                    [style.backgroundImage]=\"alphaSliderColor || ''\">\r\n                    <div class=\"color-picker__cursor\"\r\n                        [class.color-picker__cursor--light]=\"alphaSliderLight\"\r\n                        [style.left]=\"(slider?.a || 0) * 100 + '%'\"></div>\r\n                </div>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if (!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)) {\r\n    <div class=\"color-picker__inputs\">\r\n        <div class=\"color-picker__input-fields\">\r\n            @if (mode == colorModeInternal.grayscale) {\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            @if (alphaChannel != 'disabled') {\r\n            <div 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            }\r\n            } @else {\r\n            @switch (format) {\r\n            @case ('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            @if (alphaChannel != 'disabled') {\r\n            <div 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            }\r\n            }\r\n            @case ('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            @if (alphaChannel != 'disabled') {\r\n            <div 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            }\r\n            }\r\n            @case ('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            @if (alphaChannel != 'disabled') {\r\n            <div 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            }\r\n            }\r\n            @default {\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            @if (alphaChannel == 'forced') {\r\n            <div 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            }\r\n            }\r\n            }\r\n            }\r\n        </div>\r\n        @if (mode == colorModeInternal.color) {\r\n        <div 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        }\r\n    </div>\r\n    }\r\n    @if (presetColors?.length) {\r\n    <div class=\"color-picker__separator\"></div>\r\n    <div class=\"color-picker__preset\">\r\n        @if (presetLabel) {\r\n        <div class=\"color-picker__preset-label\">\r\n            @if (presetLabel === true) {\r\n            <ng-container i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n            } @else {\r\n            {{ presetLabel }}\r\n            }\r\n        </div>\r\n        }\r\n        @if (presetColors?.length) {\r\n        <div class=\"color-picker__preset-items\">\r\n            @for (color of presetColors; track color) {\r\n            @if (stringToRgba(color); as rgba) {\r\n            <div 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                    [style.backgroundColor]=\"rgba || ''\">@if (presetColorsEditable) {\r\n                    <button 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>\r\n                    }\r\n                </div>\r\n            </div>\r\n            }\r\n            }\r\n            @for (i of fill(50); track $index) {\r\n            <div class=\"color-picker__preset-item\"></div>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n    @if (okButton || cancelButton) {\r\n    <div class=\"color-picker__buttons\">\r\n        @if (cancelButton) {\r\n        <button type=\"button\"\r\n            (click)=\"onCancel($event)\"\r\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n        }\r\n        @if (okButton) {\r\n        <button type=\"button\"\r\n            (click)=\"onAccept($event)\"\r\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n}\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: SliderDirective, selector: "[nxtSlider]", inputs: ["rgX", "rgY", "nxtSlider"], outputs: ["dragEnd", "dragStart", "newValue"] }, { kind: "directive", type: TextDirective, selector: "[nxtText]", inputs: ["rg", "nxtText"], outputs: ["newValue"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorPickerComponent, isStandalone: true, selector: "nxt-color-picker", host: { listeners: { "document:keyup.esc": "onCancel($event)", "document:keyup.enter": "onAccept($event)", "document:mousedown": "onFocusChange($event)", "document:focusin": "onFocusChange($event)", "click": "onClick($event)" } }, ngImport: i0, template: "@if (show) {\n<div class=\"color-picker\"\n    [style]=\"{\n        visibility: !show ? 'hidden' : 'visible',\n        width: width || '',\n        height: height || ''\n    }\">\n    @if (dialogDisplay == 'popup') {\n    <div class=\"color-picker__arrow\"></div>\n    }\n    @if (mode == colorModeInternal.color) {\n    <div class=\"color-picker__sv\"\n        nxtSlider\n        [rgX]=\"1\"\n        [rgY]=\"1\"\n        (newValue)=\"onColorChange($event)\"\n        (dragStart)=\"onDragStart('saturation-lightness')\"\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\n        [style.backgroundColor]=\"hueSliderColor || ''\">\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\n            [class.color-picker__cursor--light]=\"svSliderLight\"\n            [style]=\"{\n                top: (slider?.v || 0) * 100 + '%',\n                left: (slider?.s || 0) * 100 + '%'\n            }\"></div>\n    </div>\n    }\n    <div class=\"color-picker__controls\">\n        <div class=\"color-picker__selected\">\n            <div class=\"color-picker__selected-color\">\n                <div [style.backgroundColor]=\"selectedColor || ''\">@if (presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)) {\n                    <button type=\"button\"\n                        title=\"Add color to preset\"\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\n                        class=\"color-picker__add-selected\"\n                        [class.color-picker__add-selected--light]=\"alphaSliderLight\"\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\">\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n                            <path d=\"M0 0h24v24H0z\"\n                                fill=\"none\" />\n                        </svg></button>\n                    }\n                </div>\n            </div>\n        </div>\n        <div class=\"color-picker__hav\">\n            @if (mode == colorModeInternal.color) {\n            <div class=\"color-picker__slider color-picker__slider--hue\"\n                nxtSlider\n                [rgX]=\"1\"\n                (newValue)=\"onHueChange($event)\"\n                (dragStart)=\"onDragStart('hue')\"\n                (dragEnd)=\"onDragEnd('hue')\">\n                <div class=\"color-picker__cursor\"\n                    [class.color-picker__cursor--light]=\"hueSliderLight\"\n                    [style.left]=\"(slider?.h || 0) * 100 + '%'\"></div>\n            </div>\n            }\n            @if (mode == colorModeInternal.grayscale) {\n            <div class=\"color-picker__slider color-picker__slider--value\"\n                nxtSlider\n                [rgX]=\"1\"\n                (newValue)=\"onValueChange($event)\"\n                (dragStart)=\"onDragStart('value')\"\n                (dragEnd)=\"onDragEnd('value')\">\n                <div class=\"color-picker__cursor\"\n                    [class.color-picker__cursor--light]=\"valueSliderLight\"\n                    [style.left]=\"(1 - (slider?.v || 0)) * 100 + '%'\"></div>\n            </div>\n            }\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__slider color-picker__slider--alpha\"\n                nxtSlider\n                [rgX]=\"1\"\n                (newValue)=\"onAlphaChange($event)\"\n                (dragStart)=\"onDragStart('alpha')\"\n                (dragEnd)=\"onDragEnd('alpha')\">\n                <div class=\"color-picker__slider--alpha-bg\"\n                    [style.backgroundImage]=\"alphaSliderColor || ''\">\n                    <div class=\"color-picker__cursor\"\n                        [class.color-picker__cursor--light]=\"alphaSliderLight\"\n                        [style.left]=\"(slider?.a || 0) * 100 + '%'\"></div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n    @if (!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)) {\n    <div class=\"color-picker__inputs\">\n        <div class=\"color-picker__input-fields\">\n            @if (mode == colorModeInternal.grayscale) {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"hslaText?.l?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onValueInput($event)\" />\n                <span class=\"color-picker__input-field-label\">V</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hslaText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            } @else {\n            @switch (format) {\n            @case ('hsla') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"360\"\n                    nxtText\n                    [rg]=\"360\"\n                    [value]=\"hslaText?.h?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onHueInput($event)\" />\n                <span class=\"color-picker__input-field-label\">H</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"hslaText?.s?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onSaturationInput($event)\" />\n                <span class=\"color-picker__input-field-label\">S</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"hslaText?.l?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onLightnessInput($event)\" />\n                <span class=\"color-picker__input-field-label\">L</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hslaText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            @case ('rgba') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"255\"\n                    nxtText\n                    [rg]=\"255\"\n                    [value]=\"rgbaText?.r?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onRedInput($event)\" />\n                <span class=\"color-picker__input-field-label\">R</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"255\"\n                    nxtText\n                    [rg]=\"255\"\n                    [value]=\"rgbaText?.g?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onGreenInput($event)\" />\n                <span class=\"color-picker__input-field-label\">G</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"255\"\n                    nxtText\n                    [rg]=\"255\"\n                    [value]=\"rgbaText?.b?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onBlueInput($event)\" />\n                <span class=\"color-picker__input-field-label\">B</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hslaText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            @case ('cmyk') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.c?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onCyanInput($event)\" />\n                <span class=\"color-picker__input-field-label\">C</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.m?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onMagentaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">M</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.y?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onYellowInput($event)\" />\n                <span class=\"color-picker__input-field-label\">Y</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.k?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onBlackInput($event)\" />\n                <span class=\"color-picker__input-field-label\">K</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(cmykText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            @default {\n            <div class=\"color-picker__input-field\">\n                <input nxtText\n                    [value]=\"hexText\"\n                    (blur)=\"onHexInput()\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onHexInput($event)\" />\n                <span class=\"color-picker__input-field-label\">Hex</span>\n            </div>\n            @if (alphaChannel == 'forced') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hexAlpha)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            }\n            }\n        </div>\n        @if (mode == colorModeInternal.color) {\n        <div class=\"color-picker__input-type\">\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(1)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"onFormatToggle(1)\"></span>\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(-1)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"onFormatToggle(-1)\"></span>\n        </div>\n        }\n    </div>\n    }\n    @if (presetColors?.length) {\n    <div class=\"color-picker__separator\"></div>\n    <div class=\"color-picker__preset\">\n        @if (presetLabel) {\n        <div class=\"color-picker__preset-label\">\n            @if (presetLabel === true) {\n            <ng-container i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\n            } @else {\n            {{ presetLabel }}\n            }\n        </div>\n        }\n        <div class=\"color-picker__preset-items\">\n            @for (color of presetColors; track color) {\n            @if (stringToRgba(color); as rgba) {\n            <div class=\"color-picker__preset-item\"\n                [title]=\"color\"\n                (click)=\"setColorFromString(color)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"setColorFromString(color)\">\n                <div class=\"color-picker__preset-item-fill\"\n                    [style.backgroundColor]=\"rgba || ''\">@if (presetColorsEditable) {\n                    <button type=\"button\"\n                        title=\"Remove Color\"\n                        i18n-title=\"@@nxt-color-picker.button.remove-color\"\n                        class=\"color-picker__remove-selected\"\n                        (click)=\"onRemovePresetColor(color, $event)\"\n                        tabindex=\"0\"\n                        (keydown.enter)=\"onRemovePresetColor(color, $event)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\">\n                            <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                            <path d=\"M0 0h24v24H0z\"\n                                fill=\"none\" />\n                        </svg></button>\n                    }\n                </div>\n            </div>\n            }\n            }\n            @for (i of fill(50); track $index) {\n            <div class=\"color-picker__preset-item\"></div>\n            }\n        </div>\n    </div>\n    }\n    @if (okButton || cancelButton) {\n    <div class=\"color-picker__buttons\">\n        @if (cancelButton) {\n        <button type=\"button\"\n            (click)=\"onCancel($event)\"\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\n        }\n        @if (okButton) {\n        <button type=\"button\"\n            (click)=\"onAccept($event)\"\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\n        }\n    </div>\n    }\n</div>\n}\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,#0000,#000),linear-gradient(to right,#fff,#fff0);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,#000,#fff)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"], dependencies: [{ kind: "directive", type: SliderDirective, selector: "[nxtSlider]", inputs: ["rgX", "rgY", "nxtSlider"], outputs: ["dragEnd", "dragStart", "newValue"] }, { kind: "directive", type: TextDirective, selector: "[nxtText]", inputs: ["rg", "nxtText"], outputs: ["newValue"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxt-color-picker', encapsulation: ViewEncapsulation.Emulated, imports: [
                         SliderDirective,
@@ -1372,7 +1377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         '(document:mousedown)': 'onFocusChange($event)',
                         '(document:focusin)': 'onFocusChange($event)',
                         '(click)': 'onClick($event)'
-                    }, template: "@if (show) {\r\n<div class=\"color-picker\"\r\n    [style]=\"{\r\n        visibility: !show ? 'hidden' : 'visible',\r\n        width: width || '',\r\n        height: height || ''\r\n    }\">\r\n    @if (dialogDisplay == 'popup') {\r\n    <div class=\"color-picker__arrow\"></div>\r\n    }\r\n    @if (mode == colorModeInternal.color) {\r\n    <div 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        [style.backgroundColor]=\"hueSliderColor || ''\">\r\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n            [class.color-picker__cursor--light]=\"svSliderLight\"\r\n            [style]=\"{\r\n                top: (slider?.v || 0) * 100 + '%',\r\n                left: (slider?.s || 0) * 100 + '%'\r\n            }\"></div>\r\n    </div>\r\n    }\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 [style.backgroundColor]=\"selectedColor || ''\">@if (presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)) {\r\n                    <button 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                        [class.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>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"color-picker__hav\">\r\n            @if (mode == colorModeInternal.color) {\r\n            <div 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                    [class.color-picker__cursor--light]=\"hueSliderLight\"\r\n                    [style.left]=\"(slider?.h || 0) * 100 + '%'\"></div>\r\n            </div>\r\n            }\r\n            @if (mode == colorModeInternal.grayscale) {\r\n            <div 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                    [class.color-picker__cursor--light]=\"valueSliderLight\"\r\n                    [style.left]=\"(1 - (slider?.v || 0)) * 100 + '%'\"></div>\r\n            </div>\r\n            }\r\n            @if (alphaChannel != 'disabled') {\r\n            <div 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                    [style.backgroundImage]=\"alphaSliderColor || ''\">\r\n                    <div class=\"color-picker__cursor\"\r\n                        [class.color-picker__cursor--light]=\"alphaSliderLight\"\r\n                        [style.left]=\"(slider?.a || 0) * 100 + '%'\"></div>\r\n                </div>\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if (!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)) {\r\n    <div class=\"color-picker__inputs\">\r\n        <div class=\"color-picker__input-fields\">\r\n            @if (mode == colorModeInternal.grayscale) {\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            @if (alphaChannel != 'disabled') {\r\n            <div 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            }\r\n            } @else {\r\n            @switch (format) {\r\n            @case ('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            @if (alphaChannel != 'disabled') {\r\n            <div 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            }\r\n            }\r\n            @case ('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            @if (alphaChannel != 'disabled') {\r\n            <div 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            }\r\n            }\r\n            @case ('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            @if (alphaChannel != 'disabled') {\r\n            <div 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            }\r\n            }\r\n            @default {\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            @if (alphaChannel == 'forced') {\r\n            <div 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            }\r\n            }\r\n            }\r\n            }\r\n        </div>\r\n        @if (mode == colorModeInternal.color) {\r\n        <div 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        }\r\n    </div>\r\n    }\r\n    @if (presetColors?.length) {\r\n    <div class=\"color-picker__separator\"></div>\r\n    <div class=\"color-picker__preset\">\r\n        @if (presetLabel) {\r\n        <div class=\"color-picker__preset-label\">\r\n            @if (presetLabel === true) {\r\n            <ng-container i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n            } @else {\r\n            {{ presetLabel }}\r\n            }\r\n        </div>\r\n        }\r\n        @if (presetColors?.length) {\r\n        <div class=\"color-picker__preset-items\">\r\n            @for (color of presetColors; track color) {\r\n            @if (stringToRgba(color); as rgba) {\r\n            <div 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                    [style.backgroundColor]=\"rgba || ''\">@if (presetColorsEditable) {\r\n                    <button 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>\r\n                    }\r\n                </div>\r\n            </div>\r\n            }\r\n            }\r\n            @for (i of fill(50); track $index) {\r\n            <div class=\"color-picker__preset-item\"></div>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n    @if (okButton || cancelButton) {\r\n    <div class=\"color-picker__buttons\">\r\n        @if (cancelButton) {\r\n        <button type=\"button\"\r\n            (click)=\"onCancel($event)\"\r\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n        }\r\n        @if (okButton) {\r\n        <button type=\"button\"\r\n            (click)=\"onAccept($event)\"\r\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n}\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"] }]
+                    }, template: "@if (show) {\n<div class=\"color-picker\"\n    [style]=\"{\n        visibility: !show ? 'hidden' : 'visible',\n        width: width || '',\n        height: height || ''\n    }\">\n    @if (dialogDisplay == 'popup') {\n    <div class=\"color-picker__arrow\"></div>\n    }\n    @if (mode == colorModeInternal.color) {\n    <div class=\"color-picker__sv\"\n        nxtSlider\n        [rgX]=\"1\"\n        [rgY]=\"1\"\n        (newValue)=\"onColorChange($event)\"\n        (dragStart)=\"onDragStart('saturation-lightness')\"\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\n        [style.backgroundColor]=\"hueSliderColor || ''\">\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\n            [class.color-picker__cursor--light]=\"svSliderLight\"\n            [style]=\"{\n                top: (slider?.v || 0) * 100 + '%',\n                left: (slider?.s || 0) * 100 + '%'\n            }\"></div>\n    </div>\n    }\n    <div class=\"color-picker__controls\">\n        <div class=\"color-picker__selected\">\n            <div class=\"color-picker__selected-color\">\n                <div [style.backgroundColor]=\"selectedColor || ''\">@if (presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)) {\n                    <button type=\"button\"\n                        title=\"Add color to preset\"\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\n                        class=\"color-picker__add-selected\"\n                        [class.color-picker__add-selected--light]=\"alphaSliderLight\"\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\">\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n                            <path d=\"M0 0h24v24H0z\"\n                                fill=\"none\" />\n                        </svg></button>\n                    }\n                </div>\n            </div>\n        </div>\n        <div class=\"color-picker__hav\">\n            @if (mode == colorModeInternal.color) {\n            <div class=\"color-picker__slider color-picker__slider--hue\"\n                nxtSlider\n                [rgX]=\"1\"\n                (newValue)=\"onHueChange($event)\"\n                (dragStart)=\"onDragStart('hue')\"\n                (dragEnd)=\"onDragEnd('hue')\">\n                <div class=\"color-picker__cursor\"\n                    [class.color-picker__cursor--light]=\"hueSliderLight\"\n                    [style.left]=\"(slider?.h || 0) * 100 + '%'\"></div>\n            </div>\n            }\n            @if (mode == colorModeInternal.grayscale) {\n            <div class=\"color-picker__slider color-picker__slider--value\"\n                nxtSlider\n                [rgX]=\"1\"\n                (newValue)=\"onValueChange($event)\"\n                (dragStart)=\"onDragStart('value')\"\n                (dragEnd)=\"onDragEnd('value')\">\n                <div class=\"color-picker__cursor\"\n                    [class.color-picker__cursor--light]=\"valueSliderLight\"\n                    [style.left]=\"(1 - (slider?.v || 0)) * 100 + '%'\"></div>\n            </div>\n            }\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__slider color-picker__slider--alpha\"\n                nxtSlider\n                [rgX]=\"1\"\n                (newValue)=\"onAlphaChange($event)\"\n                (dragStart)=\"onDragStart('alpha')\"\n                (dragEnd)=\"onDragEnd('alpha')\">\n                <div class=\"color-picker__slider--alpha-bg\"\n                    [style.backgroundImage]=\"alphaSliderColor || ''\">\n                    <div class=\"color-picker__cursor\"\n                        [class.color-picker__cursor--light]=\"alphaSliderLight\"\n                        [style.left]=\"(slider?.a || 0) * 100 + '%'\"></div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n    @if (!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)) {\n    <div class=\"color-picker__inputs\">\n        <div class=\"color-picker__input-fields\">\n            @if (mode == colorModeInternal.grayscale) {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"hslaText?.l?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onValueInput($event)\" />\n                <span class=\"color-picker__input-field-label\">V</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hslaText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            } @else {\n            @switch (format) {\n            @case ('hsla') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"360\"\n                    nxtText\n                    [rg]=\"360\"\n                    [value]=\"hslaText?.h?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onHueInput($event)\" />\n                <span class=\"color-picker__input-field-label\">H</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"hslaText?.s?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onSaturationInput($event)\" />\n                <span class=\"color-picker__input-field-label\">S</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"hslaText?.l?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onLightnessInput($event)\" />\n                <span class=\"color-picker__input-field-label\">L</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hslaText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            @case ('rgba') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"255\"\n                    nxtText\n                    [rg]=\"255\"\n                    [value]=\"rgbaText?.r?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onRedInput($event)\" />\n                <span class=\"color-picker__input-field-label\">R</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"255\"\n                    nxtText\n                    [rg]=\"255\"\n                    [value]=\"rgbaText?.g?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onGreenInput($event)\" />\n                <span class=\"color-picker__input-field-label\">G</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"255\"\n                    nxtText\n                    [rg]=\"255\"\n                    [value]=\"rgbaText?.b?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onBlueInput($event)\" />\n                <span class=\"color-picker__input-field-label\">B</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hslaText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            @case ('cmyk') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.c?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onCyanInput($event)\" />\n                <span class=\"color-picker__input-field-label\">C</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.m?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onMagentaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">M</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.y?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onYellowInput($event)\" />\n                <span class=\"color-picker__input-field-label\">Y</span>\n            </div>\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]*\"\n                    min=\"0\"\n                    max=\"100\"\n                    nxtText\n                    [rg]=\"100\"\n                    [value]=\"cmykText?.k?.toFixed(0)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onBlackInput($event)\" />\n                <span class=\"color-picker__input-field-label\">K</span>\n            </div>\n            @if (alphaChannel != 'disabled') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(cmykText?.a)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            @default {\n            <div class=\"color-picker__input-field\">\n                <input nxtText\n                    [value]=\"hexText\"\n                    (blur)=\"onHexInput()\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onHexInput($event)\" />\n                <span class=\"color-picker__input-field-label\">Hex</span>\n            </div>\n            @if (alphaChannel == 'forced') {\n            <div class=\"color-picker__input-field\">\n                <input type=\"number\"\n                    pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    nxtText\n                    [rg]=\"1\"\n                    [value]=\"formatAlpha(hexAlpha)\"\n                    (keyup.enter)=\"onAccept($event)\"\n                    (newValue)=\"onAlphaInput($event)\" />\n                <span class=\"color-picker__input-field-label\">A</span>\n            </div>\n            }\n            }\n            }\n            }\n        </div>\n        @if (mode == colorModeInternal.color) {\n        <div class=\"color-picker__input-type\">\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(1)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"onFormatToggle(1)\"></span>\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(-1)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"onFormatToggle(-1)\"></span>\n        </div>\n        }\n    </div>\n    }\n    @if (presetColors?.length) {\n    <div class=\"color-picker__separator\"></div>\n    <div class=\"color-picker__preset\">\n        @if (presetLabel) {\n        <div class=\"color-picker__preset-label\">\n            @if (presetLabel === true) {\n            <ng-container i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\n            } @else {\n            {{ presetLabel }}\n            }\n        </div>\n        }\n        <div class=\"color-picker__preset-items\">\n            @for (color of presetColors; track color) {\n            @if (stringToRgba(color); as rgba) {\n            <div class=\"color-picker__preset-item\"\n                [title]=\"color\"\n                (click)=\"setColorFromString(color)\"\n                tabindex=\"0\"\n                (keydown.enter)=\"setColorFromString(color)\">\n                <div class=\"color-picker__preset-item-fill\"\n                    [style.backgroundColor]=\"rgba || ''\">@if (presetColorsEditable) {\n                    <button type=\"button\"\n                        title=\"Remove Color\"\n                        i18n-title=\"@@nxt-color-picker.button.remove-color\"\n                        class=\"color-picker__remove-selected\"\n                        (click)=\"onRemovePresetColor(color, $event)\"\n                        tabindex=\"0\"\n                        (keydown.enter)=\"onRemovePresetColor(color, $event)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\">\n                            <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                            <path d=\"M0 0h24v24H0z\"\n                                fill=\"none\" />\n                        </svg></button>\n                    }\n                </div>\n            </div>\n            }\n            }\n            @for (i of fill(50); track $index) {\n            <div class=\"color-picker__preset-item\"></div>\n            }\n        </div>\n    </div>\n    }\n    @if (okButton || cancelButton) {\n    <div class=\"color-picker__buttons\">\n        @if (cancelButton) {\n        <button type=\"button\"\n            (click)=\"onCancel($event)\"\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\n        }\n        @if (okButton) {\n        <button type=\"button\"\n            (click)=\"onAccept($event)\"\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\n        }\n    </div>\n    }\n</div>\n}\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,#0000,#000),linear-gradient(to right,#fff,#fff0);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,#000,#fff)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"] }]
         }] });
 
 class ColorPickerDirective {
@@ -1420,63 +1425,86 @@ class ColorPickerDirective {
             }
         };
         /** The color to show in the color picker dialog */
-        this._nxtColor = input(undefined, { ...(ngDevMode ? { debugName: "_nxtColor" } : {}), alias: 'nxtColor' });
-        this.nxtColor = linkedSignal({ ...(ngDevMode ? { debugName: "nxtColor" } : {}), source: () => this._nxtColor(),
+        this._nxtColor = input(undefined, { ...(ngDevMode ? { debugName: "_nxtColor" } : /* istanbul ignore next */ {}), alias: 'nxtColor' });
+        this.nxtColor = linkedSignal({ ...(ngDevMode ? { debugName: "nxtColor" } : /* istanbul ignore next */ {}), source: () => this._nxtColor(),
             computation: v => v });
         /** Use this option to set color picker dialog width */
-        this.width = input('230px', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.width = input('230px', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
         /** Use this option to force color picker dialog height */
-        this.height = input('auto', ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.height = input('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
         /** Sets the default open / close state of the color picker */
-        this.toggle = input(false, ...(ngDevMode ? [{ debugName: "toggle" }] : []));
+        this.toggle = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
         /** Disables opening of the color picker dialog via toggle */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /** Dialog color mode */
-        this.mode = input('color', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.mode = input('color', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         /** Enables CMYK input format and color change event */
-        this.cmykEnabled = input(false, ...(ngDevMode ? [{ debugName: "cmykEnabled" }] : []));
+        this.cmykEnabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cmykEnabled" }] : /* istanbul ignore next */ []));
         /** Output color format */
-        this.outputFormat = input(OutputFormatEnum.auto, ...(ngDevMode ? [{ debugName: "outputFormat" }] : []));
+        this.outputFormat = input(OutputFormatEnum.auto, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "outputFormat" }] : /* istanbul ignore next */ []));
         /** Alpha channel mode */
-        this.alphaChannel = input(AlphaChannelEnum.enabled, ...(ngDevMode ? [{ debugName: "alphaChannel" }] : []));
+        this.alphaChannel = input(AlphaChannelEnum.enabled, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alphaChannel" }] : /* istanbul ignore next */ []));
         /** Used when the color is not well-formed or is undefined */
-        this.fallbackColor = input(...(ngDevMode ? [undefined, { debugName: "fallbackColor" }] : []));
+        this.fallbackColor = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "fallbackColor" }] : /* istanbul ignore next */ []));
         /** Dialog position */
-        this.position = input(DialogPositionEnum.auto, ...(ngDevMode ? [{ debugName: "position" }] : []));
+        this.position = input(DialogPositionEnum.auto, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
         /** Dialog offset percentage relative to the directive element */
-        this.positionOffset = input(0, ...(ngDevMode ? [{ debugName: "positionOffset" }] : []));
+        this.positionOffset = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "positionOffset" }] : /* istanbul ignore next */ []));
         /**
          * Show label for preset colors
          *
          * If string is given, it overrides the default label.
          */
-        this.presetLabel = input(true, ...(ngDevMode ? [{ debugName: "presetLabel" }] : []));
+        this.presetLabel = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "presetLabel" }] : /* istanbul ignore next */ []));
         /** Array of preset colors to show in the color picker dialog */
-        this.presetColors = input(...(ngDevMode ? [undefined, { debugName: "presetColors" }] : []));
+        this.presetColors = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "presetColors" }] : /* istanbul ignore next */ []));
         /** Disables / hides the color input field from the dialog */
-        this.disableInput = input(false, ...(ngDevMode ? [{ debugName: "disableInput" }] : []));
+        this.disableInput = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disableInput" }] : /* istanbul ignore next */ []));
         /** Dialog positioning mode */
-        this.dialogDisplay = input(DialogDisplayEnum.popup, ...(ngDevMode ? [{ debugName: "dialogDisplay" }] : []));
+        this.dialogDisplay = input(DialogDisplayEnum.popup, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogDisplay" }] : /* istanbul ignore next */ []));
         /** Array of HTML elements that will be ignored when clicked */
-        this.ignoredElements = input(...(ngDevMode ? [undefined, { debugName: "ignoredElements" }] : []));
+        this.ignoredElements = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "ignoredElements" }] : /* istanbul ignore next */ []));
         /** Save currently selected color when user clicks outside */
-        this.saveClickOutside = input(true, ...(ngDevMode ? [{ debugName: "saveClickOutside" }] : []));
+        this.saveClickOutside = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "saveClickOutside" }] : /* istanbul ignore next */ []));
         /** Close the color picker dialog when user clicks outside */
-        this.closeClickOutside = input(true, ...(ngDevMode ? [{ debugName: "closeClickOutside" }] : []));
+        this.closeClickOutside = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeClickOutside" }] : /* istanbul ignore next */ []));
         /** Show an OK / Apply button which saves the color */
-        this.okButton = input(false, ...(ngDevMode ? [{ debugName: "okButton" }] : []));
+        this.okButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "okButton" }] : /* istanbul ignore next */ []));
         /** Show a Cancel / Reset button which resets the color */
-        this.cancelButton = input(false, ...(ngDevMode ? [{ debugName: "cancelButton" }] : []));
+        this.cancelButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cancelButton" }] : /* istanbul ignore next */ []));
         /** Show buttons to add / remove preset colors */
-        this.presetColorsEditable = input(false, ...(ngDevMode ? [{ debugName: "presetColorsEditable" }] : []));
+        this.presetColorsEditable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "presetColorsEditable" }] : /* istanbul ignore next */ []));
         /** Use this option to set the max colors allowed in presets */
-        this.maxPresetColors = input(...(ngDevMode ? [undefined, { debugName: "maxPresetColors" }] : []));
+        this.maxPresetColors = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxPresetColors" }] : /* istanbul ignore next */ []));
         /**
          * Create dialog component in the root view container
          *
          * Note: The root component needs to have public viewContainerRef.
          */
-        this.useRootViewContainer = input(false, ...(ngDevMode ? [{ debugName: "useRootViewContainer" }] : []));
+        this.useRootViewContainer = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "useRootViewContainer" }] : /* istanbul ignore next */ []));
         /** Current color value, emit when dialog is isOpen */
         this.open = output();
         /** Current color value, emit when dialog is closed */
@@ -1710,10 +1738,10 @@ class ColorPickerDirective {
         }
         return pos;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: ColorPickerDirective, isStandalone: true, selector: "[nxtColor]", inputs: { _nxtColor: { classPropertyName: "_nxtColor", publicName: "nxtColor", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, cmykEnabled: { classPropertyName: "cmykEnabled", publicName: "cmykEnabled", isSignal: true, isRequired: false, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: false, transformFunction: null }, alphaChannel: { classPropertyName: "alphaChannel", publicName: "alphaChannel", isSignal: true, isRequired: false, transformFunction: null }, fallbackColor: { classPropertyName: "fallbackColor", publicName: "fallbackColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, positionOffset: { classPropertyName: "positionOffset", publicName: "positionOffset", isSignal: true, isRequired: false, transformFunction: null }, presetLabel: { classPropertyName: "presetLabel", publicName: "presetLabel", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, disableInput: { classPropertyName: "disableInput", publicName: "disableInput", isSignal: true, isRequired: false, transformFunction: null }, dialogDisplay: { classPropertyName: "dialogDisplay", publicName: "dialogDisplay", isSignal: true, isRequired: false, transformFunction: null }, ignoredElements: { classPropertyName: "ignoredElements", publicName: "ignoredElements", isSignal: true, isRequired: false, transformFunction: null }, saveClickOutside: { classPropertyName: "saveClickOutside", publicName: "saveClickOutside", isSignal: true, isRequired: false, transformFunction: null }, closeClickOutside: { classPropertyName: "closeClickOutside", publicName: "closeClickOutside", isSignal: true, isRequired: false, transformFunction: null }, okButton: { classPropertyName: "okButton", publicName: "okButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, presetColorsEditable: { classPropertyName: "presetColorsEditable", publicName: "presetColorsEditable", isSignal: true, isRequired: false, transformFunction: null }, maxPresetColors: { classPropertyName: "maxPresetColors", publicName: "maxPresetColors", isSignal: true, isRequired: false, transformFunction: null }, useRootViewContainer: { classPropertyName: "useRootViewContainer", publicName: "useRootViewContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "open", close: "close", inputChange: "inputChange", toggleChange: "toggleChange", sliderDragStart: "sliderDragStart", sliderChange: "sliderChange", sliderDragEnd: "sliderDragEnd", colorSelect: "colorSelect", colorSelectCancel: "colorSelectCancel", nxtColorChange: "nxtColorChange", cmykColorChange: "cmykColorChange", presetColorsChange: "presetColorsChange" }, host: { listeners: { "focus": "handleOpen($event)", "click": "handleOpen($event)", "input": "handleInput($event)", "change": "handleInput($event)" } }, exportAs: ["nxtColorPicker"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ColorPickerDirective, isStandalone: true, selector: "[nxtColor]", inputs: { _nxtColor: { classPropertyName: "_nxtColor", publicName: "nxtColor", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, cmykEnabled: { classPropertyName: "cmykEnabled", publicName: "cmykEnabled", isSignal: true, isRequired: false, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: false, transformFunction: null }, alphaChannel: { classPropertyName: "alphaChannel", publicName: "alphaChannel", isSignal: true, isRequired: false, transformFunction: null }, fallbackColor: { classPropertyName: "fallbackColor", publicName: "fallbackColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, positionOffset: { classPropertyName: "positionOffset", publicName: "positionOffset", isSignal: true, isRequired: false, transformFunction: null }, presetLabel: { classPropertyName: "presetLabel", publicName: "presetLabel", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, disableInput: { classPropertyName: "disableInput", publicName: "disableInput", isSignal: true, isRequired: false, transformFunction: null }, dialogDisplay: { classPropertyName: "dialogDisplay", publicName: "dialogDisplay", isSignal: true, isRequired: false, transformFunction: null }, ignoredElements: { classPropertyName: "ignoredElements", publicName: "ignoredElements", isSignal: true, isRequired: false, transformFunction: null }, saveClickOutside: { classPropertyName: "saveClickOutside", publicName: "saveClickOutside", isSignal: true, isRequired: false, transformFunction: null }, closeClickOutside: { classPropertyName: "closeClickOutside", publicName: "closeClickOutside", isSignal: true, isRequired: false, transformFunction: null }, okButton: { classPropertyName: "okButton", publicName: "okButton", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, presetColorsEditable: { classPropertyName: "presetColorsEditable", publicName: "presetColorsEditable", isSignal: true, isRequired: false, transformFunction: null }, maxPresetColors: { classPropertyName: "maxPresetColors", publicName: "maxPresetColors", isSignal: true, isRequired: false, transformFunction: null }, useRootViewContainer: { classPropertyName: "useRootViewContainer", publicName: "useRootViewContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "open", close: "close", inputChange: "inputChange", toggleChange: "toggleChange", sliderDragStart: "sliderDragStart", sliderChange: "sliderChange", sliderDragEnd: "sliderDragEnd", colorSelect: "colorSelect", colorSelectCancel: "colorSelectCancel", nxtColorChange: "nxtColorChange", cmykColorChange: "cmykColorChange", presetColorsChange: "presetColorsChange" }, host: { listeners: { "focus": "handleOpen($event)", "click": "handleOpen($event)", "input": "handleInput($event)", "change": "handleInput($event)" } }, exportAs: ["nxtColorPicker"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nxtColor]',
@@ -1727,24 +1755,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }], propDecorators: { _nxtColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxtColor", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], cmykEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "cmykEnabled", required: false }] }], outputFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputFormat", required: false }] }], alphaChannel: [{ type: i0.Input, args: [{ isSignal: true, alias: "alphaChannel", required: false }] }], fallbackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackColor", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], positionOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionOffset", required: false }] }], presetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetLabel", required: false }] }], presetColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetColors", required: false }] }], disableInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInput", required: false }] }], dialogDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogDisplay", required: false }] }], ignoredElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoredElements", required: false }] }], saveClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveClickOutside", required: false }] }], closeClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeClickOutside", required: false }] }], okButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "okButton", required: false }] }], cancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButton", required: false }] }], presetColorsEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetColorsEditable", required: false }] }], maxPresetColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPresetColors", required: false }] }], useRootViewContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "useRootViewContainer", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], close: [{ type: i0.Output, args: ["close"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], toggleChange: [{ type: i0.Output, args: ["toggleChange"] }], sliderDragStart: [{ type: i0.Output, args: ["sliderDragStart"] }], sliderChange: [{ type: i0.Output, args: ["sliderChange"] }], sliderDragEnd: [{ type: i0.Output, args: ["sliderDragEnd"] }], colorSelect: [{ type: i0.Output, args: ["colorSelect"] }], colorSelectCancel: [{ type: i0.Output, args: ["colorSelectCancel"] }], nxtColorChange: [{ type: i0.Output, args: ["nxtColorChange"] }], cmykColorChange: [{ type: i0.Output, args: ["cmykColorChange"] }], presetColorsChange: [{ type: i0.Output, args: ["presetColorsChange"] }] } });
 
-/** @deprecated use standalone imports */
-class ColorPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerModule, imports: [ColorPickerDirective], exports: [ColorPickerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        ColorPickerDirective
-                    ],
-                    exports: [
-                        ColorPickerDirective
-                    ]
-                }]
-        }] });
-
 /*
  * Public API Surface of nxt-color-picker
  */
@@ -1753,5 +1763,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * 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 };
+export { AlphaChannelEnum, AlphaEnabledFormats, Cmyk, ColorFormatEnum, ColorPickerDirective, DialogDisplayEnum, DialogPositionEnum, Hsla, Hsva, OutputFormatEnum, Rgba, calculateContrast, calculateLuminance, calculateMinimumAlpha, cmykToRgb, compositeAlpha, compositeColors, compositeComponent, denormalizeCMYK, denormalizeHSLA, denormalizeHSVA, denormalizeRGBA, formatCmyk, formatOutput, hslaToHsva, hsvaToHsla, hsvaToRgba, normalizeCMYK, normalizeHSLA, normalizeHSVA, normalizeRGBA, rgbaToCmyk, rgbaToHex, rgbaToHsva, stringToCmyk, stringToHsva };
 //# sourceMappingURL=nxt-color-picker.mjs.map