nxt-color-picker 18.0.0 → 19.0.4

package/fesm2022/nxt-color-picker.mjs

@@ -617,10 +617,10 @@ class ColorPickerService {
             this.active = active;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ColorPickerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ColorPickerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ColorPickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ColorPickerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -644,13 +644,14 @@ class TextDirective {
             this.newValue.emit({ v: numeric, rg: this.rg });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: TextDirective, selector: "[nxtText]", inputs: { rg: "rg", text: ["nxtText", "text"] }, outputs: { newValue: "newValue" }, host: { listeners: { "input": "inputChange($event)", "change": "inputChange($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: TextDirective, isStandalone: false, selector: "[nxtText]", inputs: { rg: "rg", text: ["nxtText", "text"] }, outputs: { newValue: "newValue" }, host: { listeners: { "input": "inputChange($event)", "change": "inputChange($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TextDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[nxtText]'
+                    selector: '[nxtText]',
+                    standalone: false
                 }]
         }], propDecorators: { rg: [{
                 type: Input
@@ -725,13 +726,14 @@ class SliderDirective {
             this.newValue.emit({ v: x / width, rgX: this.rgX });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SliderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: SliderDirective, selector: "[nxtSlider]", inputs: { rgX: "rgX", rgY: "rgY", slider: ["nxtSlider", "slider"] }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", newValue: "newValue" }, host: { listeners: { "mousedown": "onStart($event)", "touchstart": "onStart($event)", "document:mousemove": "onMove($event)", "document:touchmove": "onMove($event)", "document:mouseup": "onStop($event)", "document:touchend": "onStop($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SliderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SliderDirective, isStandalone: false, selector: "[nxtSlider]", inputs: { rgX: "rgX", rgY: "rgY", slider: ["nxtSlider", "slider"] }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", newValue: "newValue" }, host: { listeners: { "mousedown": "onStart($event)", "touchstart": "onStart($event)", "document:mousemove": "onMove($event)", "document:touchmove": "onMove($event)", "document:mouseup": "onStop($event)", "document:touchend": "onStop($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SliderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SliderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[nxtSlider]'
+                    selector: '[nxtSlider]',
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { rgX: [{
                 type: Input
@@ -1388,12 +1390,12 @@ class ColorPickerComponent {
     formatAlpha(a) {
         return a?.toFixed(2).replace(/\.?0+$/, '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ColorPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: ColorPickerComponent, selector: "nxt-color-picker", host: { listeners: { "document:keyup.esc": "onCancel($event)", "document:keyup.enter": "onAccept($event)", "document:mousedown": "onFocusChange($event)", "document:focusin": "onFocusChange($event)" } }, ngImport: i0, template: "<div class=\"color-picker\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    [ngStyle]=\"{\r\n        visibility: !show ? 'hidden' : 'visible',\r\n        width: width || '',\r\n        height: height || ''\r\n    }\"\r\n    *ngIf=\"show\">\r\n    <div *ngIf=\"dialogDisplay == 'popup'\"\r\n        class=\"color-picker__arrow\"></div>\r\n    <div *ngIf=\"mode == colorModeInternal.color\"\r\n        class=\"color-picker__sv\"\r\n        nxtSlider\r\n        [rgX]=\"1\"\r\n        [rgY]=\"1\"\r\n        (newValue)=\"onColorChange($event)\"\r\n        (dragStart)=\"onDragStart('saturation-lightness')\"\r\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\r\n        [ngStyle]=\"{ \r\n            backgroundColor: hueSliderColor || ''\r\n        }\">\r\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n            [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\r\n            [ngStyle]=\"{\r\n                top: (slider?.v || 0) * 100 + '%',\r\n                left: (slider?.s || 0) * 100 + '%'\r\n            }\"></div>\r\n    </div>\r\n    <div class=\"color-picker__controls\">\r\n        <div class=\"color-picker__selected\">\r\n            <div class=\"color-picker__selected-color\">\r\n                <div [ngStyle]=\"{ \r\n                    backgroundColor: selectedColor || ''\r\n                }\"><button *ngIf=\"presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)\"\r\n                        type=\"button\"\r\n                        title=\"Add color to preset\"\r\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\r\n                        class=\"color-picker__add-selected\"\r\n                        [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\r\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                            width=\"24\"\r\n                            height=\"24\"\r\n                            viewBox=\"0 0 24 24\">\r\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n                            <path d=\"M0 0h24v24H0z\"\r\n                                fill=\"none\" />\r\n                        </svg></button></div>\r\n            </div>\r\n        </div>\r\n        <div class=\"color-picker__hav\">\r\n            <div *ngIf=\"mode == colorModeInternal.color\"\r\n                class=\"color-picker__slider color-picker__slider--hue\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onHueChange($event)\"\r\n                (dragStart)=\"onDragStart('hue')\"\r\n                (dragEnd)=\"onDragEnd('hue')\">\r\n                <div class=\"color-picker__cursor\"\r\n                    [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\r\n                    [ngStyle]=\"{\r\n                        left: (slider?.h || 0) * 100 + '%'\r\n                    }\"></div>\r\n            </div>\r\n            <div *ngIf=\"mode == colorModeInternal.grayscale\"\r\n                class=\"color-picker__slider color-picker__slider--value\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onValueChange($event)\"\r\n                (dragStart)=\"onDragStart('value')\"\r\n                (dragEnd)=\"onDragEnd('value')\">\r\n                <div class=\"color-picker__cursor\"\r\n                    [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\r\n                    [ngStyle]=\"{\r\n                        left: (1 - (slider?.v || 0)) * 100 + '%'\r\n                    }\"></div>\r\n            </div>\r\n            <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                class=\"color-picker__slider color-picker__slider--alpha\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onAlphaChange($event)\"\r\n                (dragStart)=\"onDragStart('alpha')\"\r\n                (dragEnd)=\"onDragEnd('alpha')\">\r\n                <div class=\"color-picker__slider--alpha-bg\"\r\n                    [ngStyle]=\"{\r\n                        backgroundImage: alphaSliderColor || ''\r\n                    }\">\r\n                    <div class=\"color-picker__cursor\"\r\n                        [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\r\n                        [ngStyle]=\"{\r\n                            left: (slider?.a || 0) * 100 + '%'\r\n                        }\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)\"\r\n        class=\"color-picker__inputs\">\r\n        <div class=\"color-picker__input-fields\">\r\n            <ng-container *ngIf=\"mode == colorModeInternal.grayscale; else formatSwitch\">\r\n                <div class=\"color-picker__input-field\">\r\n                    <input type=\"number\"\r\n                        pattern=\"[0-9]*\"\r\n                        min=\"0\"\r\n                        max=\"100\"\r\n                        nxtText\r\n                        [rg]=\"100\"\r\n                        [value]=\"hslaText?.l?.toFixed(0)\"\r\n                        (keyup.enter)=\"onAccept($event)\"\r\n                        (newValue)=\"onValueInput($event)\" />\r\n                    <span class=\"color-picker__input-field-label\">V</span>\r\n                </div>\r\n                <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                    class=\"color-picker__input-field\">\r\n                    <input type=\"number\"\r\n                        pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                        min=\"0\"\r\n                        max=\"1\"\r\n                        step=\"0.01\"\r\n                        nxtText\r\n                        [rg]=\"1\"\r\n                        [value]=\"formatAlpha(hslaText?.a)\"\r\n                        (keyup.enter)=\"onAccept($event)\"\r\n                        (newValue)=\"onAlphaInput($event)\" />\r\n                    <span class=\"color-picker__input-field-label\">A</span>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #formatSwitch>\r\n                <ng-container [ngSwitch]=\"format\">\r\n                    <ng-container *ngSwitchCase=\"'hsla'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"360\"\r\n                                nxtText\r\n                                [rg]=\"360\"\r\n                                [value]=\"hslaText?.h?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onHueInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">H</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"hslaText?.s?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onSaturationInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">S</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"hslaText?.l?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onLightnessInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">L</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hslaText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'rgba'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.r?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onRedInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">R</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.g?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onGreenInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">G</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.b?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onBlueInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">B</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hslaText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'cmyk'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.c?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onCyanInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">C</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.m?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onMagentaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">M</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.y?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onYellowInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">Y</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.k?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onBlackInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">K</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(cmykText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input nxtText\r\n                                [value]=\"hexText\"\r\n                                (blur)=\"onHexInput()\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onHexInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">Hex</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel == 'forced'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hexAlpha)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-template>\r\n        </div>\r\n        <div *ngIf=\"mode == colorModeInternal.color\"\r\n            class=\"color-picker__input-type\">\r\n            <span class=\"color-picker__input-type-arrow\"\r\n                (click)=\"onFormatToggle(1)\"></span>\r\n            <span class=\"color-picker__input-type-arrow\"\r\n                (click)=\"onFormatToggle(-1)\"></span>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"presetColors?.length\">\r\n        <div class=\"color-picker__separator\"></div>\r\n        <div class=\"color-picker__preset\">\r\n            <div *ngIf=\"presetLabel\"\r\n                class=\"color-picker__preset-label\">\r\n                <ng-container *ngIf=\"presetLabel === true; else stringLabel\"\r\n                    i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n                <ng-template #stringLabel>{{ presetLabel }}</ng-template>\r\n            </div>\r\n            <div *ngIf=\"presetColors?.length\"\r\n                class=\"color-picker__preset-items\">\r\n                <ng-container *ngFor=\"let color of presetColors\">\r\n                    <div *ngIf=\"stringToRgba(color) as rgba\"\r\n                        class=\"color-picker__preset-item\"\r\n                        [title]=\"color\"\r\n                        (click)=\"setColorFromString(color)\">\r\n                        <div class=\"color-picker__preset-item-fill\"\r\n                            [ngStyle]=\"{ \r\n                        backgroundColor: rgba || ''\r\n                    }\"><button *ngIf=\"presetColorsEditable\"\r\n                                type=\"button\"\r\n                                title=\"Remove Color\"\r\n                                i18n-title=\"@@nxt-color-picker.button.remove-color\"\r\n                                class=\"color-picker__remove-selected\"\r\n                                (click)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                    width=\"24\"\r\n                                    height=\"24\"\r\n                                    viewBox=\"0 0 24 24\">\r\n                                    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n                                    <path d=\"M0 0h24v24H0z\"\r\n                                        fill=\"none\" />\r\n                                </svg></button></div>\r\n                    </div>\r\n                </ng-container>\r\n                <div *ngFor=\"let i of fill(50)\"\r\n                    class=\"color-picker__preset-item\"></div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div *ngIf=\"okButton || cancelButton\"\r\n        class=\"color-picker__buttons\">\r\n        <button *ngIf=\"cancelButton\"\r\n            type=\"button\"\r\n            (click)=\"onCancel($event)\"\r\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n        <button *ngIf=\"okButton\"\r\n            type=\"button\"\r\n            (click)=\"onAccept($event)\"\r\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n    </div>\r\n</div>\r\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,#0000,#000),linear-gradient(to right,#fff,#fff0);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,#000,#fff)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TextDirective, selector: "[nxtText]", inputs: ["rg", "nxtText"], outputs: ["newValue"] }, { kind: "directive", type: SliderDirective, selector: "[nxtSlider]", inputs: ["rgX", "rgY", "nxtSlider"], outputs: ["dragEnd", "dragStart", "newValue"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ColorPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: ColorPickerComponent, isStandalone: false, selector: "nxt-color-picker", host: { listeners: { "document:keyup.esc": "onCancel($event)", "document:keyup.enter": "onAccept($event)", "document:mousedown": "onFocusChange($event)", "document:focusin": "onFocusChange($event)" } }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/click-events-have-key-events -->\r\n<div class=\"color-picker\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    [ngStyle]=\"{\r\n        visibility: !show ? 'hidden' : 'visible',\r\n        width: width || '',\r\n        height: height || ''\r\n    }\"\r\n    *ngIf=\"show\">\r\n    <div *ngIf=\"dialogDisplay == 'popup'\"\r\n        class=\"color-picker__arrow\"></div>\r\n    <div *ngIf=\"mode == colorModeInternal.color\"\r\n        class=\"color-picker__sv\"\r\n        nxtSlider\r\n        [rgX]=\"1\"\r\n        [rgY]=\"1\"\r\n        (newValue)=\"onColorChange($event)\"\r\n        (dragStart)=\"onDragStart('saturation-lightness')\"\r\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\r\n        [ngStyle]=\"{ \r\n            backgroundColor: hueSliderColor || ''\r\n        }\">\r\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n            [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\r\n            [ngStyle]=\"{\r\n                top: (slider?.v || 0) * 100 + '%',\r\n                left: (slider?.s || 0) * 100 + '%'\r\n            }\"></div>\r\n    </div>\r\n    <div class=\"color-picker__controls\">\r\n        <div class=\"color-picker__selected\">\r\n            <div class=\"color-picker__selected-color\">\r\n                <div [ngStyle]=\"{ \r\n                    backgroundColor: selectedColor || ''\r\n                }\"><button *ngIf=\"presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)\"\r\n                        type=\"button\"\r\n                        title=\"Add color to preset\"\r\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\r\n                        class=\"color-picker__add-selected\"\r\n                        [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\r\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                            width=\"24\"\r\n                            height=\"24\"\r\n                            viewBox=\"0 0 24 24\">\r\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n                            <path d=\"M0 0h24v24H0z\"\r\n                                fill=\"none\" />\r\n                        </svg></button></div>\r\n            </div>\r\n        </div>\r\n        <div class=\"color-picker__hav\">\r\n            <div *ngIf=\"mode == colorModeInternal.color\"\r\n                class=\"color-picker__slider color-picker__slider--hue\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onHueChange($event)\"\r\n                (dragStart)=\"onDragStart('hue')\"\r\n                (dragEnd)=\"onDragEnd('hue')\">\r\n                <div class=\"color-picker__cursor\"\r\n                    [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\r\n                    [ngStyle]=\"{\r\n                        left: (slider?.h || 0) * 100 + '%'\r\n                    }\"></div>\r\n            </div>\r\n            <div *ngIf=\"mode == colorModeInternal.grayscale\"\r\n                class=\"color-picker__slider color-picker__slider--value\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onValueChange($event)\"\r\n                (dragStart)=\"onDragStart('value')\"\r\n                (dragEnd)=\"onDragEnd('value')\">\r\n                <div class=\"color-picker__cursor\"\r\n                    [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\r\n                    [ngStyle]=\"{\r\n                        left: (1 - (slider?.v || 0)) * 100 + '%'\r\n                    }\"></div>\r\n            </div>\r\n            <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                class=\"color-picker__slider color-picker__slider--alpha\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onAlphaChange($event)\"\r\n                (dragStart)=\"onDragStart('alpha')\"\r\n                (dragEnd)=\"onDragEnd('alpha')\">\r\n                <div class=\"color-picker__slider--alpha-bg\"\r\n                    [ngStyle]=\"{\r\n                        backgroundImage: alphaSliderColor || ''\r\n                    }\">\r\n                    <div class=\"color-picker__cursor\"\r\n                        [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\r\n                        [ngStyle]=\"{\r\n                            left: (slider?.a || 0) * 100 + '%'\r\n                        }\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)\"\r\n        class=\"color-picker__inputs\">\r\n        <div class=\"color-picker__input-fields\">\r\n            <ng-container *ngIf=\"mode == colorModeInternal.grayscale; else formatSwitch\">\r\n                <div class=\"color-picker__input-field\">\r\n                    <input type=\"number\"\r\n                        pattern=\"[0-9]*\"\r\n                        min=\"0\"\r\n                        max=\"100\"\r\n                        nxtText\r\n                        [rg]=\"100\"\r\n                        [value]=\"hslaText?.l?.toFixed(0)\"\r\n                        (keyup.enter)=\"onAccept($event)\"\r\n                        (newValue)=\"onValueInput($event)\" />\r\n                    <span class=\"color-picker__input-field-label\">V</span>\r\n                </div>\r\n                <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                    class=\"color-picker__input-field\">\r\n                    <input type=\"number\"\r\n                        pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                        min=\"0\"\r\n                        max=\"1\"\r\n                        step=\"0.01\"\r\n                        nxtText\r\n                        [rg]=\"1\"\r\n                        [value]=\"formatAlpha(hslaText?.a)\"\r\n                        (keyup.enter)=\"onAccept($event)\"\r\n                        (newValue)=\"onAlphaInput($event)\" />\r\n                    <span class=\"color-picker__input-field-label\">A</span>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #formatSwitch>\r\n                <ng-container [ngSwitch]=\"format\">\r\n                    <ng-container *ngSwitchCase=\"'hsla'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"360\"\r\n                                nxtText\r\n                                [rg]=\"360\"\r\n                                [value]=\"hslaText?.h?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onHueInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">H</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"hslaText?.s?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onSaturationInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">S</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"hslaText?.l?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onLightnessInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">L</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hslaText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'rgba'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.r?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onRedInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">R</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.g?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onGreenInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">G</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.b?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onBlueInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">B</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hslaText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'cmyk'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.c?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onCyanInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">C</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.m?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onMagentaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">M</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.y?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onYellowInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">Y</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.k?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onBlackInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">K</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(cmykText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input nxtText\r\n                                [value]=\"hexText\"\r\n                                (blur)=\"onHexInput()\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onHexInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">Hex</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel == 'forced'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hexAlpha)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-template>\r\n        </div>\r\n        <div *ngIf=\"mode == colorModeInternal.color\"\r\n            class=\"color-picker__input-type\">\r\n            <span class=\"color-picker__input-type-arrow\"\r\n                (click)=\"onFormatToggle(1)\"\r\n                tabindex=\"0\"\r\n                (keydown.enter)=\"onFormatToggle(1)\"></span>\r\n            <span class=\"color-picker__input-type-arrow\"\r\n                (click)=\"onFormatToggle(-1)\"\r\n                tabindex=\"0\"\r\n                (keydown.enter)=\"onFormatToggle(-1)\"></span>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"presetColors?.length\">\r\n        <div class=\"color-picker__separator\"></div>\r\n        <div class=\"color-picker__preset\">\r\n            <div *ngIf=\"presetLabel\"\r\n                class=\"color-picker__preset-label\">\r\n                <ng-container *ngIf=\"presetLabel === true; else stringLabel\"\r\n                    i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n                <ng-template #stringLabel>{{ presetLabel }}</ng-template>\r\n            </div>\r\n            <div *ngIf=\"presetColors?.length\"\r\n                class=\"color-picker__preset-items\">\r\n                <ng-container *ngFor=\"let color of presetColors\">\r\n                    <div *ngIf=\"stringToRgba(color) as rgba\"\r\n                        class=\"color-picker__preset-item\"\r\n                        [title]=\"color\"\r\n                        (click)=\"setColorFromString(color)\"\r\n                        tabindex=\"0\"\r\n                        (keydown.enter)=\"setColorFromString(color)\">\r\n                        <div class=\"color-picker__preset-item-fill\"\r\n                            [ngStyle]=\"{ \r\n                        backgroundColor: rgba || ''\r\n                    }\"><button *ngIf=\"presetColorsEditable\"\r\n                                type=\"button\"\r\n                                title=\"Remove Color\"\r\n                                i18n-title=\"@@nxt-color-picker.button.remove-color\"\r\n                                class=\"color-picker__remove-selected\"\r\n                                (click)=\"onRemovePresetColor(color)\"\r\n                                tabindex=\"0\"\r\n                                (keydown.enter)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                    width=\"24\"\r\n                                    height=\"24\"\r\n                                    viewBox=\"0 0 24 24\">\r\n                                    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n                                    <path d=\"M0 0h24v24H0z\"\r\n                                        fill=\"none\" />\r\n                                </svg></button></div>\r\n                    </div>\r\n                </ng-container>\r\n                <div *ngFor=\"let i of fill(50)\"\r\n                    class=\"color-picker__preset-item\"></div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div *ngIf=\"okButton || cancelButton\"\r\n        class=\"color-picker__buttons\">\r\n        <button *ngIf=\"cancelButton\"\r\n            type=\"button\"\r\n            (click)=\"onCancel($event)\"\r\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n        <button *ngIf=\"okButton\"\r\n            type=\"button\"\r\n            (click)=\"onAccept($event)\"\r\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n    </div>\r\n</div>\r\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,#0000,#000),linear-gradient(to right,#fff,#fff0);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,#000,#fff)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TextDirective, selector: "[nxtText]", inputs: ["rg", "nxtText"], outputs: ["newValue"] }, { kind: "directive", type: SliderDirective, selector: "[nxtSlider]", inputs: ["rgX", "rgY", "nxtSlider"], outputs: ["dragEnd", "dragStart", "newValue"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxt-color-picker', encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"color-picker\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    [ngStyle]=\"{\r\n        visibility: !show ? 'hidden' : 'visible',\r\n        width: width || '',\r\n        height: height || ''\r\n    }\"\r\n    *ngIf=\"show\">\r\n    <div *ngIf=\"dialogDisplay == 'popup'\"\r\n        class=\"color-picker__arrow\"></div>\r\n    <div *ngIf=\"mode == colorModeInternal.color\"\r\n        class=\"color-picker__sv\"\r\n        nxtSlider\r\n        [rgX]=\"1\"\r\n        [rgY]=\"1\"\r\n        (newValue)=\"onColorChange($event)\"\r\n        (dragStart)=\"onDragStart('saturation-lightness')\"\r\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\r\n        [ngStyle]=\"{ \r\n            backgroundColor: hueSliderColor || ''\r\n        }\">\r\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n            [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\r\n            [ngStyle]=\"{\r\n                top: (slider?.v || 0) * 100 + '%',\r\n                left: (slider?.s || 0) * 100 + '%'\r\n            }\"></div>\r\n    </div>\r\n    <div class=\"color-picker__controls\">\r\n        <div class=\"color-picker__selected\">\r\n            <div class=\"color-picker__selected-color\">\r\n                <div [ngStyle]=\"{ \r\n                    backgroundColor: selectedColor || ''\r\n                }\"><button *ngIf=\"presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)\"\r\n                        type=\"button\"\r\n                        title=\"Add color to preset\"\r\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\r\n                        class=\"color-picker__add-selected\"\r\n                        [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\r\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                            width=\"24\"\r\n                            height=\"24\"\r\n                            viewBox=\"0 0 24 24\">\r\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n                            <path d=\"M0 0h24v24H0z\"\r\n                                fill=\"none\" />\r\n                        </svg></button></div>\r\n            </div>\r\n        </div>\r\n        <div class=\"color-picker__hav\">\r\n            <div *ngIf=\"mode == colorModeInternal.color\"\r\n                class=\"color-picker__slider color-picker__slider--hue\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onHueChange($event)\"\r\n                (dragStart)=\"onDragStart('hue')\"\r\n                (dragEnd)=\"onDragEnd('hue')\">\r\n                <div class=\"color-picker__cursor\"\r\n                    [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\r\n                    [ngStyle]=\"{\r\n                        left: (slider?.h || 0) * 100 + '%'\r\n                    }\"></div>\r\n            </div>\r\n            <div *ngIf=\"mode == colorModeInternal.grayscale\"\r\n                class=\"color-picker__slider color-picker__slider--value\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onValueChange($event)\"\r\n                (dragStart)=\"onDragStart('value')\"\r\n                (dragEnd)=\"onDragEnd('value')\">\r\n                <div class=\"color-picker__cursor\"\r\n                    [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\r\n                    [ngStyle]=\"{\r\n                        left: (1 - (slider?.v || 0)) * 100 + '%'\r\n                    }\"></div>\r\n            </div>\r\n            <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                class=\"color-picker__slider color-picker__slider--alpha\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onAlphaChange($event)\"\r\n                (dragStart)=\"onDragStart('alpha')\"\r\n                (dragEnd)=\"onDragEnd('alpha')\">\r\n                <div class=\"color-picker__slider--alpha-bg\"\r\n                    [ngStyle]=\"{\r\n                        backgroundImage: alphaSliderColor || ''\r\n                    }\">\r\n                    <div class=\"color-picker__cursor\"\r\n                        [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\r\n                        [ngStyle]=\"{\r\n                            left: (slider?.a || 0) * 100 + '%'\r\n                        }\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)\"\r\n        class=\"color-picker__inputs\">\r\n        <div class=\"color-picker__input-fields\">\r\n            <ng-container *ngIf=\"mode == colorModeInternal.grayscale; else formatSwitch\">\r\n                <div class=\"color-picker__input-field\">\r\n                    <input type=\"number\"\r\n                        pattern=\"[0-9]*\"\r\n                        min=\"0\"\r\n                        max=\"100\"\r\n                        nxtText\r\n                        [rg]=\"100\"\r\n                        [value]=\"hslaText?.l?.toFixed(0)\"\r\n                        (keyup.enter)=\"onAccept($event)\"\r\n                        (newValue)=\"onValueInput($event)\" />\r\n                    <span class=\"color-picker__input-field-label\">V</span>\r\n                </div>\r\n                <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                    class=\"color-picker__input-field\">\r\n                    <input type=\"number\"\r\n                        pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                        min=\"0\"\r\n                        max=\"1\"\r\n                        step=\"0.01\"\r\n                        nxtText\r\n                        [rg]=\"1\"\r\n                        [value]=\"formatAlpha(hslaText?.a)\"\r\n                        (keyup.enter)=\"onAccept($event)\"\r\n                        (newValue)=\"onAlphaInput($event)\" />\r\n                    <span class=\"color-picker__input-field-label\">A</span>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #formatSwitch>\r\n                <ng-container [ngSwitch]=\"format\">\r\n                    <ng-container *ngSwitchCase=\"'hsla'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"360\"\r\n                                nxtText\r\n                                [rg]=\"360\"\r\n                                [value]=\"hslaText?.h?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onHueInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">H</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"hslaText?.s?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onSaturationInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">S</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"hslaText?.l?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onLightnessInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">L</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hslaText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'rgba'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.r?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onRedInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">R</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.g?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onGreenInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">G</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.b?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onBlueInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">B</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hslaText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'cmyk'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.c?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onCyanInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">C</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.m?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onMagentaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">M</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.y?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onYellowInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">Y</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.k?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onBlackInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">K</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(cmykText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input nxtText\r\n                                [value]=\"hexText\"\r\n                                (blur)=\"onHexInput()\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onHexInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">Hex</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel == 'forced'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hexAlpha)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-template>\r\n        </div>\r\n        <div *ngIf=\"mode == colorModeInternal.color\"\r\n            class=\"color-picker__input-type\">\r\n            <span class=\"color-picker__input-type-arrow\"\r\n                (click)=\"onFormatToggle(1)\"></span>\r\n            <span class=\"color-picker__input-type-arrow\"\r\n                (click)=\"onFormatToggle(-1)\"></span>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"presetColors?.length\">\r\n        <div class=\"color-picker__separator\"></div>\r\n        <div class=\"color-picker__preset\">\r\n            <div *ngIf=\"presetLabel\"\r\n                class=\"color-picker__preset-label\">\r\n                <ng-container *ngIf=\"presetLabel === true; else stringLabel\"\r\n                    i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n                <ng-template #stringLabel>{{ presetLabel }}</ng-template>\r\n            </div>\r\n            <div *ngIf=\"presetColors?.length\"\r\n                class=\"color-picker__preset-items\">\r\n                <ng-container *ngFor=\"let color of presetColors\">\r\n                    <div *ngIf=\"stringToRgba(color) as rgba\"\r\n                        class=\"color-picker__preset-item\"\r\n                        [title]=\"color\"\r\n                        (click)=\"setColorFromString(color)\">\r\n                        <div class=\"color-picker__preset-item-fill\"\r\n                            [ngStyle]=\"{ \r\n                        backgroundColor: rgba || ''\r\n                    }\"><button *ngIf=\"presetColorsEditable\"\r\n                                type=\"button\"\r\n                                title=\"Remove Color\"\r\n                                i18n-title=\"@@nxt-color-picker.button.remove-color\"\r\n                                class=\"color-picker__remove-selected\"\r\n                                (click)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                    width=\"24\"\r\n                                    height=\"24\"\r\n                                    viewBox=\"0 0 24 24\">\r\n                                    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n                                    <path d=\"M0 0h24v24H0z\"\r\n                                        fill=\"none\" />\r\n                                </svg></button></div>\r\n                    </div>\r\n                </ng-container>\r\n                <div *ngFor=\"let i of fill(50)\"\r\n                    class=\"color-picker__preset-item\"></div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div *ngIf=\"okButton || cancelButton\"\r\n        class=\"color-picker__buttons\">\r\n        <button *ngIf=\"cancelButton\"\r\n            type=\"button\"\r\n            (click)=\"onCancel($event)\"\r\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n        <button *ngIf=\"okButton\"\r\n            type=\"button\"\r\n            (click)=\"onAccept($event)\"\r\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n    </div>\r\n</div>\r\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,#0000,#000),linear-gradient(to right,#fff,#fff0);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,#000,#fff)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"] }]
+            args: [{ selector: 'nxt-color-picker', encapsulation: ViewEncapsulation.Emulated, standalone: false, template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/click-events-have-key-events -->\r\n<div class=\"color-picker\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    [ngStyle]=\"{\r\n        visibility: !show ? 'hidden' : 'visible',\r\n        width: width || '',\r\n        height: height || ''\r\n    }\"\r\n    *ngIf=\"show\">\r\n    <div *ngIf=\"dialogDisplay == 'popup'\"\r\n        class=\"color-picker__arrow\"></div>\r\n    <div *ngIf=\"mode == colorModeInternal.color\"\r\n        class=\"color-picker__sv\"\r\n        nxtSlider\r\n        [rgX]=\"1\"\r\n        [rgY]=\"1\"\r\n        (newValue)=\"onColorChange($event)\"\r\n        (dragStart)=\"onDragStart('saturation-lightness')\"\r\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\r\n        [ngStyle]=\"{ \r\n            backgroundColor: hueSliderColor || ''\r\n        }\">\r\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n            [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\r\n            [ngStyle]=\"{\r\n                top: (slider?.v || 0) * 100 + '%',\r\n                left: (slider?.s || 0) * 100 + '%'\r\n            }\"></div>\r\n    </div>\r\n    <div class=\"color-picker__controls\">\r\n        <div class=\"color-picker__selected\">\r\n            <div class=\"color-picker__selected-color\">\r\n                <div [ngStyle]=\"{ \r\n                    backgroundColor: selectedColor || ''\r\n                }\"><button *ngIf=\"presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)\"\r\n                        type=\"button\"\r\n                        title=\"Add color to preset\"\r\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\r\n                        class=\"color-picker__add-selected\"\r\n                        [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\r\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                            width=\"24\"\r\n                            height=\"24\"\r\n                            viewBox=\"0 0 24 24\">\r\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n                            <path d=\"M0 0h24v24H0z\"\r\n                                fill=\"none\" />\r\n                        </svg></button></div>\r\n            </div>\r\n        </div>\r\n        <div class=\"color-picker__hav\">\r\n            <div *ngIf=\"mode == colorModeInternal.color\"\r\n                class=\"color-picker__slider color-picker__slider--hue\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onHueChange($event)\"\r\n                (dragStart)=\"onDragStart('hue')\"\r\n                (dragEnd)=\"onDragEnd('hue')\">\r\n                <div class=\"color-picker__cursor\"\r\n                    [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\r\n                    [ngStyle]=\"{\r\n                        left: (slider?.h || 0) * 100 + '%'\r\n                    }\"></div>\r\n            </div>\r\n            <div *ngIf=\"mode == colorModeInternal.grayscale\"\r\n                class=\"color-picker__slider color-picker__slider--value\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onValueChange($event)\"\r\n                (dragStart)=\"onDragStart('value')\"\r\n                (dragEnd)=\"onDragEnd('value')\">\r\n                <div class=\"color-picker__cursor\"\r\n                    [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\r\n                    [ngStyle]=\"{\r\n                        left: (1 - (slider?.v || 0)) * 100 + '%'\r\n                    }\"></div>\r\n            </div>\r\n            <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                class=\"color-picker__slider color-picker__slider--alpha\"\r\n                nxtSlider\r\n                [rgX]=\"1\"\r\n                (newValue)=\"onAlphaChange($event)\"\r\n                (dragStart)=\"onDragStart('alpha')\"\r\n                (dragEnd)=\"onDragEnd('alpha')\">\r\n                <div class=\"color-picker__slider--alpha-bg\"\r\n                    [ngStyle]=\"{\r\n                        backgroundImage: alphaSliderColor || ''\r\n                    }\">\r\n                    <div class=\"color-picker__cursor\"\r\n                        [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\r\n                        [ngStyle]=\"{\r\n                            left: (slider?.a || 0) * 100 + '%'\r\n                        }\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)\"\r\n        class=\"color-picker__inputs\">\r\n        <div class=\"color-picker__input-fields\">\r\n            <ng-container *ngIf=\"mode == colorModeInternal.grayscale; else formatSwitch\">\r\n                <div class=\"color-picker__input-field\">\r\n                    <input type=\"number\"\r\n                        pattern=\"[0-9]*\"\r\n                        min=\"0\"\r\n                        max=\"100\"\r\n                        nxtText\r\n                        [rg]=\"100\"\r\n                        [value]=\"hslaText?.l?.toFixed(0)\"\r\n                        (keyup.enter)=\"onAccept($event)\"\r\n                        (newValue)=\"onValueInput($event)\" />\r\n                    <span class=\"color-picker__input-field-label\">V</span>\r\n                </div>\r\n                <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                    class=\"color-picker__input-field\">\r\n                    <input type=\"number\"\r\n                        pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                        min=\"0\"\r\n                        max=\"1\"\r\n                        step=\"0.01\"\r\n                        nxtText\r\n                        [rg]=\"1\"\r\n                        [value]=\"formatAlpha(hslaText?.a)\"\r\n                        (keyup.enter)=\"onAccept($event)\"\r\n                        (newValue)=\"onAlphaInput($event)\" />\r\n                    <span class=\"color-picker__input-field-label\">A</span>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #formatSwitch>\r\n                <ng-container [ngSwitch]=\"format\">\r\n                    <ng-container *ngSwitchCase=\"'hsla'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"360\"\r\n                                nxtText\r\n                                [rg]=\"360\"\r\n                                [value]=\"hslaText?.h?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onHueInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">H</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"hslaText?.s?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onSaturationInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">S</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"hslaText?.l?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onLightnessInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">L</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hslaText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'rgba'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.r?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onRedInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">R</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.g?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onGreenInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">G</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"255\"\r\n                                nxtText\r\n                                [rg]=\"255\"\r\n                                [value]=\"rgbaText?.b?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onBlueInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">B</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hslaText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'cmyk'\">\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.c?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onCyanInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">C</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.m?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onMagentaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">M</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.y?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onYellowInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">Y</span>\r\n                        </div>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]*\"\r\n                                min=\"0\"\r\n                                max=\"100\"\r\n                                nxtText\r\n                                [rg]=\"100\"\r\n                                [value]=\"cmykText?.k?.toFixed(0)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onBlackInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">K</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel != 'disabled'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(cmykText?.a)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"color-picker__input-field\">\r\n                            <input nxtText\r\n                                [value]=\"hexText\"\r\n                                (blur)=\"onHexInput()\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onHexInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">Hex</span>\r\n                        </div>\r\n                        <div *ngIf=\"alphaChannel == 'forced'\"\r\n                            class=\"color-picker__input-field\">\r\n                            <input type=\"number\"\r\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n                                min=\"0\"\r\n                                max=\"1\"\r\n                                step=\"0.01\"\r\n                                nxtText\r\n                                [rg]=\"1\"\r\n                                [value]=\"formatAlpha(hexAlpha)\"\r\n                                (keyup.enter)=\"onAccept($event)\"\r\n                                (newValue)=\"onAlphaInput($event)\" />\r\n                            <span class=\"color-picker__input-field-label\">A</span>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-template>\r\n        </div>\r\n        <div *ngIf=\"mode == colorModeInternal.color\"\r\n            class=\"color-picker__input-type\">\r\n            <span class=\"color-picker__input-type-arrow\"\r\n                (click)=\"onFormatToggle(1)\"\r\n                tabindex=\"0\"\r\n                (keydown.enter)=\"onFormatToggle(1)\"></span>\r\n            <span class=\"color-picker__input-type-arrow\"\r\n                (click)=\"onFormatToggle(-1)\"\r\n                tabindex=\"0\"\r\n                (keydown.enter)=\"onFormatToggle(-1)\"></span>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"presetColors?.length\">\r\n        <div class=\"color-picker__separator\"></div>\r\n        <div class=\"color-picker__preset\">\r\n            <div *ngIf=\"presetLabel\"\r\n                class=\"color-picker__preset-label\">\r\n                <ng-container *ngIf=\"presetLabel === true; else stringLabel\"\r\n                    i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n                <ng-template #stringLabel>{{ presetLabel }}</ng-template>\r\n            </div>\r\n            <div *ngIf=\"presetColors?.length\"\r\n                class=\"color-picker__preset-items\">\r\n                <ng-container *ngFor=\"let color of presetColors\">\r\n                    <div *ngIf=\"stringToRgba(color) as rgba\"\r\n                        class=\"color-picker__preset-item\"\r\n                        [title]=\"color\"\r\n                        (click)=\"setColorFromString(color)\"\r\n                        tabindex=\"0\"\r\n                        (keydown.enter)=\"setColorFromString(color)\">\r\n                        <div class=\"color-picker__preset-item-fill\"\r\n                            [ngStyle]=\"{ \r\n                        backgroundColor: rgba || ''\r\n                    }\"><button *ngIf=\"presetColorsEditable\"\r\n                                type=\"button\"\r\n                                title=\"Remove Color\"\r\n                                i18n-title=\"@@nxt-color-picker.button.remove-color\"\r\n                                class=\"color-picker__remove-selected\"\r\n                                (click)=\"onRemovePresetColor(color)\"\r\n                                tabindex=\"0\"\r\n                                (keydown.enter)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                    width=\"24\"\r\n                                    height=\"24\"\r\n                                    viewBox=\"0 0 24 24\">\r\n                                    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n                                    <path d=\"M0 0h24v24H0z\"\r\n                                        fill=\"none\" />\r\n                                </svg></button></div>\r\n                    </div>\r\n                </ng-container>\r\n                <div *ngFor=\"let i of fill(50)\"\r\n                    class=\"color-picker__preset-item\"></div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div *ngIf=\"okButton || cancelButton\"\r\n        class=\"color-picker__buttons\">\r\n        <button *ngIf=\"cancelButton\"\r\n            type=\"button\"\r\n            (click)=\"onCancel($event)\"\r\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n        <button *ngIf=\"okButton\"\r\n            type=\"button\"\r\n            (click)=\"onAccept($event)\"\r\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n    </div>\r\n</div>\r\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,#0000,#000),linear-gradient(to right,#fff,#fff0);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,#000,#fff)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ColorPickerService }], propDecorators: { onCancel: [{
                 type: HostListener,
                 args: ['document:keyup.esc', ['$event']]
@@ -1730,14 +1732,15 @@ class ColorPickerDirective {
         }
         return pos;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ColorPickerDirective, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: ColorPickerDirective, selector: "[nxtColor]", inputs: { nxtColor: "nxtColor", width: "width", height: "height", toggle: "toggle", disabled: "disabled", mode: "mode", cmykEnabled: "cmykEnabled", outputFormat: "outputFormat", alphaChannel: "alphaChannel", fallbackColor: "fallbackColor", position: "position", positionOffset: "positionOffset", presetLabel: "presetLabel", presetColors: "presetColors", disableInput: "disableInput", dialogDisplay: "dialogDisplay", ignoredElements: "ignoredElements", saveClickOutside: "saveClickOutside", closeClickOutside: "closeClickOutside", okButton: "okButton", cancelButton: "cancelButton", presetColorsEditable: "presetColorsEditable", maxPresetColors: "maxPresetColors", useRootViewContainer: "useRootViewContainer" }, outputs: { open: "open", close: "close", inputChange: "inputChange", toggleChange: "toggleChange", sliderDragStart: "sliderDragStart", sliderChange: "sliderChange", sliderDragEnd: "sliderDragEnd", colorSelect: "colorSelect", colorSelectCancel: "colorSelectCancel", nxtColorChange: "nxtColorChange", cmykColorChange: "cmykColorChange", presetColorsChange: "presetColorsChange" }, host: { listeners: { "focus": "handleOpen($event)", "click": "handleOpen($event)", "input": "handleInput($event)", "change": "handleInput($event)" } }, exportAs: ["nxtColorPicker"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ColorPickerDirective, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: ColorPickerDirective, isStandalone: false, selector: "[nxtColor]", inputs: { nxtColor: "nxtColor", width: "width", height: "height", toggle: "toggle", disabled: "disabled", mode: "mode", cmykEnabled: "cmykEnabled", outputFormat: "outputFormat", alphaChannel: "alphaChannel", fallbackColor: "fallbackColor", position: "position", positionOffset: "positionOffset", presetLabel: "presetLabel", presetColors: "presetColors", disableInput: "disableInput", dialogDisplay: "dialogDisplay", ignoredElements: "ignoredElements", saveClickOutside: "saveClickOutside", closeClickOutside: "closeClickOutside", okButton: "okButton", cancelButton: "cancelButton", presetColorsEditable: "presetColorsEditable", maxPresetColors: "maxPresetColors", useRootViewContainer: "useRootViewContainer" }, outputs: { open: "open", close: "close", inputChange: "inputChange", toggleChange: "toggleChange", sliderDragStart: "sliderDragStart", sliderChange: "sliderChange", sliderDragEnd: "sliderDragEnd", colorSelect: "colorSelect", colorSelectCancel: "colorSelectCancel", nxtColorChange: "nxtColorChange", cmykColorChange: "cmykColorChange", presetColorsChange: "presetColorsChange" }, host: { listeners: { "focus": "handleOpen($event)", "click": "handleOpen($event)", "input": "handleInput($event)", "change": "handleInput($event)" } }, exportAs: ["nxtColorPicker"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ColorPickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ColorPickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nxtColor]',
-                    exportAs: 'nxtColorPicker'
+                    exportAs: 'nxtColorPicker',
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i1.Overlay }], propDecorators: { nxtColor: [{
                 type: Input
@@ -1826,16 +1829,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
             }] } });
 
 class ColorPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: ColorPickerModule, declarations: [TextDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: ColorPickerModule, declarations: [TextDirective,
             SliderDirective,
             ColorPickerComponent,
             ColorPickerDirective], imports: [CommonModule,
             OverlayModule], exports: [ColorPickerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ColorPickerModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ColorPickerModule, imports: [CommonModule,
             OverlayModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [