ngx-kit 7.1.0 → 7.3.0

package/fesm2022/ngx-kit-color-picker.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Pipe, EventEmitter, Output, Input, Component, inject, forwardRef, ChangeDetectionStrategy, ElementRef, HostListener, Directive } from '@angular/core';
+import { Pipe, EventEmitter, Output, Input, Component, InjectionToken, inject, input, model, output, signal, effect, forwardRef, ChangeDetectionStrategy, ElementRef, HostListener, Directive } from '@angular/core';
+import * as i1$2 from 'ngx-kit/core';
+import { CSS_COLOR_NAMES, SliderComponent, SaturationComponent } from 'ngx-kit/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$2 from 'ngx-kit/shared';
-import { SliderComponent, SaturationComponent, BrowserService } from 'ngx-kit/shared';
 
 var ColorFormats;
 (function (ColorFormats) {
@@ -461,158 +461,6 @@ function rgbToCmykString(r, g, b) {
     return `cmyk(${Math.round(c)}%, ${Math.round(m)}%, ${Math.round(y)}%, ${Math.round(k)}%)`;
 }
 
-// List of all CSS color names and their hex values (W3C + extended)
-const colorNames = {
-    aliceblue: '#f0f8ff',
-    antiquewhite: '#faebd7',
-    aqua: '#00ffff',
-    aquamarine: '#7fffd4',
-    azure: '#f0ffff',
-    beige: '#f5f5dc',
-    bisque: '#ffe4c4',
-    black: '#000000',
-    blanchedalmond: '#ffebcd',
-    blue: '#0000ff',
-    blueviolet: '#8a2be2',
-    brown: '#a52a2a',
-    burlywood: '#deb887',
-    cadetblue: '#5f9ea0',
-    chartreuse: '#7fff00',
-    chocolate: '#d2691e',
-    coral: '#ff7f50',
-    cornflowerblue: '#6495ed',
-    cornsilk: '#fff8dc',
-    crimson: '#dc143c',
-    cyan: '#00ffff',
-    darkblue: '#00008b',
-    darkcyan: '#008b8b',
-    darkgoldenrod: '#b8860b',
-    darkgray: '#a9a9a9',
-    darkgreen: '#006400',
-    darkgrey: '#a9a9a9',
-    darkkhaki: '#bdb76b',
-    darkmagenta: '#8b008b',
-    darkolivegreen: '#556b2f',
-    darkorange: '#ff8c00',
-    darkorchid: '#9932cc',
-    darkred: '#8b0000',
-    darksalmon: '#e9967a',
-    darkseagreen: '#8fbc8f',
-    darkslateblue: '#483d8b',
-    darkslategray: '#2f4f4f',
-    darkslategrey: '#2f4f4f',
-    darkturquoise: '#00ced1',
-    darkviolet: '#9400d3',
-    deeppink: '#ff1493',
-    deepskyblue: '#00bfff',
-    dimgray: '#696969',
-    dimgrey: '#696969',
-    dodgerblue: '#1e90ff',
-    firebrick: '#b22222',
-    floralwhite: '#fffaf0',
-    forestgreen: '#228b22',
-    fuchsia: '#ff00ff',
-    gainsboro: '#dcdcdc',
-    ghostwhite: '#f8f8ff',
-    gold: '#ffd700',
-    goldenrod: '#daa520',
-    gray: '#808080',
-    green: '#008000',
-    greenyellow: '#adff2f',
-    grey: '#808080',
-    honeydew: '#f0fff0',
-    hotpink: '#ff69b4',
-    indianred: '#cd5c5c',
-    indigo: '#4b0082',
-    ivory: '#fffff0',
-    khaki: '#f0e68c',
-    lavender: '#e6e6fa',
-    lavenderblush: '#fff0f5',
-    lawngreen: '#7cfc00',
-    lemonchiffon: '#fffacd',
-    lightblue: '#add8e6',
-    lightcoral: '#f08080',
-    lightcyan: '#e0ffff',
-    lightgoldenrodyellow: '#fafad2',
-    lightgray: '#d3d3d3',
-    lightgreen: '#90ee90',
-    lightgrey: '#d3d3d3',
-    lightpink: '#ffb6c1',
-    lightsalmon: '#ffa07a',
-    lightseagreen: '#20b2aa',
-    lightskyblue: '#87cefa',
-    lightslategray: '#778899',
-    lightslategrey: '#778899',
-    lightsteelblue: '#b0c4de',
-    lightyellow: '#ffffe0',
-    lime: '#00ff00',
-    limegreen: '#32cd32',
-    linen: '#faf0e6',
-    magenta: '#ff00ff',
-    maroon: '#800000',
-    mediumaquamarine: '#66cdaa',
-    mediumblue: '#0000cd',
-    mediumorchid: '#ba55d3',
-    mediumpurple: '#9370db',
-    mediumseagreen: '#3cb371',
-    mediumslateblue: '#7b68ee',
-    mediumspringgreen: '#00fa9a',
-    mediumturquoise: '#48d1cc',
-    mediumvioletred: '#c71585',
-    midnightblue: '#191970',
-    mintcream: '#f5fffa',
-    mistyrose: '#ffe4e1',
-    moccasin: '#ffe4b5',
-    navajowhite: '#ffdead',
-    navy: '#000080',
-    oldlace: '#fdf5e6',
-    olive: '#808000',
-    olivedrab: '#6b8e23',
-    orange: '#ffa500',
-    orangered: '#ff4500',
-    orchid: '#da70d6',
-    palegoldenrod: '#eee8aa',
-    palegreen: '#98fb98',
-    paleturquoise: '#afeeee',
-    palevioletred: '#db7093',
-    papayawhip: '#ffefd5',
-    peachpuff: '#ffdab9',
-    peru: '#cd853f',
-    pink: '#ffc0cb',
-    plum: '#dda0dd',
-    powderblue: '#b0e0e6',
-    purple: '#800080',
-    rebeccapurple: '#663399',
-    red: '#ff0000',
-    rosybrown: '#bc8f8f',
-    royalblue: '#4169e1',
-    saddlebrown: '#8b4513',
-    salmon: '#fa8072',
-    sandybrown: '#f4a460',
-    seagreen: '#2e8b57',
-    seashell: '#fff5ee',
-    sienna: '#a0522d',
-    silver: '#c0c0c0',
-    skyblue: '#87ceeb',
-    slateblue: '#6a5acd',
-    slategray: '#708090',
-    slategrey: '#708090',
-    snow: '#fffafa',
-    springgreen: '#00ff7f',
-    steelblue: '#4682b4',
-    tan: '#d2b48c',
-    teal: '#008080',
-    thistle: '#d8bfd8',
-    tomato: '#ff6347',
-    turquoise: '#40e0d0',
-    violet: '#ee82ee',
-    wheat: '#f5deb3',
-    white: '#ffffff',
-    whitesmoke: '#f5f5f5',
-    yellow: '#ffff00',
-    yellowgreen: '#9acd32',
-};
-
 class NgxColor {
     _rgb = { r: 0, g: 0, b: 0, a: 1 };
     _name = '';
@@ -649,8 +497,8 @@ class NgxColor {
         }
         if (typeof input === 'string') {
             const name = input.trim().toLowerCase();
-            if (colorNames[name]) {
-                this._rgb = hexToRgb(colorNames[name]);
+            if (CSS_COLOR_NAMES[name]) {
+                this._rgb = hexToRgb(CSS_COLOR_NAMES[name]);
                 this._name = name;
                 return;
             }
@@ -689,7 +537,7 @@ class NgxColor {
         if (this._name)
             return this._name;
         const hex = this.toHexString();
-        for (const [n, h] of Object.entries(colorNames)) {
+        for (const [n, h] of Object.entries(CSS_COLOR_NAMES)) {
             if (h.toLowerCase() === hex.toLowerCase())
                 return n;
         }
@@ -1068,55 +916,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Output
             }] } });
 
-class NgxInputColorComponent {
-    cd;
-    browserService = inject(BrowserService);
-    theme = this.browserService.prefersDarkMode ? 'dark' : 'light';
-    set setTheme(val) {
-        if (!val || val == 'auto') {
-            this.theme = this.browserService.prefersDarkMode ? 'dark' : 'light';
-        }
-        else {
-            this.theme = val;
-        }
-    }
+const PRESETS_COLORS = [
+    '#000000',
+    '#ffffff',
+    '#4a4a4a',
+    '#b0b0b0',
+    '#3b82f6',
+    '#6366f1',
+    '#a855f7',
+    '#ec4899',
+    '#ef4444',
+    '#f97316',
+    '#f59e0b',
+    '#8b5e3c',
+    '#22c55e',
+    '#14b8a6',
+    '#06b6d4',
+    '#0ea5e9',
+];
+
+class NgxInputColorConfig {
+    /**
+     * show preset colors
+     * - It will not display preset colors in simple mode.
+     */
+    showPresets = true;
+    presetColors = PRESETS_COLORS;
     /** Minifi UI  */
     simpleMode = false;
     outputType = 'HEX';
-    /**
-     * default inspectors
-     * - ColorInspector.Picker
-     * - ColorInspector.RGB
-     * - ColorInspector.HSL
-     *
-     * @alias defaultInspector
-     */
     defaultInspector = ColorInspector.Picker;
     useAlphaChannel = true;
-    set setUseAlphaChannel(val) {
-        this.useAlphaChannel = val == true;
-        if (!this.useAlphaChannel) {
-            this.color.removeAlphaChannel();
-            this.emitChange();
-        }
-    }
+}
+
+const NGX_INPUT_COLOR_CONFIG_DEFAULT = new NgxInputColorConfig();
+const NGX_INPUT_COLOR_CONFIG = new InjectionToken('ngx-input-color-config', {
+    factory: () => NGX_INPUT_COLOR_CONFIG_DEFAULT,
+});
+
+class NgxInputColorComponent {
+    configs = inject(NGX_INPUT_COLOR_CONFIG);
+    /** Minifi UI  */
+    simpleMode = input(this.configs.simpleMode ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "simpleMode" }] : /* istanbul ignore next */ []));
+    outputType = input(this.configs.outputType ?? 'HEX', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outputType" }] : /* istanbul ignore next */ []));
+    defaultInspector = model(this.configs.defaultInspector ?? ColorInspector.Picker, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultInspector" }] : /* istanbul ignore next */ []));
+    useAlphaChannel = input(this.configs.useAlphaChannel ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "useAlphaChannel" }] : /* istanbul ignore next */ []));
+    showPresets = input(this.configs.showPresets ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPresets" }] : /* istanbul ignore next */ []));
+    presetColors = input(this.configs.presetColors ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presetColors" }] : /* istanbul ignore next */ []));
     /** Emitted when the color value changes */
-    change = new EventEmitter();
+    colorChange = output();
     /** @ignore */
     format = ColorFormats.HSVA;
     /** @ignore */
     isDarkColor = true;
     /** @ignore */
-    rgbaColor = 'rgba(0, 0, 0, 1)';
+    rgbaColor = signal('rgba(0, 0, 0, 1)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rgbaColor" }] : /* istanbul ignore next */ []));
     /** @ignore */
-    hexColor = '#000000';
-    outputColor = '';
+    hexColor = signal('#000000', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hexColor" }] : /* istanbul ignore next */ []));
+    outputColor = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outputColor" }] : /* istanbul ignore next */ []));
     /** @ignore */
-    name = 'black';
+    name = signal('black', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     /** @ignore */
-    isSupportedEyeDrop;
+    isSupportedEyeDrop = 'EyeDropper' in (window ?? {});
     /** @ignore */
-    color = new NgxColor();
+    color = signal(new NgxColor(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /** @ignore */
     isDisabled = false;
     /**@ignore */
@@ -1125,14 +999,15 @@ class NgxInputColorComponent {
     _onTouched = () => { };
     /**@ignore */
     _onValidateChange = () => { };
-    constructor(cd) {
-        this.cd = cd;
-        this.isSupportedEyeDrop = 'EyeDropper' in window;
+    constructor() {
+        effect(() => {
+            const useAlphaChannel = this.useAlphaChannel() == true;
+            if (!useAlphaChannel) {
+                this.color().removeAlphaChannel();
+                this.emitChange();
+            }
+        });
     }
-    /** @ignore */
-    ngOnInit() { }
-    /** @ignore */
-    ngOnDestroy() { }
     get ColorFormats() {
         return ColorFormats;
     }
@@ -1157,7 +1032,7 @@ class NgxInputColorComponent {
     }
     /** @ignore */
     validate(control) {
-        if (this.color && this.color.isValid === false) {
+        if (this.color() && this.color().isValid === false) {
             return { invalid: true };
         }
         return null;
@@ -1179,12 +1054,14 @@ class NgxInputColorComponent {
         if (this.isSupportedEyeDrop) {
             let t = new EyeDropper().open();
             t.then(async (result) => {
-                this.hexColor = result.sRGBHex;
-                this.initColor(new NgxColor(this.hexColor));
-                this.cd.detectChanges();
+                this.hexColor.set(result.sRGBHex);
+                this.initColor(new NgxColor(this.hexColor()));
             });
         }
     }
+    selectColor(c) {
+        this.initColor(new NgxColor(c));
+    }
     /**
      *  call from directive
     /* @ignore
@@ -1192,26 +1069,22 @@ class NgxInputColorComponent {
     async initColor(c) {
         if (!c)
             return;
-        this.color = c;
-        this.rgbaColor = this.color.toRgbString();
-        this.hexColor = this.color.toHexString();
-        this.outputColor = await this.color.getOutputResult(this.outputType);
-        this.isDarkColor = this.color.isDark();
-        this.name = await this.color.name();
+        this.color.set(c);
+        this.rgbaColor.set(this.color().toRgbString());
+        this.hexColor.set(this.color().toHexString());
+        this.outputColor.set(await this.color().getOutputResult(this.outputType()));
+        this.isDarkColor = this.color().isDark();
+        this.name.set(await this.color().name());
         this.emitChange();
     }
     /** @ignore */
-    stopPropagation(ev) {
-        ev.stopPropagation();
-    }
-    /** @ignore */
     async emitChange() {
-        this.outputColor = await this.color.getOutputResult(this.outputType);
-        this._onChange(this.outputColor);
-        this.change.emit(this.outputColor);
+        this.outputColor.set(await this.color().getOutputResult(this.outputType()));
+        this._onChange(this.outputColor());
+        this.colorChange.emit(this.outputColor());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxInputColorComponent, isStandalone: true, selector: "ngx-input-color", inputs: { setTheme: ["theme", "setTheme"], simpleMode: "simpleMode", outputType: "outputType", defaultInspector: "defaultInspector", setUseAlphaChannel: ["useAlphaChannel", "setUseAlphaChannel"] }, outputs: { change: "change" }, host: { properties: { "class.dark": "theme==\"dark\"" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxInputColorComponent, isStandalone: true, selector: "ngx-input-color", inputs: { simpleMode: { classPropertyName: "simpleMode", publicName: "simpleMode", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, defaultInspector: { classPropertyName: "defaultInspector", publicName: "defaultInspector", isSignal: true, isRequired: false, transformFunction: null }, useAlphaChannel: { classPropertyName: "useAlphaChannel", publicName: "useAlphaChannel", isSignal: true, isRequired: false, transformFunction: null }, showPresets: { classPropertyName: "showPresets", publicName: "showPresets", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { defaultInspector: "defaultInspectorChange", colorChange: "colorChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgxInputColorComponent),
@@ -1222,7 +1095,7 @@ class NgxInputColorComponent {
                 multi: true,
                 useExisting: NgxInputColorComponent,
             },
-        ], ngImport: i0, template: "<div\n  class=\"ngx-input-color-picker\"\n  (click)=\"stopPropagation($event)\"\n  [class.simple-mode]=\"simpleMode\">\n  @if (!simpleMode) {\n    <div\n      class=\"ngx-color-preview\"\n      [ngStyle]=\"{ '--ngx-selected-color': rgbaColor }\"\n      [class.is-dark-color]=\"isDarkColor\">\n      <div class=\"rgbacode\">{{ outputColor | uppercase }}</div>\n      @if (outputType !== 'HEX') {\n        <div class=\"hexacode\">{{ hexColor | uppercase }}</div>\n      }\n      <div class=\"colorname\">{{ name }}</div>\n      <div class=\"color\"></div>\n    </div>\n  }\n  <div class=\"ngx-c-inner\">\n    <div class=\"top-actions\">\n      <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\n        @for (inspector of ColorInspector | enumToArray; track inspector) {\n          <option [value]=\"inspector\">\n            {{ ColorInspector[+inspector] }}\n          </option>\n        }\n      </select>\n      @if (isSupportedEyeDrop) {\n        <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <defs>\n              <style>\n                .fa-secondary {\n                  opacity: 0.4;\n                }\n              </style>\n            </defs>\n            <path\n              class=\"fa-primary\"\n              d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\n            <path\n              class=\"fa-secondary\"\n              d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\n          </svg>\n        </button>\n      }\n    </div>\n\n    @switch (+defaultInspector) {\n      @case (ColorInspector.Picker) {\n        <app-picker\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [simpleMode]=\"simpleMode\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-picker>\n      }\n      @case (ColorInspector.HSL) {\n        <app-hsl\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-hsl>\n      }\n      @case (ColorInspector.RGB) {\n        <app-rgb\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-rgb>\n      }\n      @case (ColorInspector.CMYK) {\n        <app-cmyk [color]=\"color\" (colorChange)=\"initColor($event)\"></app-cmyk>\n      }\n    }\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff}.ngx-input-color-picker{width:270px;max-width:100%;border-radius:15px;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;box-shadow:0 0 20px #7a7a7a21}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.ngx-color-preview{min-height:100px;padding:10px 36px;line-height:1.6;font-size:14px;font-family:arial,tahoma;font-weight:700;position:relative;color:#353535;background-color:#fff}.ngx-color-preview.is-dark-color{color:#fff}.ngx-color-preview:after,.ngx-color-preview:before{content:\" \";position:absolute;inset:0}.ngx-color-preview:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.ngx-color-preview:after{background:var(--ngx-selected-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text)}.top-actions select:focus{cursor:pointer;background:#e5f0ff;color:#06f}.top-actions select option{padding:10px 20px;background:var(--ngx-color-bg);color:var(--ngx-color-text);transition:all .3s}.top-actions select option:hover{background:#f0f0f048}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PickerComponent, selector: "app-picker", inputs: ["simpleMode", "color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "component", type: CmykComponent, selector: "app-cmyk", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: HslComponent, selector: "app-hsl", inputs: ["color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "component", type: RgbComponent, selector: "app-rgb", inputs: ["color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: EnumToArrayPipe, name: "enumToArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"ngx-input-color-picker\" [class.simple-mode]=\"simpleMode()\">\n  @if (!simpleMode()) {\n    <div\n      class=\"ngx-color-preview\"\n      [ngStyle]=\"{ '--ngx-selected-color': rgbaColor() }\"\n      [class.is-dark-color]=\"isDarkColor\">\n      <div class=\"rgbacode\">{{ outputColor() | uppercase }}</div>\n      @if (outputType() !== 'HEX') {\n        <div class=\"hexacode\">{{ hexColor() | uppercase }}</div>\n      }\n      <div class=\"colorname\">{{ name() }}</div>\n      <div class=\"color\"></div>\n    </div>\n  }\n  <div class=\"ngx-c-inner\">\n    <div class=\"top-actions\">\n      <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\n        @for (inspector of ColorInspector | enumToArray; track inspector) {\n          <option [value]=\"inspector\">\n            {{ ColorInspector[+inspector] }}\n          </option>\n        }\n      </select>\n      @if (isSupportedEyeDrop) {\n        <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <defs>\n              <style>\n                .fa-secondary {\n                  opacity: 0.4;\n                }\n              </style>\n            </defs>\n            <path\n              class=\"fa-primary\"\n              d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\n            <path\n              class=\"fa-secondary\"\n              d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\n          </svg>\n        </button>\n      }\n    </div>\n    @switch (+defaultInspector()) {\n      @case (ColorInspector.Picker) {\n        <app-picker\n          [color]=\"color()\"\n          (colorChange)=\"initColor($event)\"\n          [simpleMode]=\"simpleMode()\"\n          [useAlphaChannel]=\"useAlphaChannel()\"></app-picker>\n      }\n      @case (ColorInspector.HSL) {\n        <app-hsl\n          [color]=\"color()\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel()\"></app-hsl>\n      }\n      @case (ColorInspector.RGB) {\n        <app-rgb\n          [color]=\"color()\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel()\"></app-rgb>\n      }\n      @case (ColorInspector.CMYK) {\n        <app-cmyk [color]=\"color()\" (colorChange)=\"initColor($event)\"></app-cmyk>\n      }\n    }\n    @if (showPresets() && !simpleMode()) {\n      <div class=\"presets-colors\">\n        @for (item of presetColors(); track $index) {\n          <button type=\"button\" [style.background]=\"item\" (click)=\"selectColor(item)\"></button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-input-color-picker{width:270px;max-width:100%;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.ngx-color-preview{min-height:100px;padding:10px 36px;line-height:1.6;font-size:14px;font-family:arial,tahoma;font-weight:700;position:relative;color:#353535;background-color:#fff}.ngx-color-preview.is-dark-color{color:#fff}.ngx-color-preview:after,.ngx-color-preview:before{content:\" \";position:absolute;inset:0}.ngx-color-preview:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.ngx-color-preview:after{background:var(--ngx-selected-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text)}.top-actions select:focus{cursor:pointer;background:#e5f0ff;color:#06f}.top-actions select option{padding:10px 20px;background:var(--ngx-color-bg);color:var(--ngx-color-text);transition:all .3s}.top-actions select option:hover{background:#f0f0f048}.presets-colors{display:flex;align-items:center;flex-wrap:wrap;max-height:200px;overflow:auto;gap:5px;margin-top:10px}.presets-colors button{all:unset;width:26px;height:26px;border-radius:100%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PickerComponent, selector: "app-picker", inputs: ["simpleMode", "color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "component", type: CmykComponent, selector: "app-cmyk", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: HslComponent, selector: "app-hsl", inputs: ["color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "component", type: RgbComponent, selector: "app-rgb", inputs: ["color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: EnumToArrayPipe, name: "enumToArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColorComponent, decorators: [{
             type: Component,
@@ -1237,9 +1110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             multi: true,
                             useExisting: NgxInputColorComponent,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.dark]': 'theme=="dark"',
-                    }, imports: [
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         FormsModule,
                         EnumToArrayPipe,
@@ -1247,22 +1118,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         CmykComponent,
                         HslComponent,
                         RgbComponent,
-                    ], template: "<div\n  class=\"ngx-input-color-picker\"\n  (click)=\"stopPropagation($event)\"\n  [class.simple-mode]=\"simpleMode\">\n  @if (!simpleMode) {\n    <div\n      class=\"ngx-color-preview\"\n      [ngStyle]=\"{ '--ngx-selected-color': rgbaColor }\"\n      [class.is-dark-color]=\"isDarkColor\">\n      <div class=\"rgbacode\">{{ outputColor | uppercase }}</div>\n      @if (outputType !== 'HEX') {\n        <div class=\"hexacode\">{{ hexColor | uppercase }}</div>\n      }\n      <div class=\"colorname\">{{ name }}</div>\n      <div class=\"color\"></div>\n    </div>\n  }\n  <div class=\"ngx-c-inner\">\n    <div class=\"top-actions\">\n      <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\n        @for (inspector of ColorInspector | enumToArray; track inspector) {\n          <option [value]=\"inspector\">\n            {{ ColorInspector[+inspector] }}\n          </option>\n        }\n      </select>\n      @if (isSupportedEyeDrop) {\n        <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <defs>\n              <style>\n                .fa-secondary {\n                  opacity: 0.4;\n                }\n              </style>\n            </defs>\n            <path\n              class=\"fa-primary\"\n              d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\n            <path\n              class=\"fa-secondary\"\n              d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\n          </svg>\n        </button>\n      }\n    </div>\n\n    @switch (+defaultInspector) {\n      @case (ColorInspector.Picker) {\n        <app-picker\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [simpleMode]=\"simpleMode\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-picker>\n      }\n      @case (ColorInspector.HSL) {\n        <app-hsl\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-hsl>\n      }\n      @case (ColorInspector.RGB) {\n        <app-rgb\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-rgb>\n      }\n      @case (ColorInspector.CMYK) {\n        <app-cmyk [color]=\"color\" (colorChange)=\"initColor($event)\"></app-cmyk>\n      }\n    }\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff}.ngx-input-color-picker{width:270px;max-width:100%;border-radius:15px;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;box-shadow:0 0 20px #7a7a7a21}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.ngx-color-preview{min-height:100px;padding:10px 36px;line-height:1.6;font-size:14px;font-family:arial,tahoma;font-weight:700;position:relative;color:#353535;background-color:#fff}.ngx-color-preview.is-dark-color{color:#fff}.ngx-color-preview:after,.ngx-color-preview:before{content:\" \";position:absolute;inset:0}.ngx-color-preview:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.ngx-color-preview:after{background:var(--ngx-selected-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text)}.top-actions select:focus{cursor:pointer;background:#e5f0ff;color:#06f}.top-actions select option{padding:10px 20px;background:var(--ngx-color-bg);color:var(--ngx-color-text);transition:all .3s}.top-actions select option:hover{background:#f0f0f048}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { setTheme: [{
-                type: Input,
-                args: ['theme']
-            }], simpleMode: [{
-                type: Input
-            }], outputType: [{
-                type: Input
-            }], defaultInspector: [{
-                type: Input
-            }], setUseAlphaChannel: [{
-                type: Input,
-                args: ['useAlphaChannel']
-            }], change: [{
-                type: Output
-            }] } });
+                    ], template: "<div class=\"ngx-input-color-picker\" [class.simple-mode]=\"simpleMode()\">\n  @if (!simpleMode()) {\n    <div\n      class=\"ngx-color-preview\"\n      [ngStyle]=\"{ '--ngx-selected-color': rgbaColor() }\"\n      [class.is-dark-color]=\"isDarkColor\">\n      <div class=\"rgbacode\">{{ outputColor() | uppercase }}</div>\n      @if (outputType() !== 'HEX') {\n        <div class=\"hexacode\">{{ hexColor() | uppercase }}</div>\n      }\n      <div class=\"colorname\">{{ name() }}</div>\n      <div class=\"color\"></div>\n    </div>\n  }\n  <div class=\"ngx-c-inner\">\n    <div class=\"top-actions\">\n      <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\n        @for (inspector of ColorInspector | enumToArray; track inspector) {\n          <option [value]=\"inspector\">\n            {{ ColorInspector[+inspector] }}\n          </option>\n        }\n      </select>\n      @if (isSupportedEyeDrop) {\n        <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <defs>\n              <style>\n                .fa-secondary {\n                  opacity: 0.4;\n                }\n              </style>\n            </defs>\n            <path\n              class=\"fa-primary\"\n              d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\n            <path\n              class=\"fa-secondary\"\n              d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\n          </svg>\n        </button>\n      }\n    </div>\n    @switch (+defaultInspector()) {\n      @case (ColorInspector.Picker) {\n        <app-picker\n          [color]=\"color()\"\n          (colorChange)=\"initColor($event)\"\n          [simpleMode]=\"simpleMode()\"\n          [useAlphaChannel]=\"useAlphaChannel()\"></app-picker>\n      }\n      @case (ColorInspector.HSL) {\n        <app-hsl\n          [color]=\"color()\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel()\"></app-hsl>\n      }\n      @case (ColorInspector.RGB) {\n        <app-rgb\n          [color]=\"color()\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel()\"></app-rgb>\n      }\n      @case (ColorInspector.CMYK) {\n        <app-cmyk [color]=\"color()\" (colorChange)=\"initColor($event)\"></app-cmyk>\n      }\n    }\n    @if (showPresets() && !simpleMode()) {\n      <div class=\"presets-colors\">\n        @for (item of presetColors(); track $index) {\n          <button type=\"button\" [style.background]=\"item\" (click)=\"selectColor(item)\"></button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-input-color-picker{width:270px;max-width:100%;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.ngx-color-preview{min-height:100px;padding:10px 36px;line-height:1.6;font-size:14px;font-family:arial,tahoma;font-weight:700;position:relative;color:#353535;background-color:#fff}.ngx-color-preview.is-dark-color{color:#fff}.ngx-color-preview:after,.ngx-color-preview:before{content:\" \";position:absolute;inset:0}.ngx-color-preview:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.ngx-color-preview:after{background:var(--ngx-selected-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text)}.top-actions select:focus{cursor:pointer;background:#e5f0ff;color:#06f}.top-actions select option{padding:10px 20px;background:var(--ngx-color-bg);color:var(--ngx-color-text);transition:all .3s}.top-actions select option:hover{background:#f0f0f048}.presets-colors{display:flex;align-items:center;flex-wrap:wrap;max-height:200px;overflow:auto;gap:5px;margin-top:10px}.presets-colors button{all:unset;width:26px;height:26px;border-radius:100%;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { simpleMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "simpleMode", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }], defaultInspector: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultInspector", required: false }] }, { type: i0.Output, args: ["defaultInspectorChange"] }], useAlphaChannel: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAlphaChannel", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], presetColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetColors", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });
 
 class NgxInputColor {
     el;
@@ -1270,18 +1127,22 @@ class NgxInputColor {
     viewContainerRef;
     overlayService;
     setInputBackgroundColor = true;
-    defaultInspector = ColorInspector.Picker;
-    simpleMode = false;
-    outputType = 'HEX';
-    theme = 'auto';
-    useAlphaChannel = true;
-    set setUseAlphaChannel(value) {
-        this.useAlphaChannel = value === true;
-        if (!this.useAlphaChannel && this.color) {
-            this.color.removeAlphaChannel();
-            void this.color.getOutputResult(this.outputType).then((value) => this.emitChange(value));
-        }
-    }
+    configs = inject(NGX_INPUT_COLOR_CONFIG);
+    /** Minifi UI  */
+    simpleMode = input(this.configs.simpleMode ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "simpleMode" }] : /* istanbul ignore next */ []));
+    outputType = input(this.configs.outputType ?? 'HEX', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outputType" }] : /* istanbul ignore next */ []));
+    defaultInspector = model(this.configs.defaultInspector ?? ColorInspector.Picker, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultInspector" }] : /* istanbul ignore next */ []));
+    useAlphaChannel = input(this.configs.useAlphaChannel ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "useAlphaChannel" }] : /* istanbul ignore next */ []));
+    showPresets = input(this.configs.showPresets ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPresets" }] : /* istanbul ignore next */ []));
+    presetColors = input(this.configs.presetColors ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presetColors" }] : /* istanbul ignore next */ []));
+    /** Emitted when the color value changes */
+    colorChange = output();
     /**
      * Input target.
      *
@@ -1345,6 +1206,13 @@ class NgxInputColor {
         this.renderer = renderer;
         this.viewContainerRef = viewContainerRef;
         this.overlayService = overlayService;
+        effect(() => {
+            const useAlphaChannel = this.useAlphaChannel() == true;
+            if (!this.useAlphaChannel && this.color) {
+                this.color.removeAlphaChannel();
+                void this.color.getOutputResult(this.outputType()).then((value) => this.emitChange(value));
+            }
+        });
     }
     ngAfterViewInit() {
         /**
@@ -1373,7 +1241,7 @@ class NgxInputColor {
         }
         event.preventDefault();
         event.stopPropagation();
-        this.toggleColorPicker();
+        this.toggle();
     }
     /**
      * Called by Angular Forms.
@@ -1500,7 +1368,7 @@ class NgxInputColor {
             this.notifyValidatorChange();
         }
     }
-    toggleColorPicker() {
+    toggle() {
         if (this.disabled) {
             return;
         }
@@ -1515,15 +1383,17 @@ class NgxInputColor {
             alignment: 'start',
             placement: 'auto',
             configure: (instance, ref) => {
-                instance.defaultInspector = this.defaultInspector;
-                instance.simpleMode = this.simpleMode;
-                instance.outputType = this.outputType;
-                instance.setTheme = this.theme;
-                instance.setUseAlphaChannel = this.useAlphaChannel;
+                ref.componentRef?.setInput('defaultInspector', this.defaultInspector());
+                ref.componentRef?.setInput('defaultInspector', this.defaultInspector());
+                ref.componentRef?.setInput('simpleMode', this.simpleMode());
+                ref.componentRef?.setInput('outputType', this.outputType());
+                ref.componentRef?.setInput('setUseAlphaChannel', this.useAlphaChannel());
+                ref.componentRef?.setInput('showPresets', this.showPresets());
+                ref.componentRef?.setInput('presetColors', this.presetColors());
                 if (this.color?.isValid) {
                     instance.writeValue(this.color);
                 }
-                instance.change.subscribe((value) => {
+                instance.colorChange.subscribe((value) => {
                     this.color = new NgxColor(value);
                     void this.emitChange(value);
                 });
@@ -1625,7 +1495,7 @@ class NgxInputColor {
         return value instanceof HTMLInputElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColor, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i1$2.OverlayService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxInputColor, isStandalone: true, selector: "[ngxInputColor]", inputs: { setInputBackgroundColor: "setInputBackgroundColor", defaultInspector: "defaultInspector", simpleMode: "simpleMode", outputType: "outputType", theme: "theme", setUseAlphaChannel: ["useAlphaChannel", "setUseAlphaChannel"], ngxInputColor: "ngxInputColor" }, outputs: { change: "change" }, host: { listeners: { "click": "onHostClick($event)" } }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxInputColor, isStandalone: true, selector: "[ngxInputColor]", inputs: { setInputBackgroundColor: { classPropertyName: "setInputBackgroundColor", publicName: "setInputBackgroundColor", isSignal: false, isRequired: false, transformFunction: null }, simpleMode: { classPropertyName: "simpleMode", publicName: "simpleMode", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, defaultInspector: { classPropertyName: "defaultInspector", publicName: "defaultInspector", isSignal: true, isRequired: false, transformFunction: null }, useAlphaChannel: { classPropertyName: "useAlphaChannel", publicName: "useAlphaChannel", isSignal: true, isRequired: false, transformFunction: null }, showPresets: { classPropertyName: "showPresets", publicName: "showPresets", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, ngxInputColor: { classPropertyName: "ngxInputColor", publicName: "ngxInputColor", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { defaultInspector: "defaultInspectorChange", colorChange: "colorChange", change: "change" }, host: { listeners: { "click": "onHostClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgxInputColor),
@@ -1636,12 +1506,13 @@ class NgxInputColor {
                 useExisting: forwardRef(() => NgxInputColor),
                 multi: true,
             },
-        ], ngImport: i0 });
+        ], exportAs: ["ngxInputColor"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColor, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngxInputColor]',
+                    exportAs: 'ngxInputColor',
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -1657,18 +1528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i1$2.OverlayService }], propDecorators: { setInputBackgroundColor: [{
                 type: Input
-            }], defaultInspector: [{
-                type: Input
-            }], simpleMode: [{
-                type: Input
-            }], outputType: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }], setUseAlphaChannel: [{
-                type: Input,
-                args: ['useAlphaChannel']
-            }], ngxInputColor: [{
+            }], simpleMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "simpleMode", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }], defaultInspector: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultInspector", required: false }] }, { type: i0.Output, args: ["defaultInspectorChange"] }], useAlphaChannel: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAlphaChannel", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], presetColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetColors", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], ngxInputColor: [{
                 type: Input,
                 args: ['ngxInputColor']
             }], change: [{