ngx-kit 6.3.0 → 7.0.0

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

@@ -995,11 +995,11 @@ class HslComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HslComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: HslComponent, isStandalone: true, selector: "app-hsl", inputs: { color: "color", useAlphaChannel: "useAlphaChannel" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<slider\r\n  [(ngModel)]=\"hue\"\r\n  name=\"hue\"\r\n  [min]=\"0\"\r\n  [max]=\"360\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\">\r\n  <div class=\"slider-title\">\r\n    <span>Hue</span>\r\n    <input type=\"number\" [(ngModel)]=\"hue\" name=\"inputHue\" min=\"0\" max=\"360\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"saturation\"\r\n  name=\"saturation\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"'linear-gradient(to right,#808080,' + baseColor + ')'\">\r\n  <div class=\"slider-title\">\r\n    <span>Saturation</span>\r\n    <input\r\n      type=\"number\"\r\n      [(ngModel)]=\"saturation\"\r\n      name=\"inputSaturation\"\r\n      min=\"0\"\r\n      max=\"100\"\r\n      step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"luminance\"\r\n  name=\"luminance\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"'linear-gradient(to right,black,' + baseColor + ',white)'\">\r\n  <div class=\"slider-title\">\r\n    <span>Luminance</span>\r\n    <input type=\"number\" [(ngModel)]=\"luminance\" name=\"inputLuminance\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n@if (useAlphaChannel) {\r\n  <slider\r\n    [(ngModel)]=\"alpha\"\r\n    name=\"alpha\"\r\n    [min]=\"0\"\r\n    [max]=\"1\"\r\n    [step]=\"0.1\"\r\n    (change)=\"generateColor()\"\r\n    [isBgTransparent]=\"true\"\r\n    [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\r\n    <div class=\"slider-title\">\r\n      <span>Alpha</span>\r\n      <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\r\n    </div>\r\n  </slider>\r\n}\r\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:48px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: HslComponent, isStandalone: true, selector: "app-hsl", inputs: { color: "color", useAlphaChannel: "useAlphaChannel" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<slider\n  [(ngModel)]=\"hue\"\n  name=\"hue\"\n  [min]=\"0\"\n  [max]=\"360\"\n  [step]=\"1\"\n  (change)=\"generateColor()\"\n  background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\">\n  <div class=\"slider-title\">\n    <span>Hue</span>\n    <input type=\"number\" [(ngModel)]=\"hue\" name=\"inputHue\" min=\"0\" max=\"360\" step=\"1\" />\n  </div>\n</slider>\n<slider\n  [(ngModel)]=\"saturation\"\n  name=\"saturation\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [step]=\"1\"\n  (change)=\"generateColor()\"\n  [background]=\"'linear-gradient(to right,#808080,' + baseColor + ')'\">\n  <div class=\"slider-title\">\n    <span>Saturation</span>\n    <input\n      type=\"number\"\n      [(ngModel)]=\"saturation\"\n      name=\"inputSaturation\"\n      min=\"0\"\n      max=\"100\"\n      step=\"1\" />\n  </div>\n</slider>\n<slider\n  [(ngModel)]=\"luminance\"\n  name=\"luminance\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [step]=\"1\"\n  (change)=\"generateColor()\"\n  [background]=\"'linear-gradient(to right,black,' + baseColor + ',white)'\">\n  <div class=\"slider-title\">\n    <span>Luminance</span>\n    <input type=\"number\" [(ngModel)]=\"luminance\" name=\"inputLuminance\" min=\"0\" max=\"100\" step=\"1\" />\n  </div>\n</slider>\n@if (useAlphaChannel) {\n  <slider\n    [(ngModel)]=\"alpha\"\n    name=\"alpha\"\n    [min]=\"0\"\n    [max]=\"1\"\n    [step]=\"0.1\"\n    (change)=\"generateColor()\"\n    [isBgTransparent]=\"true\"\n    [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\n    <div class=\"slider-title\">\n      <span>Alpha</span>\n      <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\n    </div>\n  </slider>\n}\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:48px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HslComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-hsl', imports: [FormsModule, SliderComponent], template: "<slider\r\n  [(ngModel)]=\"hue\"\r\n  name=\"hue\"\r\n  [min]=\"0\"\r\n  [max]=\"360\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\">\r\n  <div class=\"slider-title\">\r\n    <span>Hue</span>\r\n    <input type=\"number\" [(ngModel)]=\"hue\" name=\"inputHue\" min=\"0\" max=\"360\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"saturation\"\r\n  name=\"saturation\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"'linear-gradient(to right,#808080,' + baseColor + ')'\">\r\n  <div class=\"slider-title\">\r\n    <span>Saturation</span>\r\n    <input\r\n      type=\"number\"\r\n      [(ngModel)]=\"saturation\"\r\n      name=\"inputSaturation\"\r\n      min=\"0\"\r\n      max=\"100\"\r\n      step=\"1\" />\r\n  </div>\r\n</slider>\r\n<slider\r\n  [(ngModel)]=\"luminance\"\r\n  name=\"luminance\"\r\n  [min]=\"0\"\r\n  [max]=\"100\"\r\n  [step]=\"1\"\r\n  (change)=\"generateColor()\"\r\n  [background]=\"'linear-gradient(to right,black,' + baseColor + ',white)'\">\r\n  <div class=\"slider-title\">\r\n    <span>Luminance</span>\r\n    <input type=\"number\" [(ngModel)]=\"luminance\" name=\"inputLuminance\" min=\"0\" max=\"100\" step=\"1\" />\r\n  </div>\r\n</slider>\r\n@if (useAlphaChannel) {\r\n  <slider\r\n    [(ngModel)]=\"alpha\"\r\n    name=\"alpha\"\r\n    [min]=\"0\"\r\n    [max]=\"1\"\r\n    [step]=\"0.1\"\r\n    (change)=\"generateColor()\"\r\n    [isBgTransparent]=\"true\"\r\n    [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\r\n    <div class=\"slider-title\">\r\n      <span>Alpha</span>\r\n      <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\r\n    </div>\r\n  </slider>\r\n}\r\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:48px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
+            args: [{ selector: 'app-hsl', imports: [FormsModule, SliderComponent], template: "<slider\n  [(ngModel)]=\"hue\"\n  name=\"hue\"\n  [min]=\"0\"\n  [max]=\"360\"\n  [step]=\"1\"\n  (change)=\"generateColor()\"\n  background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\">\n  <div class=\"slider-title\">\n    <span>Hue</span>\n    <input type=\"number\" [(ngModel)]=\"hue\" name=\"inputHue\" min=\"0\" max=\"360\" step=\"1\" />\n  </div>\n</slider>\n<slider\n  [(ngModel)]=\"saturation\"\n  name=\"saturation\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [step]=\"1\"\n  (change)=\"generateColor()\"\n  [background]=\"'linear-gradient(to right,#808080,' + baseColor + ')'\">\n  <div class=\"slider-title\">\n    <span>Saturation</span>\n    <input\n      type=\"number\"\n      [(ngModel)]=\"saturation\"\n      name=\"inputSaturation\"\n      min=\"0\"\n      max=\"100\"\n      step=\"1\" />\n  </div>\n</slider>\n<slider\n  [(ngModel)]=\"luminance\"\n  name=\"luminance\"\n  [min]=\"0\"\n  [max]=\"100\"\n  [step]=\"1\"\n  (change)=\"generateColor()\"\n  [background]=\"'linear-gradient(to right,black,' + baseColor + ',white)'\">\n  <div class=\"slider-title\">\n    <span>Luminance</span>\n    <input type=\"number\" [(ngModel)]=\"luminance\" name=\"inputLuminance\" min=\"0\" max=\"100\" step=\"1\" />\n  </div>\n</slider>\n@if (useAlphaChannel) {\n  <slider\n    [(ngModel)]=\"alpha\"\n    name=\"alpha\"\n    [min]=\"0\"\n    [max]=\"1\"\n    [step]=\"0.1\"\n    (change)=\"generateColor()\"\n    [isBgTransparent]=\"true\"\n    [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\n    <div class=\"slider-title\">\n      <span>Alpha</span>\n      <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\n    </div>\n  </slider>\n}\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset #fff 0 0 0 100px;border:none;width:48px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
             }], useAlphaChannel: [{
@@ -1222,7 +1222,7 @@ class NgxInputColorComponent {
                 multi: true,
                 useExisting: NgxInputColorComponent,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"ngx-input-color-picker\"\r\n  (click)=\"stopPropagation($event)\"\r\n  [class.simple-mode]=\"simpleMode\">\r\n  @if (!simpleMode) {\r\n    <div\r\n      class=\"ngx-color-preview\"\r\n      [ngStyle]=\"{ '--ngx-selected-color': rgbaColor }\"\r\n      [class.is-dark-color]=\"isDarkColor\">\r\n      <div class=\"rgbacode\">{{ outputColor | uppercase }}</div>\r\n      @if (outputType !== 'HEX') {\r\n        <div class=\"hexacode\">{{ hexColor | uppercase }}</div>\r\n      }\r\n      <div class=\"colorname\">{{ name }}</div>\r\n      <div class=\"color\"></div>\r\n    </div>\r\n  }\r\n  <div class=\"ngx-c-inner\">\r\n    <div class=\"top-actions\">\r\n      <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\r\n        @for (inspector of ColorInspector | enumToArray; track inspector) {\r\n          <option [value]=\"inspector\">\r\n            {{ ColorInspector[+inspector] }}\r\n          </option>\r\n        }\r\n      </select>\r\n      @if (isSupportedEyeDrop) {\r\n        <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n            <defs>\r\n              <style>\r\n                .fa-secondary {\r\n                  opacity: 0.4;\r\n                }\r\n              </style>\r\n            </defs>\r\n            <path\r\n              class=\"fa-primary\"\r\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\" />\r\n            <path\r\n              class=\"fa-secondary\"\r\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\" />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @switch (+defaultInspector) {\r\n      @case (ColorInspector.Picker) {\r\n        <app-picker\r\n          [color]=\"color\"\r\n          (colorChange)=\"initColor($event)\"\r\n          [simpleMode]=\"simpleMode\"\r\n          [useAlphaChannel]=\"useAlphaChannel\"></app-picker>\r\n      }\r\n      @case (ColorInspector.HSL) {\r\n        <app-hsl\r\n          [color]=\"color\"\r\n          (colorChange)=\"initColor($event)\"\r\n          [useAlphaChannel]=\"useAlphaChannel\"></app-hsl>\r\n      }\r\n      @case (ColorInspector.RGB) {\r\n        <app-rgb\r\n          [color]=\"color\"\r\n          (colorChange)=\"initColor($event)\"\r\n          [useAlphaChannel]=\"useAlphaChannel\"></app-rgb>\r\n      }\r\n      @case (ColorInspector.CMYK) {\r\n        <app-cmyk [color]=\"color\" (colorChange)=\"initColor($event)\"></app-cmyk>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\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\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColorComponent, decorators: [{
             type: Component,
@@ -1247,7 +1247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         CmykComponent,
                         HslComponent,
                         RgbComponent,
-                    ], template: "<div\r\n  class=\"ngx-input-color-picker\"\r\n  (click)=\"stopPropagation($event)\"\r\n  [class.simple-mode]=\"simpleMode\">\r\n  @if (!simpleMode) {\r\n    <div\r\n      class=\"ngx-color-preview\"\r\n      [ngStyle]=\"{ '--ngx-selected-color': rgbaColor }\"\r\n      [class.is-dark-color]=\"isDarkColor\">\r\n      <div class=\"rgbacode\">{{ outputColor | uppercase }}</div>\r\n      @if (outputType !== 'HEX') {\r\n        <div class=\"hexacode\">{{ hexColor | uppercase }}</div>\r\n      }\r\n      <div class=\"colorname\">{{ name }}</div>\r\n      <div class=\"color\"></div>\r\n    </div>\r\n  }\r\n  <div class=\"ngx-c-inner\">\r\n    <div class=\"top-actions\">\r\n      <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\r\n        @for (inspector of ColorInspector | enumToArray; track inspector) {\r\n          <option [value]=\"inspector\">\r\n            {{ ColorInspector[+inspector] }}\r\n          </option>\r\n        }\r\n      </select>\r\n      @if (isSupportedEyeDrop) {\r\n        <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n            <defs>\r\n              <style>\r\n                .fa-secondary {\r\n                  opacity: 0.4;\r\n                }\r\n              </style>\r\n            </defs>\r\n            <path\r\n              class=\"fa-primary\"\r\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\" />\r\n            <path\r\n              class=\"fa-secondary\"\r\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\" />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @switch (+defaultInspector) {\r\n      @case (ColorInspector.Picker) {\r\n        <app-picker\r\n          [color]=\"color\"\r\n          (colorChange)=\"initColor($event)\"\r\n          [simpleMode]=\"simpleMode\"\r\n          [useAlphaChannel]=\"useAlphaChannel\"></app-picker>\r\n      }\r\n      @case (ColorInspector.HSL) {\r\n        <app-hsl\r\n          [color]=\"color\"\r\n          (colorChange)=\"initColor($event)\"\r\n          [useAlphaChannel]=\"useAlphaChannel\"></app-hsl>\r\n      }\r\n      @case (ColorInspector.RGB) {\r\n        <app-rgb\r\n          [color]=\"color\"\r\n          (colorChange)=\"initColor($event)\"\r\n          [useAlphaChannel]=\"useAlphaChannel\"></app-rgb>\r\n      }\r\n      @case (ColorInspector.CMYK) {\r\n        <app-cmyk [color]=\"color\" (colorChange)=\"initColor($event)\"></app-cmyk>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\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"] }]
+                    ], 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']
@@ -1275,42 +1275,69 @@ class NgxInputColor {
     outputType = 'HEX';
     theme = 'auto';
     useAlphaChannel = true;
-    set setUseAlphaChannel(val) {
-        this.useAlphaChannel = val == true;
+    set setUseAlphaChannel(value) {
+        this.useAlphaChannel = value === true;
         if (!this.useAlphaChannel && this.color) {
             this.color.removeAlphaChannel();
-            this.color.getOutputResult(this.outputType).then((c) => {
-                this.emitChange(c);
-            });
+            void this.color.getOutputResult(this.outputType).then((value) => this.emitChange(value));
         }
     }
-    boundInputHandler = (e) => {
-        this.writeValue(e.target.value);
-    };
-    _targetInput;
-    set ngxInputColor(el) {
+    /**
+     * Input target.
+     *
+     * Supported:
+     *
+     * <input ngxInputColor>
+     *
+     * or
+     *
+     * <div [ngxInputColor]="inputElement"></div>
+     *
+     * or
+     *
+     * <div [ngxInputColor]="inputRef"></div>
+     */
+    set ngxInputColor(element) {
+        this.removeTargetInputListener();
         this.isHostInput = false;
-        if (el instanceof ElementRef) {
-            this._targetInput = el.nativeElement;
+        this.explicitTargetInput = false;
+        if (element instanceof ElementRef) {
+            this._targetInput = element.nativeElement;
+            this.explicitTargetInput = true;
         }
-        else if (el instanceof HTMLInputElement) {
-            this.isHostInput = true;
-            this._targetInput = el;
+        else if (this.isInputElement(element)) {
+            this._targetInput = element;
+            this.explicitTargetInput = true;
         }
         else {
-            this._targetInput = undefined;
-        }
-        if (this._targetInput) {
-            this._targetInput.removeEventListener('input', this.boundInputHandler);
-            this._targetInput.addEventListener('input', this.boundInputHandler);
+            /**
+             * Bare directive:
+             *
+             * <input ngxInputColor>
+             *
+             * In this case the host itself is the target.
+             */
+            const host = this.el.nativeElement;
+            if (host instanceof HTMLInputElement) {
+                this._targetInput = host;
+                this.isHostInput = true;
+            }
+            else {
+                this._targetInput = undefined;
+            }
         }
+        this.bindTargetInput();
     }
     change = new EventEmitter();
     color;
     pickerRef;
+    _targetInput;
+    explicitTargetInput = false;
     isHostInput = false;
-    inValid = false;
-    _onChange = (value) => { };
+    removeInputListener;
+    disabled = false;
+    invalid = false;
+    _onChange = () => { };
     _onTouched = () => { };
     _onValidateChange = () => { };
     constructor(el, renderer, viewContainerRef, overlayService) {
@@ -1320,40 +1347,69 @@ class NgxInputColor {
         this.overlayService = overlayService;
     }
     ngAfterViewInit() {
-        if (this._targetInput && this._targetInput.tagName.toLowerCase() === 'input') {
+        /**
+         * The input binding may not have been processed in every
+         * possible usage scenario. Make sure a host input is detected.
+         */
+        if (!this._targetInput && this.isInputElement(this.el.nativeElement)) {
+            this._targetInput = this.el.nativeElement;
+            this.isHostInput = true;
+            this.bindTargetInput();
+        }
+        if (this._targetInput) {
             this.writeValue(this._targetInput.value);
         }
     }
     ngOnDestroy() {
+        this.removeTargetInputListener();
         this.destroyColorPicker();
     }
-    onClick(ev) {
-        ev.stopPropagation();
-        ev.preventDefault();
+    /**
+     * Open the custom color picker.
+     */
+    onHostClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
         this.toggleColorPicker();
     }
+    /**
+     * Called by Angular Forms.
+     *
+     * IMPORTANT:
+     * writeValue must NEVER call _onChange().
+     */
     writeValue(value) {
+        if (value === null || value === undefined || value === '') {
+            this.color = undefined;
+            this.invalid = false;
+            this.syncView('');
+            this.notifyValidatorChange();
+            return;
+        }
         try {
-            this.color = value ? new NgxColor(value) : undefined;
-            const colorStr = this.color?.toHexString() ?? '';
-            // اگر دایرکتیو روی input باشه (ControlValueAccessor)
-            if (this.isHostInput) {
-                const input = this.el.nativeElement;
-                input.value = colorStr;
+            const color = value instanceof NgxColor ? value : new NgxColor(String(value));
+            if (color.isValid === false) {
+                throw new Error('Invalid color');
             }
-            // اگر input خارجی مشخص شده
-            if (this._targetInput instanceof HTMLInputElement) {
-                this._targetInput.value = colorStr;
-            }
-            if (this.setInputBackgroundColor) {
-                this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', colorStr);
-            }
-            this.inValid = false;
-            this._onValidateChange();
+            this.color = color;
+            this.invalid = false;
+            const colorValue = this.getViewColor();
+            this.syncView(colorValue);
         }
-        catch (e) {
-            this.color = new NgxColor('#000'); // مقدار پیش‌فرض
-            this.inValid = true;
+        catch {
+            this.color = undefined;
+            this.invalid = true;
+            /**
+             * Do not replace an invalid value with black.
+             *
+             * Angular/form validation needs to know that the value
+             * is invalid instead of silently turning it into #000.
+             */
+            this.syncView('');
+            this.notifyValidatorChange();
         }
     }
     registerOnChange(fn) {
@@ -1363,23 +1419,91 @@ class NgxInputColor {
         this._onTouched = fn;
     }
     setDisabledState(disabled) {
-        if (disabled) {
+        this.disabled = disabled;
+        /**
+         * Host element.
+         */
+        if (this.isInputElement(this.el.nativeElement)) {
             this.renderer.setProperty(this.el.nativeElement, 'disabled', disabled);
         }
-        else {
-            this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
+        /**
+         * External target input.
+         */
+        if (this._targetInput && this._targetInput !== this.el.nativeElement) {
+            this.renderer.setProperty(this._targetInput, 'disabled', disabled);
+        }
+        if (disabled) {
+            this.destroyColorPicker();
         }
     }
     registerOnValidatorChange(fn) {
         this._onValidateChange = fn;
     }
-    validate(control) {
-        if ((this.color && this.color.isValid === false) || this.inValid === true) {
-            return { invalid: true };
+    validate(_control) {
+        if (this.invalid) {
+            return {
+                invalid: true,
+            };
+        }
+        if (this.color?.isValid === false) {
+            return {
+                invalid: true,
+            };
         }
         return null;
     }
+    bindTargetInput() {
+        if (!this._targetInput) {
+            return;
+        }
+        this.removeInputListener?.();
+        this.removeInputListener = this.renderer.listen(this._targetInput, 'input', (event) => {
+            this.handleInputEvent(event);
+        });
+    }
+    removeTargetInputListener() {
+        this.removeInputListener?.();
+        this.removeInputListener = undefined;
+    }
+    /**
+     * Handles native input changes.
+     *
+     * This is deliberately NOT implemented using writeValue(),
+     * because this is a user-originated value and therefore
+     * must propagate through ControlValueAccessor.
+     */
+    handleInputEvent(event) {
+        const input = event.target;
+        const value = input.value;
+        try {
+            const color = value ? new NgxColor(value) : undefined;
+            if (color && color.isValid === false) {
+                this.color = undefined;
+                this.invalid = true;
+                this.notifyValidatorChange();
+                return;
+            }
+            this.color = color;
+            this.invalid = false;
+            this.syncHostBackground(value);
+            /**
+             * User change → Angular Forms.
+             */
+            this._onChange(value);
+            this.change.emit(value);
+            this._onTouched();
+            this.notifyValidatorChange();
+        }
+        catch {
+            this.color = undefined;
+            this.invalid = true;
+            this.notifyValidatorChange();
+        }
+    }
     toggleColorPicker() {
+        if (this.disabled) {
+            return;
+        }
         if (this.pickerRef) {
             this.destroyColorPicker();
             return;
@@ -1396,11 +1520,12 @@ class NgxInputColor {
                 instance.outputType = this.outputType;
                 instance.setTheme = this.theme;
                 instance.setUseAlphaChannel = this.useAlphaChannel;
-                if (this.color?.isValid)
+                if (this.color?.isValid) {
                     instance.writeValue(this.color);
-                instance.change.subscribe((c) => {
-                    this.color = new NgxColor(c);
-                    this.emitChange(c);
+                }
+                instance.change.subscribe((value) => {
+                    this.color = new NgxColor(value);
+                    void this.emitChange(value);
                 });
                 // instance.closed.subscribe(() => ref.close());
             },
@@ -1413,27 +1538,94 @@ class NgxInputColor {
         this.pickerRef?.close();
         this.pickerRef = undefined;
     }
-    async emitChange(c) {
-        if (this.setInputBackgroundColor) {
-            this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', c);
+    /**
+     * User-originated/custom-picker value.
+     *
+     * This is the ONLY place where _onChange is called.
+     */
+    async emitChange(value) {
+        try {
+            const color = new NgxColor(value);
+            if (color.isValid === false) {
+                this.invalid = true;
+                this.notifyValidatorChange();
+                return;
+            }
+            this.color = color;
+            this.invalid = false;
+            const viewValue = this.getViewColor();
+            this.syncView(viewValue);
+            /**
+             * Do NOT dispatch another input event here.
+             */
+            this._onChange(viewValue);
+            this.change.emit(viewValue);
+            this._onTouched();
+            this.notifyValidatorChange();
         }
-        // اگر روی input باشیم، مقدار رو در input قرار بده
+        catch {
+            this.invalid = true;
+            this.notifyValidatorChange();
+        }
+    }
+    /**
+     * Synchronize all visual representations.
+     */
+    syncView(value) {
+        /**
+         * Host input value.
+         */
         if (this.isHostInput) {
             const input = this.el.nativeElement;
-            input.value = c;
+            input.value = this.getNativeInputColor(value);
         }
-        // اگر targetInput وجود داره، در اونم مقدار ست کن
-        if (this._targetInput instanceof HTMLInputElement) {
-            this._targetInput.value = c;
-            const event = new Event('input', { bubbles: true });
-            this._targetInput.dispatchEvent(event);
+        /**
+         * External target input.
+         */
+        if (this._targetInput && this._targetInput !== this.el.nativeElement) {
+            this._targetInput.value = this.getNativeInputColor(value);
         }
-        this._onChange(c);
-        this.change.emit(c);
-        this._onTouched();
+        /**
+         * Background of host element.
+         */
+        this.syncHostBackground(value);
+    }
+    /**
+     * input[type=color] only accepts a 6-digit RGB hex value.
+     *
+     * Therefore even if the selected color contains alpha,
+     * the native color input receives #RRGGBB.
+     */
+    getNativeInputColor(value) {
+        if (!value) {
+            return '';
+        }
+        try {
+            const color = new NgxColor(value);
+            return color.toHexString();
+        }
+        catch {
+            return '';
+        }
+    }
+    getViewColor() {
+        return this.color?.toHexString() ?? '';
+    }
+    syncHostBackground(value) {
+        if (!this.setInputBackgroundColor) {
+            return;
+        }
+        const element = this.el.nativeElement;
+        this.renderer.setStyle(element, 'backgroundColor', value || null);
+    }
+    notifyValidatorChange() {
+        this._onValidateChange();
+    }
+    isInputElement(value) {
+        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": "onClick($event)" } }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgxInputColor),
@@ -1481,7 +1673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 args: ['ngxInputColor']
             }], change: [{
                 type: Output
-            }], onClick: [{
+            }], onHostClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });