ngx-color 8.0.3 → 10.0.0

package/fesm2022/ngx-color-chrome.mjs

@@ -0,0 +1,543 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
+import * as i1 from 'ngx-color';
+import { isValidHex, ColorWrap, AlphaModule, CheckboardModule, EditableInputModule, HueModule, SaturationModule } from 'ngx-color';
+import { TinyColor } from '@ctrl/tinycolor';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class ChromeFieldsComponent {
+    disableAlpha;
+    hsl;
+    rgb;
+    hex;
+    onChange = new EventEmitter();
+    view = '';
+    input = {
+        fontSize: '11px',
+        color: '#333',
+        width: '100%',
+        borderRadius: '2px',
+        border: 'none',
+        boxShadow: 'inset 0 0 0 1px #dadada',
+        height: '21px',
+        'text-align': 'center',
+    };
+    label = {
+        'text-transform': 'uppercase',
+        fontSize: '11px',
+        'line-height': '11px',
+        color: '#969696',
+        'text-align': 'center',
+        display: 'block',
+        marginTop: '12px',
+    };
+    ngOnInit() {
+        if (this.hsl.a === 1 && this.view !== 'hex') {
+            this.view = 'hex';
+        }
+        else if (this.view !== 'rgb' && this.view !== 'hsl') {
+            this.view = 'rgb';
+        }
+    }
+    toggleViews() {
+        if (this.view === 'hex') {
+            this.view = 'rgb';
+        }
+        else if (this.view === 'rgb') {
+            this.view = 'hsl';
+        }
+        else if (this.view === 'hsl') {
+            if (this.hsl.a === 1) {
+                this.view = 'hex';
+            }
+            else {
+                this.view = 'rgb';
+            }
+        }
+    }
+    round(value) {
+        return Math.round(value);
+    }
+    handleChange({ data, $event }) {
+        if (data.hex) {
+            if (isValidHex(data.hex)) {
+                const color = new TinyColor(data.hex);
+                this.onChange.emit({
+                    data: {
+                        hex: this.disableAlpha ? color.toHex() : color.toHex8(),
+                        source: 'hex',
+                    },
+                    $event,
+                });
+            }
+        }
+        else if (data.r || data.g || data.b) {
+            this.onChange.emit({
+                data: {
+                    r: data.r || this.rgb.r,
+                    g: data.g || this.rgb.g,
+                    b: data.b || this.rgb.b,
+                    source: 'rgb',
+                },
+                $event,
+            });
+        }
+        else if (data.a) {
+            if (data.a < 0) {
+                data.a = 0;
+            }
+            else if (data.a > 1) {
+                data.a = 1;
+            }
+            if (this.disableAlpha) {
+                data.a = 1;
+            }
+            this.onChange.emit({
+                data: {
+                    h: this.hsl.h,
+                    s: this.hsl.s,
+                    l: this.hsl.l,
+                    a: Math.round(data.a * 100) / 100,
+                    source: 'rgb',
+                },
+                $event,
+            });
+        }
+        else if (data.h || data.s || data.l) {
+            const s = data.s && data.s.replace('%', '');
+            const l = data.l && data.l.replace('%', '');
+            this.onChange.emit({
+                data: {
+                    h: data.h || this.hsl.h,
+                    s: Number(s || this.hsl.s),
+                    l: Number(l || this.hsl.l),
+                    source: 'hsl',
+                },
+                $event,
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ChromeFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: ChromeFieldsComponent, isStandalone: false, selector: "color-chrome-fields", inputs: { disableAlpha: "disableAlpha", hsl: "hsl", rgb: "rgb", hex: "hex" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    <div class="chrome-wrap">
+      <div class="chrome-fields">
+        @if (view === 'hex') {
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="hex"
+              [value]="hex"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+        }
+        @if (view === 'rgb') {
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="r"
+              [value]="rgb.r"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="g"
+              [value]="rgb.g"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="b"
+              [value]="rgb.b"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            @if (!disableAlpha) {
+              <color-editable-input
+                [style]="{ input: input, label: label }"
+                label="a"
+                [value]="rgb.a"
+                [arrowOffset]="0.01"
+                (onChange)="handleChange($event)"
+              ></color-editable-input>
+            }
+          </div>
+        }
+        @if (view === 'hsl') {
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="h"
+              [value]="round(hsl.h)"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="s"
+              [value]="round(hsl.s * 100) + '%'"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="l"
+              [value]="round(hsl.l * 100) + '%'"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            @if (!disableAlpha) {
+              <color-editable-input
+                [style]="{ input: input, label: label }"
+                label="a"
+                [value]="hsl.a"
+                [arrowOffset]="0.01"
+                (onChange)="handleChange($event)"
+              ></color-editable-input>
+            }
+          </div>
+        }
+      </div>
+
+      <div class="chrome-toggle">
+        <div class="chrome-icon" (click)="toggleViews()" #icon>
+          <svg class="chrome-toggle-svg" viewBox="0 0 24 24">
+            <path
+              #iconUp
+              fill="#333"
+              d="M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
+            />
+            <path
+              #iconDown
+              fill="#333"
+              d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"], dependencies: [{ kind: "component", type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ChromeFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-chrome-fields', template: `
+    <div class="chrome-wrap">
+      <div class="chrome-fields">
+        @if (view === 'hex') {
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="hex"
+              [value]="hex"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+        }
+        @if (view === 'rgb') {
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="r"
+              [value]="rgb.r"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="g"
+              [value]="rgb.g"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="b"
+              [value]="rgb.b"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            @if (!disableAlpha) {
+              <color-editable-input
+                [style]="{ input: input, label: label }"
+                label="a"
+                [value]="rgb.a"
+                [arrowOffset]="0.01"
+                (onChange)="handleChange($event)"
+              ></color-editable-input>
+            }
+          </div>
+        }
+        @if (view === 'hsl') {
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="h"
+              [value]="round(hsl.h)"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="s"
+              [value]="round(hsl.s * 100) + '%'"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="l"
+              [value]="round(hsl.l * 100) + '%'"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            @if (!disableAlpha) {
+              <color-editable-input
+                [style]="{ input: input, label: label }"
+                label="a"
+                [value]="hsl.a"
+                [arrowOffset]="0.01"
+                (onChange)="handleChange($event)"
+              ></color-editable-input>
+            }
+          </div>
+        }
+      </div>
+
+      <div class="chrome-toggle">
+        <div class="chrome-icon" (click)="toggleViews()" #icon>
+          <svg class="chrome-toggle-svg" viewBox="0 0 24 24">
+            <path
+              #iconUp
+              fill="#333"
+              d="M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
+            />
+            <path
+              #iconDown
+              fill="#333"
+              d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"] }]
+        }], propDecorators: { disableAlpha: [{
+                type: Input
+            }], hsl: [{
+                type: Input
+            }], rgb: [{
+                type: Input
+            }], hex: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
+class ChromeComponent extends ColorWrap {
+    /** Remove alpha slider and options from picker */
+    disableAlpha = false;
+    circle = {
+        width: '12px',
+        height: '12px',
+        borderRadius: '6px',
+        boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',
+        transform: 'translate(-6px, -8px)',
+    };
+    pointer = {
+        width: '12px',
+        height: '12px',
+        borderRadius: '6px',
+        transform: 'translate(-6px, -2px)',
+        backgroundColor: 'rgb(248, 248, 248)',
+        boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
+    };
+    activeBackground;
+    constructor() {
+        super();
+    }
+    afterValidChange() {
+        const alpha = this.disableAlpha ? 1 : this.rgb.a;
+        this.activeBackground = `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${alpha})`;
+    }
+    handleValueChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ChromeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: ChromeComponent, isStandalone: false, selector: "color-chrome", inputs: { disableAlpha: "disableAlpha" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ChromeComponent),
+                multi: true,
+            },
+            {
+                provide: ColorWrap,
+                useExisting: forwardRef(() => ChromeComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <div class="chrome-picker {{ className }}">
+      <div class="saturation">
+        <color-saturation
+          [hsl]="hsl"
+          [hsv]="hsv"
+          [circle]="circle"
+          (onChange)="handleValueChange($event)"
+        ></color-saturation>
+      </div>
+      <div class="chrome-body">
+        <div class="chrome-controls">
+          <div class="chrome-color">
+            <div class="chrome-swatch">
+              <div class="chrome-active" [style.background]="activeBackground"></div>
+              <color-checkboard></color-checkboard>
+            </div>
+          </div>
+          <div class="chrome-toggles">
+            <div class="chrome-hue">
+              <color-hue
+                [radius]="2"
+                [hsl]="hsl"
+                [pointer]="pointer"
+                (onChange)="handleValueChange($event)"
+              ></color-hue>
+            </div>
+            @if (!disableAlpha) {
+              <div class="chrome-alpha">
+                <color-alpha
+                  [radius]="2"
+                  [rgb]="rgb"
+                  [hsl]="hsl"
+                  [pointer]="pointer"
+                  (onChange)="handleValueChange($event)"
+                ></color-alpha>
+              </div>
+            }
+          </div>
+        </div>
+        <color-chrome-fields
+          [rgb]="rgb"
+          [hsl]="hsl"
+          [hex]="hex"
+          [disableAlpha]="disableAlpha"
+          (onChange)="handleValueChange($event)"
+        ></color-chrome-fields>
+      </div>
+    </div>
+  `, isInline: true, styles: [".chrome-picker{background:#fff;border-radius:2px;box-shadow:0 0 2px #0000004d,0 4px 8px #0000004d;box-sizing:initial;width:225px;font-family:Menlo}.chrome-controls{display:flex}.chrome-color{width:42px}.chrome-body{padding:14px 14px 12px}.chrome-active{position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px #0000001a;z-index:2}.chrome-swatch{width:28px;height:28px;border-radius:15px;position:relative;overflow:hidden}.saturation{width:100%;padding-bottom:55%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.chrome-toggles{flex:1}.chrome-hue{height:10px;position:relative;margin-bottom:8px}.chrome-alpha{height:10px;position:relative}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => i1.AlphaComponent), selector: "color-alpha", inputs: ["hsl", "rgb", "pointer", "shadow", "radius", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => i1.CheckboardComponent), selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { kind: "component", type: i0.forwardRef(() => i1.HueComponent), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => i1.SaturationComponent), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => ChromeFieldsComponent), selector: "color-chrome-fields", inputs: ["disableAlpha", "hsl", "rgb", "hex"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ChromeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-chrome', template: `
+    <div class="chrome-picker {{ className }}">
+      <div class="saturation">
+        <color-saturation
+          [hsl]="hsl"
+          [hsv]="hsv"
+          [circle]="circle"
+          (onChange)="handleValueChange($event)"
+        ></color-saturation>
+      </div>
+      <div class="chrome-body">
+        <div class="chrome-controls">
+          <div class="chrome-color">
+            <div class="chrome-swatch">
+              <div class="chrome-active" [style.background]="activeBackground"></div>
+              <color-checkboard></color-checkboard>
+            </div>
+          </div>
+          <div class="chrome-toggles">
+            <div class="chrome-hue">
+              <color-hue
+                [radius]="2"
+                [hsl]="hsl"
+                [pointer]="pointer"
+                (onChange)="handleValueChange($event)"
+              ></color-hue>
+            </div>
+            @if (!disableAlpha) {
+              <div class="chrome-alpha">
+                <color-alpha
+                  [radius]="2"
+                  [rgb]="rgb"
+                  [hsl]="hsl"
+                  [pointer]="pointer"
+                  (onChange)="handleValueChange($event)"
+                ></color-alpha>
+              </div>
+            }
+          </div>
+        </div>
+        <color-chrome-fields
+          [rgb]="rgb"
+          [hsl]="hsl"
+          [hex]="hex"
+          [disableAlpha]="disableAlpha"
+          (onChange)="handleValueChange($event)"
+        ></color-chrome-fields>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ChromeComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => ChromeComponent),
+                        },
+                    ], standalone: false, styles: [".chrome-picker{background:#fff;border-radius:2px;box-shadow:0 0 2px #0000004d,0 4px 8px #0000004d;box-sizing:initial;width:225px;font-family:Menlo}.chrome-controls{display:flex}.chrome-color{width:42px}.chrome-body{padding:14px 14px 12px}.chrome-active{position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px #0000001a;z-index:2}.chrome-swatch{width:28px;height:28px;border-radius:15px;position:relative;overflow:hidden}.saturation{width:100%;padding-bottom:55%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.chrome-toggles{flex:1}.chrome-hue{height:10px;position:relative;margin-bottom:8px}.chrome-alpha{height:10px;position:relative}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disableAlpha: [{
+                type: Input
+            }] } });
+class ColorChromeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorChromeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorChromeModule, declarations: [ChromeComponent, ChromeFieldsComponent], imports: [CommonModule,
+            AlphaModule,
+            CheckboardModule,
+            EditableInputModule,
+            HueModule,
+            SaturationModule], exports: [ChromeComponent, ChromeFieldsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorChromeModule, imports: [CommonModule,
+            AlphaModule,
+            CheckboardModule,
+            EditableInputModule,
+            HueModule,
+            SaturationModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorChromeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ChromeComponent, ChromeFieldsComponent],
+                    exports: [ChromeComponent, ChromeFieldsComponent],
+                    imports: [
+                        CommonModule,
+                        AlphaModule,
+                        CheckboardModule,
+                        EditableInputModule,
+                        HueModule,
+                        SaturationModule,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChromeComponent, ChromeFieldsComponent, ColorChromeModule };
+//# sourceMappingURL=ngx-color-chrome.mjs.map

package/fesm2022/ngx-color-chrome.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-chrome.mjs","sources":["../../src/lib/chrome/chrome-fields.component.ts","../../src/lib/chrome/chrome.component.ts","../../src/lib/chrome/ngx-color-chrome.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnInit,\n  Output,\n} from '@angular/core';\n\nimport { isValidHex, HSLA, RGBA } from 'ngx-color';\nimport { TinyColor } from '@ctrl/tinycolor';\n\n@Component({\n  selector: 'color-chrome-fields',\n  template: `\n    <div class=\"chrome-wrap\">\n      <div class=\"chrome-fields\">\n        @if (view === 'hex') {\n          <div class=\"chrome-field\">\n            <color-editable-input\n              [style]=\"{ input: input, label: label }\"\n              label=\"hex\"\n              [value]=\"hex\"\n              (onChange)=\"handleChange($event)\"\n            ></color-editable-input>\n          </div>\n        }\n        @if (view === 'rgb') {\n          <div class=\"chrome-field\">\n            <color-editable-input\n              [style]=\"{ input: input, label: label }\"\n              label=\"r\"\n              [value]=\"rgb.r\"\n              (onChange)=\"handleChange($event)\"\n            ></color-editable-input>\n          </div>\n          <div class=\"chrome-field\">\n            <color-editable-input\n              [style]=\"{ input: input, label: label }\"\n              label=\"g\"\n              [value]=\"rgb.g\"\n              (onChange)=\"handleChange($event)\"\n            ></color-editable-input>\n          </div>\n          <div class=\"chrome-field\">\n            <color-editable-input\n              [style]=\"{ input: input, label: label }\"\n              label=\"b\"\n              [value]=\"rgb.b\"\n              (onChange)=\"handleChange($event)\"\n            ></color-editable-input>\n          </div>\n          <div class=\"chrome-field\">\n            @if (!disableAlpha) {\n              <color-editable-input\n                [style]=\"{ input: input, label: label }\"\n                label=\"a\"\n                [value]=\"rgb.a\"\n                [arrowOffset]=\"0.01\"\n                (onChange)=\"handleChange($event)\"\n              ></color-editable-input>\n            }\n          </div>\n        }\n        @if (view === 'hsl') {\n          <div class=\"chrome-field\">\n            <color-editable-input\n              [style]=\"{ input: input, label: label }\"\n              label=\"h\"\n              [value]=\"round(hsl.h)\"\n              (onChange)=\"handleChange($event)\"\n            ></color-editable-input>\n          </div>\n          <div class=\"chrome-field\">\n            <color-editable-input\n              [style]=\"{ input: input, label: label }\"\n              label=\"s\"\n              [value]=\"round(hsl.s * 100) + '%'\"\n              (onChange)=\"handleChange($event)\"\n            ></color-editable-input>\n          </div>\n          <div class=\"chrome-field\">\n            <color-editable-input\n              [style]=\"{ input: input, label: label }\"\n              label=\"l\"\n              [value]=\"round(hsl.l * 100) + '%'\"\n              (onChange)=\"handleChange($event)\"\n            ></color-editable-input>\n          </div>\n          <div class=\"chrome-field\">\n            @if (!disableAlpha) {\n              <color-editable-input\n                [style]=\"{ input: input, label: label }\"\n                label=\"a\"\n                [value]=\"hsl.a\"\n                [arrowOffset]=\"0.01\"\n                (onChange)=\"handleChange($event)\"\n              ></color-editable-input>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"chrome-toggle\">\n        <div class=\"chrome-icon\" (click)=\"toggleViews()\" #icon>\n          <svg class=\"chrome-toggle-svg\" viewBox=\"0 0 24 24\">\n            <path\n              #iconUp\n              fill=\"#333\"\n              d=\"M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z\"\n            />\n            <path\n              #iconDown\n              fill=\"#333\"\n              d=\"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z\"\n            />\n          </svg>\n        </div>\n      </div>\n    </div>\n  `,\n  styles: [\n    `\n      .chrome-wrap {\n        padding-top: 16px;\n        display: flex;\n      }\n      .chrome-fields {\n        flex: 1;\n        display: flex;\n        margin-left: -6px;\n      }\n      .chrome-field {\n        padding-left: 6px;\n        width: 100%;\n      }\n      .chrome-toggle {\n        width: 32px;\n        text-align: right;\n        position: relative;\n      }\n      .chrome-icon {\n        margin-right: -4px;\n        margin-top: 12px;\n        cursor: pointer;\n        position: relative;\n      }\n      .chrome-toggle-svg {\n        width: 24px;\n        height: 24px;\n        border: 1px transparent solid;\n        border-radius: 5px;\n      }\n      .chrome-toggle-svg:hover {\n        background: #eee;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  standalone: false,\n})\nexport class ChromeFieldsComponent implements OnInit {\n  @Input() disableAlpha!: boolean;\n  @Input() hsl!: HSLA;\n  @Input() rgb!: RGBA;\n  @Input() hex!: string;\n  @Output() onChange = new EventEmitter<any>();\n  view = '';\n  input: Record<string, string> = {\n    fontSize: '11px',\n    color: '#333',\n    width: '100%',\n    borderRadius: '2px',\n    border: 'none',\n    boxShadow: 'inset 0 0 0 1px #dadada',\n    height: '21px',\n    'text-align': 'center',\n  };\n  label: Record<string, string> = {\n    'text-transform': 'uppercase',\n    fontSize: '11px',\n    'line-height': '11px',\n    color: '#969696',\n    'text-align': 'center',\n    display: 'block',\n    marginTop: '12px',\n  };\n\n  ngOnInit() {\n    if (this.hsl.a === 1 && this.view !== 'hex') {\n      this.view = 'hex';\n    } else if (this.view !== 'rgb' && this.view !== 'hsl') {\n      this.view = 'rgb';\n    }\n  }\n  toggleViews() {\n    if (this.view === 'hex') {\n      this.view = 'rgb';\n    } else if (this.view === 'rgb') {\n      this.view = 'hsl';\n    } else if (this.view === 'hsl') {\n      if (this.hsl.a === 1) {\n        this.view = 'hex';\n      } else {\n        this.view = 'rgb';\n      }\n    }\n  }\n  round(value) {\n    return Math.round(value);\n  }\n  handleChange({ data, $event }) {\n    if (data.hex) {\n      if (isValidHex(data.hex)) {\n        const color = new TinyColor(data.hex);\n        this.onChange.emit({\n          data: {\n            hex: this.disableAlpha ? color.toHex() : color.toHex8(),\n            source: 'hex',\n          },\n          $event,\n        });\n      }\n    } else if (data.r || data.g || data.b) {\n      this.onChange.emit({\n        data: {\n          r: data.r || this.rgb.r,\n          g: data.g || this.rgb.g,\n          b: data.b || this.rgb.b,\n          source: 'rgb',\n        },\n        $event,\n      });\n    } else if (data.a) {\n      if (data.a < 0) {\n        data.a = 0;\n      } else if (data.a > 1) {\n        data.a = 1;\n      }\n\n      if (this.disableAlpha) {\n        data.a = 1;\n      }\n\n      this.onChange.emit({\n        data: {\n          h: this.hsl.h,\n          s: this.hsl.s,\n          l: this.hsl.l,\n          a: Math.round(data.a * 100) / 100,\n          source: 'rgb',\n        },\n        $event,\n      });\n    } else if (data.h || data.s || data.l) {\n      const s = data.s && data.s.replace('%', '');\n      const l = data.l && data.l.replace('%', '');\n      this.onChange.emit({\n        data: {\n          h: data.h || this.hsl.h,\n          s: Number(s || this.hsl.s),\n          l: Number(l || this.hsl.l),\n          source: 'hsl',\n        },\n        $event,\n      });\n    }\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport {\n  AlphaModule,\n  CheckboardModule,\n  ColorWrap,\n  EditableInputModule,\n  HueModule,\n  SaturationModule,\n} from 'ngx-color';\nimport { ChromeFieldsComponent } from './chrome-fields.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-chrome',\n  template: `\n    <div class=\"chrome-picker {{ className }}\">\n      <div class=\"saturation\">\n        <color-saturation\n          [hsl]=\"hsl\"\n          [hsv]=\"hsv\"\n          [circle]=\"circle\"\n          (onChange)=\"handleValueChange($event)\"\n        ></color-saturation>\n      </div>\n      <div class=\"chrome-body\">\n        <div class=\"chrome-controls\">\n          <div class=\"chrome-color\">\n            <div class=\"chrome-swatch\">\n              <div class=\"chrome-active\" [style.background]=\"activeBackground\"></div>\n              <color-checkboard></color-checkboard>\n            </div>\n          </div>\n          <div class=\"chrome-toggles\">\n            <div class=\"chrome-hue\">\n              <color-hue\n                [radius]=\"2\"\n                [hsl]=\"hsl\"\n                [pointer]=\"pointer\"\n                (onChange)=\"handleValueChange($event)\"\n              ></color-hue>\n            </div>\n            @if (!disableAlpha) {\n              <div class=\"chrome-alpha\">\n                <color-alpha\n                  [radius]=\"2\"\n                  [rgb]=\"rgb\"\n                  [hsl]=\"hsl\"\n                  [pointer]=\"pointer\"\n                  (onChange)=\"handleValueChange($event)\"\n                ></color-alpha>\n              </div>\n            }\n          </div>\n        </div>\n        <color-chrome-fields\n          [rgb]=\"rgb\"\n          [hsl]=\"hsl\"\n          [hex]=\"hex\"\n          [disableAlpha]=\"disableAlpha\"\n          (onChange)=\"handleValueChange($event)\"\n        ></color-chrome-fields>\n      </div>\n    </div>\n  `,\n  styles: [\n    `\n      .chrome-picker {\n        background: #fff;\n        border-radius: 2px;\n        box-shadow:\n          0 0 2px rgba(0, 0, 0, 0.3),\n          0 4px 8px rgba(0, 0, 0, 0.3);\n        box-sizing: initial;\n        width: 225px;\n        font-family: 'Menlo';\n      }\n      .chrome-controls {\n        display: flex;\n      }\n      .chrome-color {\n        width: 42px;\n      }\n      .chrome-body {\n        padding: 14px 14px 12px;\n      }\n      .chrome-active {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        border-radius: 20px;\n        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n        z-index: 2;\n      }\n      .chrome-swatch {\n        width: 28px;\n        height: 28px;\n        border-radius: 15px;\n        position: relative;\n        overflow: hidden;\n      }\n      .saturation {\n        width: 100%;\n        padding-bottom: 55%;\n        position: relative;\n        border-radius: 2px 2px 0 0;\n        overflow: hidden;\n      }\n      .chrome-toggles {\n        flex: 1;\n      }\n      .chrome-hue {\n        height: 10px;\n        position: relative;\n        margin-bottom: 8px;\n      }\n      .chrome-alpha {\n        height: 10px;\n        position: relative;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ChromeComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => ChromeComponent),\n    },\n  ],\n  standalone: false,\n})\nexport class ChromeComponent extends ColorWrap {\n  /** Remove alpha slider and options from picker */\n  @Input() disableAlpha = false;\n  circle: Record<string, string> = {\n    width: '12px',\n    height: '12px',\n    borderRadius: '6px',\n    boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',\n    transform: 'translate(-6px, -8px)',\n  };\n  pointer: Record<string, string> = {\n    width: '12px',\n    height: '12px',\n    borderRadius: '6px',\n    transform: 'translate(-6px, -2px)',\n    backgroundColor: 'rgb(248, 248, 248)',\n    boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n  };\n  activeBackground!: string;\n\n  constructor() {\n    super();\n  }\n\n  afterValidChange() {\n    const alpha = this.disableAlpha ? 1 : this.rgb.a;\n    this.activeBackground = `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${alpha})`;\n  }\n  handleValueChange({ data, $event }) {\n    this.handleChange(data, $event);\n  }\n}\n\n@NgModule({\n  declarations: [ChromeComponent, ChromeFieldsComponent],\n  exports: [ChromeComponent, ChromeFieldsComponent],\n  imports: [\n    CommonModule,\n    AlphaModule,\n    CheckboardModule,\n    EditableInputModule,\n    HueModule,\n    SaturationModule,\n  ],\n})\nexport class ColorChromeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}