nxt-color-picker 14.0.1 → 14.0.2

package/esm2020/lib/color-picker/color-picker.component.mjs

@@ -565,11 +565,11 @@ export class ColorPickerComponent {
         return new Array(n).fill(1);
     }
 }
-ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ColorPickerService }], target: i0.ɵɵFactoryTarget.Component });
-ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: ColorPickerComponent, selector: "cp-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\"\n    (click)=\"$event.stopPropagation()\"\n    [ngStyle]=\"{\n        visibility: !show ? 'hidden' : 'visible',\n        width: cpWidth || '',\n        height: cpHeight || ''\n    }\"\n    *ngIf=\"show\">\n    <div *ngIf=\"cpDialogDisplay == dialogDisplay.popup\"\n        class=\"color-picker__arrow\"\n        [ngClass]=\"'color-picker__arrow--' + cpPosition\"></div>\n    <div *ngIf=\"cpMode == colorModeInternal.color\"\n        class=\"color-picker__sv\"\n        cpSlider\n        [rgX]=\"1\"\n        [rgY]=\"1\"\n        (newValue)=\"onColorChange($event)\"\n        (dragStart)=\"onDragStart('saturation-lightness')\"\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\n        [ngStyle]=\"{ \n            backgroundColor: hueSliderColor || ''\n        }\">\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\n            [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\n            [ngStyle]=\"{\n                top: (slider?.v || 0) * 100 + '%',\n                left: (slider?.s || 0) * 100 + '%'\n            }\"></div>\n    </div>\n    <div class=\"color-picker__controls\">\n        <div class=\"color-picker__selected\">\n            <div class=\"color-picker__selected-color\">\n                <div [ngStyle]=\"{ \n                    backgroundColor: selectedColor || ''\n                }\"><button\n                        *ngIf=\"cpAddColorButton && !(cpMaxPresetColors && (cpPresetColors?.length || 0) >= cpMaxPresetColors)\"\n                        type=\"button\"\n                        title=\"Add color to preset\"\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\n                        class=\"color-picker__add-selected\"\n                        [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\">\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n                            <path d=\"M0 0h24v24H0z\"\n                                fill=\"none\" />\n                        </svg></button></div>\n            </div>\n        </div>\n        <div class=\"color-picker__hav\">\n            <div *ngIf=\"cpMode == colorModeInternal.color\"\n                class=\"color-picker__slider color-picker__slider--hue\"\n                cpSlider\n                [rgX]=\"1\"\n                (newValue)=\"onHueChange($event)\"\n                (dragStart)=\"onDragStart('hue')\"\n                (dragEnd)=\"onDragEnd('hue')\">\n                <div class=\"color-picker__cursor\"\n                    [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\n                    [ngStyle]=\"{\n                        left: (slider?.h || 0) * 100 + '%'\n                    }\"></div>\n            </div>\n            <div *ngIf=\"cpMode == colorModeInternal.grayscale\"\n                class=\"color-picker__slider color-picker__slider--value\"\n                cpSlider\n                [rgX]=\"1\"\n                (newValue)=\"onValueChange($event)\"\n                (dragStart)=\"onDragStart('value')\"\n                (dragEnd)=\"onDragEnd('value')\">\n                <div class=\"color-picker__cursor\"\n                    [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\n                    [ngStyle]=\"{\n                        left: (1 - (slider?.v || 0)) * 100 + '%'\n                    }\"></div>\n            </div>\n            <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                class=\"color-picker__slider color-picker__slider--alpha\"\n                cpSlider\n                [rgX]=\"1\"\n                (newValue)=\"onAlphaChange($event)\"\n                (dragStart)=\"onDragStart('alpha')\"\n                (dragEnd)=\"onDragEnd('alpha')\">\n                <div class=\"color-picker__slider--alpha-bg\"\n                    [ngStyle]=\"{\n                        backgroundImage: alphaSliderColor || ''\n                    }\">\n                    <div class=\"color-picker__cursor\"\n                        [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\n                        [ngStyle]=\"{\n                            left: (slider?.a || 0) * 100 + '%'\n                        }\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!cpDisableInput && (cpMode == colorModeInternal.color || cpMode == colorModeInternal.grayscale)\"\n        class=\"color-picker__inputs\">\n        <div class=\"color-picker__input-fields\">\n            <ng-container *ngIf=\"cpMode == colorModeInternal.grayscale; else formatSwitch\">\n                <div class=\"color-picker__input-field\">\n                    <input type=\"number\"\n                        pattern=\"[0-9]*\"\n                        min=\"0\"\n                        max=\"100\"\n                        cpText\n                        [rg]=\"100\"\n                        [value]=\"hslaText?.l\"\n                        (keyup.enter)=\"onAccept($event)\"\n                        (newValue)=\"onValueInput($event)\" />\n                    <span class=\"color-picker__input-field-label\">V</span>\n                </div>\n                <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                    class=\"color-picker__input-field\">\n                    <input type=\"number\"\n                        pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                        min=\"0\"\n                        max=\"1\"\n                        step=\"0.1\"\n                        cpText\n                        [rg]=\"1\"\n                        [value]=\"hslaText?.a\"\n                        (keyup.enter)=\"onAccept($event)\"\n                        (newValue)=\"onAlphaInput($event)\" />\n                    <span class=\"color-picker__input-field-label\">A</span>\n                </div>\n            </ng-container>\n            <ng-template #formatSwitch>\n                <ng-container [ngSwitch]=\"format\">\n                    <ng-container *ngSwitchCase=\"colorFormat.hsla\">\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"360\"\n                                cpText\n                                [rg]=\"360\"\n                                [value]=\"hslaText?.h\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onHueInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">H</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"hslaText?.s\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onSaturationInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">S</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"hslaText?.l\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onLightnessInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">L</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"hslaText?.a\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"colorFormat.rgba\">\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"255\"\n                                cpText\n                                [rg]=\"255\"\n                                [value]=\"rgbaText?.r\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onRedInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">R</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"255\"\n                                cpText\n                                [rg]=\"255\"\n                                [value]=\"rgbaText?.g\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onGreenInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">G</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"255\"\n                                cpText\n                                [rg]=\"255\"\n                                [value]=\"rgbaText?.b\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onBlueInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">B</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"hslaText?.a\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"colorFormat.cmyk\">\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.c\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onCyanInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">C</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.m\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onMagentaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">M</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.y\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onYellowInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">Y</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.k\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onBlackInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">K</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"cmykText?.c\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <div class=\"color-picker__input-field\">\n                            <input cpText\n                                [value]=\"hexText\"\n                                (blur)=\"onHexInput(null)\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onHexInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">Hex</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel == alphaChannel.forced\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"hexAlpha\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n        </div>\n        <div *ngIf=\"cpMode == colorModeInternal.color\"\n            class=\"color-picker__input-type\">\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(1)\"></span>\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(-1)\"></span>\n        </div>\n    </div>\n    <ng-container *ngIf=\"cpPresetColors?.length\">\n        <div class=\"color-picker__separator\"></div>\n        <div class=\"color-picker__preset\">\n            <div *ngIf=\"cpPresetLabel\"\n                class=\"color-picker__preset-label\">\n                <ng-container *ngIf=\"cpPresetLabel === true; else stringLabel\"\n                    i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\n                <ng-template #stringLabel>{{ cpPresetLabel }}</ng-template>\n            </div>\n            <div *ngIf=\"cpPresetColors?.length\"\n                class=\"color-picker__preset-items\">\n                <div *ngFor=\"let color of cpPresetColors\"\n                    class=\"color-picker__preset-item\"\n                    [title]=\"color\"\n                    (click)=\"setColorFromString(color)\">\n                    <div class=\"color-picker__preset-item-fill\"\n                        [ngStyle]=\"{ \n                        backgroundColor: color || ''\n                    }\"><button *ngIf=\"cpAddColorButton\"\n                            type=\"button\"\n                            title=\"Remove Color\"\n                            i18n-title=\"@@nxt-color-picker.button.remove-color\"\n                            class=\"color-picker__remove-selected\"\n                            (click)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                                width=\"24\"\n                                height=\"24\"\n                                viewBox=\"0 0 24 24\">\n                                <path\n                                    d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                                <path d=\"M0 0h24v24H0z\"\n                                    fill=\"none\" />\n                            </svg></button></div>\n                </div>\n                <div *ngFor=\"let i of fill(50)\"\n                    class=\"color-picker__preset-item\"></div>\n            </div>\n        </div>\n    </ng-container>\n    <div *ngIf=\"cpOKButton || cpCancelButton\"\n        class=\"color-picker__buttons\">\n        <button *ngIf=\"cpCancelButton\"\n            type=\"button\"\n            (click)=\"onCancel($event)\"\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\n        <button *ngIf=\"cpOKButton\"\n            type=\"button\"\n            (click)=\"onAccept($event)\"\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\n    </div>\n</div>\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,rgba(0,0,0,0) 0%,rgb(0,0,0) 100%),linear-gradient(to right,rgb(255,255,255) 0%,rgba(255,255,255,0) 100%);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,rgb(255,0,0) 0%,rgb(255,255,0) 16.6666666667%,rgb(0,255,0) 33.3333333333%,rgb(0,255,255) 50%,rgb(0,0,255) 66.6666666667%,rgb(255,0,255) 83.3333333333%,rgb(255,0,0) 100%)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(255,255,255) 100%)}.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;top:0;left:0;right:0;bottom: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;-webkit-appearance:none;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{-webkit-appearance:none;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}: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: i3.TextDirective, selector: "[cpText]", inputs: ["rg", "text"], outputs: ["newValue"] }, { kind: "directive", type: i4.SliderDirective, selector: "[cpSlider]", inputs: ["rgX", "rgY", "slider"], outputs: ["dragEnd", "dragStart", "newValue"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColorPickerComponent, decorators: [{
+ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ColorPickerService }], target: i0.ɵɵFactoryTarget.Component });
+ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: ColorPickerComponent, selector: "cp-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\"\n    (click)=\"$event.stopPropagation()\"\n    [ngStyle]=\"{\n        visibility: !show ? 'hidden' : 'visible',\n        width: cpWidth || '',\n        height: cpHeight || ''\n    }\"\n    *ngIf=\"show\">\n    <div *ngIf=\"cpDialogDisplay == dialogDisplay.popup\"\n        class=\"color-picker__arrow\"\n        [ngClass]=\"'color-picker__arrow--' + cpPosition\"></div>\n    <div *ngIf=\"cpMode == colorModeInternal.color\"\n        class=\"color-picker__sv\"\n        cpSlider\n        [rgX]=\"1\"\n        [rgY]=\"1\"\n        (newValue)=\"onColorChange($event)\"\n        (dragStart)=\"onDragStart('saturation-lightness')\"\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\n        [ngStyle]=\"{ \n            backgroundColor: hueSliderColor || ''\n        }\">\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\n            [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\n            [ngStyle]=\"{\n                top: (slider?.v || 0) * 100 + '%',\n                left: (slider?.s || 0) * 100 + '%'\n            }\"></div>\n    </div>\n    <div class=\"color-picker__controls\">\n        <div class=\"color-picker__selected\">\n            <div class=\"color-picker__selected-color\">\n                <div [ngStyle]=\"{ \n                    backgroundColor: selectedColor || ''\n                }\"><button\n                        *ngIf=\"cpAddColorButton && !(cpMaxPresetColors && (cpPresetColors?.length || 0) >= cpMaxPresetColors)\"\n                        type=\"button\"\n                        title=\"Add color to preset\"\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\n                        class=\"color-picker__add-selected\"\n                        [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\">\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n                            <path d=\"M0 0h24v24H0z\"\n                                fill=\"none\" />\n                        </svg></button></div>\n            </div>\n        </div>\n        <div class=\"color-picker__hav\">\n            <div *ngIf=\"cpMode == colorModeInternal.color\"\n                class=\"color-picker__slider color-picker__slider--hue\"\n                cpSlider\n                [rgX]=\"1\"\n                (newValue)=\"onHueChange($event)\"\n                (dragStart)=\"onDragStart('hue')\"\n                (dragEnd)=\"onDragEnd('hue')\">\n                <div class=\"color-picker__cursor\"\n                    [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\n                    [ngStyle]=\"{\n                        left: (slider?.h || 0) * 100 + '%'\n                    }\"></div>\n            </div>\n            <div *ngIf=\"cpMode == colorModeInternal.grayscale\"\n                class=\"color-picker__slider color-picker__slider--value\"\n                cpSlider\n                [rgX]=\"1\"\n                (newValue)=\"onValueChange($event)\"\n                (dragStart)=\"onDragStart('value')\"\n                (dragEnd)=\"onDragEnd('value')\">\n                <div class=\"color-picker__cursor\"\n                    [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\n                    [ngStyle]=\"{\n                        left: (1 - (slider?.v || 0)) * 100 + '%'\n                    }\"></div>\n            </div>\n            <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                class=\"color-picker__slider color-picker__slider--alpha\"\n                cpSlider\n                [rgX]=\"1\"\n                (newValue)=\"onAlphaChange($event)\"\n                (dragStart)=\"onDragStart('alpha')\"\n                (dragEnd)=\"onDragEnd('alpha')\">\n                <div class=\"color-picker__slider--alpha-bg\"\n                    [ngStyle]=\"{\n                        backgroundImage: alphaSliderColor || ''\n                    }\">\n                    <div class=\"color-picker__cursor\"\n                        [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\n                        [ngStyle]=\"{\n                            left: (slider?.a || 0) * 100 + '%'\n                        }\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!cpDisableInput && (cpMode == colorModeInternal.color || cpMode == colorModeInternal.grayscale)\"\n        class=\"color-picker__inputs\">\n        <div class=\"color-picker__input-fields\">\n            <ng-container *ngIf=\"cpMode == colorModeInternal.grayscale; else formatSwitch\">\n                <div class=\"color-picker__input-field\">\n                    <input type=\"number\"\n                        pattern=\"[0-9]*\"\n                        min=\"0\"\n                        max=\"100\"\n                        cpText\n                        [rg]=\"100\"\n                        [value]=\"hslaText?.l\"\n                        (keyup.enter)=\"onAccept($event)\"\n                        (newValue)=\"onValueInput($event)\" />\n                    <span class=\"color-picker__input-field-label\">V</span>\n                </div>\n                <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                    class=\"color-picker__input-field\">\n                    <input type=\"number\"\n                        pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                        min=\"0\"\n                        max=\"1\"\n                        step=\"0.1\"\n                        cpText\n                        [rg]=\"1\"\n                        [value]=\"hslaText?.a\"\n                        (keyup.enter)=\"onAccept($event)\"\n                        (newValue)=\"onAlphaInput($event)\" />\n                    <span class=\"color-picker__input-field-label\">A</span>\n                </div>\n            </ng-container>\n            <ng-template #formatSwitch>\n                <ng-container [ngSwitch]=\"format\">\n                    <ng-container *ngSwitchCase=\"colorFormat.hsla\">\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"360\"\n                                cpText\n                                [rg]=\"360\"\n                                [value]=\"hslaText?.h\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onHueInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">H</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"hslaText?.s\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onSaturationInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">S</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"hslaText?.l\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onLightnessInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">L</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"hslaText?.a\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"colorFormat.rgba\">\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"255\"\n                                cpText\n                                [rg]=\"255\"\n                                [value]=\"rgbaText?.r\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onRedInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">R</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"255\"\n                                cpText\n                                [rg]=\"255\"\n                                [value]=\"rgbaText?.g\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onGreenInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">G</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"255\"\n                                cpText\n                                [rg]=\"255\"\n                                [value]=\"rgbaText?.b\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onBlueInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">B</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"hslaText?.a\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"colorFormat.cmyk\">\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.c\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onCyanInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">C</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.m\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onMagentaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">M</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.y\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onYellowInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">Y</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.k\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onBlackInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">K</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"cmykText?.c\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <div class=\"color-picker__input-field\">\n                            <input cpText\n                                [value]=\"hexText\"\n                                (blur)=\"onHexInput(null)\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onHexInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">Hex</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel == alphaChannel.forced\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"hexAlpha\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n        </div>\n        <div *ngIf=\"cpMode == colorModeInternal.color\"\n            class=\"color-picker__input-type\">\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(1)\"></span>\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(-1)\"></span>\n        </div>\n    </div>\n    <ng-container *ngIf=\"cpPresetColors?.length\">\n        <div class=\"color-picker__separator\"></div>\n        <div class=\"color-picker__preset\">\n            <div *ngIf=\"cpPresetLabel\"\n                class=\"color-picker__preset-label\">\n                <ng-container *ngIf=\"cpPresetLabel === true; else stringLabel\"\n                    i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\n                <ng-template #stringLabel>{{ cpPresetLabel }}</ng-template>\n            </div>\n            <div *ngIf=\"cpPresetColors?.length\"\n                class=\"color-picker__preset-items\">\n                <div *ngFor=\"let color of cpPresetColors\"\n                    class=\"color-picker__preset-item\"\n                    [title]=\"color\"\n                    (click)=\"setColorFromString(color)\">\n                    <div class=\"color-picker__preset-item-fill\"\n                        [ngStyle]=\"{ \n                        backgroundColor: color || ''\n                    }\"><button *ngIf=\"cpAddColorButton\"\n                            type=\"button\"\n                            title=\"Remove Color\"\n                            i18n-title=\"@@nxt-color-picker.button.remove-color\"\n                            class=\"color-picker__remove-selected\"\n                            (click)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                                width=\"24\"\n                                height=\"24\"\n                                viewBox=\"0 0 24 24\">\n                                <path\n                                    d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                                <path d=\"M0 0h24v24H0z\"\n                                    fill=\"none\" />\n                            </svg></button></div>\n                </div>\n                <div *ngFor=\"let i of fill(50)\"\n                    class=\"color-picker__preset-item\"></div>\n            </div>\n        </div>\n    </ng-container>\n    <div *ngIf=\"cpOKButton || cpCancelButton\"\n        class=\"color-picker__buttons\">\n        <button *ngIf=\"cpCancelButton\"\n            type=\"button\"\n            (click)=\"onCancel($event)\"\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\n        <button *ngIf=\"cpOKButton\"\n            type=\"button\"\n            (click)=\"onAccept($event)\"\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\n    </div>\n</div>\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,rgba(0,0,0,0) 0%,rgb(0,0,0) 100%),linear-gradient(to right,rgb(255,255,255) 0%,rgba(255,255,255,0) 100%);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,rgb(255,0,0) 0%,rgb(255,255,0) 16.6666666667%,rgb(0,255,0) 33.3333333333%,rgb(0,255,255) 50%,rgb(0,0,255) 66.6666666667%,rgb(255,0,255) 83.3333333333%,rgb(255,0,0) 100%)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(255,255,255) 100%)}.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;top:0;left:0;right:0;bottom: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;-webkit-appearance:none;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{-webkit-appearance:none;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}: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: i3.TextDirective, selector: "[cpText]", inputs: ["rg", "text"], outputs: ["newValue"] }, { kind: "directive", type: i4.SliderDirective, selector: "[cpSlider]", inputs: ["rgX", "rgY", "slider"], outputs: ["dragEnd", "dragStart", "newValue"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cp-color-picker', encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"color-picker\"\n    (click)=\"$event.stopPropagation()\"\n    [ngStyle]=\"{\n        visibility: !show ? 'hidden' : 'visible',\n        width: cpWidth || '',\n        height: cpHeight || ''\n    }\"\n    *ngIf=\"show\">\n    <div *ngIf=\"cpDialogDisplay == dialogDisplay.popup\"\n        class=\"color-picker__arrow\"\n        [ngClass]=\"'color-picker__arrow--' + cpPosition\"></div>\n    <div *ngIf=\"cpMode == colorModeInternal.color\"\n        class=\"color-picker__sv\"\n        cpSlider\n        [rgX]=\"1\"\n        [rgY]=\"1\"\n        (newValue)=\"onColorChange($event)\"\n        (dragStart)=\"onDragStart('saturation-lightness')\"\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\n        [ngStyle]=\"{ \n            backgroundColor: hueSliderColor || ''\n        }\">\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\n            [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\n            [ngStyle]=\"{\n                top: (slider?.v || 0) * 100 + '%',\n                left: (slider?.s || 0) * 100 + '%'\n            }\"></div>\n    </div>\n    <div class=\"color-picker__controls\">\n        <div class=\"color-picker__selected\">\n            <div class=\"color-picker__selected-color\">\n                <div [ngStyle]=\"{ \n                    backgroundColor: selectedColor || ''\n                }\"><button\n                        *ngIf=\"cpAddColorButton && !(cpMaxPresetColors && (cpPresetColors?.length || 0) >= cpMaxPresetColors)\"\n                        type=\"button\"\n                        title=\"Add color to preset\"\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\n                        class=\"color-picker__add-selected\"\n                        [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\">\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n                            <path d=\"M0 0h24v24H0z\"\n                                fill=\"none\" />\n                        </svg></button></div>\n            </div>\n        </div>\n        <div class=\"color-picker__hav\">\n            <div *ngIf=\"cpMode == colorModeInternal.color\"\n                class=\"color-picker__slider color-picker__slider--hue\"\n                cpSlider\n                [rgX]=\"1\"\n                (newValue)=\"onHueChange($event)\"\n                (dragStart)=\"onDragStart('hue')\"\n                (dragEnd)=\"onDragEnd('hue')\">\n                <div class=\"color-picker__cursor\"\n                    [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\n                    [ngStyle]=\"{\n                        left: (slider?.h || 0) * 100 + '%'\n                    }\"></div>\n            </div>\n            <div *ngIf=\"cpMode == colorModeInternal.grayscale\"\n                class=\"color-picker__slider color-picker__slider--value\"\n                cpSlider\n                [rgX]=\"1\"\n                (newValue)=\"onValueChange($event)\"\n                (dragStart)=\"onDragStart('value')\"\n                (dragEnd)=\"onDragEnd('value')\">\n                <div class=\"color-picker__cursor\"\n                    [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\n                    [ngStyle]=\"{\n                        left: (1 - (slider?.v || 0)) * 100 + '%'\n                    }\"></div>\n            </div>\n            <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                class=\"color-picker__slider color-picker__slider--alpha\"\n                cpSlider\n                [rgX]=\"1\"\n                (newValue)=\"onAlphaChange($event)\"\n                (dragStart)=\"onDragStart('alpha')\"\n                (dragEnd)=\"onDragEnd('alpha')\">\n                <div class=\"color-picker__slider--alpha-bg\"\n                    [ngStyle]=\"{\n                        backgroundImage: alphaSliderColor || ''\n                    }\">\n                    <div class=\"color-picker__cursor\"\n                        [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\n                        [ngStyle]=\"{\n                            left: (slider?.a || 0) * 100 + '%'\n                        }\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!cpDisableInput && (cpMode == colorModeInternal.color || cpMode == colorModeInternal.grayscale)\"\n        class=\"color-picker__inputs\">\n        <div class=\"color-picker__input-fields\">\n            <ng-container *ngIf=\"cpMode == colorModeInternal.grayscale; else formatSwitch\">\n                <div class=\"color-picker__input-field\">\n                    <input type=\"number\"\n                        pattern=\"[0-9]*\"\n                        min=\"0\"\n                        max=\"100\"\n                        cpText\n                        [rg]=\"100\"\n                        [value]=\"hslaText?.l\"\n                        (keyup.enter)=\"onAccept($event)\"\n                        (newValue)=\"onValueInput($event)\" />\n                    <span class=\"color-picker__input-field-label\">V</span>\n                </div>\n                <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                    class=\"color-picker__input-field\">\n                    <input type=\"number\"\n                        pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                        min=\"0\"\n                        max=\"1\"\n                        step=\"0.1\"\n                        cpText\n                        [rg]=\"1\"\n                        [value]=\"hslaText?.a\"\n                        (keyup.enter)=\"onAccept($event)\"\n                        (newValue)=\"onAlphaInput($event)\" />\n                    <span class=\"color-picker__input-field-label\">A</span>\n                </div>\n            </ng-container>\n            <ng-template #formatSwitch>\n                <ng-container [ngSwitch]=\"format\">\n                    <ng-container *ngSwitchCase=\"colorFormat.hsla\">\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"360\"\n                                cpText\n                                [rg]=\"360\"\n                                [value]=\"hslaText?.h\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onHueInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">H</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"hslaText?.s\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onSaturationInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">S</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"hslaText?.l\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onLightnessInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">L</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"hslaText?.a\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"colorFormat.rgba\">\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"255\"\n                                cpText\n                                [rg]=\"255\"\n                                [value]=\"rgbaText?.r\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onRedInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">R</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"255\"\n                                cpText\n                                [rg]=\"255\"\n                                [value]=\"rgbaText?.g\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onGreenInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">G</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"255\"\n                                cpText\n                                [rg]=\"255\"\n                                [value]=\"rgbaText?.b\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onBlueInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">B</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"hslaText?.a\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"colorFormat.cmyk\">\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.c\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onCyanInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">C</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.m\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onMagentaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">M</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.y\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onYellowInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">Y</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.k\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onBlackInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">K</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"cmykText?.c\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <div class=\"color-picker__input-field\">\n                            <input cpText\n                                [value]=\"hexText\"\n                                (blur)=\"onHexInput(null)\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onHexInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">Hex</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel == alphaChannel.forced\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"hexAlpha\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n        </div>\n        <div *ngIf=\"cpMode == colorModeInternal.color\"\n            class=\"color-picker__input-type\">\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(1)\"></span>\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(-1)\"></span>\n        </div>\n    </div>\n    <ng-container *ngIf=\"cpPresetColors?.length\">\n        <div class=\"color-picker__separator\"></div>\n        <div class=\"color-picker__preset\">\n            <div *ngIf=\"cpPresetLabel\"\n                class=\"color-picker__preset-label\">\n                <ng-container *ngIf=\"cpPresetLabel === true; else stringLabel\"\n                    i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\n                <ng-template #stringLabel>{{ cpPresetLabel }}</ng-template>\n            </div>\n            <div *ngIf=\"cpPresetColors?.length\"\n                class=\"color-picker__preset-items\">\n                <div *ngFor=\"let color of cpPresetColors\"\n                    class=\"color-picker__preset-item\"\n                    [title]=\"color\"\n                    (click)=\"setColorFromString(color)\">\n                    <div class=\"color-picker__preset-item-fill\"\n                        [ngStyle]=\"{ \n                        backgroundColor: color || ''\n                    }\"><button *ngIf=\"cpAddColorButton\"\n                            type=\"button\"\n                            title=\"Remove Color\"\n                            i18n-title=\"@@nxt-color-picker.button.remove-color\"\n                            class=\"color-picker__remove-selected\"\n                            (click)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                                width=\"24\"\n                                height=\"24\"\n                                viewBox=\"0 0 24 24\">\n                                <path\n                                    d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                                <path d=\"M0 0h24v24H0z\"\n                                    fill=\"none\" />\n                            </svg></button></div>\n                </div>\n                <div *ngFor=\"let i of fill(50)\"\n                    class=\"color-picker__preset-item\"></div>\n            </div>\n        </div>\n    </ng-container>\n    <div *ngIf=\"cpOKButton || cpCancelButton\"\n        class=\"color-picker__buttons\">\n        <button *ngIf=\"cpCancelButton\"\n            type=\"button\"\n            (click)=\"onCancel($event)\"\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\n        <button *ngIf=\"cpOKButton\"\n            type=\"button\"\n            (click)=\"onAccept($event)\"\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\n    </div>\n</div>\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,rgba(0,0,0,0) 0%,rgb(0,0,0) 100%),linear-gradient(to right,rgb(255,255,255) 0%,rgba(255,255,255,0) 100%);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,rgb(255,0,0) 0%,rgb(255,255,0) 16.6666666667%,rgb(0,255,0) 33.3333333333%,rgb(0,255,255) 50%,rgb(0,0,255) 66.6666666667%,rgb(255,0,255) 83.3333333333%,rgb(255,0,0) 100%)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(255,255,255) 100%)}.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;top:0;left:0;right:0;bottom: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;-webkit-appearance:none;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{-webkit-appearance:none;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}: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: 'cp-color-picker', encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"color-picker\"\n    (click)=\"$event.stopPropagation()\"\n    [ngStyle]=\"{\n        visibility: !show ? 'hidden' : 'visible',\n        width: cpWidth || '',\n        height: cpHeight || ''\n    }\"\n    *ngIf=\"show\">\n    <div *ngIf=\"cpDialogDisplay == dialogDisplay.popup\"\n        class=\"color-picker__arrow\"\n        [ngClass]=\"'color-picker__arrow--' + cpPosition\"></div>\n    <div *ngIf=\"cpMode == colorModeInternal.color\"\n        class=\"color-picker__sv\"\n        cpSlider\n        [rgX]=\"1\"\n        [rgY]=\"1\"\n        (newValue)=\"onColorChange($event)\"\n        (dragStart)=\"onDragStart('saturation-lightness')\"\n        (dragEnd)=\"onDragEnd('saturation-lightness')\"\n        [ngStyle]=\"{ \n            backgroundColor: hueSliderColor || ''\n        }\">\n        <div class=\"color-picker__cursor color-picker__cursor--sv\"\n            [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\n            [ngStyle]=\"{\n                top: (slider?.v || 0) * 100 + '%',\n                left: (slider?.s || 0) * 100 + '%'\n            }\"></div>\n    </div>\n    <div class=\"color-picker__controls\">\n        <div class=\"color-picker__selected\">\n            <div class=\"color-picker__selected-color\">\n                <div [ngStyle]=\"{ \n                    backgroundColor: selectedColor || ''\n                }\"><button\n                        *ngIf=\"cpAddColorButton && !(cpMaxPresetColors && (cpPresetColors?.length || 0) >= cpMaxPresetColors)\"\n                        type=\"button\"\n                        title=\"Add color to preset\"\n                        i18n-title=\"@@nxt-color-picker.button.add-color\"\n                        class=\"color-picker__add-selected\"\n                        [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\n                        (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\">\n                            <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n                            <path d=\"M0 0h24v24H0z\"\n                                fill=\"none\" />\n                        </svg></button></div>\n            </div>\n        </div>\n        <div class=\"color-picker__hav\">\n            <div *ngIf=\"cpMode == colorModeInternal.color\"\n                class=\"color-picker__slider color-picker__slider--hue\"\n                cpSlider\n                [rgX]=\"1\"\n                (newValue)=\"onHueChange($event)\"\n                (dragStart)=\"onDragStart('hue')\"\n                (dragEnd)=\"onDragEnd('hue')\">\n                <div class=\"color-picker__cursor\"\n                    [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\n                    [ngStyle]=\"{\n                        left: (slider?.h || 0) * 100 + '%'\n                    }\"></div>\n            </div>\n            <div *ngIf=\"cpMode == colorModeInternal.grayscale\"\n                class=\"color-picker__slider color-picker__slider--value\"\n                cpSlider\n                [rgX]=\"1\"\n                (newValue)=\"onValueChange($event)\"\n                (dragStart)=\"onDragStart('value')\"\n                (dragEnd)=\"onDragEnd('value')\">\n                <div class=\"color-picker__cursor\"\n                    [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\n                    [ngStyle]=\"{\n                        left: (1 - (slider?.v || 0)) * 100 + '%'\n                    }\"></div>\n            </div>\n            <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                class=\"color-picker__slider color-picker__slider--alpha\"\n                cpSlider\n                [rgX]=\"1\"\n                (newValue)=\"onAlphaChange($event)\"\n                (dragStart)=\"onDragStart('alpha')\"\n                (dragEnd)=\"onDragEnd('alpha')\">\n                <div class=\"color-picker__slider--alpha-bg\"\n                    [ngStyle]=\"{\n                        backgroundImage: alphaSliderColor || ''\n                    }\">\n                    <div class=\"color-picker__cursor\"\n                        [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\n                        [ngStyle]=\"{\n                            left: (slider?.a || 0) * 100 + '%'\n                        }\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!cpDisableInput && (cpMode == colorModeInternal.color || cpMode == colorModeInternal.grayscale)\"\n        class=\"color-picker__inputs\">\n        <div class=\"color-picker__input-fields\">\n            <ng-container *ngIf=\"cpMode == colorModeInternal.grayscale; else formatSwitch\">\n                <div class=\"color-picker__input-field\">\n                    <input type=\"number\"\n                        pattern=\"[0-9]*\"\n                        min=\"0\"\n                        max=\"100\"\n                        cpText\n                        [rg]=\"100\"\n                        [value]=\"hslaText?.l\"\n                        (keyup.enter)=\"onAccept($event)\"\n                        (newValue)=\"onValueInput($event)\" />\n                    <span class=\"color-picker__input-field-label\">V</span>\n                </div>\n                <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                    class=\"color-picker__input-field\">\n                    <input type=\"number\"\n                        pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                        min=\"0\"\n                        max=\"1\"\n                        step=\"0.1\"\n                        cpText\n                        [rg]=\"1\"\n                        [value]=\"hslaText?.a\"\n                        (keyup.enter)=\"onAccept($event)\"\n                        (newValue)=\"onAlphaInput($event)\" />\n                    <span class=\"color-picker__input-field-label\">A</span>\n                </div>\n            </ng-container>\n            <ng-template #formatSwitch>\n                <ng-container [ngSwitch]=\"format\">\n                    <ng-container *ngSwitchCase=\"colorFormat.hsla\">\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"360\"\n                                cpText\n                                [rg]=\"360\"\n                                [value]=\"hslaText?.h\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onHueInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">H</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"hslaText?.s\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onSaturationInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">S</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"hslaText?.l\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onLightnessInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">L</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"hslaText?.a\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"colorFormat.rgba\">\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"255\"\n                                cpText\n                                [rg]=\"255\"\n                                [value]=\"rgbaText?.r\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onRedInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">R</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"255\"\n                                cpText\n                                [rg]=\"255\"\n                                [value]=\"rgbaText?.g\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onGreenInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">G</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"255\"\n                                cpText\n                                [rg]=\"255\"\n                                [value]=\"rgbaText?.b\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onBlueInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">B</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"hslaText?.a\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"colorFormat.cmyk\">\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.c\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onCyanInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">C</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.m\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onMagentaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">M</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.y\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onYellowInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">Y</span>\n                        </div>\n                        <div class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]*\"\n                                min=\"0\"\n                                max=\"100\"\n                                cpText\n                                [rg]=\"100\"\n                                [value]=\"cmykText?.k\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onBlackInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">K</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel != alphaChannel.disabled\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"cmykText?.c\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <div class=\"color-picker__input-field\">\n                            <input cpText\n                                [value]=\"hexText\"\n                                (blur)=\"onHexInput(null)\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onHexInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">Hex</span>\n                        </div>\n                        <div *ngIf=\"cpAlphaChannel == alphaChannel.forced\"\n                            class=\"color-picker__input-field\">\n                            <input type=\"number\"\n                                pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.1\"\n                                cpText\n                                [rg]=\"1\"\n                                [value]=\"hexAlpha\"\n                                (keyup.enter)=\"onAccept($event)\"\n                                (newValue)=\"onAlphaInput($event)\" />\n                            <span class=\"color-picker__input-field-label\">A</span>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n        </div>\n        <div *ngIf=\"cpMode == colorModeInternal.color\"\n            class=\"color-picker__input-type\">\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(1)\"></span>\n            <span class=\"color-picker__input-type-arrow\"\n                (click)=\"onFormatToggle(-1)\"></span>\n        </div>\n    </div>\n    <ng-container *ngIf=\"cpPresetColors?.length\">\n        <div class=\"color-picker__separator\"></div>\n        <div class=\"color-picker__preset\">\n            <div *ngIf=\"cpPresetLabel\"\n                class=\"color-picker__preset-label\">\n                <ng-container *ngIf=\"cpPresetLabel === true; else stringLabel\"\n                    i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\n                <ng-template #stringLabel>{{ cpPresetLabel }}</ng-template>\n            </div>\n            <div *ngIf=\"cpPresetColors?.length\"\n                class=\"color-picker__preset-items\">\n                <div *ngFor=\"let color of cpPresetColors\"\n                    class=\"color-picker__preset-item\"\n                    [title]=\"color\"\n                    (click)=\"setColorFromString(color)\">\n                    <div class=\"color-picker__preset-item-fill\"\n                        [ngStyle]=\"{ \n                        backgroundColor: color || ''\n                    }\"><button *ngIf=\"cpAddColorButton\"\n                            type=\"button\"\n                            title=\"Remove Color\"\n                            i18n-title=\"@@nxt-color-picker.button.remove-color\"\n                            class=\"color-picker__remove-selected\"\n                            (click)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\n                                width=\"24\"\n                                height=\"24\"\n                                viewBox=\"0 0 24 24\">\n                                <path\n                                    d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                                <path d=\"M0 0h24v24H0z\"\n                                    fill=\"none\" />\n                            </svg></button></div>\n                </div>\n                <div *ngFor=\"let i of fill(50)\"\n                    class=\"color-picker__preset-item\"></div>\n            </div>\n        </div>\n    </ng-container>\n    <div *ngIf=\"cpOKButton || cpCancelButton\"\n        class=\"color-picker__buttons\">\n        <button *ngIf=\"cpCancelButton\"\n            type=\"button\"\n            (click)=\"onCancel($event)\"\n            i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\n        <button *ngIf=\"cpOKButton\"\n            type=\"button\"\n            (click)=\"onAccept($event)\"\n            i18n=\"@@nxt-color-picker.button.ok\">OK</button>\n    </div>\n</div>\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,rgba(0,0,0,0) 0%,rgb(0,0,0) 100%),linear-gradient(to right,rgb(255,255,255) 0%,rgba(255,255,255,0) 100%);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,rgb(255,0,0) 0%,rgb(255,255,0) 16.6666666667%,rgb(0,255,0) 33.3333333333%,rgb(0,255,255) 50%,rgb(0,0,255) 66.6666666667%,rgb(255,0,255) 83.3333333333%,rgb(255,0,0) 100%)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(255,255,255) 100%)}.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;top:0;left:0;right:0;bottom: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;-webkit-appearance:none;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{-webkit-appearance:none;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}: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: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ColorPickerService }]; }, propDecorators: { onCancel: [{
                 type: HostListener,
                 args: ['document:keyup.esc', ['$event']]

package/esm2020/lib/color-picker.directive.mjs

@@ -258,9 +258,9 @@ export class ColorPickerDirective {
         return pos;
     }
 }
-ColorPickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.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 });
-ColorPickerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: ColorPickerDirective, selector: "[cpColor]", inputs: { cpColor: "cpColor", cpWidth: "cpWidth", cpHeight: "cpHeight", cpToggle: "cpToggle", cpDisabled: "cpDisabled", cpMode: "cpMode", cpOutputFormat: "cpOutputFormat", cpCmykEnabled: "cpCmykEnabled", cpAlphaChannel: "cpAlphaChannel", cpFallbackColor: "cpFallbackColor", cpPosition: "cpPosition", cpPositionOffset: "cpPositionOffset", cpPresetLabel: "cpPresetLabel", cpPresetColors: "cpPresetColors", cpDisableInput: "cpDisableInput", cpDialogDisplay: "cpDialogDisplay", cpIgnoredElements: "cpIgnoredElements", cpSaveClickOutside: "cpSaveClickOutside", cpCloseClickOutside: "cpCloseClickOutside", cpOKButton: "cpOKButton", cpCancelButton: "cpCancelButton", cpAddColorButton: "cpAddColorButton", cpMaxPresetColors: "cpMaxPresetColors", cpUseRootViewContainer: "cpUseRootViewContainer" }, outputs: { cpOpen: "cpOpen", cpClose: "cpClose", cpInputChange: "cpInputChange", cpToggleChange: "cpToggleChange", cpSliderDragStart: "cpSliderDragStart", cpSliderChange: "cpSliderChange", cpSliderDragEnd: "cpSliderDragEnd", cpColorSelect: "cpColorSelect", cpColorSelectCancel: "cpColorSelectCancel", cpColorChange: "cpColorChange", cpCmykColorChange: "cpCmykColorChange", cpPresetColorsChange: "cpPresetColorsChange" }, host: { listeners: { "focus": "handleOpen($event)", "click": "handleOpen($event)", "input": "handleInput($event)", "change": "handleInput($event)" } }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColorPickerDirective, decorators: [{
+ColorPickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPickerDirective, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
+ColorPickerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: ColorPickerDirective, selector: "[cpColor]", inputs: { cpColor: "cpColor", cpWidth: "cpWidth", cpHeight: "cpHeight", cpToggle: "cpToggle", cpDisabled: "cpDisabled", cpMode: "cpMode", cpOutputFormat: "cpOutputFormat", cpCmykEnabled: "cpCmykEnabled", cpAlphaChannel: "cpAlphaChannel", cpFallbackColor: "cpFallbackColor", cpPosition: "cpPosition", cpPositionOffset: "cpPositionOffset", cpPresetLabel: "cpPresetLabel", cpPresetColors: "cpPresetColors", cpDisableInput: "cpDisableInput", cpDialogDisplay: "cpDialogDisplay", cpIgnoredElements: "cpIgnoredElements", cpSaveClickOutside: "cpSaveClickOutside", cpCloseClickOutside: "cpCloseClickOutside", cpOKButton: "cpOKButton", cpCancelButton: "cpCancelButton", cpAddColorButton: "cpAddColorButton", cpMaxPresetColors: "cpMaxPresetColors", cpUseRootViewContainer: "cpUseRootViewContainer" }, outputs: { cpOpen: "cpOpen", cpClose: "cpClose", cpInputChange: "cpInputChange", cpToggleChange: "cpToggleChange", cpSliderDragStart: "cpSliderDragStart", cpSliderChange: "cpSliderChange", cpSliderDragEnd: "cpSliderDragEnd", cpColorSelect: "cpColorSelect", cpColorSelectCancel: "cpColorSelectCancel", cpColorChange: "cpColorChange", cpCmykColorChange: "cpCmykColorChange", cpPresetColorsChange: "cpPresetColorsChange" }, host: { listeners: { "focus": "handleOpen($event)", "click": "handleOpen($event)", "input": "handleInput($event)", "change": "handleInput($event)" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cpColor]'

package/esm2020/lib/color-picker.module.mjs

@@ -8,15 +8,15 @@ import { TextDirective } from './text.directive';
 import * as i0 from "@angular/core";
 export class ColorPickerModule {
 }
-ColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: ColorPickerModule, declarations: [TextDirective,
+ColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorPickerModule, declarations: [TextDirective,
         SliderDirective,
         ColorPickerComponent,
         ColorPickerDirective], imports: [CommonModule,
         OverlayModule], exports: [ColorPickerDirective] });
-ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColorPickerModule, imports: [CommonModule,
+ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPickerModule, imports: [CommonModule,
         OverlayModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/lib/color-picker.service.mjs

@@ -14,9 +14,9 @@ export class ColorPickerService {
         }
     }
 }
-ColorPickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ColorPickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColorPickerService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ColorPickerService, decorators: [{
+ColorPickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ColorPickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPickerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPickerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2020/lib/slider.directive.mjs

@@ -56,9 +56,9 @@ export class SliderDirective {
         }
     }
 }
-SliderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SliderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-SliderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: SliderDirective, selector: "[cpSlider]", inputs: { rgX: "rgX", rgY: "rgY", slider: "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: "14.0.1", ngImport: i0, type: SliderDirective, decorators: [{
+SliderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SliderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SliderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: SliderDirective, selector: "[cpSlider]", inputs: { rgX: "rgX", rgY: "rgY", slider: "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: "14.1.2", ngImport: i0, type: SliderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cpSlider]'

package/esm2020/lib/text.directive.mjs

@@ -15,9 +15,9 @@ export class TextDirective {
         }
     }
 }
-TextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: TextDirective, selector: "[cpText]", inputs: { rg: "rg", text: "text" }, outputs: { newValue: "newValue" }, host: { listeners: { "input": "inputChange($event)", "change": "inputChange($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TextDirective, decorators: [{
+TextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: TextDirective, selector: "[cpText]", inputs: { rg: "rg", text: "text" }, outputs: { newValue: "newValue" }, host: { listeners: { "input": "inputChange($event)", "change": "inputChange($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: TextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cpText]'